Tutoriel : Comment créer un jeu comme Angry Birds en Flash – Partie 4 – Création des cochons et détection des collisions

Partie 4 – Création des cochons et détection des collisions

Introduction

Voici le quatrième tutoriel pour apprendre à créer un jeu de physique comme Angry Birds en Flash avec Box2D.

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

Si vous avez raté le premier tutoriel vous pouvez le trouver ici : https://benoitfreslon.com/fr/tutorial-how-to-create-a-game-like-angry-birds-with-box2d-world-construction-kit-flash-part-1

Dans ce tutoriel nous allons créer les ennemis : les Cochons. Puis nous allons détecter les collisions pour les détruire.

Create the Pig character

Créer le Clip du Cochon :

  1. Insertion > Nouveau Symbole
  2. Nom : Pig
  3. Type : MovieClip
  4. Cocher exporter pour ActionScript
  5. Classe : Pig
  6. OK

Capture d’écran 2013-04-28 à 22.25.04

Dessiner un joli cochon vert comme ceci avec les dimensions : 30×30.

Capture d’écran 2013-04-28 à 22.25.21

Ou télécharger mon sprite :

pig

La classe du Cochon

Créer la classe du Cochon

  1. Nouveau > Fichier > Classe ActionSript 3.0
  2. Nom de classe : Pig

Copier et coller ce code à la place :

Ajouter les cochons dans le clip World comme ceci :

Capture d’écran 2013-04-28 à 23.32.12

Enfin tester le niveau.

Le tutoriel est terminé. Si vous souhaitez d’autres fonctionnalités et plus de tutoriels sur le moteur d’Angry Birds postez un commentaire :).

Amusez-vous bien !

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 WTF Game Experience: private beta test

Bonjour tout le monde !

Je suis en train de développer un nouveau jeu en Flash avec un moteur physique et un gameplay simple et une approche plutôt originale.
Le jeu est toujours en développement mais je vous invite à tester la version beta.

Pour tester le jeu c’est ici et entrez le mot de passe : beta

Postez vos commentaires, vos feedback ou reporter des bugs avec le bouton adéquate dans le jeu.
J’espère que vous apprécierez mon nouveau “délire”.

Bon jeu ;) !

ActionScript : Tutorial Comment créer une gravité comme un jeu de plateforme à la Mario

Dans ce petit tutoriel je vais vous montrer comment créer une une gravité sur un personnage comme dans la pluspart des jeux de plateformes.

Commençons !

Télécharger les fichiers

  • Sauvegarder sur votre ordinateur ces 2 images (Click droit > Enregistrer sous)

  • Ourvir Flash (CS3, CS4 ou CS5) et créer un nouveau document ActionScript 3.0
  • Régler les propriétés du document à 24 ips, et 550×400 px (propriétés par défaut)

Création d’un MovieClip pour le héros

  • Créer un nouveau symbole : Insertion > Nouveau Symbole > MovieClip
  • Nom du symbole: Hero (en Anglais, oui c’est la convention :))
  • Cocher : Exporter pour ActionScript
  • Enfin Cliquer OK

  • Maintenant vous vous trouvez dans le symbole du Hero. Super !
  • Importer le premier sprite de mario : mario_stand.png sur la première image clé.
  • Fichier > Importer > Importer sur la scène > mario_stand.png
  • Placer le sprite juste au dessus du repère local du symbole (la petite croix noire)
  • Maintenant créer une nouvelle image clé vide sur le scénario un peu plus loin :
  • Scénario>  autre image sur le scénario > Click droit > Ajouter une image clé vide
  • Importer la seconde image : mario_jump.jpg sur l’autre image clé
  • Insertion > Sénario> Nouveau calque
  • Ensuite créer un nouveau calque et ajouter 2 noms d’étiquette
  • Sur le scénario cliquer sur la première image clé où se trouve le mario_stand.png et aller dans la panneau Propriétés : Etiquette > Nom > stand
  • Sur le scénari cliquer sur la seconde image clé où se trouve le mario_jump.png et aller dans le panneau Propriétés : Etiquette > Nom > jump

Ajouter le code du saut

  • Revenir sur la scène principale : Cliquer sur Scène 1
  • Ajouter un nouveau calque nommé “Actions” : Insertion > Scénario > Nouveau calque
  • Puis ouvrir le panneau Action : Scénario > Calque Actions > Clic que une image clé > Clic Droit > Actions
  • Enfin copier/coller ce bout de code :

Télécharger les sources : www.benoitfreslon.com_Create_gravity_like_a_mario_plateformer