Tutoriel : Exporter vos animations Flash sur iPhone et iPad avec cocos2d et TexturePacker

Salut amis codeurs iOS,

Dans ce tutorial je vais vous montrer comment exporter une animation .swf utilisable pour iPhone iPad et pour les supports retina avec cocos2d-iPhone 2.0. En gros un truc qui fait le café !

J’utilise toujours Adobe Flash lorsque je développe des jeux quelque soit le support.
Flash est un super outils pour les développeurs : interface WYSIWYG, éditeur d’animations, éditeur vectoriel, …
Si je veux redimensionner mes animations aucun problème avec le vectoriel :).

You pouvez télécharger le zip final AnimatedSpriteWithFlash.zip.

1. Outils et fichiers

Vous avez besoin de quelques outils et quelques fichiers :

  • Télécharger et installer les librairies Cocos2D-iPhone 2.0 libraries avec le template.
  • Télécharger et installer Adobe Flash.
  • Télécharger et installer TexturePacker.
  • Télécharger les classes AnimatedSprite sur github.
  • Télécharger les animations Flash : Pig.zip.


2. Flash

Dans Flash

  • Ouvrir pig_walk.fla et pig_dead.fla avec Adobe Flash.
  • Ensuite exporter les animations avec CMD+Entrée ou CTRL+Entrée sous Windows.
  • Flash va exporter un fichier .swf dans le même dossier : pig_walk.swf et pig_dead.swf.

Astuces dans Flash

  • Créer un repère au centre de la scène. Seulement pour se positionner. Supprimer-le avant l’exportation ou bien utiliser un calque “Guide” pour le rendre invisible.
  • Utiliser les mêmes dimensions de scène pour les différentes animations d’un seul objet.
  • Utiliser un symbole “Graphique” au lieu d’un “MovieClip”. Les animations Graphiques sont lisibles par TexturePacker.

Capture d’écran 2013-03-01 à 17.45.44

  • Créer un fichier .fla par animation.
  • Toujours travailler pour l’échelle 2048×2948 iPad retina. Afin d’être déjà prêt pour l’export iPad retina :).

3. TexturePacker

Dans TexurePacker

Utilisons TexturePacker pour exporter un spritesheet compressé pour une application universelle.

  1. Ajouter pig_walk.swf et pig_dead.swf dans TexturePacker
  2. Cliquer sur le […] puis sélectionner le dossier d’export et rentrer le nom de fichier : pig-ipadhd.plist (ipadhd pour l’exportation universelle).
  3. Texture au format : zlib compr, PVR (.pvr.ccz, Ver.2)
  4. Cocher Premultiply alpha
  5. AutoSD: régler cocos2D ipad/hd/sd et valider en cliquant sut Apply.
  6. Sauvegarder le fichier puis cliquer sur Publish. TexturePacker va alors exporter 6 fichiers, les images .pvr et les bases de données .plist pour chaque format (ipad/hd/sd).

Voici le rendu du spritesheet:

pig

Astuces TexturePacker

  • Régler l’image en couleur RGBA4444 si vous souhaiter optimiser les médias. Puis régler le Dithering à FloydSteinbergAlpha pour avoir un meilleur rendu sur les dégradés de couleur.
  • Toujours travailler avec le même framerate dans Flash et dans XCode.
  • Les dimensions maximales sont de 4096×4096 pour une texture de type iPad retina et 2048×2048 pour un iPhone 3GS. Mais TexturePacker s’occupe de redimensionner tout ça.
  • Cocher Allow rotation
  • Régler size contraints à Any size
  • Si vos sprites sont coupés sur les côtés dans votre rendu régler Trim mode à None.
  • Cocher Enable auto alias
  • Soyez curieux et testez d’autres réglages ;).

4. XCode

Dans Xcode

  • Créer un nouveau projet Cocos2D avec le template installé.
  • Régler le iOS deployment Target à 5.1 au moins.
  • Ajouter le fichier AnimatedSprite.m et le fichier AnimatedSprite.h dans votre projet XCode. Ne pas oublier de cocher la “target” du projet au moment de l’importation.

Capture d’écran 2013-03-02 à 11.56.56

  • Si vous utiliser ARC dans votre projet ajouter un “flag” sur le fichier : Target > Build Phases > Puis ajouter le “compiler flag” sur le fichier AnimatedSprite.m > –fojbc-arc. NB: Par défaut l’ARC n’est pas activé.

Capture d’écran 2013-03-01 à 16.58.30

  • Ajouter de la même manière ces fichiers dans le projet XCode :
    • pig.plist
    • pig.pvr.ccz
    • pig-hd.plist
    • pig-hd.pvr.ccz
    • pig-ipadhd.plist
    • pig-ipadhd.pvr.ccz

Capture d’écran 2013-03-02 à 11.57.02

  • Ouvrir le fichier HelloWorldLayer.h depuis XCode et remplacer le par celui ci :

  • Ensuite utiliser ce code pour la classe HelloWorldLayer.m :

Cliquez sur Run et voilà le travail :).

Si vous tapez sur l’écran l’animation de mort va se lancer et le cochon va disparaitre.

C’est fini !

Capture d’écran 2013-03-04 à 00.09.40

Vous pouvez également lire les commentaires du fichier AnimatedSprite.h pour plus de détails sur cette classe qui permet de gérer des animations.

A ++ !