V - Affichage d'une carte

Affichage d'une carte

Bonjour à tous, c'est dans ce chapitre que l'on va commencer à programmer (enfin). Quelques connaissances théoriques sont attendue comme par exemple, la notion de Programmation Orientée Objet.

Création des objets

Tout d'abord, lancez FLash Develop et créez un nouveau projet ( Projet -> New Project ) Vous optiendrez la fenêtre suivante :

Choisissez Flex 3 Project, entrez le nom de votre projet et Validez. Vérifiez tout de même que la case "create directory for project" est cochée.

 Vous devez obtenir la fenêtre suivante. Sur la gauche, vous devez avoir un panneau projet. Si ce n'est pas le cas, faites : View -> Project Manager. Examinons ce panneau de plus près :

Arborescence est simple, seulement 3 dossiers. les deux qui nous intéressent sont "bin" et "src".

• "bin" : Il va contenir tous les fichiers que nous chargerons dans notre programmation. Par exemple les fichiers des personnages, les cartes, les images d'interface...Etc
• "src" : Il va contenir tous les fichier que nous allons programmer. 
• "Main.mxml" : Ce fichier est le fichier de base, c'est ici que le programme commence.

     Bien, pour commencer nous allons créer nos 3 classes(ou Objet) qui vont nous permettre d'afficher une carte. Pour cela, faîtes un clique droit sur le dossier "src" puis create-> New Folder. Appelez le nouveau dossier "Engine". C'est dans ce dossier que nous écrirons nos classes personnalisées.

Nouveau dossier (= Package)

     Pour ajouter une nouvelle classe faîtes clique droit sur le dossier "Engine" puis create -> New Classe. Entrez le nom de la classe et validez. Nous allons créez 3 classe : World, Map, et Tile.

Nommez la classe

Les 3 classes sont crées

Vous devez obtenir la même arborescence que si dessus.

Les Tiles

Création des dossiers

     Bien, avant de continuer la programmation nous allons devoir créer deux dossier dans le dossier bin :

• "tiles" : Il contiendra nos tiles au format (.swf = flash);
• "map" : Il contiendra nos maps au format (.map écrit en xml);

Création des tiles

     La base d'une tile mesurera 32 pixels de large et 24 pixels de haut. Vous pouvez les dessinez avec flash et les enregistrer au format swf. L'important est que le coin de la base de votre tile soit le point (0; 0). Voici un exemple pour 2 tiles : Une simple, et un obstacle(relief mais la base reste la même) :

 Enregistrez bien vos tiles au format ".swf" et dans le dossier tiles créé précédement.
Voici les 2 tiles que j'ai crées :

Notre premiere carte

     Bien, comme je l'ai dit plus au, les fichiers contenant les maps sont écrites en xml mais on les enregistrera au format ".map" pour une question d'organisation. Faite un clique droit sur le dossier maps, ensuite Add-> new empty file et nommé le : "carte01.map". Vous devez obtenir un fichier vierge. ici nous allons écrire la carte (et non la lire héhé, ça viendra).

Voici une carte simple :

 Carte01.map - XML

Cela signifie qu'on aura une première ligne de 4 tile blanche, une sedonde identique, une troisième identique et une quatrième aussi. Résultat carte entièrement en case blanche et mesure 4*4 tile.

Carte01.map(Bis) - XML

Dans ce cas on remarque que chaque fin de ligne termine par une tile obstacle.

Main.xml

Allez hop, on passe à la programmation pure et dure ! =D
Je commence par vous montrer et je vous explique ensuite !
Main.mxml - flex / As 3.0

Et oui.... Au premier coup d'oeil, ça calme héhé. Bon allez, je vous exmplique tout ça :

Cette ligne est là pour donner des informations sur le langage. Elle est obligatoire, je vous conseille de simplement l'apprendre par coeur

Le noeud Application est le noeud principale. Il est important de noté les 3 propriétés de ce noeud : Width qui est la largeur de l'application, height qui est sa hauteur et creationComplete qui appelle la fonction Main dès le démarage de l'application.

explication

import Engine.World;
import mx.controls.Alert;

explication

private function main():void
{
 var myWorld:World = new World();
 this.addChild(myWorld);
}

explication

var myWorld:World = new World();

explication

this.addChild(myWorld);

explication