Forums Développement Multimédia

Aller au contenu

[Tutorial] Starfield multidirectionnel

CODE

91 réponses à ce sujet

#1 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:24 PM

Bienvenue dans cet exercice.

Je vous propose de voir comment créer un petit starfield multidirectionnel pour animer les fonds de vos jeux de shoot dans l’espace.

Commençons par poser les bases
Ce tutorial s'adresse aux débutants et est écrit sur Flash MX.
Je n’expliquerai pas en détail les commandes utilisées mais pour les débutants je ferais un rappel succinct de ce que dit l’aide de Flash à chaque nouvelle instruction. Désolé pour les initiés, c'est un peu "lourd" mais çà permet aux débutants de suivre quand ils tombent sur un code qu'ils ne connaissent pas ou mal.

Avant de commencer tout projet il est nécessaire de le définir précisément.
Ici, le but est de créer un mouvement continu et non répétitif sur un ensemble d’objets, dans toutes les directions possibles et commandé à l’aide des touches de direction.
Voyons un peu comment nous pouvons construire cette idée.

Paramètres du projet
Allons-y, ouvrez un nouveau projet et donnez lui les paramètres suivants :

Largeur = 600 px
Hauteur = 400 px
Couleur de fond = noir
FPS = 30

Création des clips utiles

On commence par créer un objet vide qui va contenir tous les objets liés à notre starfield.
Pourquoi créer un objet vide ?
Vous réaliserez assez vite que lorsque vous avez de nombreux objets à gérer sur de multiples couches il est plus pratique de ranger les objets de même type dans des boites (des conteneurs) et de manipuler toute la boite quand vous en avez besoin. Ici par exemple si j’ai un vaisseau à rajouter je le rajouterai simplement au dessus de mon objet représentant le starfield sans me soucier du nombre d’objets contenus dans le starfield ni de leur niveau.

On commence donc par créer un objet vide qui va servir de conteneur pour les étoiles.
Pour cela plusieurs commandes sont possibles, ici je préfère créer un clip vide que je nomme « vide » et qui servira de conteneur de référence pour tous mes objets.
Le clip vide se trouve dans la bibliothèque, pour pouvoir l’utiliser avec du code je vais devoir préciser que ce clip est « exporté pour l’ActionScript », c'est-à-dire que mon programme va exporter ce clip automatiquement sur la scène pour me permettre de l’utiliser.
Pour cela allez dans la bibliothèque (CTRL+L), cliquez avec le bouton droit sur le clip nommé « vide » et allez dans ses propriétés. Cochez la case « exporter pour ActionScript » et la case « exporter à la première image ». Le clip est désormais exporté à la première image de votre projet.
Le conteneur « vide » va servir pour d’autres objets, nous allons donc devoir en faire des « copies » pour chaque objet utile, pour cela une ligne de code suffira.

Allez sur votre timeline, normalement vous n’avez qu’une frame vide, c’est là que nous allons placer tout notre code, cliquez dessus et affichez le panneau d’actions (F9 sur Flash MX).

Tapez le code suivant :
//
// Starfield Multidirectionnel
// ---------------------------------------------------------------------------------
//
// Crée les objets
attachMovie("vide", "starfield", 10);
 

Code à connaître : attachMovie() ;

Citation

Description
Méthode : prend un symbole de la bibliothèque et l'associe au fichier SWF spécifié par mon_mc sur la scène. Utilisez removeMovieClip() ou unloadMovie() pour supprimer un fichier SWF associé à attachMovie().

