[Tutoriel Andengine] Partie 2 – Mes premiers dessins

Dans cette deuxième partie du tutoriel sur AndEngine, nous allons pousser un petit peu plus notre création. Nous allons voir comment dessiner des lignes et des rectangles, ainsi qu’afficher un Sprite dans notre jeu.

Tout d’abord, la librairie AndEngine dispose de plusieurs classes permettant de travailler facilement sur les dessins : une classe Rectangle permet de dessiner un rectangle, une autre nommée Line permet, comme son nom l’indique, de dessiner une ligne et pour finir une classe Sprite que vous utiliserez le plus souvent pour dessiner un Sprite.

Dessine-moi un rectangle

Rien de plus simple, il suffit de déclarer un rectangle de type Rectangle, il faut lui donner 4 paramètres :

Rectangle(float pX, float pY, float pWidth, float pHeight)

X et Y sont les points de départ de notre rectangle ; Width et Height servent à définir la taille de notre rectangle.

final Rectangle rectangle = new Rectangle(CAMERA_LARGEUR/2, CAMERA_HAUTEUR/2, 100, 50);

Nous allons déclarer notre rectangle, celui-ci débutera à la moitié de la hauteur et de la largeur de l’écran et fera une taille de 100 par 50.

Pour définir une couleur, une méthode est disponible dans la classe Rectangle, elle se nomme setColor.

Nous devons lui passer 3 ou 4 paramètres :

setColor(float pRed, float pGreen, float pBlue)

Paramètres :

• pRed de 0.0f a 1.0f
• pGreen de 0.0f a 1.0f
• pBlue de 0.0f a 1.0f

setColor(float pRed, float pGreen, float pBlue, float pAlpha)

Paramètres :

• pRed de 0.0f a 1.0f
• pGreen de 0.0f a 1.0f
• pBlue de 0.0f a 1.0f
• pAlpha de 0.0f (invisible) a 1.0f (opaque)

Puis, il suffit d’ajouter notre entité à notre scène courante comme ceci :

scene.attachChild(rectangle);

Tout cela doit être fait dans la méthode onLoadScene.

Voici notre scène désormais :

Dessine-moi une ligne

Prenons la classe Line et regardons ses paramètres :

Line(float pX1, float pY1, float pX2, float pY2)

Tout comme le rectangle, nous devons spécifier les coordonnées X / Y de départ et X / Y d’arrivée.

Créons celle-ci, donnons lui une couleur et ajoutons là à la scène courante :

final Line line = new Line(0, 0, CAMERA_LARGEUR, CAMERA_HAUTEUR);

line.setColor(0.5f, 0.5f, 0.5f);

scene.attachChild(line);

Lancez l’application et voyez par vous même le résultat.

La ligne traverse notre écran de part en part.

Un petit coup de Sprite (pas la boisson)

Nous allons voir comment afficher une image dans notre scène à l’aide de la classe Sprite, mais il y a quelques différences par rapport à ce que l’on a vu précédemment.

Tout d’abord, il faut gérer les textures (les images) avant de pouvoir les rajouter à notre Sprite.

Voici notre l’image que nous allons utiliser :

Nous allons la placer dans le répertoire “gfx” et la nommer andengine.png

Puis, nous allons apprendre à charger celle-ci en mémoire pour pouvoir l’utiliser et l’afficher, dirigeons-nous vers la méthode onLoadResources.

Utilisons la classe BitmapTextureAtlas pour stocker notre image, regardons de plus près :

BitmapTextureAtlas(int pWidth, int pHeight, TextureOptions pTextureOptions) throws IllegalArgumentException

Paramétres:

• pWidth doit être un multiple de 2 (i.e. 32, 64, 128, 256, 512, 1024).
• pHeight doit être un multiple de 2 (i.e. 32, 64, 128, 256, 512, 1024).
• pTextureOptions la qualité de l’image

final BitmapTextureAtlas textureImage = new BitmapTextureAtlas(64, 64,TextureOptions.BILINEAR);

Etant donné que notre image fait 55×55, nous allons utiliser le multiple de 2 juste au-dessus, donc 64, puis nous allons utiliser l’option BILINEAR pour notre texture.

Je vous renvois à la documentation pour savoir ce que le type BILINEAR veut dire :

http://fr.wikipedia.org/wiki/Filtrage_bilin%C3%A9aire

Continuons notre avancée par rajouter ceci au début du programme :

private TextureRegion regionImage;

Cette déclaration nous permettra de choisir la région de la texture qui nous intéresse, nous pouvons avoir une texture contenant plusieurs images et la segmenter au besoin, nous verrons cela plus tard.

Retournons dans notre méthode pour le chargement des ressources et instancions notre TextureRegion

regionImage = BitmapTextureAtlasTextureRegionFactory.createFromAsset(textureImage, this, "gfx/andengine.png", 0, 0);

Nous utiliserons la méthode statique de la classe TextureRegionFactory pour nous aider à charger notre image.

La méthode createFromAsset demande certains paramètres :

BitmapTextureAtlasTextureRegionFactory(Texture pTexture, Context pContext, String pAssetPath, int pTexturePositionX, int pTexturePositionY)

1. La texture qui contiendra notre image
2. Le contexte de l’application
3. L’image à charger
4. La position X et la position Y vers lesquelles l’image sera stockée.

Enfin, nous allons charger notre texture dans le moteur du jeu grâce à la méthode suivante :

this.getEngine().getTextureManager().loadTexture(textureImage);

Nous allons mettre cette texture dans le TextureManager de moteur pour qu’il gère celle-ci.

Voilà, notre image est désormais chargée et placée en mémoire dans le moteur de jeu.

Maintenant nous allons nous diriger vers la méthode onLoadScene pour définir notre sprite et l’afficher comme ceci :

final Sprite sprite = new Sprite(50, 50, regionImage);

scene.attachChild(sprite);

La classe sprite prend en paramètres les coordonnées X et Y pour définir l’emplacement graphique de notre image sur la scène et sa texture comme troisième paramètre.

Lançons notre petite application

Voilà notre Sprite, contenant le logo AndEngine, est affiché dans notre scène.

Source de la formation

A bientôt dans le prochain tutoriel !