Tutoriel : Comment créer un jeu comme Angry Birds en Flash avec Box2d – Partie 2 – Creation du niveau

Partie 2 – Creation du niveau avec Box2D

Introduction

Voici la suite du tutoriel sur la création d’un jeu de physique comme Angry Birds en Flash.

Vous pouvez télécharger les sources ici : How_to_create_a_game_like_angry_birds_part2.zip

Si vous avez raté la première étape indispensable du tutoriel elle est ici : https://benoitfreslon.com/fr/tutorial-how-to-create-a-game-like-angry-birds-with-box2d-world-construction-kit-flash-part-1.

Introduction

Dans ce tutoriel je vais vous montrer comment créer un objet de type : plaque rigide et indestructible.
Nous allons ensuite l’utiliser dans un niveau simple pour construire une structure de base.

Modification de la scène

Depuis le panneau Propriétés, modifier la taille de la scène pour 800px de large.

Capture d’écran 2013-04-01 à 20.27.19

Création du sol

Commençons par créer le MovieClip du sol.

Insertion > Nouveau Symbole > Nom : Floor > Type : Clip > Exporter pour ActionScript > Classe : Floor > Classe de Base : shapes.Box > OK

Capture d’écran 2013-04-01 à 21.12.18

Une fois dans le clip créé, dessiner un carré vert.

Capture d’écran 2013-04-01 à 20.31.51

NB : Le moteur World Construction Kit utilise toujours le centre de l’image comme étant le centre de gravité d’une forme physique.

Donc toujours centrer la forme au centre du symbole à l’aide du panneau Aligner :

Capture d’écran 2013-04-01 à 20.32.03

Une fois le sol terminé cliquer sur Scène 1 pour revenir sur la scène puis rentrer dans le Clip World.

C’est seulement dans le Clip World que nous allons construire le monde physique.

Depuis la bibliothèque cliquer et déposer une instance de Floor sur la scène comme ceci :

Capture d’écran 2013-04-01 à 20.33.33

Ensuite déformer la forme du sol avec l’outil de transformation libre dans la barre d’outils à gauche.

Supprimer l’ancien sol gris pour le remplacer par le nouveau. Placer le sol en bas de l’écran de cette façon.

Capture d’écran 2013-04-01 à 20.34.35

Pour régler tous les paramètres physiques du sol il a 2 façons. Soit via le code ActionScript (nous verrons cela plus tard) soit avec les propriétés du composant Flash.

Pour avoir accès à toutes ces propriétés via Flash il faut définir un composant sur l’objet Floor fraîchement créé.

Depuis la bibliothèque > sélectionner le clip Floor puis > clic droit > Définition du composant.

Capture d’écran 2013-04-01 à 20.39.14

Classe : wck.BodyShape > OK.

Capture d’écran 2013-04-01 à 20.41.06

Désormais lorsqu’on clic sur le clip Floor placé sur la scène on a accès aux propriétés physiques depuis les paramètres du composant dans dans le panneau propriétés.

Régler de cette façon pour le moment:

Capture d’écran 2013-04-01 à 20.44.23

Création de plateformes dynamiques

Nous allons maintenant créer les plateformes dynamiques.

Insertion > Nouveau symbole > Nom : IronPlate > Type : Clip > Exporter pour ActionScript > Classe : IronPlate > Classe de base : shapes.Box > OK

Capture d’écran 2013-04-01 à 20.45.08

Dessinez une plaque de métal environ 200 px de large et 10 px de hauteur et centrez l’image.

Capture d’écran 2013-04-01 à 20.45.41

Nous allons donner les mêmes réglages à toutes les plaques disposées dans le jeu avec une seule classe.

Cela nous évitera de régler TOUS les objets un par un via Flash. Une tâche pénible. Voilà pourquoi nous allons créer une classe IronPlate.

Fichier > Nouveau > Classe d’ActionScript 3.0 > Nom de classe : IronPlate > OK

Capture d’écran 2013-04-01 à 20.46.39

Ensuite > Fichier > Enregistrer Sous > IronPlate.as ( Dans le même dossier que le fichier .fla ).

Capture d’écran 2013-04-01 à 20.47.05

Copier coller ensuite ce code afin de donner un réglage générique pour toutes les plaques en métal.

Enfin ajouter plusieurs instances de IronPlate dans le Clip World qui se trouve sur la scène.

Construire une structure dans le genre pour tester le bon fonctionnement du jeu.

J’ai placé la grosse boite au dessus pour casser la structure.

Capture d’écran 2013-04-01 à 20.54.20

Tester l’animation > CTRL + Entrée

Si il a des erreurs ou des plaques immobiles vérifier que les Clip IronPlates sont bien dans le clip World.

Scène > World > IronPlates

A bientôt :).

The vuvuzela game: just for fun

The Vuvuzelga game

The Vuvuzela game

After the hand of Thierry Henry the vuvuzela game.

PLAY HERE : https://benoitfreslon.com/my-games/the-vuvuzela-game/
Play on Facebook:  The vuvuzela game sur Facebook

Game made in 4 hours just for fun :).

Description:

Play the vuvuzela game. Blow up the Maradona’s head with your vuvuzela.

How to play:

Just click to “shoot”.

Emebed this game: