Forums Développement Multimédia

Aller au contenu

[battle] Un jeu ça vous tente ?

CODE

45 réponses à ce sujet

#1 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 07 January 2012 - 23:02 PM

Bonjour, un petit jeu ça vous tente ?

Image IPB

Tester le jeu : http://spi4.free.fr/...ircuit_spi.html
Télécharger les sources : http://flash.mediabo...post__p__849577

Pour la faire courte, l’autre jour j’ai eu envie de tester quelques méthodes simples pour faire un jeu de course où le circuit se générerait aléatoirement. J’ai donc monté un petit test, mais je n’avais pas envie de construire tout le jeu qui va autour. Puis j’ai croisé Lilive qui a jeté un œil et s’est mis à son tour à optimiser, simplifier, nettoyer, corriger,… Puis Draad, qui s’est dévoué pour s’attaquer aux graphismes…

Finalement je me suis dit qu’on pourrait ouvrir notre petit jeu de « cadavre exquis » à tous ceux qui ont un moment à perdre mais pas forcément l’envie, les idées ou les compétences pour construire un jeu complet. …

La source est là, ouverte à tous, que celui qui le souhaite ajoute ce qu’il a envie, il n’y a pas d’objectif, pas de but à atteindre autre que de s’amuser, ou de trouver là un environnement pratique pour faire quelques tests.

Faisons ça sous forme de jeu pour qu’il y ait au moins un fil directeur, et comme tout jeu comporte des règles, si vous voulez participer et faire avancer le schmilblick il vous faudra les respecter ;-)

Les règles du jeu
Le jeu est ouvert à tout le monde, que vous soyez débutant ou pas, graphiste ou codeur, l’objectif est que tout le monde puisse s’amuser et en apprendre d’avantage en voyant comment d’autres ont résolu tel ou tel problème. On ne sait pas à l’avance où cela va nous mener, ni même si ca va un jour créer un truc fini, la seule règle d’or c’est de faire en sorte que tout le monde puisse jouer, nous allons devoir nous astreindre à respecter quelques règles simples.

1 – Compatible pour le plus grand nombre.
Pour que tout le monde puisse jouer il faut se caler sur le plus bas niveau, donc la version CS3 du logiciel (Flash Player 9). Ce qui implique que vous n’utilisiez pas des choses qui n’existent que sur les versions ultérieures.

Si vous ne pouvez pas enregistrer pour CS3, nous nous chargerons de faire la conversion.

2 – IDE, Classes, POO ?
La base c’est de l’IDE, ce qui permet aux graphistes et aux débutants de jouer. Mais cela ne vous empêche pas d’utiliser quand même quelques classes du moment que vous le précisez dans la source, une seconde version avec des fichiers AS séparés est fournie, ceci devrait permettre à ceux qui n’ont pas Flash de jouer aussi. J’essaierais autant que faire se peut de mettre à jour les deux versions simultanément en cas de modifications.

3 – Commentaires obligatoires !
Imposez-vous de bien commenter toutes vos modifs pour que tout le monde puisse suivre, si le concept est complexe à comprendre et que vous avez du temps et l’envie, faites un mini tuto au moment ou vous postez vos modifs.

4 – Signaler les choses sur lesquelles vous travaillez.
Si vous avez une idée faite le savoir avant de travailler dessus, inutiles de bosser séparément sur les mêmes choses alors que vous pouvez travailler en commun. Je tiendrais un tableau de récap des travaux en cours et des personnes qui s’en chargent.

5 – Droits et propriété intellectuelle.
Tout ce que vous ajoutez ou publiez dans ce thread doit être totalement libre de droits. C’est un travail collaboratif sans aucune vocation commerciale, personne n’a et n’aura la propriété du jeu, c’est totalement libre ! Les participants sont bien sur cités et « ont droit au générique » comme on dit.

6 – S’amuser avant tout.
Sinon … bah c’est pô drôle :-)

Bon ça suffit pour les règles de bonne conduite, présentons un peu les gens.



Participants et des travaux en cours

Monsieur_Spi
[indent]Chargement des tuiles externes
Génération d’un circuit aléatoire
Gestion des commandes
Scrolling simple
Collision simple par getPixel
Scrolling du fond
Jauges et compteurs
[/indent]

Lilive
[indent]Scrolling simple
Création d'une "piste de verre" (collisions via des color maps)
Collision complexe via getPixel et des maths (en cours)
Optimisation et corrections
Comportements paramétrables des véhicules
[/indent]

Draad
[indent]Création graphique des tuiles du circuit (en cours)[/indent]

Thoutmosis
[indent]Partie multijoueur en réseau (en cours)[/indent]

Nathaly
[indent]Redéfinition des touches par le joueur[/indent]




Quelques idées si vous souhaitez jouer mais ne savez pas quoi faire.

[indent]Gestion du fond du jeu (parallaxe, scrolling, effets….)
Ajout de sons et musiques (player mp3 externe ou interne, composition, arrangements)
Ajout d’effets graphiques
Gestion de bonus/malus
Checkpoints
Multiplication des types de tronçons possibles
Ajout d’adversaires (IA et gestion)
Gestion des niveaux (augmentation de la longueur du circuit en fonction du niveau)
Création d’un HUD et effets associés (points, vie, bouclier, etc…)
Création d’un mode multijoueur
Chargement (loading)
Menu de démarrage du jeu
Animation de début et de fin
Ecriture d’un scénario
Pouvoir choisir son véhicule selon divers types disponibles
Malus et bonus en fonction du type de véhicule choisi
Création de plusieurs vues au choix (First Person, Top Down, Iso, …)
Gestion du tir et des ennemis
Enregistrement des scores
Remplacer la gestion par EnterFrame par une gestion basée sur le temps
Optimisation générale[/indent]

Ce ne sont que des pistes possibles, vous n’êtes pas obligé de les suivre si vous avez d’autres idées.

Notez également que vous pouvez aller piocher dans les tutos du Wiki de Mediabox ou ailleurs tant que vous linkez vers le tuto d’où vous tirez vos sources. Gardez simplement en tête qu’il faut que les autres puissent suivre, donc pensez à donner des infos claires et au besoin détaillées. Notez qu’il existe déjà souvent un tuto qui détaille un point que vous n’avez pas envie d’expliquer, linkez !

Voilà c’est à peu près tout ce que j’avais à dire, mais il me reste un peu de boulot, il faut à présent que je vous rédige un petit tuto de prise en main qui vous explique ce qu’on à commencé à mettre sur pied, histoire pour que vous partiez sur de bonnes bases.


Télécharger les sources des différentes versions : http://flash.mediabo...post__p__849577
Tester la dernière version du jeu : http://spi4.free.fr/...ircuit_spi.html

#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 07 January 2012 - 23:04 PM

Etape 1 – La base d'un jeu de course

L’idée de départ était de créer un petit code qui va générer aléatoirement un circuit cohérent à partir d’un certain nombre de tronçons de route, puis d’ajouter un véhicule et de se débrouiller pour gérer un scrolling et des collisions de la manière la plus simple et optimisée possible, y compris dans l’écriture du code.

1 – Rappel pour les débutants

Vous devrez connaître les bases de la programmation si vous voulez suivre, à lire avant toute chose :

[indent]http://ressources.me...latform/debuter
http://ressources.me...m/programmation [/indent]

N’hésitez pas non plus à aller consulter la doc à propos d’une instruction que vous ne connaissez pas avant d’appeler au secours, sur Flash il vous suffit de sélectionner l’instruction et d’appuyer sur la touche F1, vous pouvez également consulter l’aide en ligne ici : http://livedocs.adob..._fr/UsingFlash/


2 – Comment lire et utiliser la source ?

Comme nous travaillons dans l’IDE, on va essayer de se tenir à une organisation pratique. Pour cela jetez un œil à ce paragraphe : http://ressources.me...re_du_programme

Ce n’est pas idéal et comporte quelques défauts (surtout si vous utilisez le débogueur), mais ça permet de bien séparer chaque partie et de les repérer rapidement. Autant que faire se peut, créez un nouveau calque quand vous ajoutez quelque chose.

Les règles à suivre sont :

[indent]Tout le code à la racine du projet (ou dans des classes)
Pas de code éparpillé dans des clips
Pas d’objets posés à la main sur la scène
Répartition du code sur plusieurs calques
Regroupement des calques dans des dossiers [/indent]

Pour ceux qui souhaitent utiliser des classes vous n’êtes bien sur pas concernés par cette structure, faites juste vos imports en début de programme et liez les objets comme vous avez l’habitude de le faire, seule la classe de document n’existe pas puisque nous utilisons l’IDE comme base.

Au niveau de la syntaxe utilisée, pour les variables, lorsqu’elles sont internes à une fonction elles sont simplifiées au maximum (en général une seule lettre) car il est facile de se rappeler à quoi elle correspond au sein de la même fonction et cela simplifie grandement la lecture des formules. A contrario si une variable est globale (donc accessible partout) on évite ce genre de minimalisme car cela serait source de problèmes et on ne s’y retrouverait plus, on lui donne donc un nom plus représentatif. Ceci est une mauvaise habitude de Monsieur_Spi et pas une nomenclature officielle ;-)

C’est parti pour les explications techniques.


3 – Déclaration des variables

On va réunir à un seul endroit la déclaration de toutes les variables globales et de tous les objets utiles. On centralise tout ce qui doit pouvoir être accessible à tout moment. Cela nous permet de retrouver rapidement une variable globale sans avoir à aller fouiller dans le reste du code.

Pas grand-chose à dire, ce sont des variables et des objets qu’on va utiliser dans le programme, on va revenir souvent intervenir sur ce calque.


4 – Chargement des textures

On commence par charger les textures utiles pour le jeu, ici les tronçons de route.
Utiliser des sprites externes est plus pratique pour les graphistes qui n’auront pas à ouvrir le programme pour modifier le look du jeu.

Pour les tutos sur le chargement d’éléments externe voyez :

[indent]Le tuto de Goabonga : http://ressources.me...ources_externes

Celui de Tannoy : http://ressources.me...rger_images_swf

Ou le chapitre consacré du livre de Thibaut Imbert : http://ressources.me...ntenu.pdf#page1[/indent]

La petite astuce en plus ici est de passer par un tableau qui liste toutes les tuiles disponibles et une fonction qui les charge les unes après les autres. Pour éviter des répétitions inutiles on utilise en boucle la même fonction et le même loader, la fonction s’arrête et lance la création du circuit lorsqu’il n’y a plus de textures à charger. Chaque texture chargée est placée dans un nouveau tableau de stockage qui nous servira par la suite.


5 – Génération automatique du circuit

Là il n’existe pas de tuto tout prêt alors causons un peu.
La base est assez simple à comprendre, on dispose d’un nombre de pièces différentes :

[indent]Ligne droite horizontale
Ligne droite verticale
Virage haut droite
Virage haut gauche
Virage bas droite
Virage bas gauche[/indent]

Et d’une direction de départ qui va déterminer dans quel sens on commence à construire le circuit.

Chaque tronçon du circuit est représenté par un objet qui contient les informations concernant la pièce utilisée, sa direction, son type, sa position sur X et Y, et la surface qu’elle occupe.

On passe par un objet plutôt que par un tableau car Object (voir : http://livedocs.adob...fV3/Object.html ) est de niveau supérieur à Array (voir : http://livedocs.adob...efV3/Array.html ) , et qu’il permet de créer des tableaux associatifs, plus simple et léger lorsqu’on n’a pas de tri à effectuer sur les données d’un tableau et également plus proche de ce qui se fait en POO.

A chaque fois qu’on crée un nouveau tronçon on le place dans un grand tableau nommé « track », c’est le tableau de référence qui servira à tracer le circuit au final. Si vous n’êtes pas à l’aise avec les tableaux allez jeter un oeil au tutoriel de Nathaly ici : http://ressources.me...alites/tableaux

Fonctionnement

On commence par poser une première pièce qu’on place au centre de l’écran.
On tire aléatoirement le type de la pièce (ligne droite horizontale, ou ligne droite verticale).
En fonction du type de la pièce choisi on choisi une direction (haut ou bas, droite ou gauche).
Puis on crée une boucle sur le nombre de pièces souhaité (ici 100 pour commencer).
Pour chaque nouvelle pièce on regarde le sens de la pièce précédente.
On peut alors déterminer selon le sens quel peuvent être les pièces suivantes.

Par exemple, si le sens de la pièce précédente est « droite ».

sens vers la droite

Choix possibles :

horizontale
virage bas gauche
virage haut gauche

Le sens de la pièce précédente nous permet de savoir quel type de pièce nous pouvons placer ensuite, pour cela on se sert d’un tableau (« tilesPossibles ») comprenant tous les types de pièces possibles en fonction du sens de sortie de la précédente. Reste à présent à déterminer le sens de cette nouvelle pièce, et ce qui nous intéresse plus précisément c’est le sens de sortie de cette pièce.

On ne sort pas d’un virage dans le même sens que par lequel on y est entré. Pour trouver le sens de sortie des virages on utilise un tableau (« prochainSens »).

Enfin, il reste à déterminer la position de la pièce dans le circuit, nous allons encore utiliser un tableau (« positions ») qui nous donne une direction pour chaque axe que nous multiplions par une valeur de référence (« norme ») qui correspond à la taille de chaque pièce.

Dès qu’une pièce est créée on ajoute l’objet au grand tableau « track » qui contient les références de toutes les pièces et qui nous servira à tracer les portions de circuit.

Lorsque toutes les pièces sont créées on lance le jeu (« startGame »).

// Génération du circuit
function creeCircuit():void{
       
        var P:Object;                                                   // tuile
        var R:Rectangle;                                                // zone concernée par la tuile
        var X:int = -norme*.5;                                          // position x
        var Y:int = -norme*.5;                                          // position y
        var S:int;                                                      // sens
        var T:int;                                                      // type
        var C:int;                                                      // choix de la prochaine tuile
        var i:int;                                                      // pointeur
                       
        for (i; i<long; i++){                                           // boucle sur toutes les tuiles
               
                if(i){                                                  // si ce n'est pas la première tuile
                        X = P.x;                                        // position sur X
                        Y = P.y;                                        // position sur Y
                        S = P.s;                                        // sens de sortie
                }
               
                C =     Math.random()*tilesPossibles[S].length;         // choix aléatoire de la tuile à créer
                T =     tilesPossibles[S][C];                           // type de la tuile à créer
                X +=    positions[S][0]*norme;                          // position sur X type de la tuile à créer
                Y +=    positions[S][1]*norme;                          // position sur Y type de la tuile à créer
                S =     prochainSens[S][C];                             // sens de sortie de la tuile à créer
                R =     new Rectangle(X,Y,norme,norme);                 // zone occupée par la tuile

                track.push(P = {x:X, y:Y, t:T, s:S, r:R});              // crée et aujoute la tuile à la liste des portions de circuit
        }
                       
        startGame();                                                                                                                    // le circuit est prêt, on lance le jeu
}
 


Quelques petites particularités sont à noter dans la l’écriture de la fonction :

for (i; i<long; i++){}

Normalement on écrirait :

for (i=0; i<long; i++){}

Mais, comme par définition lorsqu’on déclare un entier (« int ») sa valeur est « 0 » cela ne sert à rien de le redire juste derrière, on peut donc se passer du « i = 0 » et écrire directement « i ».

if( i ){}

Là c’est pareil, normalement on écrirait :

if( i != 0 ){}

Là c’est une petite astuce à connaître, si « i = 0 » alors c’est que « i = rien » (attention ce n’est pas tout à fait vrai, mais on va faire comme si… en fait il y a une conversion automatique qui est faite en arrière boutique), or si « i = rien » alors on peut dire « si i existe », donc pour vérifier que « i » renvoie une valeur différente de « 0 » il faut juste vérifier que « i existe ».

Et enfin voyons d’un peu plus près cette chose bizarre :

track.push( P = {x:X, y:Y, t:T, s:S, r:R} );

Une écriture peu courante qui consiste tout simplement à créer l’objet au même moment où on l’ajoute au tableau principal. Deux opérations que normalement on effectue l’une après l’autre de cette manière :

P = {x:X, y:Y, type:T, sens:S, rect:R} ;
track.push(P);

Que l’on peut traduire par :

P est égal à un objet contenant {}.
Ajoute P au tableau track.

Et si on traduit le code tel qu’il est écrit plus haut on obtient :

Ajoute au tableau track l’objet P contenant {}

Cela ne change donc rien, mais est plus court à écrire.


6 - lancement du jeu et contrôle principal

Une fois les variables globales définies les textures chargées et le circuit généré, on ajoute les objets d’affichage (circuit et joueur), et on lance les écouteurs qui servent à contrôler le jeu.

Notez que le jeu est entièrement contrôlé par trois écouteurs, deux qui s’occupent des périphériques d’entrée, ici le clavier, et un (« main ») qui regroupe toutes les fonctions qui doivent tourner en permanence. C’est pratique car on sait tout de suite qu’est ce qui tourne à quel moment.


7 – Gestion des touches

On va faire simple, si la gestion des touches en AS3 vous pose un problème allez jeter un œil sur le tutoriel de Billyben, c’est par ici : http://ressources.me.../gestion_touche

Notez qu’on se sert de variables pour indiquer quelle touche est enfoncée ou relâchée, c’est à cause de la gestion des événements clavier en AS3 qui a tendance à ne prendre en compte que le premier appuis puis d’attendre quelques temps avant de commencer la répétition de la touche, pour plus d’infos lisez le chapitre consacré à la gestion du clavier du livre de Thibaut Imbert : http://ressources.me...ivite.pdf#page1


8 – Déplacements et collisions

On utilise deux touches (droite et gauche) pour faire pivoter le vaisseau.
Et deux touches (haut et bas) pour gérer la poussée (propulsion).

On commence par calculer la vitesse acquise en fonction de la poussée.
On la limite à une vitesse maximum pour plus de cohérence.

En fonction de la vitesse acquise, on détermine la position à l’aide d’un peut de trigo (voir les bases mathématiques expliquées par Didouche ici : http://ressources.me...inus_et_cosinus )

Puis on teste la collision avant de permettre au véhicule de se déplacer.

Attardons-nous un moment sur la gestion de collisions par couleur de pixels. Lilive est en train de reconstruire cette partie pour nous offrir quelque chose de plus réalistes, donc pour le moment on va faire simple et se servir d’un point pour faire nos tests, si il y a collision le véhicule repart en arrière.

Dans les jeux de couse il est difficile de gérer les collisions à l’aide d’une grille de référence qu’on écrirait à la main, car le tracé du circuit est plus ou moins libre, tout en courbes, et qu’il doit rester assez précis pour que ce soit réaliste. Et les collisions les plus réalistes sont effectuées au pixel près.

Il faut simplement avoir conscience qu’un Bitmap est un tableau de pixels, il peut donc servir directement de grille de référence si on utilise les informations fournies par chaque pixel du dessin comme sa couleur, répartie sur 4 canaux (ARVB : alpha, rouge, vert, bleu), et sa position au sein de la grille (X,Y).

Théoriquement, à partir de la couleur d’un pixel on peut déterminer quel type de terrain le véhicule est en train de survoler. Mais le terrain qu’on affiche peut avoir une grande variété de couleurs si on souhaite des graphismes un peut réalistes, c’est pourquoi on utilise généralement une copie de ce terrain qu’on limite à quelques couleurs seulement pour tester les collisions, à chaque type de terrain on fera correspondre une unique couleur.

Techniquement, on dessine donc une version du terrain en couleurs réelles qui sert pour l’affichage, et une autre avec une palette de couleurs limitées qui sert pour les collisions. A partir de là on peut interpréter les couleurs survolées de différentes manières afin de faire réagir le véhicule : collision, sol glissant, route, bosse, eau, bonus, turbo, etc…

Voici quelques exemples simples :

http://swingpants.co...ur-maps-part-1/
http://www.xnadevelo...dnottaken.shtml


Dans notre cas nous nous en sommes passé en utilisant directement la transparence des pixels des tuiles utilisées pour l’affichage. C’est plus simple et il faut vous laisser de quoi jouer aussi, ainsi vous aurez tout le loisir de vous pencher sur ce petit exercice.

Les tuiles sont au format PNG avec une transparence, si le véhicule rencontre un pixel transparent on considère qu’il est hors de la route. Ce système ne nous laisse pas beaucoup de liberté, impossible par exemple de créer une route en verre légèrement transparente, mais comme nous l’avons vu plus haut, c’est un souci qui peut se régler facilement avec des color maps, a vous de jouer...

Nous détaillerons plus tard comment se gère l’affichage, pour le moment contentez vous de savoir que le circuit affiché est un Sprite (AS3, voir la définition : http://help.adobe.co...lay/Sprite.html ) donc un objet qui se comporte comme un clip mais qui n’a pas de scénario.

Or nous avons vus que pour détecter la collision par pixel il nous faut un BitmapData et non un Sprite. On va donc créer un BitmapData d’une partie circuit en temps réel à l’aide de la méthode « draw » de la classe « BitmapData » (voir : http://livedocs.adob...html#draw%28%29 )

Il est inutile de retracer tout le circuit, nous n’avons besoin qu’une petite zone autour du véhicule car c’est à cet endroit que les tests de collisions peuvent avoir lieu.

En code cela se traduit par :

// Dessin des pixels sous le vaisseau
hitZone.fillRect(hitZone.rect, 0x00000000);     // rempli la zone avec une couleur transparente
matrice.tx = rayonTest - X;                     // position x de la zone à remplir
matrice.ty = rayonTest - Y;                     // position y de la zone à remplir
hitZone.draw(circuit, matrice);                 // rempli la zone avec une copie du circuit


Pour le test de collision on utilise la méthode getPixel32 de la classe BitmapData (voir : http://livedocs.adob...etPixel32%28%29 ) qui nous permet de récupérer la couleur du pixel à une position définie.

On utilise un opérateur binaire (hop un petit tutoriel de Thoumosis sur les opérateurs binaires : http://ressources.me...ateurs_binaires ) pour isoler le canal alpha du pixel, puis on regarde si cette valeur est inférieure au maximum possible (255), si c’est le cas c’est que le pixel à cette position est transparent, il y a donc collision et on inverse la vitesse du véhicule pour le faire reculer.

// Test de collision
if ((hitZone.getPixel32(rayonTest,rayonTest)>>24 & 0xFF)<255) {  
        Px -= Math.cos(angle)*vitesse;
        Py -= Math.sin(angle)*vitesse;
        vitesse = - vitesse*.5;                
} else {       
        Px += X;       
        Py += Y;               
        vitesse = V;           
        angle = A;             
}

Notez la petite particularité utilisée lors de la collision, le véhicule revient en arrière sans tenir compte des informations envoyées par le clavier, cela nous permet de nous assurer que le véhicule reste bien sur la route. Si le véhicule percutait le bord de la route dans un angle, ou de façon assez tangente, et que le joueur actionnait les touches du clavier à ce moment, il pourrait arriver que le rebond l'amène encore en dehors de la route. Pour être certain que le rebond va amener le joueur sur la route, il ne faut pas utiliser les valeurs du déplacement (vitesse et angle) modifiées par le clavier, mais les valeurs du déplacement telles qu'elles étaient avant la modification due au clavier. Comme ceci on ramène le véhicule à une position qu'il a déjà prise, et qui a donc déjà été testé comme étant "de la route".

Petit pause du côté des effets spéciaux du véhicule.


9 – Effets spéciaux

Techniquement le véhicule est un petit sprite indépendant affiché au dessus du circuit et qui ne bouge jamais du centre de l’écran, à l’affichage c’est le circuit qui se déplace, pas le véhicule, il n’y a donc pas besoin d’effectuer d’opérations particulières dessus à part l’orienter dans la bonne direction.

Toutes les autres opérations graphiques effectuées sur le véhicule, comme le fait d’afficher des flammes de réacteurs, sont donc de simples effets spéciaux.

On va se servir d’un clip dans lequel on colle à la main les divers effets que l’on anime à l’aide d’un peu de code, mais on pourrait aussi passer par une série de sprites, ce qui faciliterai le travail des graphistes qui ne souhaitent pas ouvrir la source pour modifier le jeu.

Rien de très complexe, on gère 4 réacteurs desquels sortent des flammes dont la taille varie en fonction des indications de direction données par le clavier. L’astuce s’appuie sur le point d’ancrage des clips, placé au milieu et à gauche du clip. Peut importe sa position ou sa rotation par la suite, en faisant varier son échelle sur l’axe X la flamme s’étire dans la bonne direction.

Notez l’apparition d’une constante (« radToDeg ») utilisée pour les conversions de radians en degrés (multiplier) et inversement (diviser). Autant que faire se peut il est préférable de passer les valeurs constantes dans des variables précalculée, cela évite de devoir refaire le calcul à chaque fois alors que le résultat est déjà connu et invariable.


10 - Rendu

C’est la dernière partie dont nous devons parler avant de vous laisser jouer.

Résumons ce que nous avons en arrivant dans cette fonction de rendu :

Un tableau de stockage (track) qui contient les informations des tuiles du circuit.
Un tableau de stockage (textures) qui contient le bitmapData de chaque texture.
Les coordonnées auxquelles le véhicule doit se trouver par rapport au circuit.

On a également créé un nouveau tableau (tuiles) qui contient 9 bitmaps vierges.
Il va nous servir à stocker temporairement les tuiles affichées.

Un des problèmes à contourner quand on génère le circuit aléatoirement c’est la superposition des tronçons de route. Il est impossible d’afficher tout le circuit car le joueur ne verrait plus le chemin à suivre dans le cas où des routes se chevaucheraient. La solution c’est de n’afficher qu’un nombre limité de tuiles autour de la position actuelle du joueur. Au-delà de deux tuiles de distance les tuiles commencent à disparaître.

On va donc créer une boucle qui concerne les tuiles autour du joueur, en prenant garde aux sections qui ne comportent pas de tuiles, comme le départ et l’arrivée.

Si une tuile affichée se trouve en dehors du circuit on la retire et on ne traite pas les informations la concernant.

On vérifie la tuile sur laquelle se tient le joueur et on enregistre sa position le cas échéant.

Si la tuile testée fait partie du circuit et qu’elle doit être affichée on traite les informations la concernant (position, transparence en fonction de l’éloignement du joueur, texture du bitmap) puis on l’ajoute au Sprite d’affichage (le circuit).

Tois astuces sont à retenir ici, on ne vérifie que quelques tuiles autour du joueur, on utilise un tableau pour stocker les tuiles affichées, et on recycle les tuiles dans un Sprite d’affichage.

C’est simple, rapide, et ne consomme presque rien, peut importe le nombre de tuiles que comporte votre circuit.


A vous de jouer !

Voilà, le jeu est ouvert, à vous de jouer, n’hésitez pas même si vous débutez et que vous ne comprenez pas tout, si vous avez des idées et que vous aimeriez bien les mettre en placez essayez ! Si vous n’y arrivez pas demandez que quelqu’un vous aide un peu.

Miniature(s) jointe(s)

  • Image attachée: piece1.png
  • Image attachée: piece1_1.png
  • Image attachée: piece1_2.png
  • Image attachée: piece1_3.png


#3 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 07 January 2012 - 23:54 PM

En préparation, une piste de verre et des rebonds mieux faits:

Image IPB

Merci M.Spi pour cette ludique initiative :Hola:

[edit] Grillé, il vient de mettre le screenshot lui aussi :mrgreen:

#4 Specialite

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 08 January 2012 - 03:58 AM

Oulah,ça risque d'être fort amusant,j'essai d'imaginer le résultant final *0*.
Je ferais plaisir à mes yeux et mains de jouer à ce jeu des qu'il évolura !
Si j'aurais su coder aussi bien je l'aurais fais,tampis.

Aurevoir

#5 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 08 January 2012 - 14:22 PM

Première modification:
Piste de verre - Pouvoir utiliser des tuiles sans être limité au niveau de la transparence.

En effet, comme le test de collision se fait en fonction de la transparence des tuiles, on ne peut les dessiner comme on veut. J'ai donc modifié cela.

Dans cette version, il faut 2 images par tuile.
- un fichier tuileX.png pour l'apparence de la tuile
- un fichier tuileX-mask.png pour le masque de collision de la tuile. C'est une image où les pixels sont opaques là où le véhicule peut aller, et transparents là où il ne peut aller.
Vous pouvez la télécharger ici: http://flash.mediabo...post__p__849577
Il s'agit de la v-0.1
Dedans il y a 2 versions graphiques. Une avec des tuiles grises semi-transparentes, et surtout une piste de verre aux zolis reflets. J'ai joint les .psd qui m'ont servi à générer les tuiles.

Niveau code il y a assez peu de changements:
- dans les variables - chargement de textures supplémentaires (pour les masques de collision)
- dans la fonction deplacements - le dessin du BitmapData hitZone utilise maintenant les masques de collision, plutôt que de faire un draw du circuit affiché.

Comme je ne code pas dans l'IDE, j'ai aussi fait une version où le code est réparti dans des fichiers .as plutôt que dans des calques. Je l'ai mis aussi pour ceux qui seraient comme moi. Pour les autres, la totalité du programme est toujours dans le fichier circuit.fla, comme dans la première version de M.Spi.

#6 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 08 January 2012 - 15:05 PM

Bravo Lilive :Hola:

Marche super bien cette route de verre ;-)
Je mets à jour le thread en ajoutant ta source.

#7 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 08 January 2012 - 15:28 PM

Effet d'enlisement sur le bord de la piste

Le rebond sur le bord de piste est un peu bizarre, parce-que ça rebondit systématiquement vers l'arrière, quelque soit l'angle de la collision. J'ai cherché comment améliorer cela. Deux idées:
- un rebond qui prenne en compte l'angle de la collision
- un effet d'enlisement plutôt qu'un rebond

Pour la première idée je n'ai pas trouvé de solution simple, j'ai dû passer par un code de collision largement plus compliqué que celui qui existe déjà. Je posterai cela plus tard. Par contre, la deuxième idée peut se coder facilement, si on part de la version précédente où chaque tuile a son masque de collision.

Le résultat est en téléchargement ici: http://flash.mediabo...post__p__849577
Choisir la version v-0.2


Explications:


Première version:

Le principe, c'est de multiplier la vitesse du vaisseau par l'opacité du pixel sur lequel il se trouve (pixel pris dans le masque de collision). Plus le pixel est transparent, plus la vitesse diminue. Si le pixel est complètement transparent, la vitesse devient nulle, et le vaisseau ne "passe plus".

Première chose à faire donc: redessiner les masques de collision avec un flou sur les bords:

A partir de là, l'effet est obtenu très facilement avec un petit changement dans la fonction deplacements():

vitesse *= (hitZone.getPixel32(rayonTest, rayonTest)>>24 & 0xFF) / 255; // ralentissement selon opacité
 
Cela récupère l'opacité du pixel sous le centre du vaisseau, c'est donc une valeur entre 0 (transparent) et 255 (opaque). Il suffit de diviser cette valeur par 255 pour avoir un nombre entre 0 et 1. Et il ne reste plus qu'à multiplier la vitesse par ce nombre.

Au passage, la fonction deplacements() se simplifie même, puisqu'il n'y a plus de rebond à gérer. Pour voir le code et le résultat, c'est dans le dossier v-0.2.0 de l'archive.



Deuxième version:

Au niveau jouabilité, il y a un petit inconvénient je trouve: c'est long pour se sortir de l'ornière et reprendre la course. J'ai donc fait une seconde version, selon l'idée suivante:
On multiplie toujours la vitesse par un nombre entre 0 et 1 issu de l'opacité sous le vaisseau. Mais si le vaisseau est orienté vers un pixel d'opacité supérieure (vers le centre de la route donc) alors ce nombre est augmenté de 0.5. Ainsi le ralentissement est plus important quand on sort de la piste que quand on y rentre. Voici ce que ça donne:

// M1 est entre 0 et 1, selon que le pixel sous le véhicule est transparent ou opaque
var M1:Number = (hitZone.getPixel32(rayonTest, rayonTest)>>24 & 0xFF) / 255;
// Même chose pour un point M2, situé devant le vaisseau
var M2:Number = (hitZone.getPixel32(rayonTest + vMax * Math.cos(angle), rayonTest + vMax * Math.sin(angle))>>24 & 0xFF) / 255;
// M1 va multiplier la vitesse pour ralentir le vaisseau s'il est sur des pixels transparents. Mais ça relentit moins si M2 est plus grand que M1
if (M2 > M1) {
        M1 += 0.5;
        if (M1 > 1) M1 = 1;
}
// et on modifie la vitesse
vitesse *= M1;
 

Pour voir le code et le résultat, c'est dans le dossier v-0.2.1 de l'archive.


Troisième version:

Il manque un truc, car c'est toujours aussi long de sortir de la zone d'enlisement en marche arrière. Voici le code final qui règle ce problème, en prenant en compte la direction du déplacement pour calculer le nombre M2:

// M1 est entre 0 et 1, selon que le pixel sous le véhicule est transparent ou opaque
var M1:Number = (hitZone.getPixel32(rayonTest, rayonTest)>>24 & 0xFF) / 255;
// Même chose pour un point M2, situé devant le vaisseau, si on avance, ou derrière le vaisseau, si on recule
var K:Number = vMax * (vitesse > 0 ? 1 : -1);
var M2:Number = (hitZone.getPixel32(rayonTest + K * Math.cos(angle), rayonTest + K * Math.sin(angle))>>24 & 0xFF) / 255;
// M1 va multiplier la vitesse pour ralentir le vaisseau s'il est sur des pixels transparents. Mais ça relentit moins si M2 est plus grand que M1
if (M2 > M1) {
        M1 += 0.5;
        if (M1 > 1) M1 = 1;
}
// et on modifie la vitesse
vitesse *= M1;
 

Code et résultat dans le dossier v-0.2.2 de l'archive.


Niveau gameplay, cet effet d'enlisement me semble adapté si on veut faire un véhicule à roues qui circule sur une piste bordée de sable (avis aux graphistes).
D'ailleurs on pourrait imaginer qu'il y aurait aussi des zones d'enlisement au milieu de la piste, ici est là, qu'il faudrait éviter en conduisant.

Miniature(s) jointe(s)

  • Image attachée: masque.png


#8 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 331 messages

Posté 08 January 2012 - 16:46 PM

Et moi et moi ? Je peux jouer ? =)

#9 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 331 messages

Posté 08 January 2012 - 16:55 PM

D'ailleurs pour jouer ce serait peut être plus simple d'ouvrir un svn sur google code et d'ajouter des commiters ? :)

#10 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 08 January 2012 - 17:01 PM

Télécharger les différentes versions:

Version 0.0 (départ)
[indent]Auteur : Monsieur_Spi
Titre : Mécanique de base
Modifications : (lire la présentation)
Source : [/indent]

Version 0.1
[indent]Auteur : lilive
Titre : Piste transparente
Modifications : (lire la présentation)
Source : [/indent]

Version 0.2
[indent]Auteur : lilive
Titre : Enlisement au bord de la piste
Modifications : (lire la présentation)
Source : [/indent]

Version 0.3.0
[indent]Auteur : Monsieur_Spi
Titre : Compteurs, scrolling du fond et friction
Modifications : (lire la présentation)
Source : [/indent]

Version 0.3.1
[indent]Auteur : lilive
Titre : Différents types de véhicules: Inertie, frottements, dérapages
Modifications : (lire la présentation)
Source : [/indent]

Version 0.3.2
[indent]Auteur : Nathaly
Titre : Redéfinition des touches par le joueur
Modifications : (lire la présentation)
Source : [/indent]


Tester la dernière version en ligne du jeu (v-0.3.2) :
http://spi4.free.fr/...ircuit_spi.html

Fichier(s) joint(s)



#11 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 331 messages

Posté 08 January 2012 - 17:11 PM

J'aimerais bien m'occuper du côté multijoueurs. On passe par une connexion en temps réel de type sockets ou autre chose ? =)

#12 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 08 January 2012 - 17:21 PM

Hello Thoutmosis,

Si tu veux jouer, ... bienvenue ;-)

Pour le fait d'ouvrir un svn sur google code et d'ajouter des commiters, non pour le moment ça ne sert à rien, c'est juste un petit jeu entre nous, si jamais ça prend de l'ampleur pourquoi pas mais pour le moment restons simples pour que tout le monde puisse jouer, on réunis tout ici et on verra ;-)

Si tu veux regarder du côté du multijoueur pourquoi pas, par contre nous n'avons rien prévu pour, pour le moment, y a pas de structure à proprement parler, donc pour le serveur etc... faudra trouver et se débrouiller avec les moyens du bords, à moins que quelqu'un se propose pour héberger et gérer la partie serveur.

Je t'inscrit sur la réflexion autour du multijoueur ?

#13 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 331 messages

Posté 08 January 2012 - 17:25 PM

Ouip stp :) il y a un chan d'ouvert quelque part ou des contacts skype qui s'échangent ?

