Archives de
Catégorie : ActionScript 3

AIR sur Android : Trucs et astuces

AIR sur Android : Trucs et astuces

Dernièrement je me suis lancé dans l’aventure AIR sur Android et c’est vraiment très facile de créer des applications ActionScript 3 puis de les déployer sur Android. Cependant je me suis vite heurté à quelques petits problèmes comme par exemple passer l’émulateur AIR en mode paysage.. Cet article va donc regrouper quelques trucs et astuces pour faire du développement AIR sur Android. J’utilise l’EDI FlashDevelop et le projet AS3 AIR mobile.

Passer l’émulateur AIR en mode paysage

Par défaut quand vous testez votre application sur l’émulateur AIR celui ci est en mode portrait ce qui est logique puisque on tient généralement un Smartphone dans cette position. Lorsque l’on veux forcer l’utilisation du mode paysage en ActionScript 3 on utilise

stage.setAspectRatio(StageAspectRatio.LANDSCAPE);

C’est simple et efficace et ça marche. Seulement ça ne suffit pas car comme je l’ai indiqué, l’émulateur sera lancé en mode portrait. Pour le passer en mode paysage il faut éditer le fichier de description de l’application qui s’appelle par défaut application.xml et utiliser les propriété suivantes. D’origine elles sont commentées, il vous suffit donc de supprimer les commentaires.

<initialWindow>
  <!-- vos autres propriétés -->
  <autoOrients>false</autoOrients>
  <aspectRatio>landscape</aspectRatio>
</initialWindow>
Mode paysage

L’émulateur est maintenant en affichage paysage et vous pouvez tester votre travail dans les conditions réelles. Attention à une chose : Le fait de passer en mode paysage ne va pas modifier les propriétés stageWidth et stageHeight (c’est ce que je pensais). Par défaut la résolution est 480×800 dans les 2 orientations !

Comprendre la résolution d’affichage

Si il y a bien une chose qui m’a vraiment posé problème c’est le système de coordonnées en mode paysage, car par défaut, en mode portrait on a généralement une résolution de 480×800, ce qui implique que la largeur de l’écran est bien de 480 pixels et la hauteur de 800 pixels, jusqu’à là pas de problèmes. Mais quand on passe en mode paysage ces valeurs restent les mêmes donc si comme moi vous pensiez que la largeur passait de 480px à 800px et bien c’est faux.

Le mode portrait
Le mode portrait

Donc si vous utilisez les propriétés stageWidth et stageHeight vous devrez prendre garde. Pour palier à ce problème j’ai mis en place dans mon code 2 fonctions qui me renvoie la valeur largeur et hauteur « logique » suivant l’orientation de l’écran.

private function getStageWidth ():int
{
  if (stage.stageWidth < stage.stageHeight) // Landscape
    return (stage.stageHeight);

  return (stage.stageWidth); // Portrait
}

private function getStageHeight ():int
{
  if (stage.stageWidth < stage.stageHeight) // Landscape
    return (stage.stageWidth);

  return (stage.stageHeight); // Portrait
}

Avec ces 2 fonctions je récupère des valeurs logiques pour placer mes composants car en mode paysage je trouve normal de dire que la largeur est de 800px ce qui je le rappel est faux (c’est 480px).

Et enfin le déploiement

Lorsque vous déployez votre application sur un mobile Android il faut au préalable que vous ayez le runtime AIR installé. Une fois la chose faite vous avez 2 possibilités pour tester votre application : Le mode debug et le mode test. Si vous avez votre mobile de branché en USB et que vous balancez l’application en mode debug directement vous aurez peut être une petite popup avant le lancement de l’appli qui vous demandera l’adresse IP du PC qui vient de déployer l’application, car AIR a besoin de cette information pour envoyer les infos de débogage à FlashDevelop.

