Forums GAMERGEN

[Viish]

Pour ce tuto, on va créer un "toss" visuel et animé. Pour ceux qui ne savent pas ce que c'est, c'est un joli moyen de désigner une personne parmi plusieurs.

Ici le toss permettra de choisir une personne entre 2, en orientant le doigt d'une main vers la gauche pour l'une et vers la droite pour l'autre.

Voilà le résultat, filmé dans mon application Android Triple Triad :
http://www.elviish.eu/Tutos/toss.avi

Etape préliminaire : se munir de l'image du toss.
Comme je suis sympa, je vous en passe une. Libre à vous d'en utiliser une autre.


Etape 1 : créer une classe Toss, hériant de ImageView

Code: Select All Code

public class Toss extends ImageView
{
   private Bitmap tossPicture; // Bitmap de l'image du Toss
   
   public Toss(Context context, int personne) // Constructeur, prend en argument la personne a cibler par le toss
   {
      
   }

   public void animateToss() // Animera le toss, ici en le faisant faire plusieurs tours sur lui même avant de s'arrêter
   {
      
   }
   
   protected void onDraw(Canvas canvas) // Methode qui dessinera l'image du toss dans l'application
   {
      
   }
}


Facile !
La suite : remplir les méthodes avec du code !

Code: Select All Code

   public Toss(Context context, int joueur)
   {
      super(context);
      
      try
      {
         float degrees;
         if (joueur == 1) degrees = -90.0f; // gauche de l'écran
                        // En effet, notre image pointant naturellement vers le haut, il faudra lui faire faire une rotation de 90° vers la gauche, d'où le -90.0f
         else degrees = 90.0f; // droite de l'écran
         // De même que précédemment

         tossPicture = rotate(BitmapFactory.decodeStream(getResources().getAssets().open("toss.png")), degrees); // On charge l'image du toss, ici toss.png placé dans le dossier assets.
// Vous pouvez tout à fait placer l'image dans un dossier ressource différent.
      }
      catch (Exception e) // En cas d'erreur
      {
         Log.i("Error", e.toString());
      }
   }

   protected void onDraw(Canvas canvas)
   {
      canvas.drawBitmap(tossPicture, (canvas.getWidth() / 2) - (tossPicture.getWidth() / 2), (canvas.getHeight() / 2) - (tossPicture.getHeight() / 2), null);
                // On dessine le toss au milieu de l'écran
   }


Vous avez du remarquer l'utilisation dans le code précédant d'une méthode "rotate", définie dans la classe plus haut.
Remplissons là.

Code: Select All Code

      int width = bm.getWidth(); // largeur de notre image toss
      int height = bm.getHeight(); // hauteur de notre image toss
      
      Matrix matrix = new Matrix(); // On crée une matrice
      matrix.postRotate(degrees); // Qui servira de rotation
      Bitmap resizedBitmap = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true); // Puis on l'utilise pour créer une autre image, de même dimensions, mais qui est orientée différemment, en fonction de la variable degrees définie ci avant.

      return resizedBitmap; // Puis on renvoie la nouvelle image


C'est ainsi qu'a partir de l'image du toss initiale, on crée l'image orientée en fonction de la personne a choisir.

Le problème est que si on laisse cela comme ça, on a directement notre doigt pointant sur la personne voulue.
Animons ça !

Code: Select All Code

   public void animateToss()
   {
      Animation animation = new RotateAnimation(0.0f, 3600.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                // On crée une animation de type rotation
                // Les 2 premiers paramètres sont l'angle initial et l'angle final de la rotation. Ici notre toss fera exactement 10 tours avant de s'arreter (360*10).
               // Attention a mettre un multiple de 360, sinon l'orientation préalable du toss ne sera plus bonne
               // Les 4 derniers paramètres sont relatifs au point qui servira de pivot a la rotation.
               // Ici la rotation se fait en fonction de l'image du toss, en prenant comme point de pivot le milieu exact de l'image (0 serait le point en haut à gauche, 1 en bas à droite)
      animation.setDuration(1500); // Durée de l'animation, en millièmes de secondes
      animation.setInterpolator(new AccelerateDecelerateInterpolator());
                // On ajoute ici une règle sur l'animation, spécifiant que la vitesse de la rotation va augmenter progressivement puis décroitre, jusqu'à l'arrêt.
      setAnimation(animation);
      animation.start(); // Et bien sur on lance l'animation ;)
   }


Voilà ! Notre classe toss est crée. Reste à s'en servir.
Encore une fois je vous laisse le soin de créer l'Activity allant autour.
Etape 3 : Creer le toss

Code: Select All Code

      toss = new Toss(context, 1);
                // Création de l'objet
      FrameLayout fl = (FrameLayout) ((Activity)context).findViewById(R.id.layout);       
                // Je vous conseille d'utiliser un FrameLayout, pour superposer le toss au reste de l'écran
      fl.addView(toss); // Ajout du toss au layout
      toss.animateToss(); // Et on lance l'animation !


Etape 4 : la cuillère n'existe pas

Code: Select All Code

      FrameLayout fl = (FrameLayout) ((Activity)context).findViewById(R.id.layout);
      fl.removeView(toss);


Comme d'habitude, si vous avez des questions, je reste dans le coin.

[Wilking]

Très bon tuto bravo

Je le testerai dès que j'ai le temp

[saman11]

Très bon tuto ! Je vais la tester d'ici peu et je t'en donnerai des nouvelles

[Electropix]

Super tutos, dès lundi je m'y met pour le tester