TUTO windev : Jeux de casse briques

Tout le monde à connu ce type de jeu, rendu célèbre par des licences comme Arkanoid ou BreakOut. Je n'en détaillerai donc pas les règles, mais je vous propose un petit tutoriel en plusieurs articles, qui nous permettra d'élaborer pas à pas un petit jeu de ce type, sous windev, en utilisant simplement un champ Image et les fonctions de dessin.

Aujourd'hui, on va rester plutôt simples et se familiariser avec les fonctions de dessin, et le système de coordonnées. On travaillera sur un plateau de jeu fixe de 800x600 pixels. Dans les articles suivants, on s'appuiera sur un peu de POO pour gérer nos objets, et rien de tel qu'un petit jeu vidéo pour illustrer les concepts de base de la Programmation Orientée Objet.

Préparation :
1) créer un nouveau projet de type Windows
2) Une fenêtre vierge, non redimensionnable en 810x610 (un peu plus que 800x600)
poser un champ image dans la fiche, nommé IMG_Canevas et l'ancrer sur toute la fenêtre
4) dans la description de l'image, mettre Mode d'Affichage à 100% (onglet général).

Petit échauffement pour apprendre à dessiner :
Commençons par dessiner un fond de plateau simpliste, tel un mur de briquettes, en plaçant ce code dans l'événement d'initialisation de notre champ IMG_Canevas :


Le rendu de notre plateau de jeu "test", améliorable ultérieurement



Le code qui génère ce graphisme (à placer dans l'événement d’initialisation du champ image)


Ceci nous donne déjà quelques pistes pour le dessin du reste des éléments du jeu. L'avantage d'un casse brique, c'est qu'il ne nécessite que peu de primitives pour tout pouvoir dessiner. Des rectangles pour les briques, la raquette, les bonus, et même la balle, qui pourrait aussi rester rectangulaire pour simplifier le calcul des collisions.

Je m'arrête ici pour le moment, prenez le temps de comprendre chaque ligne de code, si jamais cela n'est pas évident pour vous. C'est important que vous vous sentiez à l'aise avec ça pour les prochaines étapes.

Et bien sur pensez à fouiller la doc de PCSOFT si quelque chose n'est pas clair, tout y est expliqué.

Source :

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

 

Pour que le code source de notre casse-briques reste lisible, mettons un peu d'ordre dans notre code.

Si vous n'avez pas lu le début de ce tutoriel, cliquez ici pour aller à la PHASE 1

Avant de se lancer dans la POO, nous allons ici :
- organiser notre code d'affichage en sous fonctions logiques
- animer notre raquette en fonction de la position de la souris
- utiliser un timer, pour rafraîchir l'affichage du jeu


On n'utilisera donc plus vraiment l'ancien code, qu'il faudra mettre en commentaire, même si on en réutilise des morceaux ici :

1) organisation des blocs logiques

Créons une procédure locale à notre fenêtre, nommée AfficherLePlateau(), contenant le code suivant :



J'ai décidé d'utiliser les procédures INTERNES, qui me permettent de coder directement à la suite de la procédure AfficherLePlateau() toutes les procédures décrites, sans avoir à les créer ailleurs.

A la suite de ce code, j'ai donc en détail :

pour dessiner nos briquettes marron (celles du décors) :


pour créer un fond noir par dessus les briquettes :


pour dessiner les briques à casser (celles du jeu) :

pour dessiner la raquette :


pour dessiner la (ou les) balle(s) :

etc ...



2) L'animation de la souris :
ATTENTION : dans la procédure DessinerLaRaquette() ci-dessus on utilise une variable globale POSX, que l'on doit définir dans le code d'initialisation du projet, et qui me permet de récupérer la position X de la souris en temps réel.
Il faut donc ici :
A) définir cette variable en global (mon projet s'appelle POOG, donc dans le code d'initialisation) :







B) mettre à jour la valeur de POSX en allant récupérer dans l’événement "Survol de la Souris" du champ Image, la valeur X de la souris, grâce à la fonction SourisPosX(). Car malheureusement SourisPosX() ne fonctionne correctement que lorsqu'elle est appelée depuis certains événements liés.




Le TIMER :