#14 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 08 January 2012 - 17:34 PM

Ok je t’inscrit tout de suite dans la liste avec : "partie multijoueur"

Pour l'instant rien d'ouvert, on a lancé ça hier soir, tu peux nous rejoindre sur MSN si tu veux, je t'envoie mon adresse via MP dans la foulée.

#15 Specialite

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 09 January 2012 - 04:24 AM

Re
Je vous propose une idée: Faire une genre de KM/h en haut à droite,ça dira ta vitesse ^^

#16 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 14 January 2012 - 18:39 PM

Salut,

Juste un mot pour signaler que je m'attaque à des petits trucs comme les divers compteurs de vitesse, de temps, de distance, etc... et à quelques améliorations de la propulsion/friction.

#17 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 14 January 2012 - 22:43 PM

Moi j'ai avancé sur la collision avec rebond, mais ce n'est pas encore près pour le partage. Je voudrais notamment essayer d'ajouter une perte de contrôle du véhicule après la collision.

Fichier(s) joint(s)

  • Fichier joint  v-0.3.1.zip   150.06 Ko   5 téléchargement(s)


#18 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 15 January 2012 - 15:32 PM

Salut,

Voici une nouvelle version avec quelques modifs.

Gestion de la poussée
Un des défauts liés à la propulsion dans le jeu est que le véhicule prend de la vitesse trop vite et à peu d’inertie, ce qui le rend peu maniable. Pour corriger ça j’ai ajouté un facteur d’accélération, la vitesse dépend donc à présent du facteur d’accélération. Quand à la friction je l’ai passée à 0.98 au lieu de 0.9, cela donne plus d’inertie au véhicule et permet de mieux contrôler ses déplacements.