Pour ne pas à avoir à remplir à chaque fois cette popup vous pouvez passer votre téléphone en mode wifi (il faut bien entendu que le PC et le mobile soient sur le même réseau). Le mode test quand à lui n’affichera pas de popup mais il sera impossible de récupérer les informations de debug tels que les retours de la fonction trace().

Le mot de la fin

Créer des applications AIR pour Android et iOS (mais il faut le SDK Apple qui est payant) est relativement facile, il faut prendre en compte certaines petites subtilités et fouiller un peu dans la documentation, mais passé ces petits soucis c’est presque comme développer pour PC. A titre d’exemple j’ai réussi à porter un de mes jeu en très peu de temps sur Android.

Multi déploiement PC, Web, Android
Multi déploiement PC – Web – Android
TP 1 : Mini jeu de tir

TP 1 : Mini jeu de tir

Je vous propose de réaliser un petit jeu de tir, sans grande difficulté je vous rassure. Cela va être l’occasion de mettre en pratique tout ce qui a été dit lors des derniers tutoriels, à savoir : création graphique et événements, je vais introduire des nouvelles notions comme le chargement d’image (embarquée dans le fichier SWF) et de son. Le but du TP est d’être simple et rapide, vous ne mettrez pas 1 heure pour le réaliser et le code est au final très cours. Voici une capture d’écran du résultat :

Lire la suite Lire la suite

Tutoriel 7 – Les événements à la souris

Tutoriel 7 – Les événements à la souris

Imaginons que nous voulions détecter les déplacements et les cliques de souris de l’utilisateur, pour cela nous pouvons nous abonner à 4 types d’événements :

Le premier est déclenché lorsque l’utilisateur fait un clique de souris : bouton enfoncé puis relâché : L’événement est envoyé uniquement après le relâchement du bouton donc si l’utilisateur fait un clique long, on ne recevra l’événement que quand le bouton sera relâché.

Lire la suite Lire la suite

Tutoriel 6 : Les événements de base en Flash

Tutoriel 6 : Les événements de base en Flash

Les événements de base en ActionScript 3 sont assez simples à comprendre et à utiliser, je vais dans un premier temps vous parler des principaux événements (ceux liés au stage par exemple), puis ensuite nous verrons les événements utilisateurs (souris, clavier). Si vous regardez le diagramme des classes du tutoriel 3, vous pouvez voir que toutes les classes de la liste d’affichage ont au moins comme parent la classe DisplayObject, qui dérive elle même de la classe EventDispatcher. Il faut savoir que ActionScript 3 est un langage orienté objet, mais c’est aussi un langage très événementiel car comme vous allez le voir, presque tout est événement !

Lire la suite Lire la suite

Tutoriel 5 – Jouer avec les objets (Shape et Sprite)

Tutoriel 5 – Jouer avec les objets (Shape et Sprite)

Bon, on va enfin mettre les mains dans le code et afficher quelques trucs cool, le but ici est de vous montrer comment fonctionne certaines classes.

1. Créer des formes

Pour créer des formes on peut utiliser deux classes, Shape et la Sprite. Il y a deux différences fondamentales entre ces deux classes :

  1. La classe Shape n’hérite pas de InteractiveObject et ne peux donc pas réagir aux éventements clavier et souris ;
  2. La classe Shape n’hérite pas non plus de DisplayObjectContainer et ne peux donc pas contenir d’autres objets.

    Lire la suite Lire la suite

Tutoriel 3 – Les objets graphiques

Tutoriel 3 – Les objets graphiques

Ce premier article « technique » a pour but de vous faire comprendre comment fonctionne la liste d’affichage dans une application Flash, ce n’est pas super compliqué à comprendre et suivant ce que vous voulez faire ce n’est pas non plus indispensable de comprendre comment tout fonctionne quand on utilise une librairie comme Flixel, mais si vous voulez vraiment produire des applications/jeux de qualité il vous faudra savoir comment fonctionne l’affichage, ce qu’est le stage, les composants, etc… Comme vous le savez sans doutes,  ActionScript 3 est le langage utilisé sur la plateforme Flash pour réaliser les traitements logiques, on peut réaliser des interfaces graphique de plusieurs manières :