Note : sans précision de cible la méthode attache le clip à la racine par défaut.
Les clips exportés de la bibliothèque doivent être exportés pour l’actionScript (clic droit sur le clip dans la bibliothèque, propriétés, puis cocher « exporter pour AS »
Nous venons d'attacher sur la scène une copie de note clip "vide", de lui donner le nom de "starfield" et de la placer au niveau 10.

Création des étoiles

On crée ensuite un clip « etoiles » qui va contenir les 3 types d’étoiles dont nous allons nous servir, rouge, bleue, blanche, une étoile sur chaque frame et un code stop() ; sur le layer du dessus. Ce clip va servir de référence, à chaque fois que nous allons créer une nouvelle étoile nous allons dupliquer ce clip et lui demander d’afficher au hasard une des trois frames. Ce type d’objet est appelé dans les jeux vidéo des « sprites » c'est-à-dire des clips contenant plusieurs états d’un même personnage.

Revenons à notre code, nous allons à présent rajouter quelques lignes qui vont servir à créer toutes les étoiles dans le conteneur « starfield ».

Après le code précédent rajoutez :
//
// Crée les étoiles
for (var i = 1; i<100; i++) {
        starfield.attachMovie("etoiles", "etoile"+i, i);
        var etoile = starfield["etoile"+i];
        etoile.gotoAndStop(random(3)+1);
        etoile._y = random(400);
        etoile._x = random(600);
        etoile.vit = random(10)/10+0.5;
        etoile._alpha = random(100);
        etoile._xscale = etoile._yscale=random(150);
}
 
Code à connaître : for

Citation

Description
Instruction : une construction de boucle qui évalue l'expression init (initialiser) une fois, puis commence une séquence de boucle par laquelle, tant que condition est évaluée comme true, instruction est exécutée et l'expression suivante évaluée.
Code à connaître : random()

Citation

Description
Fonction : renvoie un entier aléatoire entre 0 et un de moins que l'entier spécifié dans le paramètre valeur.
Décryptons un peu, premièrement il s’agit d’une boucle qui s’effectue de 1 à 100 sur i.
A chaque passage le programme :

• Attache dans le conteneur « starfield » une copie du sprite « etoiles » et lui donne un nom et un niveau correspondant à la valeur de i (etoile1-niveau1, etoile2-niveau2 ….)
• Crée un raccourci de programmation nommé « etoile » contenant le chemin de l’étoile en cours (starfield[« etoile »+i]). Notez la syntaxe utilisée ici, nous utilisons les crochets pour spécifier que le nom composé correspond à un objet contenu dans le conteneur « starfield ».
• Affiche une image aléatoire dans le clip « etoile »
• Donne une position aléatoire sur l’axe X
• Donne une position aléatoire sur l’axe Y
• Donne une vitesse de déplacement aléatoire
• Donne une transparence aléatoire
• Donne une taille aléatoire

Vous remarquerez que nous avons rajouté une vitesse propre à l’étoile que nous avons créé.
Chaque étoile possédera donc sa propre vitesse de déplacement, nous y reviendrons plus tard.
Vous pouvez rajouter des effets à volonté dans cette partie.

Si vous testez votre projet à ce stade vous allez obtenir un joli champ étoilé, c’est cool mais çà ne bouge pas encore, voyons comment animer tout çà en fonction des touches au clavier.

Boucle principale
Pour commencer nous allons avoir besoin d’utiliser des fonctions et des boucles et la première boucle que nous allons utiliser est la boucle principale du programme, celle qui s’exécute tout le temps.

A la suite du programme rajoutez :
//
// Boucle principale
onEnterFrame = function () {
        touches();
};
 
Code à connaître : onEnterFrame

Citation

Description
Gestionnaire d'événement : invoqué continuellement à la cadence du fichier SWF. Les actions associées à l'événement de clip enterFrame sont traitées avant les actions associées aux images affectées.
Vous devez définir une fonction exécutée lorsque le gestionnaire d'événement est invoqué.


Le code exécuté est une fonction qui aura pour but de lancer une ou plusieurs autres fonctions.
Ici nous allons nous contenter de lancer la fonction « touches()» à intervalles régulier.

Pourquoi des fonctions qui lancent des fonctions et puis d’abord c’est quoi les fonctions ?
Bien, si vous en êtes là il va me falloir quelques explications avant d’aller plus loin.
Allons faire un tour dans l’aide de Flash :

Citation

function
Description
Instruction : un jeu d'instructions que vous définissez pour effectuer une certaine tâche. Vous pouvez déclarer, ou définir, une fonction à un emplacement et l'appeler, ou l'invoquer, depuis différents scripts dans un fichier SWF. Lorsque vous définissez une fonction, vous pouvez également spécifier ses paramètres. Les paramètres sont des supports pour les valeurs sur lesquelles la fonction opère. Vous pouvez transmettre différents paramètres à une fonction à chaque fois que vous l'appelez. Ceci vous permet de réutiliser une fonction dans de nombreuses situations différentes.


Nous avons donc une boucle qui déclenche une fonction de base qui elle même appelle une ou plusieurs autres fonctions à intervalles réguliers. J’ai choisi d’appeler une fonction « touches()» qui va contenir le code de détection des touches.

Touches du clavier
Nous attaquons à présent le vif du sujet, gérer les déplacements.
Pour cela nous allons avoir besoin des touches du clavier, et d’un petit moteur qui va réagir à la pression des touches et intervenir sur les étoiles. La fonction « touches()» servira pour la détection des touches et nous ferons intervenir le moteur lorsqu’une touche est effectivement détectée.

Rajoutez le code suivant à la suite du programme :
//
// Déplacements des étoiles
function touches(){
        // Calcule la direction
        if (Key.isDown(Key.RIGHT)) {
                x--;
        } else if (Key.isDown(Key.LEFT)) {
                x++;
        } else {
                x = x*0.9;
        }
        if (Key.isDown(Key.UP)) {
                y++;
        } else if (Key.isDown(Key.DOWN)) {
                y--;
        } else {
                y = y*0.9;
        }
        fixeVitesse();
        deplaceEtoiles();
}
 
Code à connaître : isDown

Citation

Usage
Key.isDown(codeDeTouche)
Description
Méthode : renvoie true si la touche spécifiée dans codeDeTouche est enfoncée, false si elle ne l'est pas.

Cette fonction va faire varier deux paramètres (x et y) en fonction de la pression d’une touche. Si certaines touches ne sont pas enfoncées les valeurs de x et de y décroissent. Les valeurs de x et de y seront utilisées dans une autre fonction, le moteur, servant à déplacer les étoiles. Cette fonction appelle également deux autres fonctions, « fixeVitesse() » et « deplaceEtoiles() ».


Limiter la vitesse
La fonction « fixeVitesse() » est un paramètre supplémentaire qui intervient sur x et sur y.
Elle permet de limiter la valeur de x et de y et ainsi d’éviter que le moteur accélère exponentiellement (on se croirait dans star trek non ? …. Vous essayerez votre projet sans cette fonction, vous verrez qu’on n’en est pas loin….)

Rajoutez ce code après la fonction « touches ()» :
//
// Fixe la vitesse
function fixeVitesse() {
        if (x<-vit) {
                x = -vit;
        }
        if (x>vit) {
                x = vit;
        }
        if (y<-vit) {
                y = -vit;
        }
        if (y>vit) {
                y = vit;
        }
}
 
Nous fixons des limites à la valeur que peuvent prendre x et y.
On remarque l’utilisation d’une variable « vit » qui représente la vitesse max que les étoiles peuvent atteindre. On pourrait mettre à chaque fois une valeur numérique fixe mais c’est plus pratique, lorsque la même valeur se répète, de créer une variable et de modifier juste cette variable quand on veut faire une modification. On utilisera bien sur plusieurs variables tout au long du programme, pour garder un code propre je propose de placer toutes les variables au même endroit, c'est-à-dire en haut du code juste après la création des objets.

Remontez après le code de création des objets et placer le code :
//
// Variables
vit = 18;
 
Moteur des étoiles
Voyons la fonction « deplaceEtoiles() » à présent.
Il s’agit du moteur proprement dit, c’est cette fonction qui va déplacer toutes les étoiles une par une à sa propre vitesse et en fonction des touches de directions utilisées.

Placez ce code après la fonction « fixeVitesse () » :

ATTENTION : merci de cliquer sur "voir le code" pour voir le code correct, un problème de balises masque une partie du code.
//
// Déplace les étoiles
function deplaceEtoiles() {
        for (var i in starfield) {
                var ob = starfield<i>;
                ob._y += ob.vit*y;
                ob._x += ob.vit*x;
                limites(ob);
        }
}
</i>
Code à connaître : for…in

Citation

Description
Instruction : effectue une boucle sur les propriétés d'un objet ou sur les éléments d'un tableau et exécute l'instruction pour chaque propriété d'un objet.

Le code « for..in » est très utile, il permet de toucher tous les clips contenus dans notre objet « starfield », on peut donc faire varier la vitesse de chaque sprite indépendamment.
Ici nous allons agir sur la position _x et _y de chaque étoile en se servant de la vitesse propre à chaque étoile (rappelez-vous que nous avions fixé une vitesse à chaque étoile lors de leur création) et des valeurs de x et de y que nous avons calculé à l’aide des touches de direction
Si vous testez votre moteur il ne marchera pas, et pour cause, à aucun moment nous n’avons défini les valeurs initiales de x et de y, pour votre programme elles sont encore « undefine » et sans ces paramètres point de déplacement.
Dans le bloc de code contenant les variables rajoutez :
x = 0;
y = 0;
 
Notre moteur est prêt, toutes les étoiles se déplacent sur les deux axes en fonction des touches de direction, si on relâche certaines touches le moteur ralenti progressivement et la vitesse ne dépasse jamais un certain niveau.

Cependant il reste un petit problème… les étoiles sortent de la zone de jeu.

Le mouvement perpétuel
Certains d’entre vous se sont sûrement déjà posés la question, comment un nombre d’étoiles fixes peut donner l’illusion d’un mouvement perpétuel et irrégulier ?
La réponse tient en deux points, la vitesse propre à chaque étoile qui donne une illusion de profondeur, et une nouvelle fonction « limite(ob) » qui est la clé du système, elle replace les étoiles à l’autre bout de la zone visible lorsque celles-ci en sortent par un bord.

A la suite du programme tapez le code suivant :
//
// Limites du tableau pour tous les objets
function limites(ob) {
        if (ob._x<xmin) {
                ob._x = xmax;
        }
        if (ob._x>xmax) {
                ob._x = xmin;
        }
        if (ob._y<ymin) {
                ob._y = ymax;
        }
        if (ob._y>ymax) {
                ob._y = ymin;
        }
}
 
La première chose que l’on remarque c’est le paramètre « ob » que l’on a rajouté dans la fonction.
Ce paramètre représente l’objet pour lequel la fonction va intervenir, pour nous ce sera donc pour chaque étoile. On compare alors la position de l’étoile sur les axes X et Y. Si l’étoile sort de la zone visible elle est replacée de l’autre côté. C'est-à-dire que si elle sort par la droite elle réapparaît avec la même vitesse et la même direction à gauche du tableau. Pour déterminer les limites du tableau on va utiliser de nouvelles variables, à placer dans le bloc de code dédié aux variables dans le programme :
xmax = 600;
xmin = 0;
ymax = 400;
ymin = 0;
 
Testez votre projet et si tout s’est bien passé vous avez votre starfield multidirectionnel infini :)

