Forums Développement Multimédia

Aller au contenu

Aide jeu de "plateau"

système jeu plateau clips CODE

12 réponses à ce sujet

#1 estherminus

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 10 June 2013 - 16:35 PM

Bonjour,

Je sollicite votre aide pour un soucis de code.

Voila, je suis en train de réaliser un jeu qui ressemble en gros à un jeu de l'oie mais piégé. J'ai donc un plateau de jeu avec un dé et un pion. A chaque fois que l'on clique sur le dé une anime est lancée et le pion se retrouve sur une case qui déclenche un mini jeu à résoudre.

J'ai codé mes minis jeux mais le problème et non des moindres, qui se pose maintenant, est de faire les liaisons avec les "déclenchements". Etant une bille en code, j'ai tablé sur un système simple mais je n'arrive pas à m'en sortir. Mon pion est une animation et n'avance pas en code pour ne pas avoir à calculer sa position à chaque fois. Car à la fin de chaque mini jeu vous allez automatiquement à une autre case. (le jeu est piégé héhé)

En gros il suffirait que, à la fin de mon animation de pion, cela lance mon jeu qui à la fin, lancera l'anim de transition qui elle même fera revenir le joueur au plateau. Mais je n'arrive pas à le réaliser.

Je n'ai pas créer de classe pour le moment.
Pour l'instant j'ai créer un random qui selon le résultat amène au clip du dé correspondant (1,2,....)qui se trouvent sur des frames différentes.

Je suis partie sur la piste de créer un gros clip pour chaque case/mini jeu contenant à chaque fois : l'anim du pion, puis le jeu à jouer et l'anim de fin. (3 clips donc) mais c'est pour faire les liaisons entre chaque que je n'y arrive pas, pourtant je sais que ce doit être assez simple.

Je pense que loader à chaque fin d'anim le clip du jeu serait bien mais ça me prend la tête et je n'arrive pas a voir quel système de code correspondrait le mieux.

Si quelqu'un à des idées je suis preneuse.
Merci

#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 10 June 2013 - 16:47 PM

Salut,

Tu as des exemples plus concrets ?
Du genre un FLA simplifié qui résume la méccanique utilisée actuellement ?

A mon avis tu va te prendre la tête à faire çà à la timeline, le code c'est mieux car tu ne tombe pas sur ce genre de problème (mais sur d'autres lol) ;-)

#3 estherminus

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 10 June 2013 - 22:35 PM

Oh ! je n'avais pas vu la réponse qui est arrivé bien vite ^^ (vive la connexion internet)
Entre temps j'ai essayé de bidouiller ce qui m'a amener à d'autres complications pour lancer un clip à la fin d'un autre clip.