Lire la suite Lire la suite

Tutoriel 2 : Démarrage sous Windows

Tutoriel 2 : Démarrage sous Windows

FlashDevelop
FlashDevelop

Pour développer du contenu pour la plateforme Flash, en ActionScript 3 sous Windows nous avons un formidable outil, j’ai nommé FlashDevelop ! Ce programme est un environnement de développement intégré, c’est à dire que c’est un éditeur de code avec un tas de fonctionnalités toutes plus utiles les unes que les autres. Il est gratuit et Open Source, malheureusement il n’est disponible que pour Windows (mais il y a des discutions pour un portage vers Mono pour Linux et Mac). Il va être notre outils durant les prochains articles, voici d’ailleurs quelques une de ces fonctionnalités :

  • Il permet de créer des projets ActionScript 2, ActionScript 3, Flash, Flex, Air, Haxe ;
  • Il contient un débogeur puissant (stop, suivant, point d’arrêt, etc…) ;
  • Il fonctionne avec des plugins ce qui permet de lui ajouter des fonctionnalités supplémentaires ;
  • Il est rapide, léger et ne consomme pas beaucoup de ressources (c’est vraiment un régal) ;

1 – Installation

Commencer par télécharger la dernière version disponible sur le site officiel, et installer le. Lors de l’installation on vous proposera de télécharger et d’installer pour vous le SDK Flex, si vous ne l’avez pas déjà sur votre système laissez faire l’installeur qui va le télécharger et le copier là où il faut 😉 Une fois l’installation terminée lancez donc FlashDevelop et examinez un peut son interface. Je ne vais pas faire un cours sur le logiciel, vous devez normalement connaitre un minimum, j’ai donc deux choses à dire pour finir cet article (oui c’est court cette fois ci).

Plugins de FlashDevelop
Fenêtre des plugins de FlashDevelop

Comme nous risquons de faire du développement Air, je vous propose de télécharger et d’installer le plugin AirProperties qui permettra de configurer finement et facilement les options d’une application Air (Chemin d’installation, nom de l’application, icônes, etc…).

 

 

 

 

Pour cela rendez vous à cette adresse et téléchargez le plugin, une fois que cela est fait il faut simplement décompresser l’archive (un fichier .dll) dans le dossier plugins de FlashDevelop (c:ProgrammesFlashDevelopPlugins). Le plugin sera automatiquement activé dans FlashDevelop, on peut d’ailleurs le voir en allant dans le menu Tools/Programm Settings/ et constater qu’à gauche dans Plugins, AirProperties apparait bien.

Une dernière chose maintenant, nous allons télécharger la librairie Flixel et la configurer avec un nouveau projet, comme ça dés que nous commencerons à parler « Game Dev » avec une librairie Flash (que ce soit Flixel, PBE, Away3D, AS3IsoLib, etc..) vous serez comment mettre un nouveau projet en route 😀 Alors rendez vous ici pour télécharger la dernière version de Flixel (2.50 ou +).

 

Nouveau projet Air As3
Création du nouveau projet

Laissez l’archive téléchargée de côté pour l’instant et créer un nouveau projet dans FlashDevelop : Project -> New Project -> Air As3 Projector et validez. Votre premier projet Air est créé, vous avez le strict minimum, c’est à dire une structure de projet (dossier bin, lib, src), un fichier xml de configuration (et là vous me direz merci de vous avoir dit d’installer le plugin AirProperties 😀 ) et deux scripts permettant de déployer l’application (création du fichier .air pour distribution sur toute la planète :O ).

 

 

