Sprite, création et animation

1°) Dessin :

Exemple : animation d’un lutin  en anglais un sprite.

Une animation est constituée de cadres (frames) pendant une séquence d’animation. Chaque frame étant affichée pendant un intervalle de temps.

Afin de faciliter la manipulation des frames, Android nous permet d’utiliser une feuille de sprite (sprite sheet). Si un frame à la taille de 64×64 et que l’on souhaite une animation constituée de 4 mouvements selon 4 situations, la sprite sheet aura comme dimension 256 x 256 pixels.

Pour facilement créer des sprites, j’utilise le site < http://www.famitsu.com/freegame/tool/chibi/index2.html &gt;

Je découpe à l’aide de Paint.net un Sprite 4_dos1 que je redimentionne en (64×64) , puis 3_face1, 2_profil gauche1, 1_profil droit1

Pour créer les sprite sheet, le site  http://jstiles.com/Applications/CSS-Image-Sprite-Generator En zippant les 4 fichiers précédents et en précisant vertical et pas de padding.

Cela donne une animation selon 4 faces de notre lutin. Pour rendre cette animation plus vivante, nous pouvons modifier l’attitude du lutin afin d’obtenir 4 fichiers correspondant à 4 attitudes. Ces 4 fichiers étant regroupés avec l’option « horizontal’ du site jstiles.

Cela donne une donc une image rectangle de 4 x 4 Sprites soit 256 x 256

2°) Code pour définir et placer un sprite :

Nous reprendrons ici le code créé dans la page « SurfaceView » en ajoutant les informations nécessaires aux Sprites.

Création d’une classe Spirite, et ajout dans le code des variables de type « sprite » et bitmap « BitTmp ». Puis récupération du Sprite Sheet dans la variable de type bitmap BitTmp.

Dans la fonction de type surface view, initialisation d’une classe Sprite, puis dans la section réservée au dessin, appel de la méthode permettant de dessiner le sprite  de la classe sprite.

Classe Sprite :

 package com.andrologiciels.dessin;  
 import com.andrologiciels.dessin.MainActivity.EcranDessin;  
 import android.graphics.Bitmap;  
 import android.graphics.Canvas;  
 import android.graphics.Rect;  
 public class Sprite {  
      //-- Variables de positionnement  
      int x, y;  
      int xSpeed, ySpeed;  
      int height, width;  
      //-- Manipulation du sprite  
      Bitmap b;  
      EcranDessin ecran;  
      public Sprite(EcranDessin ecranDessin, Bitmap bitTmp) {  
           b = bitTmp;  
           ecran = ecranDessin;  
           height = b.getHeight();  
           width = b.getWidth();  
           x = y = 0;  
           xSpeed = 5;  
           ySpeed = 0;  
      }  
      public void onDessin(Canvas canvas) {  
           //-- Défintion du rectangle sprite sheet  
           Rect src = new Rect (0, 0, width, height);  
           Rect dst = new Rect ( x, y, x+width, y+height);  
           canvas.drawBitmap(b, src, dst, null);       
      }  
 }  

Appel de la classe :
//– déclaration de la classe Sprite
sprite = new Sprite (this, BitTmp);
puis
//– Dessin du Sprite
sprite.onDessin(canvas);

3°) Déplacement du Sprite :

Modification de la fonction SurfaceView :

Modification de la classe Sprit :

Le code source est ici