J'ai joint une ébauche du plateau que j'ai réaliser (j'ai laissé les visuels pour plus de simplicité) avec l'anim de pion pour la case 1 ainsi qu'une ébauche de hidden object (le jeu de la case 1 donc) pour faire la liaison

J'espère que ce ne sera pas trop fouillis, j'ai un peu honte à bugger sur quelque chose comme ça. Je vais essayer de faire un fla simplifier, ça m'éclaircira surement, là je patauge trop.

Fichier(s) joint(s)



#4 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 11 June 2013 - 10:26 AM

Re,

Alors j'ai jeté un oeil et à mon avis tu va grave te prende la tête si tu fais ça à la timeline comme tu l'as commencé.
Je recommande de changer radicalement d'optique et de passer par du code et jonglant avec des objets.
Tu va voir que ce n'est pas très dur, il suffit de bien suivre les étapes.
Je t'ai préparé un exemple que tu trouvera en pièce jointe, j'ai un peu commenté pour que tu t'y retrouve, mais je vais t'expliquer ici.

Premièrement, tous ce qui est utile dans le jeu est un "objet", c'est à dire ici, un clip qui se trouve dans la bibliothèque et qui est exporté pour Actionscript, ce qui permet de le manipuler avec le code, tu remarquera que dans la biliothèque le champ "liaison AS" est rempli pour les objets exportés (ont dit "dynamiques").

Tu remarquera également qu'il n'y a rien sur la timeline à part un calque contenant du code, c'est normal puisqu'on va faire apparaitre nos objets au moment où on en a besoin par l'intermédiaire du code, donc pas besoin de timeline.

Si tu regarde le code, tu verra qu'il suit une construction précise, on fait d'abord toutes les déclarations (variables, objets, positions, ....) puis on pose les écouteurs (pour les dés) et enfin on place les fonctions utiles (tirer le dé, déplacer le joueur, faire disparaitre un minijeu).

La première chose que tu va voir c'est un tableau à deux dimensions, c'est à dire un tableau qui contient lui même plein de petits tableaux.
Chaque petit tableau correspond à la position du centre de chaque case du plateau : [x,y].

Cette liste va nous permettre de savoir sur quelle case déplacer le joueur une fois les dés tirés.

Puis tu as la déclaration des objets, on crée une occurence de l'objet souhaité par l'intermédiaire de la commande "new".
Je commence donc par créer 3 objets utiles, le plateau de jeu, le dé, et le joueur (au passage j'ai modifié le graphisme du joueur pour qu'il ne prenne pas autant de place).
Je positionne chaque objet sur la scène (x,y), et je les affiches (addchild).

Puis je place un écouteur sur l'objet "de", afin de pouvoir tirer le dé.
Tu remarquera deux variables "caseActuelle" et "caseCible", je pense que c'est assez explicite.
La première fonction permet de tirer le dé, elle détermine la case cible qui est la caseActuelle+un nombre aléatoire.
Elle ajoute, une fois le dé tiré, un nouvel écouteur sur le joueur, afin de le déplacer.

La deuxième fonction déplace le joueur, pour ça on va utiliser un peu de Maths pour déterminer l'angle entre la case où il se trouve et la case où il doit aller. Une fois qu'on à l'angle on cherche la distance entre le joueur et la case cible. Quand on à la distance on regarde si elle est supérieure à une certaine valeur, si c'est le cas on déplace (avec un peu de trigo) le joueur en direction de la case, sinon on replace le joueur au centre de la case cible, puis on affiche le minijeu.

Les minijeux sont tous contenus dans un seul objet conteneur (clip MiniJeux), qui s'utilise comme les autres objets, c'est à dire qu'on le fait apparaitre quand on en a besoin et on le retire quand on en a plus besoin. Pour le test j'ai ajouté un écouteur sur le clic de la souris sur le MiniJeu pour qu'il soit retiré dès qu'on cliques dessus. Chaque frame du clip MiniJeux contient un nouveau jeu, disposant de son propre code, il suffit d'aller à la frame souhaité en fonction de la caseActuelle occupée par le joueur, en considérant qu'il y a un minijeu par case.

Te voici sur des rails un peu plus solides si tu veux éviter de t'embrouiller et de perdre du temps sur des bugs si tu fais ça à la timeline, certes, il y a du code et c'est une autre manière de travailler, mais je t'assures que le temps passé à comprendre comment ça marche en code te fera en fait gagner énormément de temps par la suite sur la conception de ton jeu, ce n'est donc pas du temps perdu, bien au contraire.

Je te laisses étudier ça et on en reparles si tu as des difficultés.
Bon courage.

Fichier(s) joint(s)



#5 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 11 June 2013 - 11:05 AM

PS : pour le déplacement du pion, si tu souhaite qu'il se fasse de case en case et non de manière linéaire de la caseActuelle à la caseCible, tu peux par exemple imaginer déplacer successivement le pion de case en case jusqu'à atteindre la case cible. C'est la même fonction qu'actuellement sauf qu'au lieu d'aller de caseActuelle à caseCible tu passe par une caseIntermediaire qui se trouve être l'index suivant dans la liste des cases, ainsi tant que caseIntermediaire est différente de caseCible tu va à l'index suivant dans la liste pour récupérer les coordonnées de la case souhaitée. Notes qu'avec ce système tu peux aller dans les deux sens sans problème, pour le cas où un des minijeux te renverrai en arrière par exemple.

Pour placer ton pion directement sur une case, par exemple à la sortie d'un minijeu, c'est aussi très simple puisque tu as les coordonnées de la case dans la liste, il te suffit donc de savoir quelle case tu souhaite et d'en récupérer les coordonnées, puis d'y placer ton pion.

Bref, le code va t'apporter énormément de souplesse à ce niveau et te permettre de vraiment faire ce que tu veux en quelques lignes, ce qui est bien plus rapide et plus simple que de tout faire via des animations ;-)


[edit] : bon ben du coup j'avais cinq minutes, je t'ai fait le code pour que le pion suive précisément le chemin jusqu'à la case 24, tu as donc toutes les cases de listées et le déplacement du pion qui suit tranquillement le trajet.

Fichier(s) joint(s)



#6 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 11 June 2013 - 12:15 PM

Re (encore),

Pour te simplifier les choses, voici le code entièrement commenté ligne par ligne.

Fichier(s) joint(s)



#7 estherminus

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 11 June 2013 - 18:00 PM

Mon dieu merci pour tes réponses ^^

Je viens de regarder le code et je crois que j'ai tous compris (bon un peu moins les cases intermédiaires mais je vais regarder de nouveau plus posément) et en effet je crois que je vais moins me prendre la tête qu'a tout faire à la timeline ! Je sens que ça va me faire cogiter mais au moins je vais partir sur une base bien plus saine. Merci beaucoup !

C'est la première fois que je vais utiliser des addChild et importe des objets dynamiquement =p .
je viens de tester pour rajouter un panneau qui s'affiche à la fin de mon premier mini jeu et ça a fonctionné. Je vais tester pour que, lorsque l'on clique dessus, on sort du mini jeu et revienne sur le plateau.
Pour faire la liaison avec des codes présent à la fin du mini jeu et le code principale du plateau je pense que je vais devoir faire une sorte de chemin. Désigner les parents pour que les liens se fassent bien. Je vais regarder tous ça.

#8 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 11 June 2013 - 18:19 PM

Re,

Citation

Pour faire la liaison avec des codes présent à la fin du mini jeu et le code principale du plateau je pense que je vais devoir faire une sorte de chemin. Désigner les parents pour que les liens se fassent bien. Je vais regarder tous ça.

Ce n'est pas forcément recommandé, en fait pour bien faire tu as deux choix, soit faire des classes, et dans ce cas chaque mini jeu à sa propre classe avec son code, soit partir de l'idée que je t'ai mis en place avec mon petit exemple, c'est à dire mettre TOUT le code à un seul endroit et plus à l'intérieur des clips des jeux.

Rien ne t'empêche de faire plusieurs calques sur ta timeline, avec un bloc de code par calque par exemple, si tu as peur que le code soit trop long et difficilement gérable. Tu peux imaginer un calque "Gestion plateau" dans lequel tu met toute la gestion du plateau de jeu (tirage de dès, déplacement du joueur, etc...), puis un calque par mini jeu ("jeu 1", "jeu 2",....) dans lequel tu met le code du jeu.

Si tu as compris la première partie (l'exemple que je t'ai donné), tu devrais comprendre la suivante, c'est à dire faire pareil pour chaque mini jeu, en fait chaque jeu serait un "objet" (un clip) indépendant dont tu crée une occurrence (new jeu1, new jeu2, ...) au moment où tu en as besoin. Puis tu ajoute cette occurence sur la scène par dessus le reste (addchild), et tu "pilote" ce qui doit se passer dans ton jeu depuis le code qui se trouve à la racine du projet sur son calque dédié. En faisant ainsi tu regroupe tout ton code à un seul endroit et tu sépare bien ce qui est graphique et ce qui est calcul ou programmation.

Résumons :

Tu as ta timeline telle que je te l'ai donnée dans l'exemple.
Sur un premier calque tu as toute la gestion du plateau (ce qu'il y a dans l'exemple).
Sur un second tu as toute la gestion du premier mini jeu.
Sur un troisième tu as toute la gestion du second mini jeu.
etc.... avec un calque par jeu.

Dans la bibliothèque tu as des "objets" (des clips exportés pour AS).
Un clip pour chaque mini jeu.

Tu crée une occurence de l'objet quand tu en as besoin (par exemple Jeu1).
Tu l'affiche par dessus le reste (addchild).
Tu le pilote par l'intermédiaire du code qui se trouve sur le calque correspondant.

Pour intervenir sur un élément se trouvant dans l'occurence du mini jeu, par exemple cliquer sur une zone précise.
Ta zone est nommée ("zone1") dans le clip du mini jeu et ton mini jeu porte un nom par exemple :

var jeu:MovieClip = new Jeu1();

Je veux qu'on puisse cliquer sur le clip "zone1" qui se trouve dans le mini jeu :


jeu.zone1.addEventListener(MouseEvent.CLICK, cliczone1);

function cliczone1(e:MouseEvent):void{
        // ce qui doit se passer quand on clique sur la zone
}


Ainsi tu ne cherche pas à faire remonter des infos depuis un clip enfant vers un niveau supérieur etc....
Depuis le niveau supérieur tu cible un clip qui se trouve dans l'enfant et tu lui indique quoi faire.

L'étape suivante sera d'utiliser des classes, ce sera revenir un peu en arrière car le code sera interne aux objets (donc aux enfants) mais structuré autrement et donc plus facile à gérer, mais l'étape intermédiaire c'est de s'affranchir du code dans les objets et de réussir à tout piloter d'un seul endroit, si tu y arrive tu comprendra (je pense) beaucoup plus facilement le level suivant.

Bon courage et n'hésites pas si tu as des questions.

#9 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 11 June 2013 - 18:35 PM

Voici un exemple très basique de ce que j'explique juste au dessus.

Il n'y a aucun code à l'intérieur des jeux ou du plateau, tout se pilote depuis la timeline de départ et le code est réparti sur des calques pour le découper en petits blocs plus faciles à gérer.

Fichier(s) joint(s)



#10 estherminus

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 14 June 2013 - 00:31 AM

Rebonsoir ^^ avec un petit peu de retard me revoila.

Alors j'ai regardé pendant un sacré moment tous le code. Au final j'ai réussi à le comprendre mais mon cerveau à faillit faire une surchauffe le pauvre. Je crois que c'est un peu trop tôt pour moi d'importer tous en externe et de faire un code "unique". J'arrive à voir le fonctionnement mais pas à le ré-exploiter, ce qui pour moi veut dire que j'ai pas vraiment saisi. Du coup je vais le faire à la time line pour l'instant (j'ai finalement trouvé comment bien faire après avoir combiné le genre de système de code de tes exemples et un système plus bateau à la timeline), vu que je suis contrainte par le temps pour réaliser ce projet, mais je le recommencerai lorsque je serais en vacances avec ce système ci. A mon avis je vais devoir commencer par des jeux beaucoup plus simple, et non pas direct avec un grand plateau comme ça; ainsi que des petits tests pour bien cerner le fonctionnement des imports, du code et des gestions dynamiques des objetcs etc... =p j'ai cru devenir chèvre mercredi à essayer de faire des tests XD
Je reviendrais sûrement poser des questions de code en tous cas.
Ça donne envie de faire plein de petits jeux.
Merci beaucoup pour tes explications et tes exemples.

