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.

Tutoriel : Comment remplacer et masquer le curseur de la souris en Flash avec ActionScript 3

Je vais vous montrer comment masquer le curseur de la souris en Flash et comment le remplacer par une autre image.

C’est très simple mais vous avez besoin d’au moins d’un Clip.

Vous pouvez télécharger les codes sources : Hide_mouse_cursor_and_custom_cursor.fla.

  • Créer un nouveau fichier ActionScript 3 dans Flash
  • Puis: Insertion > Nouveau Symbole > Nom: CustomCursor > Clip > OK.
  • Utiliser une image ou dessiner un curseur perso. Placer la pointe du curseur au niveau du point d’origine.
  • Puis retourner sur la Séquence principale.
  • Ajouter une occurrence du Clip CustomCursor sur la scène.
  • Mettre le nom d’occurrence de ce Clip dans ses propriétés : Cliquer sur le symbole sur la scène > Panneau propriétés > Nom d’occurrence: cursor
  • Ouvrir ensuite le panneau Actions et commencer à coder.

C’est terminé :).

ActionScript : Déplacer un objet avec le clavier avec des contrôles absolus

Dans ce tutoriel je vais vous montrer comment déplacer un objet avec le clavier en contrôle absolu en Flash.

Voir également comment déplacer un objet avec le clavier avec des contrôles relatifs à la caméra.

Contrôle absolu ? Kézako ?

La direction de votre objet va être calculée en fonction de l’orientation de votre objet. (Resident Evil, Micro Machines, Gears of War, etc.). Ce script est très utile pour les jeux de voitures.

Comment faire un contrôle absolu en Flash?

  • Récupérer les informations des touches du clavier (touche enfoncée, touche relâchée)
  • Déplacer ou tourner l’objet entre chaque frame avec la nouvelle vitesse (Touche gauche et droite : tourner l’objet, Haut : faire avancer l’objet, Bas ; faire reculer l’objet)

Télécharger la source : www.benoitfreslon.com_Move_an_object_with_keyboard_with_absolute_controls

Tutoriel : Comment faire un jeu à la Jetman – étape 1 – Le Jetman

Dans mon premier tutoriel pour débutant je vais vous apprendre à créer un jeu comme Jetman.

Il s’agit d’un jeu casual très connu sur Facebook et très addictif.

Jouer à Jetman

1. D’abord vous devez avoir téléchargé et installé Adobe Flash IDE : Adobe Flash Professional CS3 au minimum

Nous allons coder le jeu avec le langage ActionScript 3.0 (le langage de programmation de Flash) donc vous devez posséder Adobe Flash CS3 au minimum.
Vous pouvez télécharger la version d’essai gratuite ici pour Windows ou Mac OSX : https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en&product=flash

2. Créer un nouveau document

  • Ouvrir Flash.
  • Créer un nouveau document Flash ActionScript 3.0
  • Sur le panneau propriétés du document Flash définir la cadence à 25ips.
  • Définir la couleur de fond en noir

3. Création du MovieClip du Jetman

Flash utilise des objets graphiques appelés des MovieClip. Donc nous allons créer le MovieClip du Jetman.

  • Cliquer sur l’outil rectangle dans la barre d’outils.

create_box

  • Ensuite dessiner un rectangle sur la scène avec ces propriétés largeur : 50px et hauteur : 15px (vous pouvez modifier sa taille plus tard).
  • Sélectionner toute la forme, y compris la bordure. En double cliquant sur le rectangle
  • Faire un clic droit en ayant sélectionné le rectangle puis Convertir en Symbole.
  • Ecrire le nom du symbole : Jetman (pas jetman ou JETMAN).
  • Puis OK.

Maintenant il y a un Symbole nommé Jetman dans la Bibliothèque. Si elle n’apparaît pas il suffit d’appuyer sur la touche F11.
Il y a une occurrence (instance) du symbole Jetman sur la scène. Super ! Voilà le premier MovieClip

Dans le but de scripter le comportement de ce MovieClip il faut lui donner un nom d’occurrence (instance name) sur la scène.

  • Sur la scène, cliquer sur le MovieClip du jetman

instance

  • Ensuite dans le panneau des propriétés il y a un champ : nom d’occurrence à remplir: jetman (pas Jetman ou JETMAN) c’est très important.

instance_name

C’est fait ! Maintenant on peut scripter ce MovieClip avec ActionScript.

4. Le code

Vous avez différents outils pour coder en ActionScript. La manière la plus simple étant de coder directement dans les calques dans l’IDE Flash.

  • Créer un nouveau caaque sur la timeline. Cliquer sur le petit bouton blanc en bas à gauche.
  • Ajouter le nouveau layer en haut: en glissant le calque vers le haut.
  • Renommer le calque rename clic droit > renommer > Actions
  • Ensuite sélectionner la première image du calque (ici en noir).

layer

  • Enfin aller dans le menu Fenêtres > Actions ou utiliser la touche F9.

Un nouveau panneau s’ouvre : La panneau Actions. Le code s’écrit ici.

  • Copier Coller ce code ActionScript 3. Un petit a apparaît dans l’image ensuite.

  • Enfin tester le jeu (raccourcis CTRL+ENTREE)

Cette animation s’affiche si tout s’est bien passé :

Télécharger le code source :

[www.thisisgameplay.com]_Jetman_step1.fla

Télécharger le fichier compilé swf :

[www.thisisgameplay.com]_Jetman_step1.swf

Ensuite nous passerons au Level design.

http://photos-g.ak.fbcdn.net/photos-ak-sf2p/v43/106/4243149646/app_1_4243149646_252.gif

Léxique :
image = frame
fps = ips = image par seconde
occurence = instance
MovieClip = Symbole
IDE = Integrated development environment = Environnement de développement intégré