La suite logique est de rajouter un vaisseau au centre de la scène qui va pivoter sur un axe pour s'orienter dans le sens de la marche. Puis de créer le tir du vaisseau et enfin les ennemis. Il ne reste alors plus qu'à gérer tout ce qui est superflu mais qui fait la beauté de vos jeux, l'intro, l'interface, le hud, la gestion des levels, du score etc... des choses que nous verrons peut-être dans une prochaine étape si je trouve la motivation pour continuer ;-)

Bons jeux !


Sources : Voici le Fla du tutoriel et le SWF qui l'accompagne

#2 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:25 PM

sympathique :Hola:

juste je me permet
dans la boucle qui crée les etoiles il me semble que tu es mieux de sortir la declaration de la variable etoile
sinon il va recreer 100 fois la variable etoile au lieu de une fois
pour placer les etoiles tupeux te servir des variables xmin, xmax, ymin, ymax

plutot que de faire
starfield.attachMovie("etoiles", "etoile"+i, i);
var etoile = starfield["etoile"+i];
tu peux directement faire
etoile = starfield.attachMovie("etoiles", "etoile"+i, i);

et plutot que de faire
etoile.vit = random(10)/10+0.5;
tu peux faire
etoile.vit = Math.random()+0.5;
mais c'est peux etre voulu ?

dans la fonction limite tu peux rajouter du code afin que les etoiles change de couleur et de position, comme elle ne reste pas a la meme position
mais c'est peut etre voulu aussi ?
//
// Starfield Multidirectionnel
// ---------------------------------------------------------------------------------
//
// Crée les objets
attachMovie("vide", "starfield", 10);
//
// Variables
xmax = 300;
xmin = 50;
ymax = 200;
ymin = 50;
vit = 18;
x = 0;
y = 0;
//
// Crée les étoiles
var etoile:MovieClip
for (var i = 1; i<100; i++) {
        etoile = starfield.attachMovie("etoiles", "etoile"+i, i);
        etoile.gotoAndStop(random(3)+1);
        etoile._x = random(xmax-xmin)+xmin;
        etoile._y = random(ymax-ymin)+ymin;
        etoile.vit = Math.random()+0.5;
        etoile._alpha = random(100);
        etoile._xscale = etoile._yscale=random(150);
}
//
// Boucle principale
onEnterFrame = function () {
        touches();
};
//
// Déplacements des étoiles
function touches() {
        // Calcule la direction
        if (Key.isDown(Key.RIGHT)) {
                x--;
        } else if (Key.isDown(Key.LEFT)) {
                x++;
        } else {
                x = x*0.9;
        }
        if (Key.isDown(Key.UP)) {
                y++;
        } else if (Key.isDown(Key.DOWN)) {
                y--;
        } else {
                y = y*0.9;
        }
        fixeVitesse();
        deplaceEtoiles();
}

//
// Fixe la vitesse
function fixeVitesse() {
        if (x<-vit) {
                x = -vit;
        }
        if (x>vit) {
                x = vit;
        }
        if (y<-vit) {
                y = -vit;
        }
        if (y>vit) {
                y = vit;
        }
}
//
// Déplace les étoiles
function deplaceEtoiles() {
        for (var i in starfield) {
                var ob = starfield[i];
                ob._y += ob.vit*y;
                ob._x += ob.vit*x;
                limites(ob);
        }
}
//
// Limites du tableau pour tous les objets
function limites(ob) {
        if (ob._x<xmin) {
                ob._y = random(ymax-ymin)+ymin;
                ob.gotoAndStop(random(3)+1);
                ob._x = xmax;
        }
        if (ob._x>xmax) {
                ob._x = xmin;
                ob._y = random(ymax-ymin)+ymin;
                ob.gotoAndStop(random(3)+1);
        }
        if (ob._y<ymin) {
                ob._y = ymax;
                ob._x = random(xmax-xmin)+xmin;
                ob.gotoAndStop(random(3)+1);
        }
        if (ob._y>ymax) {
                ob._y = ymin;
                ob._x = random(xmax-xmin)+xmin;
                ob.gotoAndStop(random(3)+1);
        }
}

 


#3 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:26 PM

Hello,

Merci pour les commentaires ;-)
Et merci pour les corrections, effectivement c'est plus simple en utilisant certains raccourcis, j'avais pas réfléchis à la chose comme çà.

Arf chuis con pour le Math.random(), je cherchais à limiter la variation entre 1 et 0, j'avais pas pensé que Math.random() le faisait par défaut, bien vu.

Pour la fonction "limites" je vais tester mais je pense qu'il faut qu'elles ne bougent pas et qu'elles soient juste replacées correctement au moment où elles sortent sinon çà risque de foutre le mouvement en l'air quand par exemple le "vaisseau" commence à partir dans un sens puis décide de revenir un peu en arrière, la position des étoiles sorties n'est plus la même et on à pas l'impression de reculer mais carrément de changer de zone, mais je vais tester pour voir le résultat.

#4 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:26 PM

Citation

çà risque de foutre le mouvement en l'air quand par exemple le "vaisseau" commence à partir dans un sens puis décide de revenir un peu en arrière,
bien vu l'indien ;-)

a+

#5 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:26 PM

Je n'ai pas lu les explications mais j'ai regardé le résultat et le rendu est bon, à la fois simple et efficace.
L'animation est bien réglée.
Les variations de la vitesse sont réalistes.
En espérant que cela servira de base à la création d'un jeu shoot'em up ou autre.

#6 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:27 PM

Merci Nelchaël,

[quote]
En espérant que cela servira de base à la création d'un jeu shoot'em up ou autre.[/quot€]


On pourrait le voir comme une battle non ? Chacun apporte un petit truc en plus et le jeu se monte petit à petit.

Je commence, voici mon code de base (voir le tuto) :mrgreen:

Qui se charge de faire un vaisseau qui pivote sur son axe ?

#7 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:27 PM

j'ai changé le mode de deplacement
on avance avec UP et on trourne avec LEFT et RIGHT

on peux foncer dans les rond vert pour les detruire ou leur tirer dessus avec SPACE

;-)
a+

#8 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:27 PM

Yes, joli coup Pao.

J'essayerai d'écrire l'explication du code pour les débutants un peu plus tard (suis au boulot là ;-) )

Merci pour ta participation :-)

#9 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:27 PM

En effet, belle performance graphique paodao ! huhu ;-)
Je me suis malgré tout autorisé une retouche du laser (graphique et code), ainsi qu'une ébauche de vaisseau mais qui serait à refaire.

#10 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:27 PM

Merci Nelchaël ;-)

Vous savez quoi ?
En deux petites étapes çà commence deja à avoir une sacré gueule je trouve, c'est tout bon çà les gars.
Je vais rajouter quelques asteroides baladeurs ce soir et commencer un HUD avec les points, la vie, le score ect.
Encore quelques étapes simples et on aura un petit jeu complet et fonctionnel avec source pour les débutants.

Bravo et merci de votre implication

#11 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:28 PM

merci du compliment Nelchaël

a+

#12 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:28 PM

Hello Pao,

Bien pour le double tir, par contre il faudrait faire les deux, le tir simple au départ, un clip "bonus" et on choppe le double tir ;-)

Désolé les gars je peux pas participer avant ce soir je suis au taf.
Pao, as-tu une possibilité d'enregistrer tes Fla en version MX pour que je puisse les ouvrir ?