Maintenant, on veut que notre Procédure AfficherLePlateau() se déclenche arbitrairement toutes les 30 millisecondes. Aussi, dans le code d'initialisation de ma fenêtre, je vais lui attacher un Timer :


VERSION 23 : j'utilise windev 23 qui permet de saisir des unités temporelles directement, exemple 30ms. Mais si vous utilisez une version plus ancienne, ne saisissez que la valeur EN CENTIÈMES DE SECONDES SANS UNITÉ, donc plutôt : Timer(AfficherLePlateau,3,1)

A partir d'ici, vous devriez avoir ce rendu, et la raquette devrait suivre les mouvements de la souris lorsque vous la bougez de gauche à droite :


Le rendu du plateau, commence à évoluer

Dans le prochain tutoriel, il est probable que j'éclate à nouveau ce code, puisqu'on va probablement commencer à aborder la POO (Programmation Orientée Objet) pour nous rendre la vie plus simple.

Mais tous les concepts abordés ici devront être maîtrisés, si vous ne voulez pas vous emmêler les pinceaux. Donc recréez ce code vous même, et n'hésitez pas à personnaliser le rendu, la disposition ou les dimensions en fonction de vos goûts personnels.

Source :

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

 

Nous allons commencer à nous intéresser à la Programmation Orientée Objet, en douceur, avec pour le moment la définition d'une seule classe, CBalle qui donc sera chargée d'afficher et de gérer une balle à l'écran.

Si vous n'avez pas suivi les chapitres précédents, je vous renvoie à la PHASE 1 ou à la PHASE 2 de ce tutoriel. Cependant, si votre objectif est de vous initier à la POO uniquement, vous pouvez commencer ici, puisqu'on repart presque à zéro sur une nouvelle fenêtre, et que l'on va créer le code notre classe à partir de rien.


La classe que nous allons développer ici va contenir :
- les propriétés de notre balle (sa position, sa taille, sa forme, son comportement)
- les méthodes, c'est à dire les procédures qui seront liées à cette classe


Voici son prototype minimal fonctionnel :