#11 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 14 June 2013 - 10:50 AM

Salut,

C'est normal au début d'avoir un peu de mal à jongler entre toutes ces notions. Il faudrait effectivement commencer par des petits jeux plus simples pour apprendre tous les mécanismes utiles. J'ai monté pour ça une grosse série d'exercices pratiques que tu trouvera sur le Wiki de Mediabox : http://forums.mediab...shplatform/jeux ou bien dans ma signature directement. Je te recommande de commencer dans l'ordre par :

Pong
Taquin
Pendu
Memory
Proximity
Tic Tac Toe
Snake
Frogger

Puis les autres dans l'ordre que tu veux car à partir de là tu aura les bases pour comprendre le reste.

N'hésites pas à revenir vers nous si tu as des questions.
Bon courage.

#12 estherminus

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 16 June 2013 - 01:27 AM

Merci , j'avais déja un peu regardé ta liste de tutos avant mais j'avais commencé par le memory XD c'était sans doute pas la meilleur chose à faire XD. je commencerais pas le pong donc la prochaine fois. J'aurais encore une petite question pour mon jeu du coup. Je sais pas si je fais bien de poster à la suite de ce sujet mais bon.
Ça concerne les sons. j'ai beaucoup de mal à la gérer.
Pour l'instant je n'ai fait qu'un test pour l'ambiance générale du plateau mais je voudrais qu'à chaque fois qu'on clic sur un clip/bouton qui amène à un prochain jeu, le son ne s'arrête pas brutalement mais diminue au fur et à mesure. et le suivant démarre progressivement. Pour l'instant il s'arrête brutalement et j'ai un peu de mal à comprendre le fonctionnement de lecture. Aurais tu des conseils à me donner ?