#13 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:28 PM

yop

en faite c'est pas un vrai double tir, mais un tir a gauche pui sun tir a droite puis un tir a gauche...
mais comme ca va assez vite on s'en rend pas trop compte

a+

#14 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:28 PM

J'ai ajouté 2 cacheAsBitmap pour améliorer les perfs, après avoir passé les params de publication pour le Flash Player 8.

C'était la modif facile du jour.

#15 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:28 PM

j'aurai une question

si on regarde le code on voit qu'au final y'a tout plein de boucle for in , une pour chaque tire, une pour tout deplacer...
et tout plein de onEnterFrame

y'a t il un moyen d'alleger un peu tout ca ?

un seul EnterFrame avec une boucle pour deplacer tout le monde ou alors plusieur enterFrame ?

a+

#16 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:29 PM

Merci Dada ;-)
Et bienvenue dans notre petit délire

Pao, c'est pas faux, je me faisait la même réflexion, je vais regarder un peu si il n'est pas possible de réduire le code à ce niveau.

Sinon voici une petite mise à jour, j'ai rajouté des commentaires pour qu'on s'y retrouve, j'ai modifié les ennemis (mechants) et je leur ai rajouté quelques paramètres (pour cette première série d'ennemis j'ai choisi de faire des asteroides...).
J'ai viré la scéne tout ce qui s'y trouvait et remplacé çà par des linkages.
J'ai changé l'ordre des boucles et rajouté +100 dans l'incrémentation des niveaux des mechants pour eviter un bug (remplacement de certaines étoiles à cause d'un niveau identique), à ce propos je vais voir si on ne peux pas se passer de mettre une variable globale i çà peut être génant pour la suite ;-)

Je vais attaquer la gestion et l'affichage des infos (HUD), le score, la nombre de vies etc...

#17 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:29 PM

Hop,

Aussitôt dit aussitôt fait :)
Voici un début de HUD, il comprend :

- Affichage du nombre de vies
- Affichage du score
- Affichage du niveau
- Affichage de l'arme en cours d'utilisation

Les correspondances avec les événements "in game" ne sont pas faite car pour l'instant les calculs ne sont pas encore prêts à ce niveau, il suffira de modifier simplement les valeurs en fonction des besoins.

Pour la zone située en bas à droite je pense à un radar, mais l

#18 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:29 PM

Dernière MAJ pour ce soir de mon côté.

- Le calcul des points marche
- Le tir est ralenti
- Les objets explosent quand on les détruits
- Le réacteur du vaisseau s'oriente en fonction de ses mouvements latéraux

J'ai renommé quelques variables et quelques fonctions pour les rendres plus faciles à repérer et j'ai rangé tous les clips de la bibliothèque dans des dossiers.
Le code est surement à revoir.

#19 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:29 PM

salut,

j'ai repris la v4, j'ai fais un peu le ménage ( au lance flammes :mrgreen: )
j'ai surtout rassemblé les trucs qui allaient ensemble, vous riquez cependant de ne plus retrouver vos petits.
ça mériterait vraiment deux trois classes, ce serait quand même plus clean.

et sinon j'ai rajouté un truc de ouf malade (/*hum*/) : des éclairs de l'enfer qui attire les cailloux sur ton vaisseau.
utilise shift pour les dégager.
sinon le reste du fonctionnel n'a pas changé :)

edit : marche mieux en fenêtré :sad:

#20 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:30 PM

Salut Nicoptere, bravo :Hola: et bienvenue sur ce petit délire commun ;-)

Les éclairs sont carrément classes :mrgreen: , je regarde le code tout à l'heure et j'essayerai de faire un mix avec la version avec HUD.
Cà commence à avoir de la gueule, mais autant prévenir les débutants tout de suite (n'oublions pas qu'on est partit d'un petit tuto pour débutants) je sent qu'à partir de maintenant çà va se corser et qu'il va falloir s'accrocher pour suivre les évolutions

Pour le mode fenêtré c'est sans doute que des petites optmisations sont à prévoir, chez moi en tout cas çà va même en full screen, çà rame pas trop.

Edit :

J'ai rajouté les dernières modifs (hud, reacteur, explosions), et j'ai rajouté un compteur pour ralentir le tir autrement que par la vitesse propre de chaque tir mais en limitant la répétition de la touche espace.

Il y avait une toute petite erreur dans le code :
if (x1 == undefined || y1 == undefined || x2 == undefined || <b>y</b>2 == undefined) {
                return;
        }
 
J'ai placé mes propres blocs de code à la fin du programme pour pas foutre le souk.

#21 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:30 PM

Comme j'ai un clavier qui m'empêche d'utiliser les touches HAUT, DROITE ET ESPACE en même temps j'ai ajouté la possibilité de configurer les touches. :) J'ai aussi ajouté deux fonctions pauseGame() et runGame() pour qu'on puisse configurer sans que ces imbéciles de rochers nous tombent dessus. :))
La config des touches est sauvée dans un cookie. Par contre en local, à chaque modif du nom du swf la config est perdue car le Flash Player créé un nouveau dossier pour y stocker le cookie.

Comme vous le voyez, je me suis pas attardé sur la forme. ^^

Et puis aussi.... l'AS1/2 est une souffrance !!!!!

#22 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:31 PM

j'ai trouvé le but du jeu

ramener le max d'asteroide a un endroit precis en les tractant avec les eclair de nicop ;-)

a+

Modifié par Freyskeyd, 30 July 2009 - 20:31 PM.


#23 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:31 PM

TipTop, merci Dada :-) , je vais rajouter un petit menu d'intro pour laisser le temps de configurer les touches, çà permettra aussi de voir la config utile et d'expliquer le but du jeu.