Reprenez votre archive de Flixel précedement téléchargée, elle doit avoir un nom du genre AdamAtomic-flixel-bf9e853.zip, elle contient un dossier du même nom que l’archive (AdamAtomic-flixel-bf9e853) qui lui même contient d’autres trucs dont un dossier org et un dossier doc ! il faut décompressez le dossier org dans le dossier lib de votre projet, un glisser déposer fera l’affaire. Vous pouvez garder la documentation à côté car elle vous sera bien utile si vous prenez le temps d’y jeter un oeil (c’est un constat, TOUT les sites de dev vous diront à un moment de regarder la doc, les sources, etc.. c’est comme ça 🙂 ).

 

Configuration du Class Path
Configuration du Class Path

Dans FlashDevelop à gauche vous pouvez voir votre projet et son arborescence sous forme d’arbre, faites donc un clique droit sur le nom de votre projet et cliquez sur « Properties… », on va configurer le « Class Path », pour cela rendez vous sur le deuxième onglet « Class Paths », puis cliquez sur « add Classpath… » et choisissez le dossier lib de votre projet (c’est là où on a décompressé Flixel), validez et c’est fini (si si c’est promis).

 

 

Un mot sur le classpath : D’origine quand vous compilez un projet, le compilateur ne va inclure que vos sources et les librairies du Flex SDK, comme nous utilisons une librairie externe nous devons dire au compilateur qu’il faut utiliser en plus cette librairie et qu’elle est située dans le dossier lib. Bien sur les plus malins d’entre vous me dirons « Oui mais si je copie la librairie dans le dossier src, il n’y a pas besoin de faire ta manip :p « , c’est vrai mais comprenez que c’est plus « propre » de séparer les librairies externes et son code. Sur certains blog vous trouverez des exemples où les développeurs mettent tout dans le dossier src, d’autre préfèrent séparer (c’est mon cas).

D’origine le Classpath contient les chemins vers les API Flash/Flex et le dossier d’où vous lancez la compilation (src dans notre cas), pour plus d’informations vous pouvez consulter la documentation et regarder le précédent tutoriels.

2 – Compilation d’un exemple avec Flixel

Flixel est une librairie Open Source écrite en ActionScript 3, en réalité c’est plutôt un moteur car elle permet de gérer à peut prêt tout dans votre futur jeu, que ce soit l’affichage, les colisions, le son, la musique, les états de jeu, les sauvegardes.. bref elle ne fait pas le café mais fait déjà pas mal de choses (elle ne gère pas le réseau, mais il y a toujours les API Flash et d’autres librairies pour ça). Là c’est le moment où je dois dire « Compiler cet exemple, si vous ne comprenez pas ce n’est pas grave, on reviendra sur ce code prochainement.. » mais en fait vous aller comprendre le code car il est vraiment très simple.

Dans un premier temps il faut créer une nouvelle classe (en plus de celle qui est déjà créée) que vous appellerez GameState (le fichier sera nommé GameState.as avec les deux majuscules), pour cela rien de plus facile, clique droit sur le dossier src -> Add -> New Class, nommez votre classe et faites la dériver de FlxState (Base -> Browse -> FlxState).

Complétez la classe GameState pour qu’elle ressemble à ça :

package
{
    import org.flixel.FlxState;
    import org.flixel.FlxText;

    public class GameState extends FlxState
    {
	private var _text:FlxText;

	public function GameState()
	{
	    _text = new FlxText(50, 50, 150, "Hello Flixel");
	    add(_text);
	}
}
}

On ne fait pas grand chose, la classe dérive de FlxState, cela permet de définir un « état », on trouvera plusieurs états dans un jeu, l’état Menu, GameOver, Win, etc.. Vous l’aurez compris, un état avec Flixel c’est en gros un écran du jeu. On créé ensuite un objet texte (FlxText ici) et on lui donne une position, une taille et une valeur, on l’ajoute ensuite au stage (à l’écran). Maintenant ouvrez la classe Main et changez son contenu par celui là :