if(P){                                          // si la poussée est différente de 0
        if(A<1) A += 0.2;                       // si l'accélération est inférieure à 1 incrémente l'accélération
        vitesse += A*P;                         // vitesse = acceleation * poussée
} else {                                        // sinon
        if(A>0) A -= 0.2;                       // si l'accélération est supérieure à 0 décrémente l'accélération
        vitesse *= 0.98;                        // vitesse = vitesse * friction
}

Notez que l’accélération ne se stoppe pas brutalement, elle décroît lentement afin de permettre au joueur de conserver de la reprise pendant un petit moment en cas de ralentissement.


Compteurs et jauges
Rien de bien compliqué, il s’agit de calculer la vitesse du véhicule, le temps imparti pour finir le circuit et la distance parcourue. Je vous invite à aller faire un tour du côté du tutorial de Lilive sur la proportionnalité pratique : http://ressources.me...nalite-pratique

Pour la vitesse je me base sur la vitesse limite du véhicule, pour le moment fixée à 15.
Une vitesse à peu prés cohérente correspondante serait une vitesse max de 150 km/h.
On admettra donc comme référence un rapport de 1 pour 10.

[indent]Le calcul de la vitesse affichée est donc le suivant : int(vitesse*10)[/indent]

Notez l’astuce utilisée pour les jauges, on aurait pu faire ça de différentes manières, j’ai préféré utiliser un simple clip sur lequel j’adapte ce que nous avons déjà vu pour les effets spéciaux du véhicule (réacteurs). Je joue avec le repère de position du clip de la jauge et j’adapte son échelle sur X en conservant les proportions.

[indent]L'échelle de la jauge de vitesse est calculé ainsi : Math.abs(vitesse)/vMax;[/indent]

Pour la distance parcourue, je me sers de la tuile actuellement survolée par le joueur et de la longueur totale du circuit.

[indent]Elle est exprimée en pourcentage et la formule est : Math.ceil(100/(long-1)*bloc)
Pour la jauge la formule est la suivante : 1/(long-1)*bloc[/indent]

Pour le chrono il y a une petite différence, je souhaite afficher une horloge classique de la forme « hh : mm : ss », pour cela il me faut passer par une petite fonction qui me remet en forme l’affichage en fonction du compte à rebours (exprimé en secondes). En ce qui concerne la gestion du temps qui passe on aurait pu se baser sur un Timer ou le framerate du projet, mais je préfère passer par la récupération de la date de la machine cliente. Je ne me sers que des secondes, quand une nouvelle seconde est passée je retire une seconde au compte à rebours et je mets à jour l’affichage.

[indent]La formule pour la jauge est la suivante : 1/startRebours*rebours[/indent]


Le fond
Ha… le fond, là j’ai voulu m’amuser un peu, il va donc y avoir quelques changements.
Mon objectif était de proposer un fond plus grand que la taille de la zone d’affichage (640*480) et de le scroller en fonction de la position du joueur sur le circuit, tout en gardant les proportions.

Pour conserver les propositions au niveau des déplacements circuit/fond il faut calculer un « ratio », qui nous permettra de convertir la position du circuit en une position équivalente pour le fond. Ce ratio se calcule en fonction de la taille du circuit et celle du fond, mais deux problèmes vont compliquer cette opération.

Tout d’abord le circuit, il n’a pas d’existence réelle en tant qu’objet, c’est un simple tableau d’objets, pour déterminer sa taille il faut donc trouver la position la plus petite occupée par une tuile et la plus grande (à laquelle on ajoutera la taille d’une tuile), et ce pour les deux axes. Cela se passe lors de la création de chaque tuile du circuit avec les lignes :


if (X<cMinX) cMinX = X else if(X>=cMaxX) cMaxX = X;     // min et max du circuit sur X
if (Y<cMinY) cMinY = Y else if(Y>=cMaxY) cMaxY = Y;     // min et max du circuit sur Y
 

Lorsqu’on à terminé de générer le circuit on connaît l’espace qu’il occupe, reste à présent à déterminer le ratio entre la taille du circuit et celle du fond afin de synchroniser les mouvements des deux.

Cela se passe juste après la création du circuit avec les lignes :


ratioFondX = (fondRef.width-640)/(Math.abs(cMinX)+cMaxX+norme);         // ratio sur X
ratioFondY = (fondRef.height-480)/(Math.abs(cMinY)+cMaxY+norme);        // ratio sur Y
 

La taille du circuit est égale à la valeur absolue de la position minimale + la position maximale à laquelle on ajoute la norme :

[indent]Largeur du circuit = Math.abs(cMinX)+cMaxX+norme
Hauteur du circuit = Math.abs(cMinY)+cMaxY+norme[/indent]

Le ratio entre le circuit et le fond est égal à la taille du fond divisée par la taille du circuit.
Mais attention, nous ne souhaitons pas que la position du fond puisse être égale à la position max du circuit sinon le fond sortira des limites de la zone visible, il faut donc compenser la taille du fond en lui retirant la taille de la zone visible.

[indent]Largeur du fond = fondRef.width-640
Hauteur du fond = fondRef.height-480[/indent]

Nous avons à présent le ratio pour chaque axe, reste à voir comment nous allons gérer l’affichage. Pour commencer je vais utiliser un bitmap externe pour le fond, cela permettra de le changer facilement. Pour cela il suffit de modifier légèrement la fonction de chargement des textures pour y inclure le chargement du fond dans un bitmapData nommé « fondRef », il servira de texture de référence pour tracer le fond, rien de nouveau je vous laisse voir les modifs de la fonction.

A présent le but du jeu est de scroller le fond en étant le plus économe possible au niveau des ressources, c’est un effet spécial il ne faut donc pas que cela perturbe le fonctionnement du jeu. On pourrait coller le fond dans un Sprite et déplacer le Sprite, mais ça consomme un peu et je préférerai passer par du copyPixels qui reste une valeur sure.

Pour ma petite recette de cuisine il me faut donc :

[indent]- « fondRef » la texture employée pour le fond
- « fond » un bitmap utilisé pour l’affichage
- « fondData » le contenu du bitmap d’affichage dans lequel on copie la texture[/indent]

L’objectif est de copier les pixels de la texture du fond dans le bitmapData utilisé pour l’affichage, selon une zone prédéfinie qui correspond à la position du circuit plus la taille de la zone visible.

Cela se passe dans la fonction « rendu » de la manière suivante :

var X:Number = (Px-cMinX)*ratioFondX;                   // position X du fond
var Y:Number = (Py-cMinY)*ratioFondY;                   // position Y du fond
var R:Rectangle = new Rectangle(X,Y,X+640,Y+480);       // zone d'affichage du fond

fondData.copyPixels(fondRef,R,new Point(0,0));       // affiche le fond

Ici le problème concerne une fois de plus le circuit, si on imagine placer tout le circuit dans un conteneur, son repère de position se trouverait un peu n’importe où car les tuiles sont placées aléatoirement depuis un point de départ situé en (0,0). Pour corriger ça on va utiliser "cMinX", la position minimale des tuiles du circuit, pour aligner correctement le fond.

Je vous renvoie à la doc pour les détails sur l’utilisation de la méthode copyPixels de la classe bitmapData : http://livedocs.adob...opyPixels%28%29

Voilà, rien de bien fabuleux mais ça fait un peu avancer le schmilblick.
Pensez à aller jeter un œil aux déclarations des variables, il y en a de nouvelles.
Je mets à jour la preview du jeu en ligne.

Lilive > sympa ta version ;-) par contre on attend que tu aie un truc terminé avant d’intégrer tes modifs non ? Du coup pour le moment je numérote ma version 0.3.0. Je mets à jour les sources dans le message prévu à cet effet.

Tester le jeu : http://spi4.free.fr/...ircuit_spi.html

La source

Fichier(s) joint(s)

  • Fichier joint  v-0.3.0.zip   452.44 Ko   8 téléchargement(s)


#19 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 15 January 2012 - 19:00 PM

Super, la jouabilité est bien meilleure :).
J'y ai passé un moment à faire le meilleur temps possible.
Le fond qui défile c'est chouette aussi.

As-tu pensé à une gestion des dérapages? Ça pourrait donner des pistes plus ou moins glissantes, et des véhicules qui tiennent plus ou moins la route.

J'apprécierais la possibilité de pouvoir accélérer/freiner également avec des touches pour la main gauche. Je trouve ça difficile de gérer toutes les touches d'un seule main.

Est-ce intentionnel de ne pas avoir repris la piste de verre dans l'archive de ta version?

OK pour faire de ta version la v0.3.

Merci d'avoir mis à jour le code dans les .as externes ;)

Pas de nouvelles pour une versions multijoueurs?