Et à propos de but du jeu, je suis d'accord avec Pao, on pourrait faire une sorte de nettoyeur de zones, le but est de ramener les asteroides à un endroit à l'aide des eclairs, il faudrait inverser la réaction des asteroides en faisant en sorte qu'en appuyant sur SHIFT on attire les asteroides (à conserver à une distance respectable pour ne pas qu'ils heurtent la coque du vaisseau). On pourra rajouter a loisir toute sorte de pièges (mini trous noirs qui attirent le vaisseau, vaisseaux ennemis, astéroides "fous"...), qu'en pensez-vous ?

Pour le "scénario" je propose un truc du genre :

"Vous appartenez à un groupe de nettoyeurs recrutés pour dégager des zones de l'espace où doit passer la prochaine autoroute hyperspaciale.
Un travail dangereux par nature, les asteroïdes sont instables, des individus peu recommandables de tous poils cherchent à vous mettre des batons dans les réacteurs et quelques surprises comme seul le cosmos sait en préparer peuvent survenir à n'importe quel moment."

#24 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:31 PM

mdr le but du jeu :mrgreen:
De mon côté j'ai rajouté un début de gestion des vies et de l'énergie. Chaque objet (vaisseau, méchant et tir) a une propriété "energie" et une "dégats". Quand ya collision entre deux objets, on retire les dégats de l'un à l'énergie de l'autre. Le HUD se rafraichit toutes les 500 ms.

#25 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:31 PM

mince je suis mort et j'ai pas de bol, y'as pas de bouton pour recommmencer ;-)


a+

#26 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:32 PM

c'est moi ou ça part en cacahuète ?

très bon le scénar :)
ça change un peu du panpanpantchiouwtiouwPRRRrrrrhh habituel

chapeau à tous au fait, c'est bien chouette cette émulation.

je pensais du coup tester les collisions entre cailloux (style asteroid) et les subdiviser en cas de choc ( + de caillloux = plus de boulot) tout ce qui est pièges, obstacles ça devrait aller mais les ennemis ça va être une autre paire de manches :/

plus on monte en complexité, plus il faut faire des classes... moi je dis ça ...

#27 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:33 PM

Salut à tous,

Citation

c'est moi ou ça part en cacahuète ?


Je suis le sujet depuis le début et effectivement, ça commence à partir en sucette votre histoire. Mais au moins, ça donne un tuto super original.

Vendredi dernier (avant que je parte en Week End), ça ressemblait à un Shoot traditionnel, et ce matin, je reviens, et c'est devenu

Citation

"Vous appartenez à un groupe de nettoyeurs recrutés pour dégager des zones de l'espace où doit passer la prochaine autoroute hyperspaciale.
Un travail dangereux par nature, les asteroïdes sont instables, des individus peu recommandables de tous poils cherchent à vous mettre des batons dans les réacteurs et quelques surprises comme seul le cosmos sait en préparer peuvent survenir à n'importe quel moment."


Franchement, c'est du tout bon les gars.

Si j'ai le temps ce midi, j'essaierai d'apporter ma petite pierre à l'édifice (dans la limite de mes possibilités relativement limitées).

A+

Joni

#28 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:33 PM

Salut Joni,

Welcome on board, comme on dit ;-)
Non çà part pas en sucette :mrgreen: mais autant s'amuser un peu et faire quelque chose de différent, si on peut eviter de faire un énième shoot traditionnel autant laisser libre recours à notre imagination on verra bien où çà nous méne.

J'ai commencé le panneau d'intro avec les options, la redéfinition des touches et le scénario, je posterai çà ce soir si j'ai le temps de le finir.

Bon courage à tous et amusez-vous bien

#29 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 30 July 2009 - 20:33 PM

je me permet de modifier un peu le texte d'intro

Citation

Dans une galaxie lointaine, tres lointaine...
Bonjour Starfighter, vous avez été recruté par la ligue stellaire pour dégager des zones de l'espace où doit passer la prochaine plus grande autoroute du bras occidental de la Galaxie.
Un travail dangereux par nature, les asteroïdes sont instables, des individus peu recommandables de tous poils cherchent à vous mettre des batons dans les réacteurs et quelques surprises comme seul le cosmos sait en préparer peuvent survenir à n'importe quel moment.

faudrait essayé de rajouter d'autres références

#30 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:15 AM

lol je vote pour.

#31 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:16 AM

pour info y'en a deja 3 ;-)

a+

#32 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:16 AM

Attention quand même à une chose, pour le moment on se dirige vers un truc original, trop de références peuvent tuer le principe et nous imposer des choses (la fleur de la mort pour Starfigther par exemple). Usons-en avec parcimonie ;-)

#33 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:16 AM

Citation

(la fleur de la mort pour Starfigther par exemple)


j'y pensai justement :mrgreen:


mais tu as raison ;-p

#34 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:16 AM

salut
j'ai changer le shift pour attirer les asteroid

et enlever le selectable des champs texte (pas bien de les laisser )

sinon je me disais qu'il serai bien d'essayer dans ramener un max en une fois

genre tu en ramene 1 ca te fais 10 point
en ramene 2 ca te fais 100 point
en ramene 3 ca te fais 1000 point

car si tu essaye de tous les les prendres dans les eclairs de nicop cela devians pas mal chaud ;-)

et du coup le vrai highscore serai le plus grand nombre d'asteroide ramener en une fois
a+

#35 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:17 AM

Salut,

J'ai failli poster mes modifs en même temps que toi Pao :mrgreen:

