Kmembert (2013)

Jeu réalisé en 48h lors de la Ludum Dare 28. Jeu Flash, type: puzzle/action.
Game design, level design, graphisme, développement ActionScript 3.0.

La danse des épaules (2013)

Jeu de rythme réalisé en 8h Flash pour tester le moteur Physique Box2D . Jeu Flash, type: Adresse.
Game design, level design, sound design, graphisme, développement Flash.

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 – 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.

Growing Leo

Growing Leo (2013)

Jeu Flash réalisé en 48h lors de la Global Game Jam 2013 à Marseille.
Game design, level design, graphisme, sound design.

The WTF Game experience (2012)

Jeu Flash, jeu de puzzle avec univers burlesque.
Game design, level design, développement ActionScript, sound design.

Color Fish – Teisseire (2012)

Jeu Flash de puzzle sur Facebook.
Game design, level design, développement Flash, ActionScript 3, sound design.