#13 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 17 June 2013 - 12:44 PM

Salut,

Pour le son ce n'est pas si facile, la gestion des fondus doit passer par des manipulations en code sur les pistes de ton appli.

En AS3 on distingue le son et les pistes, un peu comme une table de mixage, on peut très bien jouer un son en direct (un musicien joue de la guitare), mais si on veut appliquer des modifications sur le son (volume qui sort sur les enceintes par exemple) on doit imaginer avoir une table de mixage dans laquelle rentre le son. Sur cette table on a des pistes (channels), et des effets (soundTransform), on peut donc agir sur les pistes (volume, transformations diverses, distorsion, ...) à l'aide des effets. On agit rarement directement sur un son, plutôt sur la piste qui contient le son.

Partant de là l'objectif est de dire que pour une piste (on peut en avoir autant qu'on veut) le volume doit descendre jusqu'à zéro en un certain laps de temps, puis que pour une autre le volume doit partir de zéro et croitre pendant un certain temps. Et pour faire ça on va utiliser un minuteur (Timer) qui est sensé agir sur les boutons de la table de mixage à notre place.

Pour mettre en place tout ça, la recette de cuisine c'est d'utiliser :

- un son
- une piste (channel) qui contient le son
- un effet (soundTransform) pour modifier la piste
- un timer (Timer) pour minuter les événements (le fondu)
- des fonctions qui ont pour but de gérer les événements et faire les modifications

Ce n'est pas hyper dur non plus, mais pas forcément simple quand on débute.

Pour commencer il faut lire le passage concernant la gestion du son du livre de Thibaut Imbert : http://forums.mediab...Video.pdf#page1

Une fois que tu as toutes les notions tu peux lire quelques tutos.

Tu peux le faire toi même en programmant, tu as un exemple ici : http://actionscriptn...n-fade-out.html

Tu peux aussi utiliser une classe prête à l'emploi pour faire ça : http://blog.organa.ca/?p=197
Mais ça demande de savoir un tout petit peu manipuler les classes ou de bien lire le tutoriel (en anglais).

Et enfin tu peux aussi utiliser un petit plugin (c'est en fait aussi une classe) basé sur TweenLite dont tu trouvera un exemple ici : http://www.snorkl.tv...-volume-plugin/

A toi de voir à présent si cet effet est suffisamment important pour que tu te lance dans une petite journée de lecture et de prise en main pour savoir gérer les sons dans tes projets.



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

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