#20 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 15 January 2012 - 19:11 PM

Yop,

lol

Citation

As-tu pensé à une gestion des dérapages? Ça pourrait donner des pistes plus ou moins glissantes, et des véhicules qui tiennent plus ou moins la route.

Pas du tout, pour le moment je n'ai fait que ce qui est dans la source, j'ai pas encore pensé plus loin et puis je pense qu'il faut attendre ton code sur les rebonds avant d'affiner cette partie.

Citation

J'apprécierais la possibilité de pouvoir accélérer/freiner également avec des touches pour la main gauche. Je trouve ça difficile de gérer toutes les touches d'un seule main.

Faudrait que quelqu'un se colle à un petit module pour que le joueur puisse reconfigurer les touches.

Citation

Est-ce intentionnel de ne pas avoir repris la piste de verre dans l'archive de ta version?

Heuu non, je suis repati de ta source précédente, on peu le remettre, je l'ai laissée dans le jeu online.

Citation

Pas de nouvelles pour une versions multijoueurs?

On attend des news de Thoumosis ;-)

#21 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 15 January 2012 - 19:11 PM

Ce qui m'épate le plus c'est le circuit qui se dévoile progressivement. Doublé de l'impression tunnel de verre, c'est du meilleur effet :)

j'ai du tester tout ce qui était possible comme façon de s'envoyer les bords :mrgreen: aucun bug à signaler ;)

quand même, même version dev/test, une acclamation à la hauteur de l'exploit réalisé serait la bienvenue en fin de parcours ;)

Bravo les enfants, les garçons Messieurs !
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#22 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 15 January 2012 - 19:15 PM

Voir le messageMonsieur_Spi, le 15 January 2012 - 19:11 PM, dit :

Faudrait que quelqu'un se colle à un petit module pour que le joueur puisse reconfigurer les touches.

Si personne ne s'y est mis, ça je peux (en vrai j'ai un truc dans un coin qui devrait être tout rapide à boulonner)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#23 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 15 January 2012 - 19:19 PM

Salut Nath,

Merci pour les remarques ;-)

Citation

Si personne ne s'y est mis, ça je peux (en vrai j'ai un truc dans un coin qui devrait être tout rapide à boulonner)

On t'inscrit ?
Tu tutorialise un chouia pour les autres au passage ?

#24 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 15 January 2012 - 22:46 PM

Voir le messageNataly, le 15 January 2012 - 19:15 PM, dit :

Si personne ne s'y est mis, ça je peux (en vrai j'ai un truc dans un coin qui devrait être tout rapide à boulonner)
Cool :)

Voir le messageMonsieur_Spi, le 15 January 2012 - 19:19 PM, dit :

On t'inscrit ?
Tu tutorialise un chouia pour les autres au passage ?
Va pas nous l'effrayer toi ;)

#25 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 15 January 2012 - 22:52 PM

Voir le messageMonsieur_Spi, le 15 January 2012 - 19:19 PM, dit :


Tu tutorialise un chouia pour les autres au passage ?

euhh… je renvoie avec plaisir à l'excellent tuto de billy tu veux dire ?! :lol:

je regarderai donc où raccorder mon chtiot clip qui va bien (et on vient pas m'énerver avec le look, c'est fonctionnel, point-barre - je préviens ;)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#26 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 16 January 2012 - 12:06 PM

Citation

je regarderai donc où raccorder mon chtiot clip qui va bien (et on vient pas m'énerver avec le look, c'est fonctionnel, point-barre - je préviens ;)

Oki, no problem, cool ;-)
Je me chargerai de l'intégration et du relookage (temporaire) si besoin, on a normalement Draad qui doit se charger du graphisme ;-)

#27 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 16 January 2012 - 13:25 PM

voilà la chose ;)

Je n'ai pas bien su comment intégrer à l'existant :(

J'ai ajouté un calque Préférences clavier et modifié le code du calque Commandes en y ajoutant du code et en adaptant le code original (à partir de la ligne 69)

dans la bibli un dossier Préférences avec les éléments graphiques sup principalement le clip Mv_PrefClavier


et… j'ai pu rétrograder de CS5.5 à CS4, mais impossible de rétrograder à CS3 :?


me suis appliquée à ne pas modifier les partis pris de dev, toute licence à vous pour en faire ce que vous voulez. En l'état ça enregistre dans un cookie "cookiePrefClavier"

Le panneau préférence est ouvert sur la touche @/# (keycode 192) la touche échappe serait sans doute plus mieux :roll:
ligne 71 du calque Commandes
function appuyer(ke:KeyboardEvent):void {
        if (ke.keyCode == 192) {
                //préférences clavier
                trace("pref clavier");
                qdPref();
                return;
        }

ligne 96
function relacher(ke:KeyboardEvent):void {
        if (ke.keyCode == 192) {
                //préférences clavier
                return;
        }



Ah ? O.O il semble qu'on ne puisse plus joindre de fichiers ?

bon, il est ici
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#28 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 16 January 2012 - 14:35 PM

Re,

Nickel, merci.
Je regarde ça ce soir si d'ici là Lilive peut me faire une conversion CS3, impossible pour ma part ;-)

Tu permet que je remanie à ma sauce pour l'intégration ?

#29 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 16 January 2012 - 14:39 PM

non seulement je permets, mais j'encourage ;)


[edit, j'ai tenté la conversion mais me suis retrouvée avec un message d'erreur à base d'URL introuvable, ça m'a dosée :oops: ]
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#30 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 16 January 2012 - 17:45 PM

Ah cool, on peut changer les touches maintenant :)

Voici le tout converti pour CS3.

Sinon, depuis ta dernière version m.spi, j'ai un avertissement qui dit qu'il faudrait intégrer les polices servant dans les champs de texte dynamiques.

Fichier(s) joint(s)



#31 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 16 January 2012 - 18:15 PM

ça doit être mon fait :(

je l'ai ouvert sous CS5.5 (qui braille à cause des polices) me suis pas faite suer à les embarquer en me disant qu'à la rétroconvertion, on s'en moquerait… 'fo croire que non :oops:


Et toi, tu as pu convertir en cs3 sans qu'il se mette à te crier des méchancetés à propos d'URL introuvable ? :shock:

[tro pinzuste]
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#32 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 16 January 2012 - 19:35 PM

Voir le messageNataly, le 16 January 2012 - 18:15 PM, dit :

ça doit être mon fait :(
Alors tu es vraiment trop balaise, vu que ça me le fait depuis avant que tu ajoutes ta touche :P

Voir le messageNataly, le 16 January 2012 - 18:15 PM, dit :

Et toi, tu as pu convertir en cs3 sans qu'il se mette à te crier des méchancetés à propos d'URL introuvable ? :shock:
Il a bien dis un truc comme ça, jusqu'à ce que je réalise que mon swf n'était pas à côté du dossier "images" :mrgreen: . Sinon, en exportant pour CS3 depuis CS4, j'ai pas eu de problèmes.

#33 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 16 January 2012 - 20:00 PM

Voir le messagelilive, le 16 January 2012 - 19:35 PM, dit :

jusqu'à ce que je réalise que mon swf n'était pas à côté du dossier "images" :mrgreen: .

Miniature(s) jointe(s)

  • Image attachée: mécébiensur.gif

Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#34 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 16 January 2012 - 20:56 PM

Re,

Bon je rentre à peine du taf, je m'y colle dès que j'ai avalé un café.

Lilive> pour les textes dynamiques en fait il n'y a que les 3 du haut (vitesse, chrono, distance) et il est vrai que je n'ai pas intégré les polices, sachant que c'était de l'Arial de base et que CS3 ne me l'imposait pas, mais on peut si tu préfères.

#35 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 16 January 2012 - 22:29 PM

Re,

Bon je suis un peu lent pour la réécriture, donc ce sera pas forcément terminé ce soir.
D'autant que j'aimerai bien ne pas passer par des composants, histoire qu'on puisse mettre à jour toute l'interface (graphisme) avec une simple feuille de sprites externe.

Par contre j'ai trouvé quelques bugs :P

if (ke.keyCode == 192)

192 c'est un caractère spécial (sur mon clavier PC c'est "ù").
J'ai mis un moment à le trouver.

Quand je choisi de remplacer une touche :
Si j’essaye au pavé numérique il me sort "a" au lieu de "1".
Si j’essaye avec des caractères spéciaux comme "," il me sort "1/4".
Et avec ":" il me sort un point interrogation à l'envers.

Le mappage à changé depuis CS3 ?
Du coup, à quel code clavier se fier ?

J'ai testé avec que des caractères spéciaux et le vaisseau bouge pas (touches non reconnues).
Par contre tout marche nickel pour les touches classiques et les flèches.

Autre soucis, mais c'est peut être lié à CS3, quand je tente de modifier les touches et que je valide dans la fenêtre de preview de Flash le soft plante et ferme direct.
Si je teste en standalone ça marche.


Sinon ça marche plutôt bien tout ça, merci Nath, ça va faire un petit module supplémentaire ;-)

#36 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 17 January 2012 - 01:19 AM

Re,

Bon voilà où j'en suis pour le moment, c'est pas encore prêt je dois encore modifier le look, relire, et me pencher sur le cas des caractères spéciaux (ça peut faire défaut le pavé numérique), je finirais ça demain.

Rapidement pour s'y retrouver, j'ai ajouté un dossier "Interface" dans lequel j'ai mis les compteurs et le panneau de redéfinition des touches. J'ai laissé les "commandes" là où elles étaient et j'ai fait un renvoi en commentaire vers le calque "Préférences clavier" dans lequel se trouve le code. Pour le moment j'ai tout laissé au même endroit (déclarations de variables, init, fonctions, etc...) je modifierai plus tard.

Merci Nath, ça marche bien, y a plus qu'à modifier un peu et prévoir de rajouter des touches le cas échéant (tir, bonus, pilotage, ...).

Fichier(s) joint(s)



#37 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 17 January 2012 - 01:32 AM

Que les caractères type virgule ne soient pas pris, ça ne m'étonne pas plus que ça, en revanche le pavé numérique - chez moi - ça le prend et ça le joue (j'ai fait une partie comme ça)


dez pour la touche 192 j'aurais du penser à associer à tab (au moins il y a une constante), mais somme toute, vous associerez bien ce panneau de pref à ce que vous voudrez, et si ça se trouve à un bouton dans un menu ou panneau d'intro plus tard. Donc, je n'y ai pas plus prêté attention que ça ;)


je jette un œil à l'occaz pour les touches portant caractères d'accentuation ;)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#38 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 18 January 2012 - 15:46 PM