J'ai repris ce que tu avais fait, j'ai rajouté :
- Un début de panneau d'intro avec trois boutons "Commandes", "Options", "Jouer" (devinez à quoi ils servent .... )
- Je n'ai pas repris le code de la redéfinition des touches pour le moment, je l'ai laissé "in game".
- J'ai également rajouté un petit bout de code pour revenir au panneau d'intro une fois morts et stoppé la mise à jour du HUD a ce moment.
- Pour le test j'ai descendu les vies à 1.

Pour essayer de ne pas trop alourdir les différentes parties j'ai créé une nouvelle frame sur laquelle je pose le panneau d'intro isolé çà permettra de le travailler indépendament du reste, le jeu est en frame 2. Si çà vous gênes on peut changer :)

Sinon après un petit test je pense qu'il faudrait soit ralentir la vitesse du vaisseau, soit augmenter le magnétisme des éclairs, là on perds les cailloux trop vite.
Peut être pourra t'on s'en servir pour augmenter le niveau de difficulté, plus les niveaux s'enchaînent et plus les aimants faiblissent... (à suivre)

#36 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:17 AM

Wouaw! C'est s^r que c'est plus original qu'un basique shoot spatial!
C'est de l'AS2 ou AS3?
je vais essayer d'apporter ma ptite contribution, mais je promets rien surtout si c'est de l'AS3...

#37 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:17 AM

Et voilà, j'ai ajouté moi aussi mon grain de sel ;-)
Le truc c'est le contrôle à la souris!

La souris remplace tous les contrôles, sauf le 2e tir (écarter les rochers)
Pour tirer, suffit de cliquer,
La vitesse est égale à l'éloignement du curseur,
La rotation est telle que le vaisseau "regarde" le curseur
Testez putôt, c'est très facile à prendre en main.
Vous inquiétez pas, le vaisseau s'arrête si le curseur est près de lui, ça permet d'avoir assez de place pour viser à l'arrêt.
Donc mettez le curseur à 2cm du vaisseau maximum et attendez qu'il ralentisse si vous voulez vous arrêter.

Donc les avantages sont:
-une bonne maniabilité
-moins de touches à retenir
-une plus grande précision de l'angle (rotation du vaisseau) et de la vitesse

Ce dernier point est assez important puisque quand les rochers sont éloignés,
impossible de les viser avec le clavier, car la vitesse de rotation est trop élevée,
et si on a réduit, c'est moins maniable...
Maintenant, plus de problèmes de visée, pareil pour la vitesse, même si c'est moins problématique.

"Plus maniable, plus maniable, c'est vite dit!" doivent penser les fans de clavier!
C'est pourquoi j'ai ajouté une option au menu de config des contrôles : MOUSECONTROL
Désolé, j'ai pas pu faire mieux pour le moment:
Pour activer le Mouse Control, il faut appuyer sur <espace> quand il demande la touche.
Pour le désactiver, il faut appuyer sur une autre touche que <espace>.

Bon, j'espère que ça à fait avancer le jeu, sinon c'est pas grave, on repart de la version 9...

#38 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:18 AM

Bonjour Hugo,

Merci de ta participation.
Personnellement je préféres jouer au clavier, je trouve que la souris fait perdre de sa dynamique.
Il faudrait néanmoins conserver cette option dans la configuration des touches pour ceux qui souhaitent jouer avec la souris.

Par contre tu as du reprendre une ancienne version car le principe du jeu mis ne palce à changé, le but est à présent d'attirer les asteroides pour les déplacer, dans ta participation c'est encore l'inverse, peux-tu essayer d'adapter çà à la dernière version proposée avec une option pour choisir la souris ou le clavier ?

Merci.

#39 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:18 AM

Salut à tous,

Je suis d'accord avec Mr Spi sur la préférence clavier plutôt que souris pour le déplacement du vaisseau. Mais c'est vrai que laisser le choix à l'utilisateur est plutôt une bonne idée.

En attendant, j'ai rajouté un "trou noir" pour pouvoir "jeter" les astéroïdes.

Quand vous commencez une partie, juste en dessous de vous se trouvent 2 bandes rouges qui tournent; ce sont les limites du trou noir de récupération des astéroïdes. Avec les grappins magnétiques, déposez les astéroïdes à l'intérieur du trou noir et vous gagnez 20 points.

Et je suis en train de voir pour rajouter une sorte de petite indication de la direction du trou noir quand il est hors champ. Ça viendra peut être ce soir ou demain matin.

Par contre, désolé mais je ne peux pas enregistrer mes sources en dessous de flash8 (CS3 oblige) mais si quelqu'un possède une v8 de Flash, merci de réenregistrer ma source au format MX (car il me semble que Mr Spi utilise la version MX).

A+

Joni

#40 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:18 AM

Hello Joni,

Well Done pour les "trous noirs".

Pour les version MX je m'arrange avec une version demo de Flash 8 que je vais de toute façon finir par acheter pour pouvoir suivre.
A mon avis MX va pas suffire pour les besoin des évolutions du jeu, je vais faire avec la version demo pendant un moment, donc ne vous embêtez pas à enregistrer pour MX :mrgreen: , la base à présent sera la version 8.

Hugo, je te laisses gérer l'insertion du choix des commandes dans le menu d'options, et la mise à niveau en fonction de la dernière version de Joni, bon courage à toi ;-)

Sinon comme le disait justement Nicop, il va falloir bientôt passer aux classes si on veut obtenir des résultats, je propose donc la chose suivante : Le tutorial pour débutant est largement suffisant dans sa construction actuelle pour permettre aux débutants de comprendre et de s'en servir pour faire des jeux complets, je propose donc que nous passions à la vitesse supérieure en utilisant des classes, disons pour un niveau "intermédiaire".

