ActionScript : Déplacer un objet de manière fluide avec une accélération, une décélération et une inertie

Aujourd’hui voici un exemple de code pour créer un effet d’accélération et d’inertie en Flash ActionScript 3.0.

Le personnage va commencer à accélérer si on appuie sur une flèche. Il atteindra sa vitesse maximale puis il ralentira si on relâche la touche.

Vous pouvez télécharger le code source ici : Flash_acceleration_benoifreslon.com

Fleury Michon : Jump’box – advergame – saute, saute, resaute et gagne des cadeaux

vignette_150x150

Voilà le dernier auquel j’ai participé en tant que game designer, développeur et sound designer.
J’ai développé Jump’Box pour l’agence de communication Castor & Pollux pour le compte de la marque Fleury Michon et Vraiment Box.

Il s’agit d’un petit jeu simple mais addictif. Jump’Box est un jeu de plateformes où le personnage principal doit atteindre la “Box” en haut de la tour.
Le gameplay est simpliste, inspiré du jeu “Mr Crab“. Le personnage court constamment et change de direction en se cognant cotre les murs. Une touche fait sauter le personnage pour sauter les obstacles et éliminer les ennemis. Les ingrédients de la box sont éparpillés sur tout le niveau. Il sont récoltables et permettent d’avoir une notation en fin de partie.
Les 6 personnages de la marque Vraiment sont jouables sur 18 niveaux répartis en 6 mondes différents.

A savoir que de jolis cadeaux sont offerts aux joueurs qui terminent les mondes : Sony PS4, iPad mini, appareil photo, etc.

Jouer à Jump’Box sur Facebook.

Il s’agit d’un jeu en fausse 3D réalisé avec une simple moteur de jeu en 2D avec beaucoup d’effets visuels : Parallax, scrolling, ombres, etc. Le rendu final est assez réussi.

J’ai utilisé le frameowk Starling et le framework CitrusEngine pour développer ce jeu Flash avec Stage3D.

Jump’Box – Fleury Michon (2013)

Jeu Flash de plateformes sur Facebook.
Game design, développement Flash, ActionScript, Starling, Stage3D, level design, sound design.

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.

La danse de l’épaule – le jeu – Danser sur les sardines

A qu’est-ce qu’on est serré au fond de cette boîte…

Salut mes chéris,

Voici un jeu développé très rapidement juste pour le fun en quelques heures.
Le jeu de la fameuse danse des épaules de Cyril Hanouna. En hommage à l’emission désormais culte Touche pas à mon poste (TPMP) sur D8.

logo

Jouer ici : La Danse de l’épaule

screenshot

Fait danser Cyril sur les Sardines de Patrick Sébastien. Appuie sur les flèches quand la sardine arrive dans le rond et éclate toi.

Bon jeu ! ;)

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 : Utiliser les librairies TweenMax pour créer une animation fluide avec un exemple simple

Prérequis

Lisez le précédent tutorial à propos de l’installation de la librairie TweenMax.
Tutoriel : Installer les librairies TweenMax ActionScript 3 avec Flash IDE pour débutants

Utilisation

Animations (Tweens)

Nous allons essayer de tester quelques animations et quelques animations fluides :

Cliquer sur Insertion > Nouveau symbole :

  1. Type: Clip
  2. Entrer le nom: Apple
  3. Cocher : Exporter pour ActionScript
  4. Entrer le nom de la classe : Apple
  5. Enfin cliquer OK

new_symbol

Entrer dans le symbole Apple depuis la Bibliothèque :

library

Dessiner ensuite une belle pomme rouge :).

Center la pomme au centre en laissant l’origine au milieu.

apple

Cliquer sur Séquence 1 depuis le navigateur en haut.

stage

Maintenant il y a une scène totalement vide.

Faire un clic droit sur la timeline et ouvrir le panneau Actions.

timeline

Ajouter ensuite cette ligne de code :

Si la librarie est correctement installée Flash propose de compléter la suite :

import

La méthode TweenMax.to va créer une interpolation avec n’importe quelles propriétés.

Par exemple cette ligne permet de déplacer l’objet vers de nouvelles coordonnées x et y :

Enfin ajouter ces lignes de codes :

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.