Variables de la classe :
Pour le moment, pour simplifier, je ne m'occupe pas de savoir si les variables sont PUBLIQUES, PRIVEES, ou PROTEGEES (notions que l'on verra plus tard), elles seront donc toutes sous la bannière PUBLIC (c'est à dire visibles depuis l'extérieur de la classe, ce qui à terme n'est bien sur pas conseillé, et on verra pourquoi le moment venu).

Ces variables sont donc :

• la position de notre balle dans son système de coordonnées (x,y)
• la taille du déplacement en x et en y à chaque "pas", un deltax et deltay de quelques pixels tout au plus. (à chaque pas on fera x = x + deltax , et y = y + deltay, ce qui nous donne le mouvement de la balle, tout simplement.
• et une couleur pour notre balle, j'ai utilisé "teinte", pour éviter la redondance dangereuse qui consisterait à écrire : couleur est une couleur (fonctionne mais déconseillé).

NB : en mathématique delta est utilisé pour symboliser une variation, donc deltax = variation de x, et plus tard je modifierai la classe pour abréger en dx et dy, pour plus de lisibilité.
Rayon fixe, mais défini par une constante :

Comme ici le rayon de la balle ne variera pas, je le fixe arbitrairement à la valeur 5 pixels. Je définis donc au dessus de ma classe une Constante. Plus élégant que de mettre directement 5 partout dans le code, et d'être bien embêté ensuite le jours ou l'on nous demande de changer le rayon.
Prenez l'habitude donc d'utiliser des constantes, si vous avez une valeur fixe un peu partout dans votre code.

Le constructeur :
Nous en créerons une variante plus tard, car on peut avoir plusieurs syntaxes simultanées pour notre constructeur, mais pour l'instant gardons le constructeur de base, sans paramètre, qui aura pour rôle d'initialiser les variables de chaque objet "balle" créé à partir de notre classe.

Ici donc le constructeur va tout simplement définir pour nous une valeur aléatoire pour deltax et deltay, ce qui permet d'avoir une vitesse et un angle aléatoire de déplacement pour chaque balle créée.

Rappel sur une notion de POO :
En Programmation Orientée Objet, une Classe est l'équivalent d'un Type de données, un peu comme Entier, Numérique, Chaine.
Dire que l'on "instancie" une Classe, signifie qu'on crée un Objet en mémoire basé sur ce modèle.

Pour créer donc des balles de type CBalle, on pourra faire :

MaBalle1 est une CBalle()
MaBalle2 est une CBalle()
... Comme on aurait écrit :

MonAge est un Entier

L'instantiation (donc l'utilisation de notre classe pour créer des vraies balles), c'est ce que nous allons faire après, mais avant je vais terminer d'expliquer ce que fait notre classe, telle qu'elle apparaît en haut de cet article.

La Méthode Dessine() :
Cette première méthode (c'est à dire procédure de classe), n'aura pour rôle que de dessiner un rectangle aux coordonnées de la balle, de la teinte définie, en tenant compte du rayon défini dans la constante. Je vous laisse observer le calcul de vous même, ce n'est pas le sujet du tutoriel.

On notera tout de même, que pour accéder aux variables d'une classe, à l'intérieur d'elle même, on peut précéder le nom de la variable par ":". donc x est utilisé en saisissant ":x". Ceci n'est plus obligatoire depuis quelques versions de windev, mais je vous le conseille, car en saisissant ":" l'assistant de code vous proposer directement les variables de la classe, dans une liste.


En saisissant ":" la liste des éléments de la classe apparaît

La Methode Avance() :

C'est cette méthode qui sera appelée pour faire avancer d'un PAS notre balle.
Le code de cette procédure doit donc gérer 2 choses :

• incrémenter la position (x,y) de notre balle, de (deltax,deltay)
• rebondir sur les bords de l'écran lorsqu'ils sont atteints
  • si x dépasse 800 alors : rendre négatif le deltaX
  • si x<0 : rendre positif le deltaX
  • si y dépasse 600 alors : rendre négatif le deltaY
  • si x<0 : rendre positif le deltaY

C'est la méthode la plus simple, inverser juste le sens du Pas de X ou Y, pour lui dire :
Si tu es trop a droite, alors maintenant tu iras à gauche, etc ...

Pour forcer le signe du Pas, on utilise la fonction ABS() pour obtenir la valeur absolue, et donc pouvoir choisir arbitrairement le signe devant, en ajoutant + ou - à notre guise.

Enfin, ici on fixe arbitrairement la limite à 800x600, mais on pourrait faire plus élégant dans l'avenir, pour gérer en amont n'importe quelle résolution. Dans ce cas il faudra envisager que l'on fournisse à la balle aussi une limiteX et limiteY, en paramètres, ce qu'on fera surement quand nous aurons un "constructeur" plus complexe.



Test de notre classe :

• comme pour le TUTO 1, créez une nouvelle fenêtre, que j'ai appelé FEN_Baballe
• dans ses propriétés, rendez la "Non redimenssionnable", de taille 810 x 610
• ajoutez un champ image, nommé IMG_Canevas
• ancrez le à tout le formulaire
• dans ses propriétés, il doit être affiché en mode 100%, comme suit :

Nous allons directement exploiter la puissance de la POO en créant un tableau de 20 balles :

Dans l'éditeur de code de la fenêtre saisissez tel quel ce qui suit :


code d'initialisation de la fenêtre FEN_baballe



NB : J'ai mis la procédure AnimSuivante() en Procédure INTERNE, pour que vous puissiez la coder à la suite, et que ça soit plus lisible d'une traite. Mais on pourrait la définir en procédure locale classique tout aussi bien. Ici comme on ne l'appelle qu'une fois et qu'elle est liée au timer, c'est plus lisible de la placer à la suite pourvu que vous ayez une version de windev pas trop ancienne qui gère les procédures internes.

Et voilà à quoi ça doit ressembler lorsque vous lancez le programme :


note : dans cette vidéo ma classe est différente et gère des rayons variables, mais par la suite je n'ai pas jugé utile pour le moment, pour un simple casse brique, de faire varier le rayon.


Source :

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

 

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

n'oublies pas de citer et de remercier l'auteur d'origine de ce que tu retranscris ici, en l’occurrence

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

Cliquez pour agrandir...