Si tout le monde est ok, je propose de réécrire le niveau débutant dès que possible de la même manière que j'avais commencé ce tuto, c'est à dire avec les explications détaillées, puis que nous attaquions le niveau "intermediaire" qui sera réécrit par la suite (enfin si moi même j'arrive à suivre :mrgreen: ).

Le projet prendra donc à présent le nom de "...etape_2..." pour que tout le monde se repére dans le changement.

Enfin je tiens à remercier tous les participants quel que soit leur degrès d'implication, je trouve ce genre de petit "défi" très amusant et très instructif, bravo à tous c'est du bon boulot et c'est fun

Pour la bonne tenue du "projet", je propose que chacun annonce ses intentions de mises à jour, ceci pour éviter que les MAJ se croisent et qu'on soit obligé de réassembler les différentes parties. Et à ce propos je me propose pour assembler ces parties si le besoin se fait sentir (genre deux maj postée en même temps) cependant je ne sais pas si je serait capable de suivre jusqu'au bout, ce sera donc un "poste" a faire évoluer.

Je vais pour ma part attaquer la sonorisation de l'ensemble en rajoutant des petits bruitages par-ci par là, je me débrouillerai pour que l'ensemble de la gestion du son soit indépendante de manière à faire l'intégration plus facilement.

Merci à tous et bon courage.

#41 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:18 AM

Bon, j'ai rajouté la flèche qui indique où se trouve le trou noir. C'est plus facile pour se repérer.

Il faudrait aussi que j'améliore un peu la disparition des astéroides dans le trou noir parce que c'est pas génial du tout (collisions encore possibles, ralentissements si trop d'astéroides en même tps dans le trou noir, ...) et que je commente un peu mon code.

Au pire je mixerai mes dernières modifs avec celles d'Hugo.

Sinon, pour ce qui est du passage aux classes, je n'en ai jamais utilisé dans Flash (je connais la POO donc je devrais pouvoir suivre au début) mais cela m'interresse fortement afin d'apprendre.

VERS L'ETAPE 2 ET AU DELA !!!

A+

Joni

#42 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:19 AM

Etape V2 et au dela

salut

un debut de classes
c'est vraiment juste un debut ;-)

le fichier "New Project" viens de "flash develop" que je vous encourage a télégcrager

sinon:
en gros la biblio reflete l'arborescence des classes
quand je crée un clip "toto" je le place dans un dossier "toto" avec comme nom de clip "-toto"
comme ca je vois directement dans la biblio quelle est le clip principal du dossier

j'ai fait une classe "main" qui pour le moment ne sert pas, mais qui au final servira a revennir a l'ecran principal

Epliquation des classes:
bon a savoir:
j'ai pas trop d'XP dans la conception, donc c'est une facon de voir les choses.
de plus je code tout sur une seule frame, au final c'est plus simple.
si ce que j'ai fait conviens je le commenterai.

sison:
en general je fait un clip sur la scene que je nomme "-"main" que je lis a la classe "classe.Main"
c'est le point de depart du truc
comme il peut y avoir d'autre truc dedans apres, je ne met pratiquement rien dedans
au mieux la classe "main" ecoute des evenements pour les redispatcher
mais la classe main reste le point de depart, c'est par la qu'il faut commencer pour comprendre le truc, pour le comprendre




pour le moment y'a 3 packages: controller, intro, et starfield

la classe Starfield:
elle va gerer le jeux, le deplacement des objets, le decompte des points..., mais pas le choix des touches et autres choses qui pourrait venir par la suite, et qui ne resterai que des variables qui pourrait changer
elle va donc par exemple gerer le vaisseaux, les astroides, les deplacement des divers truc qui doivent bouger, les collisions..
mais elle ne vas pas gerer le choix des touches, le choix des skin (si on le gere, pourquoi pas)...


la classes Intro:
elle va gerer tout ce qui concerne l'intro
le choix du controller (clavier, souris, wiimote(avec la wiimote ca doit etre tripant)... )
l'affichage du texte d'intro...

la classes controller:
elle definni le mode de control du jeux
toutes les classes de controller doivent etendre Controller et emmettre un evenement "ONCHANGED"
apres c'est a la classe Starfield de gerer l'evenement (je trouve pas ca top mais bon c'est jusqte un debut)



apres comme je l'es dis, je debute en conception, donc si y'en a qui voit mieux, ils sont les bienvenues ;-)
mais je pense qu'il est bien de ce fixer des regles de prog pour que l'in s'y retrouve


ainsi pour moi une classe de base:
//{IMPORT
les imports a faire
//}
class Toto
{
       
        //{ VARIABLES
        les variables privées
        //}
       
        //{ PROPRIETES
        les variables public ainsi que les getter/setter et les evenements
        //}
       
        //{ CONSTRUCTEUR
        public function Toto()
        {
               
        }
        //}
       
       
        //{ METHODES
        les fonctions de la classe
        //}
       
}

 
ainsi on sait ou se trouve chaque chose


a+

#43 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:20 AM

un petit up

#44 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:20 AM

Hello,

Merci Pao, çà (re)prend forme

Un petit rappel pour ceux qui souhaitent suivre mais n'y connaissent rien aux classes (c'est peut etre l'occasion de s'y plonger) :

- Introduction aux Classes
- Heritage et Classes

La première partie de l'étape 2 va donc nous obliger à réécrire tout le programme pour utiliser les classes, ce que Pao à commencé à faire, merci à lui.

#45 freyskeyd

  • Members
  • PipPipPipPipPipPipPipPip
  • 944 messages

Posté 31 July 2009 - 09:20 AM

c'est sympa bravo les mecs ( et les filles )



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)