Dans ce tutoriel, nous allons construire un jeu de mémoire 3D. En cours de route, nous allons ajouter des variables et mouseEvents à des objets Away3D. Commençons…
Étape 1: fichier ActionScript
Créer un nouveau fichier ActionScript 3.0.
Étape 2: Modifier le profil
Dans le panneau Propriétés, appuyez sur le bouton Modifier..
Étape 3: Choisissez la version de Flash Player
Choisissez le profil de Flash Player 9 et cliquez sur OK..
Étape 4: Obtenez le moteur Away3D!
Enregistrez votre fichier sous "Memory Game.fla" dans le dossier Tutoriel du jeu de mémoire. Téléchargez maintenant le moteur Away3D à partir de Téléchargements Away3D. Nous utiliserons la version 2.3.3 pour Flash Player 9. Décompressez l'archive et copiez tous les dossiers dans le dossier du didacticiel du jeu de mémoire..
Étape 5: Obtenez le tweener!
Téléchargez Tweener à partir d'ici. Décompressez les fichiers de classe dans votre dossier du didacticiel du jeu de mémoire afin que tout se présente comme suit:
Étape 6: Importer des textures
Nous utiliserons 5 cartes différentes pour ce jeu (vous pouvez les trouver dans les fichiers sources). Importez-les dans Flash en sélectionnant Fichier> Importer> Importer dans la bibliothèque..
Étape 7: Exporter des textures pour ActionScript
Pour utiliser ces textures au moment de l'exécution, nous devons leur associer un nom de classe. Sélectionnez les images une par une, puis cliquez avec le bouton droit de la souris sur> Propriétés> Exporter pour ActionScript. Il suffit de supprimer les parties ".png" de leurs noms.
Étape 8: Commencez à coder
Après tout cela, nous sommes prêts à commencer à coder. Remplissons nos premières lignes en important les classes:
importez les caméras absentes3d. *; importer les conteneurs away3d. *; importer des matériaux absents3d. *; importer away3d.primitives.Plane import away3d.primitives.Cube importer away3d.containers.ObjectContainer3D; importer away3d.core.math.Number3D; importer caurina.transitions. *
Étape 9: Variables d'installation
Après avoir importé nos classes, nous devrions définir nos variables à utiliser dans les étapes suivantes.
scène var: Scene3D; var camera: Camera3D; var view: View3D; var totalchildren: int = 10 cartes var: Matrice var textures: Matrice = [nouvelle texture0 (0,0), nouvelle texture1 (0,0), nouvelle texture2 (0,0), nouvelle texture3 (0,0), nouvelle texture4 (0,0)] var backtexture: BitmapData = new textureback (0,0) var woodtexture: BitmapData = new texturewood (0,0) var carte largeur: Number = 110 var carte hauteur: nombre = 150 var xoffset: Nombre = 10 var yoffset : Number = 10 détenteur de cartes var: ObjectContainer3D var selectedCard1: Plan var sélectionnéCard2: Plan var disableMouseEvents: Boolean = false
Le tableau de textures contient nos images de texture. Pour attacher des images à notre scène à partir de la bibliothèque, nous utilisons cette méthode: var imageData: BitmapData = LibraryLinkageName (0,0). Nous utilisons la même approche pour notre table et le verso des cartes. xoffset et yoffset définissent la distance entre les cartes.
Étape 10: Configuration d'Away3D
Avant tout, nous devons construire Away3D.
fonction initAway3D (): void scene = new Scene3D (); camera = new Camera3D (); camera.y = 700 camera.z = 500 camera.lookAt (nouveau Number3D (0,0,0)) view = nouveau View3D (scene: scene, camera: camera); view.x = stage.stageWidth / 2 view.y = stage.stageHeight / 2 addChild (vue);
la première ligne de notre fonction crée la scène 3D. Nous y ajouterons des objets 3D. Après cela, nous créons la caméra. Nous allons le déplacer un peu en arrière et vers le haut. Ce faisant, nous pourrons mieux voir les cartes lorsque nous jouerons au jeu. Ensuite, nous allons le centrer. Enfin, nous créons la vue et la plaçons au milieu de la scène..
Étape 11: Création de la table
Dans cette étape, nous allons créer la table:
function createGround (): void cube var: Cube = nouveau Cube (width: 680, profondeur: 400, hauteur: 20, pushback: true, ownCanvas: true, matériau: new BitmapMaterial (woodtexture)) cube.y = - 20 scene.addChild (cube)
Pour que ce soit plus réaliste, nous utilisons un cube plutôt qu'un avion. Le point le plus important ici est d’utiliser les propriétés de refoulement dans le cube pour le rendre visible sous les cartes. Le matériau que nous utilisons pour le cube est BitmapMaterial. C'est la meilleure façon d'utiliser les bitmaps en tant que textures.
Étape 12: Créer une carte
Nous allons d'abord créer un titulaire. Il y aura deux avions dans ce support. L'un de ces plans est la face avant des cartes et l'autre est le dos. Nous allons utiliser le titulaire pour faire pivoter ou déplacer les cartes.
function createCard (texture: BitmapData, id: int): ObjectContainer3D carte var: ObjectContainer3D = new ObjectContainer3D () var face: Plane = new Plan (largeur: largeur de la carte, hauteur: hauteur de la carte, matériau: nouveau BitmapMaterial (texture, lisse: true)) var back: Plan = nouveau Plan (largeur: largeur de carte, hauteur: hauteur de la carte, matériau: nouveau BitmapMaterial (texture, smooth: true)) front.rotationY = 180 back.rotationZ = 180 back.rotationY = 180 back.extra = back.extra.id = id back.extra.targetCard = carte back.addOnMouseDown (onBackClicked) card.rotationZ = 180 card.addChild (avant) card.addChild (arrière) card.ownCanvas = true carte de retour
Dans cette fonction, nous recréons ce que le diagramme illustre. Nous devrions utiliser la rotation pour placer les cartes face cachée. Nous n’ajoutons pas d’événement au titulaire, car nous ne cliquons que sur la face arrière de la carte. Pour cette raison, nous ajoutons un événement mouseDown au plan arrière uniquement..
Chaque objet 3D dans Away3D peut avoir des variables supplémentaires et chaque couleur de notre jeu a un identifiant unique. Nous allons ajouter cette variable id à la propriété "extra" du plan arrière. Nous utiliserons les identifiants pour vérifier si les deux cartes sélectionnées ont la même couleur ou non..
Étape 13: Créer toutes les cartes
Après la création de la carte, nous sommes prêts à toutes les créer..
function initCards (): void cartes = new Array () pour (var i: int = 0; i
Nous allons pousser toutes nos cartes dans un tableau de cartes. Il y aura deux cartes de chaque couleur (deux bleues, deux rouges et deux vertes). Pour cette raison, nous créons deux cartes avec la même couleur, puis nous les poussons vers le tableau..
Étape 14: cartes aléatoires
La prochaine étape consiste à randomiser le tableau de cartes.
fonction randomizeCards (): void var newArray: Array = new Array (); while (cards.length> 0) newArray.push (cards.splice (Math.floor (Math.random () * cards.length), 1) [1]); cartes = newArray
C'est si simple. Nous créons d'abord un nouveau tableau. Nous sélectionnons ensuite un élément aléatoire dans le tableau de cartes, le plaçant dans le nouveau tableau et le retirant du tableau de cartes. Une fois la boucle while terminée, nous égalisons le tableau de cartes à notre nouveau tableau. Maintenant nous avons un tableau randomisé.
Étape 15: Ajout de cartes à la scène
Maintenant, nous avons randomisé nos cartes afin que nous puissions les ajouter à la scène. Nous allons utiliser un système de grille pour leurs positions
function addCardsToScene (): void titulaires de cartes = nouvel ObjectContainer3D () var currentindex: int = 0 pour (var i: int = 0; i<2; i++) for(var b:int=0; b<5; b++) cards[currentindex].x=b*(cardwidth+xoffset)+cardwidth/2 cards[currentindex].z=i*(cardheight+yoffset)+cardheight/2 cardsholder.addChild(cards[currentindex]) currentindex++ var cardswidth:Number = (5*cardwidth) + (4*xoffset) var cardsheight:Number = (2*cardheight) + (1*yoffset) cardsholder.x=-cardswidth/2 cardsholder.z=-cardsheight/2 scene.addChild(cardsholder)
La première boucle "for" concerne l'axe x et la seconde, l'axe y. Nous ajoutons des cartes à un nouveau détenteur principal. Ainsi, lorsque nous voulons faire pivoter ou déplacer les cartes, nous ne pouvons utiliser que le détenteur principal. Ensuite, nous définissons les cartes en utilisant le système de grille. Pour cela, nous utilisons des variables cardwidth, cardheight, xoffset et yoffset. Les cartes doivent être au milieu de la table. Pour ce faire, nous devons obtenir les valeurs de largeur et de hauteur du détenteur de la carte principale. Ce diagramme montre comment nous les obtenons.
Après les avoir obtenus, nous déplaçons le détenteur principal au milieu de la table..
Étape 16: événement de souris
Nous avons ajouté des cartes à la scène. Notre prochaine étape sera la création de la fonction d'événement mouseDown.
fonction onBackClicked (e: Event) if (disableMouseEvents == false) if (selectedCard1 == null) selectedCard1 = e.currentTarget as Plane else if (selectedCard2 == null) selectedCard2 = e.currentTarget as Plane waitForDecision () disableMouseEvents = true Tweener.addTween (e.currentTarget.extra.targetCard, y: 50, rotationZ: 0, heure: 1)
Nous vérifions d’abord disableMouseEvents. Cela signifie que si nous avons la permission de cliquer sur les cartes, nous continuons, mais si nous ne le faisons pas, rien ne se passe. Si la première carte n'est pas sélectionnée, la carte sur laquelle vous avez cliqué est notre première carte. Si la première carte n'est pas nulle, cette carte sur laquelle nous avons cliqué est notre deuxième carte..
Notre jeu doit faire un tour après avoir sélectionné les deux cartes pour savoir si elles sont identiques ou non. Pour cette raison, notre fonction "waitForDecision" est en cours d'exécution et nous définissons disableMouseEvents sur true. Donc, tant que le jeu attend une décision, rien ne se passera si nous cliquons sur une carte.
La propriété rotationZ de notre carte cliquée sera de 180 degrés avec Tweener, nous pouvons donc voir la couleur de la carte..
Étape 17: attendre une décision
Quand les deux cartes sont sélectionnées, le jeu attend un peu (c'est juste pour le fun).
function waitForDecision (): void var timer: Timer = new Timer (1000,1) timer.addEventListener (TimerEvent.TIMER, makeDecision) timer.start ()
Comme vous pouvez le constater, c’est une simple utilisation du minuteur. Il attend 1000 millisecondes (1 seconde). Après cela, TimerEvent déclenche l’exécution de la fonction makeDecision..
Étape 18: prendre une décision
Nous avons attendu une seconde et le moment est venu de prendre une décision. Si les valeurs id des cartes sont les mêmes, elles disparaîtront, sinon elles se retourneront face cachée
Nous faisons exactement cela dans cette fonction. Nous vérifions les valeurs d'identifiant de deux cartes sélectionnées. S'ils sont identiques, leur valeur alpha changera de 0 avec Tweener (nous les ferons disparaître). Lorsque cette interpolation est terminée, la fonction removeCard est appelée. Le paramètre de la fonction removeCard est les cartes elles-mêmes. Nous faisons cela aux deux cartes en même temps. S'ils ne sont pas identiques, nous les envoyons à leurs anciennes positions et les faisons face cachée. Quelle que soit la description, selectedCard1 et selectedCard2 seront définies sur null.
Étape 19: Retrait des cartes
Nous devons retirer les deux cartes de notre porte-cartes principal lorsqu'elles disparaissent, car nous n'en avons plus besoin.
function removeCard (e: ObjectContainer3D): void titulaires de la carte.removeChild (e) totalchildren-- if (totalchildren == 0) trace ("WIN")
Après leur expulsion, la valeur de totalchildren diminue un par un. Quand il atteint 0, cela signifie que vous avez gagné la partie.!
Étape 20: rendu
La dernière étape consiste à écrire une fonction de boucle pour rendre Away3D au runtime.
function startToRender (): void addEventListener (Event.ENTER_FRAME, rendu); function render (e: Event): void view.render ();
Étape 21: appeler toutes les fonctions
Nous sommes prêts à appeler toutes les fonctions que nous avons écrites.
Dans cette leçon, nous avons appris à ajouter des variables et mouseEvents à des objets Away3D. Avec ces compétences, nous avons créé un jeu et, comme vous pouvez le constater, ce n'était pas si difficile :)
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Share
Accentsconagua
