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

Posted on 22:28

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 ++ !