En este tutorial construiremos un juego de memoria 3D. En el camino veremos cómo agregar variables y mouseEvents a los objetos Away3D. Empecemos…
Paso 1: Archivo ActionScript
Crear un nuevo archivo de ActionScript 3.0.
Paso 2: Editar perfil
En el panel Propiedades presione el botón Editar..
Paso 3: Elija la versión de Flash Player
Elija el perfil de Flash Player 9 y haga clic en Aceptar.
Paso 4: Consigue el motor Away3D!
Guarde su archivo como "Memory Game.fla" en la carpeta Tutorial de juego de memoria. Ahora descargue el motor Away3D de Descargas Away3D. Usaremos la versión 2.3.3 para Flash Player 9. Descomprima el archivo y copie todas las carpetas en la carpeta Tutorial del juego de memoria.
Paso 5: Consigue el Tweener!
Descarga Tweener desde aquí. Descomprima los archivos de clase en su carpeta Tutorial de juego de memoria para que todo se vea así:
Paso 6: Importar texturas
Usaremos 5 tarjetas diferentes para este juego (puedes encontrarlas en los archivos de origen). Importalas en Flash yendo a Archivo> Importar> Importar a biblioteca.
Paso 7: Exportar texturas para ActionScript
Para utilizar estas texturas en tiempo de ejecución, debemos adjuntarles un nombre de clase. Seleccione las imágenes una por una y haga clic con el botón derecho> Propiedades> Exportar para ActionScript. Solo remueve las partes ".png" de sus nombres.
Paso 8: Iniciar la codificación
Después de todo eso estamos listos para empezar a programar. Vamos a llenar nuestras primeras líneas importando las clases:
Después de importar nuestras clases, debemos definir nuestras variables para usar en los siguientes pasos.
var escena: Scene3D; cámara var: Camera3D; vista de var: View3D; var totalchildren: int = 10 var cards: Array var textures: Array = [new texture0 (0,0), new texture1 (0,0), new texture2 (0,0), new texture3 (0,0), new texture4 (0,0)] var backtexture: BitmapData = nueva textureback (0,0) var woodtexture: BitmapData = nueva texturewood (0,0) ancho de tarjeta var: Number = 110 var cardheight: Number = 150 var xoffset: Number = 10 var yoffset : Número = 10 titular de la tarjeta var: ObjectContainer3D var selectedCard1: Plane var selectedCard2: Plane var disableMouseEvents: Boolean = false
La matriz de texturas contiene nuestras imágenes de texturas. Para adjuntar imágenes a nuestro escenario desde la biblioteca usamos este método: var imageData: BitmapData = LibraryLinkageName (0,0). Usamos el mismo enfoque para nuestra mesa y la cara posterior de las cartas. xoffset y yoffset definen la distancia entre las tarjetas.
Paso 10: Configurar Away3D
En primer lugar tenemos que construir Away3D.
function initAway3D (): void scene = new Scene3D (); cámara = nueva Camera3D (); camera.y = 700 camera.z = 500 camera.lookAt (nuevo Number3D (0,0,0)) view = new View3D (scene: scene, camera: camera); view.x = stage.stageWidth / 2 view.y = stage.stageHeight / 2 addChild (view);
La primera línea en nuestra función crea la escena 3D. Añadiremos objetos 3D en él. Después de eso creamos la cámara. Lo moveremos hacia atrás y hacia arriba un poco. Al hacer esto, podremos ver las cartas mejor cuando estamos jugando el juego. Entonces lo centraremos. Finalmente creamos la Vista y la colocamos en el medio de la escena..
Paso 11: Creando la tabla
En este paso crearemos la tabla:
function createGround (): void var cube: Cube = new Cube (width: 680, depth: 400, height: 20, pushback: true, ownCanvas: true, material: new BitmapMaterial (woodtexture)) cube.y = - 20 scene.addChild (cubo)
Para hacerlo más realista, estamos usando un cubo en lugar de un plano. El punto más importante aquí es usar las propiedades de retroceso en Cube para hacerlo visible debajo de las tarjetas. El material que utilizamos para Cube es BitmapMaterial. Esta es la mejor manera de usar mapas de bits como texturas..
Paso 12: Crear una tarjeta
Primero vamos a crear un titular. Habrá dos planos en este soporte. Uno de estos planos es la cara frontal de las cartas y el otro es la parte posterior. Usaremos el soporte para rotar o mover las cartas..
function createCard (textura: BitmapData, id: int): ObjectContainer3D var card: ObjectContainer3D = new ObjectContainer3D () var front: Plane = new Plane (width: cardwidth, height: cardheight, material: new BitmapMaterial (texture, smooth: true)) var back: Plane = new Plane (width: cardwidth, height: cardheight, material: new BitmapMaterial (backtexture, smooth: true)) front.rotationY = 180 back.rotationZ = 180 back.rotationY = 180 back.extra = back.extra.id = id back.extra.targetCard = card back.addOnMouseDown (onBackClicked) card.rotationZ = 180 card.addChild (anverso) card.addChild (back) card.ownCanvas = true tarjeta de devolución
En esta función estamos recreando lo que ilustra el diagrama. Debemos usar la rotación para colocar las cartas boca abajo. No estamos agregando un evento al titular, porque solo hacemos clic en la cara posterior de la tarjeta. Por esta razón, agregamos un evento mouseDown a la parte posterior del avión solamente.
Cada objeto 3D en Away3D puede tener variables adicionales y cada color en nuestro juego tiene una identificación única. Agregaremos esta variable de identificación a la propiedad "adicional" del plano posterior. Usaremos los identificadores para verificar si las dos tarjetas seleccionadas son del mismo color o no.
Paso 13: Creando todas las cartas
Después de la función de creación de tarjetas, estamos listos para crearlos todos..
function initCards (): void cards = new Array () para (var i: int = 0; i
Vamos a empujar todas nuestras tarjetas a una matriz de tarjetas. Habrá dos cartas de cada color (dos azules, dos rojas y dos verdes). Debido a esto creamos dos tarjetas del mismo color y luego las empujamos a la matriz.
Paso 14: aleatorizar tarjetas
El siguiente paso es aleatorizar la matriz de tarjetas.
function randomizeCards (): void var newArray: Array = new Array (); while (cards.length> 0) newArray.push (cards.splice (Math.floor (Math.random () * cards.length), 1) [0]); cards = newArray
Todo es tan simple. Primero estamos creando una nueva matriz. Luego, seleccionamos un elemento aleatorio de la matriz de tarjetas, lo empujamos a la nueva matriz y lo eliminamos de la matriz de tarjetas. Después de que el bucle while se haya completado, igualaremos la matriz de tarjetas a nuestra nueva matriz. Ahora tenemos una matriz aleatoria.
Paso 15: Agregar cartas a la escena
Ahora, hemos aleatorizado nuestras cartas, para que podamos agregarlas a la escena. Usaremos un sistema de rejilla para sus posiciones.
función addCardsToScene (): void cardsholder = new ObjectContainer3D () var currentindex: int = 0 para (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)
El primer bucle "para" es para el eje x y el segundo para el eje y. Estamos agregando tarjetas a un nuevo soporte principal, por lo que cuando queremos rotar o mover las tarjetas solo podemos usar el soporte principal. Luego configuramos las tarjetas utilizando el sistema de cuadrícula. Para eso estamos usando las variables de ancho de tarjeta, cardheight, xoffset y yoffset. Las cartas deben estar en el centro de la mesa. Para hacer esto necesitamos obtener los valores de ancho y alto del portatarjetas principal. Este diagrama muestra la forma en que los estamos obteniendo..
Una vez que los conseguimos, movemos el soporte principal al centro de la mesa..
Paso 16: Evento con el mouse hacia abajo
Hemos añadido cartas a la escena. Nuestro siguiente paso será crear la función de evento mouseDown..
function 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, time: 1)
Primero revisamos disableMouseEvents. Eso significa que si tenemos permiso para hacer clic en las tarjetas, continuamos, pero si no lo hacemos, nada sucede. Si la primera tarjeta no está seleccionada, nuestra primera tarjeta será la tarjeta que haya hecho clic. Si la primera carta no es nula, entonces esta carta pulsada es nuestra segunda carta..
Nuestro juego debe hacer una decisión después de seleccionar las dos cartas en cuanto a si son iguales o no. Por esta razón, nuestra función "waitForDecision" se está ejecutando y configuramos disableMouseEvents en true. Entonces, mientras el juego está esperando una decisión, no pasará nada si hacemos clic en una carta.
La propiedad rotationZ de nuestra tarjeta en la que se hizo clic será de 180 grados con Tweener, por lo que podemos ver el color de la tarjeta..
Paso 17: esperar una decisión
Cuando se seleccionan las dos cartas, el juego espera un poco (esto es solo por diversión).
función waitForDecision (): void var timer: Timer = new Timer (1000,1) timer.addEventListener (TimerEvent.TIMER, makeDecision) timer.start ()
Como puede ver, este es un simple uso del temporizador. Espera 1000 milisegundos (1 segundo). Después de eso, TimerEvent activa la función makeDecision para ejecutarse.
Paso 18: tomar una decisión
Esperamos 1 segundo, así que ahora es el momento de tomar una decisión. Si los valores de identificación de las tarjetas son los mismos, desaparecerán, si no, se volverán a poner boca abajo.
Estamos haciendo exactamente eso en esta función. Estamos comprobando los valores de identificación de dos tarjetas seleccionadas. Si son iguales, los valores alfa de ellos cambiarán a 0 con Tweener (los hacemos desaparecer). Cuando esta interpolación termina, se llama a la función removeCard. El parámetro de la función removeCard es las propias tarjetas. Hacemos esto a las dos cartas al mismo tiempo. Si no son iguales, los enviamos a sus posiciones anteriores y los hacemos boca abajo. Cualquiera que sea la descripción, selectedCard1 y selectedCard2 se establecerán en nulo.
Paso 19: Extracción de tarjetas
Necesitamos quitar las dos cartas de nuestro portador principal cuando desaparecen, porque ya no las necesitamos.
function removeCard (e: ObjectContainer3D): void cardsholder.removeChild (e) totalchildren-- if (totalchildren == 0) trace ("WIN")
Después de que son expulsados de la escena, el valor del total de niños disminuye uno por uno. Cuando llega a 0 significa que has ganado el juego.!
Paso 20: Rendering
El último paso es escribir una función de bucle para generar Away3D en tiempo de ejecución.
En esta lección aprendimos cómo agregar variables y mouseEvents a los objetos de Away3D. Con estas habilidades hicimos un juego y como puedes ver, no fue tan difícil :)
Espero que te haya gustado este tutorial, gracias por leerlo.!
Share
Accentsconagua
