Tutoriel : Comment créer un jeu comme Angry Birds en Flash – Partie 3 – Création de l’oiseau le personnage

Tutoriel : Comment créer un jeu comme Angry Birds en Flash – Partie 3 – Création de l’oiseau le personnage

Introduction

Voici le troisième tutoriel pour apprendre à créer un jeu Flash comme Angry Birds avec un moteur physique.

Vous pouvez télécharger gratuitement les sources du tutoriel : https://benoitfreslon.com/wp-content/uploads/2013/04/How_to_create_a_game_like_angry_birds_part3.zip

Si vous avez raté le début du tutoriel c’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 nous allons créer le personnage : L’oiseau. Nous allons ajouter quelques interactions simples : Le tir et la réapparition de l’oiseau.

Modifications

J’ai modifié un peu les paramètres du monde pour avoir des mouvements plus lents et plus fluides.

Cliquer sur le Clip de World sur la scène et modifier ces propriétés depuis le panneau de propriétés :

  1. gravityY = 2
  2. timeStep = 0,04

Création de l’oiseau

  1. Insertion > Nouveau Symboler > Type : Clip
  2. Nom : Bird
  3. Cocher : Exporter pour ActionScript
  4. Classe : Bird
  5. Ok
  6. Dessiner une cercle rouge au centre du clip.
  7. Régler les dimensions via le panneau propriétés en 30×30.
  8. Dessiner les ailles et le visage de l’oiseau comme ceci :

Capture d’écran 2013-04-22 à 11.45.57

Ou télécharger ce sprite :

bird

Super maintenant ajouter une instance de Bird dans le clip World :

  1. Double cliquer sur le clip World dans la bibliothèque.
  2. Faire glisser une instance de Bird dans le clip World.

Capture d’écran 2013-04-22 à 11.47.47

Maintenant créer la classe ActionScript Bird :

  1. Fichier > Nouveau > ActionScript 3.0 > Nom de classe : Bird > OK
  2. Fichier > Enregistrer > Enregistrer le fichier dans le même dossier que le fichier main.fla

Capture d’écran 2013-04-17 à 11.48.31

Enfin remplacer le code par celui-ci :

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 :).

Tutoriel: Comment créer un jeu comme Angry Birds avec box2D, World Construction Kit en Flash – Partie 1

Partie 1 – Installation de FlashBox2D (box2d) avec WCK

J’ai décidé de rédiger un petit tutoriel chaque vendredi. :)

Introduction

Aujourd’hui je vais vous montrer comment créer un jeu comme Angry Birds en plusieurs étapes avec un moteur physique en Flash.

Le fameux moteur physique s’appelle Box2D. 95% des jeux en 2D avec de la physique utilisent ce moteur : Angry birds, Limbo, Bad piggies, etc.
La version originale de Box2D a été développée en C++. Pour plus d’informations visitez le site Box2D C++. Ce moteur a été porté en ActionScript 3.0 appelé box2DFlash.

Box2DFlash

Box2DFlash est un moteur physique très puissant mais difficile à utiliser si vous n’êtes pas un bon programmeur et si vous n’avez pas d’éditeur de niveaux visuels.
C’est pourquoi je suggère d’utiliser le framework World Construction Kit (WCK).

World Construction Kit (WCK)

Site web : http://www.sideroller.com/wck/

Voici la description de World Construction Kit en anglais provenant du site :

World Construction Kit is is a toolset / framework for rapidly developing physics based games / websites within the Flash IDE. WCK allows you to layout your 2d worlds / game levels entirely within Flash and have them hook into the physics simulation without writing any code

Malheureusement le framework n’est plus maintenu à jour. Néanmoins il est reste très complet et performant.

Installation

  • Télécharger et installer : Adobe Flash Pro
  • Télécharger le framework WCK depuis github: https://github.com/jesses/wck (Télécharger le Zip si vous n’avez pas de client git)

Capture d’écran 2013-03-15 à 00.09.05

  • Extraire tous les fichiers du zip dans un dossier.
  • Ouvrir le fichier BlankProject/main.fla  depuis le dossier fraichement décompressé.
  • Voilà Box2D est déjà préinstallé avec le framework WCK.
  • Tester l’animation avec CTRL + Entrée ou CMD + Entrée sous OS X.
  • Vous devriez voir cela :

Dans le prochain tutoriel je vais vous montrer comment construire et paramétrer un niveau avec le moteur Box2D à l’aide de WCK en Flash.