Différents types de véhicules: Inertie, frottements, dérapages

Fichier joint  v-0.3.1.zip   1.83 Mo   9 téléchargement(s)

On peut maintenant choisir entre plusieurs types de maniabilité pour le véhicule, que j'appelle "comportements".
En fonction du type choisi, son adhérence à la route change, sa vitesse d'accélération et de freinage change, il ralentit ou pas quand la touche d’accélération est relâchée.
On peut choisir le type de comportement en pressant la touche espace.

(Cette version est bâtie par-dessus le v-0.3.0 de m.spi.
Reste à y intégrer les changements de touches par Nataly. Comme j'avais commencé ça avant qu'elle poste, je n'ai pas intégré son apport.
Je la numérote 0.3.1 car elle me semble être la suite de la 0.3.0)

Dans le code, cela se traduit par:
(une fois de plus j'ai passé bien du temps à donner des explications, mais il faut que je me calme. Parce-que si ça doit me prendre chaque fois des heures quand je contribue, ça devient rédhibitoire Image IPB )

1 - Il n'y a plus de variable nommée vitesse de type Number, mais une variable nommée deplacement de type Point.
Cette variable contient les 2 valeurs x et y qu'on va ajouter à la position du véhicule à chaque appel de la fonction deplacements().
Px += deplacement.x;
Py += deplacement.y;
J'aurais pu lui laisser le nom vitesse, puisque qu'il s'agit là de ce qu'on nomme le vecteur vitesse en mécanique (plus ou moins) mais j'ai préféré faire ainsi pour lever l'ambigüité avec la version précédente, où vitesse désignait la longueur de ce vecteur.
Image attachée: deplacement.gif
Un grand changement est que maintenant, le déplacement du véhicule ne se fait pas forcément dans la direction dans laquelle il est tourné, mais peut aussi se faire latéralement. C'est cela qui donne la possibilité d'avoir des dérapages.

2 - La variable deplacement est elle-même modifiée à chaque deplacements() par la variable poussee. C'est également une variable de type Point, qui contient les 2 valeurs qui modifient celles de deplacement. A chaque fois on fait:
deplacement.x += poussee.x;
deplacement.y += poussee.y;
Ce qui en une seule ligne s'écrit:
deplacement = deplacement.add(poussee);
Image attachée: poussee.gif
Cette poussee, vous l'aurez compris, et en rapport avec l'activité du moteur du véhicule, et se fait dans la direction du véhicule, en marche avant ou arrière.
Quand la poussée est nulle, le deplacement ne change pas d'un deplacements() sur l'autre, la vitesse est donc constante.
En mécanique, poussee est donc ce qui s'appelle une accélération.

3 - Mais il n'y a pas que poussee qui modifie deplacement, il y a aussi les frottements.
J'ai distingué deux frottements:
- Le premier intervient dans la direction du véhicule. C'est ce frottement qui s'oppose à ce que la vitesse devienne infinie au fur et à mesure que deplacement augmente selon la poussee. Ce frottement peut représenter les frottements internes au véhicule, dans le moteur, dans les axes des roues, et ceux avec la route (dans le sens "où ça roule").
- Le deuxième intervient latéralement. C'est ce frottement qui donne au véhicule son adhérence, sa tenue de route. Plus il est important, plus la voiture adhère à la route, moins elle dérape.
Ces deux frottements sont respectivement contrôlés par les variables numériques nommées resistance et derapage. Ceux 2 variables multiplient à chaque deplacements() la longueur des composantes du deplacement. Donc quand elles valent 1 il n'y a pas de frottement, quand elles valent 0 le frottement est si fort qu'il n'y a plus de mouvement.
Image attachée: frottements.gif
Et aussi les explications plus bas dans ce post.

4 - Pour modifier les variables contrôlant le comportement, il y a une toute nouvelle portion de code, dans le calque comportements (ou au choix le fichier comportements.as). Un nouvel élément est apparu dans le GUI, il affiche le comportement choisi, on peut en changer avec la touche espace. Bien sûr l'idéal serait d'avoir un écran de sélection du véhicule, qui permettrait de choisir entre plusieurs véhicules, d'apparence graphique et de comportement différent.

5 - La fonction effetsVehicule() a elle aussi subi quelques changements pour s'adapter aux différents types de comportement.

6 - Au passage j'ai mis un switch dans les écouteurs des touches, plutôt qu'une succession de if.

7 - J'ai aussi intégré les polices.

Explications: Vecteur ou Point?
Vous voyez que je parle de vecteurs, par exemple pour la variable deplacement, ou encore pour poussee, mais que dans le code j'utilise des objets Point.
Cela peut être confusant. Mais il se trouve que la classe Point est tout à fait adaptée pour les vecteurs, puisqu'un vecteur 2D n'est rien d'autre qu'un objet avec 2 propriétés x et y.

Explications: La décomposition du deplacement en 2 composantes:

Pour le calcul des frottements, il faut décomposer le vecteur deplacement en 2 composantes:
- avance: La composante du déplacement dans la direction du véhicule
- lateral: La composante du déplacement dans la direction perpendiculaire au véhicule
En notation mathématique, deplacement est la somme de ces deux vecteurs:
deplacement = avance + lateral
En Actionscript cela se note:
deplacement = avance.add(lateral);
Ou encore:
deplacement.x = avance.x + pousse.x;
deplacement.y = avance.y + pousse.y;

Une fois ces deux composantes obtenue, il n'y a plus qu'a modifier leur longueur en fonction des frottements:
avance.normalize(avance.length * resistance);
lateral.normalize(lateral.length * derapage);
Puis à recomposer deplacement:
deplacement = avance.add(lateral);

Le problème est donc de savoir comment obtenir les 2 composantes. J'ai trouvé 2 méthodes possibles.

Méthode 1:

La première est de trouver 2 vecteur normés (de longueur 1) qui vont servir de base:
var V1:Point = Point.polar(1, direction);
var V2:Point = Point.polar(1, direction + Math.PI / 2);
Dans la base (V1,V2), le vecteur deplacement à des coordonnées x et y différentes de celle qu'il a dans la base habituelle.
Image attachée: bases.gif
Une fois ces coordonnées obtenues par...
var x:Number = V1.x * deplacement.x + V1.y * deplacement.y;
var y:Number = V2.x * deplacement.x + V2.y * deplacement.y;
... on peut les multiplier par les frottements, et se servir de ces nouvelles valeurs pour obtenir les vecteurs avance et lateral:
V1.normalize(x * resistance);
V2.normalize(y * derapage);
Et enfin recomposer le vecteur deplacement:
deplacement = V1.add(V2);

Méthode 2:

On pourrait aussi utiliser les matrices de la façon suivante:

// Modifier le déplacement selon les paramètres resistance et derapage.
var m:Matrix = new Matrix();
m.rotate(- direction);                                                  // Créer une matrice qui va nous placer dans le repère interne du véhicule
var dep2:Point = m.transformPoint(deplacement); // Obtenir les coordonnées du déplacement dans le repère interne du véhicule
dep2.x *= resistance;                                                   // On modifie x d'après la resistance
dep2.y *= derapage;                                                             // On modifie y d'après le derapage
m.invert();                                                                             // On inverse la matrice pour repasser dans le repère global de la scène
deplacement = m.transformPoint(dep2);                   // On donne à deplacement sa nouvelle valeur

Mais je m'en suis tenu à la méthode 1 dans le code du .fla

Voilà. Si vous n'y pigez rien je m'en excuse. Cela utilise des notions mathématiques que j'ai apprises en terminale scientifique, ou à la fac. Pour le rendre bien clair à ceux qui n'ont pas ce bagage, il faudrait encore plus d'explications je pense, en ce qui concerne les calculs dans les frottements. Enfin, dites-moi, ça m'intéresse Image IPB

#39 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 18 January 2012 - 21:53 PM

:Hola:

Ca marche nickel, merci Lilive et merci du tuto (j'essayerai de reprendre tout ça dans un tuto commun sur le wiki au final, peut être, .... enfin je veux dire ... sans doute... quoi qu'en fait c'est pas mal comme ça :P ).

Bon je suis désolé pour ma part, j'ai eu deux semaines de merde au taf et je n'ai pas encore eu le temps d’intégrer vos avancées, promis je m'y colle ce weekend et je vous mets à dispo les sources avec tout.

Merci en tout cas à tous les participants, ce petit jeu avance (et même plutôt bien), et je pense qu'on va rapidement avoir un truc bien sympa ;-)

Bon courage à tous et que ceux qui hésitent encore n'hésitent pas à passer le cap, il y a plein de petits truc (ou de gros) a faire et c'est fun, même si vous êtes débutants, on se chargera de corriger et remettre en forme, le but c'est que tout le monde s'amuse ;-)


[EDIT] J'ai mis à jour la version online avec ta dernière version Lilive ;-)

Citation

Bien sûr l'idéal serait d'avoir un écran de sélection du véhicule, qui permettrait de choisir entre plusieurs véhicules, d'apparence graphique et de comportement différent.

Je m'en occupe, vais faire un truc simple en attendant les sprites def, menu d'intro avec choix des véhicules.

Draad, si tu passes par là, peux-tu réfléchir à un vaisseau en verre ?
Ce serait un truc marrant avec la piste de verre de Lilive ;-)