package
{
    import org.flixel.FlxGame;

    [SWF(width="320", height="240")]
    public class Main extends FlxGame
    {
        public function Main():void
        {
            super(320, 240, GameState, 2);
        }
     }
}
Hello Flixel
Et voilà le résultat

Là encore rien de bien compliqué, peut être la meta donnée entre crochet qui peut vous surprendre, elle permet d’indiquer des paramètres au compilateur comme la couleurs de fond, la taille, le nombre d’images par seconde, etc… Ensuite on fait dériver la classe principale de FlxGame et on appel le constructeur de base avec la taille désirée et l’échelle d’affichage (zoom x2 ici pour avoir un texte en gros genre oldschool 8 bits). Le paramètre « GameState » est en fait le nom de la classe qui doit être appelée lors du lancement de l’application, ici GameState. Rien de bien complexe en soit mais nous y reviendrons de toute façon.

Appuyez sur F5 ou Project -> Test Movie , le projet va compiler et se lancer, pour l’instant ce n’est pas énorme, mais croyez moi dans peut de temps il y a aura des choses bien meilleurs.

Vous pouvez télécharger le projet : Flixel_Tutorials.

Maintenant vous êtes prêt pour passer aux étapes suivantes à savoir, une révision de la syntaxe ActionScript 3 et du fonctionnement de la plateforme Flash (juste ce que nous devons savoir sur les classes de bases, le stage, etc..) et après nous rentrerons dans le vif du sujet.

Vous pouvez déjà jeter un oeil aux nombreux tutoriaux disponibles sur Flixel ou même sur les autres librairies Flash pour faire du jeu.

Tutoriel 1 : Compilation en ligne de commande (Linux/mac)

Tutoriel 1 : Compilation en ligne de commande (Linux/mac)

Ce premier tutoriel est dédié aux utilisateurs Linux et Mac qui veulent compiler les sources ActionScript 3 en ligne de commande. Les utilisateurs Windows pourrons eux aussi suivre ce tutoriel pour comprendre comment compiler leurs sources en ligne de commande, cependant je n’explique pas comment configurer le path sous Windows (Regardez plutôt du côté du tutoriel Windows), ce tutoriel est destiné avant tout aux utilisateurs Linux/Mac.
La première étape va être de mettre en place notre environnement de développement, il va donc nous falloir les outils suivants :
  • Un éditeur de texte ou un environnement de développement intégré ;
  • Un compilateur ActionScript 3 ;
  • Un navigateur Web avec le lecteur Adobe Flash 10.x d’installé ;
  • Un terminal (une console) ;
  • (optionnel) Un lecteur debug pour tester les application sans navigateur et avoir des informations supplémentaires.

    Lire la suite Lire la suite

Tutoriel 0 : Flash pour tous avec ActionScript 3

Tutoriel 0 : Flash pour tous avec ActionScript 3

Bonjour à tous et bienvenue dans cette série de tutoriels sur la plateforme Flash pour développer des jeux web, desktop ou mobile. Je vous propose de débattre un peut du titre dans un premier temps puis nous verrons de quoi nous allons parler dans la deuxième partie, nous ne ferons rien de technique maintenant.

Flash pour tous ?

Flash est une plateforme présente sur le web depuis bon nombre d’années déjà, elle permet d’exécuter dans son navigateur des applications de type animation/graphique comme des jeux, des site web (nous déconseillons de réaliser un site web avec Flash mais nous y reviendrons) ou d’autres types de contenus comme des lecteurs de musique, de vidéos ou simplement des pubs (vous savez ce qui ruine votre expérience utilisateur sur le web 😈 ). Comme le but ici n’est pas de présenter l’historique de la plateforme Flash mais plutôt de faire un point rapide, je vous propose de consulter ce très bon article (wikipedia) qui vous en dira long sur la plateforme Flash et son histoire.

Lire la suite Lire la suite