#40 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 19 January 2012 - 21:48 PM

Salut,

Petite mise à jour, j'ai envoyé la v 0.3.2 ici : http://flash.mediabo...post__p__849577

Elle intègre les modifs de lilive et de Nathaly, j'en ai profité pour réorganiser quelques calques, la version en ligne est également à jour.

#41 Broutous

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 101 messages

Posté 15 April 2012 - 22:59 PM

Salut :)

Rho dis donc j'ai raté tout ça?
Des projets comme ça arrivent souvent? :D
"Regardez-moi ça ! J'ai de la corne sur les doigts on dirait des pieds..."

#42 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 16 April 2012 - 11:43 AM

Salut,

Le jeu est toujours ouvert, si tu veux participer ne te gêne pas, il suffit de reprendre l'existant et de lire ce qu'on à fait pour repartir de là.
On a pas le temps actuellement de s'y remettre mais personnellement dès que je suis un peu plus light je m'y recolle.

Sinon, non ce genre de "projet" (qui n'en est pas un) sont assez rares, justement parce qu'il n'y a pas beaucoup de participants.

Mais n'hésites pas, débutants acceptés (si tu es débutant) comme cela est dit dans l'intro, le but c'est que tout le monde puisse jouer, même si ce n'est que pour ajouter un bouton ou un son quelque part. Tout ce que l'on demande c'est que tu explique bien sur le forum ce que tu as fait et que tu commente correctement la source pour que les suivants ne soient pas perdus. En ce sens c'est un mélange entre un jeu, un tuto et un exercice pratique.

#43 hu9o

  • Members
  • PipPipPipPipPipPipPipPip
  • 653 messages

Posté 12 October 2012 - 22:51 PM

wow c'est vraiment pas mal !

eum par contre j'ai pas trouvé comment régler les touches :mrgreen:
et aussi je sors de la piste des fois, c'est prévu ou pas ?

PS: Monsieur Spi, tu as les sources de cette dernière version ?

#44 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 13 October 2012 - 09:13 AM

Salut,

Les sources sont réunies dans ce post : http://forums.mediab...ost__p__1084470

Le jeu est toujours ouvert si tu as envie d'ajouter des trucs ne te gène pas.

#45 pppplus

    Ceinture Jaune

  • Members
  • PipPip
  • 24 messages

Posté 20 October 2012 - 18:58 PM

Bonjour à tous, et merci pour le partage de ce jeu avec les sources.
Je ne pourrai pas contribuer, mais j'apprends plein de choses !

J'ai un problème sur le jeu que j'ai adapté depuis vos sources (je n'utilise pas flash cs, mais FDT).
J'ai un bug lors du déplacement du vaisseau, parfois il se bloque en plein milieu de la piste, et il faut que je tourne pour qu'il avance à nouveau. Il est bloqué comme si j'étais hors piste.

Donc ma question : quelle est la fonction deplacements() utilisée dans votre version en ligne ?

Pour info, lorsque le véhicule bloque, les valeurs
M1 et M2 sont à 0 ( logique)
p.x est à 60
p.y est à presque 30. (29.9999999)

La fonction que j'aie (j'en ai essayé d'autres plus anciennes, mais d'autres problèmes se posent)


  private function deplacements():void{
 
   var T:Object;                                // Tuiles                
   var i:int;                            // pointeur
   var R:int =  int(droite)-int(gauche);                 // Rotation (touches)
   var P:int =  int(toucheAcc)-int(toucheFrein);           // Poussée (touches)
   var m:Matrix =  new Matrix();                        // matrice de transformation
   var p:Point =  new Point(rayonTest, rayonTest);         // point (coordonnées) sous le véhicule dans hitZone
   var A:Point =  Point.polar(poussee, direction);         // Un vecteur orienté dans la direction du véhicule, dont la longueur est poussee. Si poussee est < 0, ce vecteur est orienté vers l'arrière du véhicule.
   A.normalize(dMax);                      // On donne à ce vecteur la longueur dMax
   p = p.add(A);                                // coordonnées d'un point devant (ou derrière) le véhicule dans hitZone
 
   calculsDeplacement(P, R);                     // Modifie le déplacement en fonction du clavier     

   // dessin des pixels sous le vaisseau pour test de collision
   hitZone.fillRect(hitZone.rect, 0x00000000);           // vide le dessin
   for (i=bloc-1; i<=bloc+1; i++) {                // les tuiles adjacentes au joueur
        if (i<0 || i>=track.length) continue;            // si l'index sort des limites de track ignore la suite
        T = track[i];                      // la tuile
        m.tx = T.x-int(Px)+rayonTest;              // position de la nouvelle zone sur X
        m.ty = T.y-int(Py)+rayonTest;              // position de la nouvelle zone sur Y
        hitZone.draw(textures[T.t+5], m);                 // dessine la nouvelle zone de collision
   }
 
   // modifier le déplacement d'après les pixels sous le véhicule
   var M1:Number = (hitZone.getPixel32(p.x, p.y)>>24 & 0xFF)/255;       // transparence de ce pixel
   var M2:Number = (hitZone.getPixel32(p.x, p.y)>>24 & 0xFF)/255;       // transparence de ce pixel

   if (M2>M1)  M1 += .5;                          // si M2 est moins transparent que M1 incrémente M1
   if (M1>1)  M1 = 1;                      // limite de M1
   deplacement.normalize(deplacement.length*M1);                // modifie le déplacement en fonction de M1
 

   // Modifier la position du véhicule d'après le déplacement
   // (Voir schéma deplacement.gif)
   Px += deplacement.x;                   // nouvelle position sur X
   Py += deplacement.y;                   // nouvelle position sur Y
 
   effetsVehicule(P, R);                          // effets spéciaux du véhicule
  }
 

C'est la dernière version qui est en téléchargement (0.3.2 il me semble)

EDIT:
Je ne comprends d'ailleurs pas pourquoi ces 2 lignes sont identiques :
var M1:Number = (hitZone.getPixel32(p.x, p.y)>>24 & 0xFF)/255; // transparence de ce pixel
var M2:Number = (hitZone.getPixel32(p.x, p.y)>>24 & 0xFF)/255; // transparence de ce pixel

EDIT2 : poser les questions... permet parfois de résoudre les problèmes !
Dans la version 0.3.1, le code est le même qu'ici, mais dans un ordre différent, ce qui fait que M1 et M2 ne sont plus identiques !


  private function deplacements():void{
 
   var T:Object;                                // Tuiles                
   var i:int;                            // pointeur
   var R:int =  int(droite)-int(gauche);                 // Rotation (touches)
   var P:int =  int(toucheAcc)-int(toucheFrein);           // Poussée (touches)
   var m:Matrix =  new Matrix();                        // matrice de transformation
   var p:Point =  new Point(rayonTest, rayonTest);         // point (coordonnées) sous le véhicule dans hitZone
 
   calculsDeplacement(P, R);                     // Modifie le déplacement en fonction du clavier     

   // dessin des pixels sous le vaisseau pour test de collision
   hitZone.fillRect(hitZone.rect, 0x00000000);           // vide le dessin
   for (i=bloc-1; i<=bloc+1; i++) {                // les tuiles adjacentes au joueur
        if (i<0 || i>=track.length) continue;            // si l'index sort des limites de track ignore la suite
        T = track[i];                      // la tuile
        m.tx = T.x-int(Px)+rayonTest;              // position de la nouvelle zone sur X
        m.ty = T.y-int(Py)+rayonTest;              // position de la nouvelle zone sur Y
        hitZone.draw(textures[T.t+5], m);                 // dessine la nouvelle zone de collision
   }
 
   // modifier le déplacement d'après les pixels sous le véhicule
   var M1:Number = (hitZone.getPixel32(p.x, p.y)>>24 & 0xFF)/255;       // transparence de ce pixel
   var A:Point =  Point.polar(poussee, direction);         // Un vecteur orienté dans la direction du véhicule, dont la longueur est poussee. Si poussee est < 0, ce vecteur est orienté vers l'arrière du véhicule.
   A.normalize(dMax);                      // On donne à ce vecteur la longueur dMax
   p = p.add(A);                                // coordonnées d'un point devant (ou derrière) le véhicule dans hitZone
   var M2:Number = (hitZone.getPixel32(p.x, p.y)>>24 & 0xFF)/255;       // transparence de ce pixel



   if (M2>M1)  M1 += .5;                          // si M2 est moins transparent que M1 incrémente M1
   if (M1>1)  M1 = 1;                      // limite de M1
   deplacement.normalize(deplacement.length*M1);                // modifie le déplacement en fonction de M1
 
 
   // Modifier la position du véhicule d'après le déplacement
   // (Voir schéma deplacement.gif)
   Px += deplacement.x;                   // nouvelle position sur X
   Py += deplacement.y;                   // nouvelle position sur Y
 
   effetsVehicule(P, R);                          // effets spéciaux du véhicule
  }
 




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

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