Advertisement
  1. Code
  2. Games

Crea un Juego De Carreras Sin Un Motor 3D

Scroll to top
Read Time: 13 min

Spanish (Español) translation by Viviana Brito (you can also view the original English article)

Este tutorial le dará una alternativa para juegos de carrera 3D en ActionScript 3. Ningún framework externo es requerido para este ejemplo con estilo de la vieja escuela.


Avance del Resultado Final

Vamos a echar una mirada al resultado final hacia el que estaremos trabajando.


Paso 1: Crea el Documento FLA.

Crea un nuevo documento Flash configurado para ActionScript 3.0. Estaré usando dimensiones de 480x320px, una velocidad de fotogramas de 30 FPS, y un fondo de color celeste. Guarde el archivo con un nombre a su elección.

Create a .FLA documentCreate a .FLA documentCreate a .FLA document

Paso 2: Crear una Clase Documento

Aparte de el FLA, también necesitamos crear una clase documento. Crea un nuevo archivo Actionscript y añada este código.

Guarde este archivo en el mismo directorio que su FLA. Nombrela como Main.as.


Paso 3: Asociar la Clase Main con el FLA

Para poder compilar el código desde la clase Main, necesitamos asociarlo con el FLA. En el panel de Propiedades del FLA, seguido de Class, ingrese el nombre de la clase documento, en este caso, Main.

Link the Main class with the FLA

Luego, guarde los cambios en el FLA.


Paso 4: Dibujar una Línea de Carretera.

Necesitamos comenzar con una línea para representar un segmento del camino. Presione R para seleccionar la herramienta de Rectángulo. En este ejemplo voy a hacer un rectángulo gris para el camino, dos pequeños rectángulos rojos para cada borde del gris, y rectángulos verdes para rellenar el resto de la línea. Los verdes deben ser más anchos que el escenario, voy a hacerlos de 1500 pixeles de ancho. La amplitud del camino puede variar según sus necesidades, voy a usar uno de 245px de ancho. No es necesario que sean muy altos, ya que estaremos usando varias instancias para dibujar todo el camino en la pantalla. Voy a hacerlos de 10px de alto.

Draw some rectangles next to each other for a road lineDraw some rectangles next to each other for a road lineDraw some rectangles next to each other for a road line

Paso 5: Crear un MovieClip para las Lineas de la Carretera.

Una vez que haya dibujado todos los rectángulos, selecciónelos a todos (Ctrl + A) y presione F8 para crear un Clip de Película de esos rectángulos que acaba de hacer. Nombrelo "Road", asegúrese de que el Registration Point está en el centro y seleccione el checkbox "Export for ActionScript".

Create a MovieClip out of the rectangles you drew.Create a MovieClip out of the rectangles you drew.Create a MovieClip out of the rectangles you drew.

Terminará con un MovieClip Road en la Librería. 

Road MovieClip in the Library.Road MovieClip in the Library.Road MovieClip in the Library.

Depende de usted si quiere dibujar cada rectángulo en diferentes capas. Yo sólo voy a poner el gris en una segunda capa. Si tiene una instancia Road en el Stage, elimínela.  Vamos a añadir más tarde el MovieClip Road mediante código.


Paso 6: Establecer el Área de Juego.

Vamos a volver a la clase Main. Usaremos ese MovieClip Road para generar la ilusión de una pista de carreras.

Determinaremos la profundidad del camino visible, así como también las dimensiones del área de juego. También, en nuestra clase, todas las instancias Road que añadimos al stage serán accedidas desde un Array. Usaremos otro Array (zMap) para determinar la profundidad de cada línea.

En este ejemplo, voy a establecer una profundidad de 150 líneas de carretera en un área de juego de 480x320 (no es necesario que sea del mismo tamaño que el stage, pero ya que es todo lo que se mostrará, voy a usar esos números).


Paso 7: Visualizar el Camino por Código

Vamos a emplear todas las variables y constantes previas dentro de la función Main. Vamos a escalar cada línea de acuerdo a su correspondiente profundidad.

Si usted Publica (Ctrl + Enter) el documento en este punto, va a obtener una vista de un camino recto.

A straight road drawn by a series of the Road MovieClips we created previously.A straight road drawn by a series of the Road MovieClips we created previously.A straight road drawn by a series of the Road MovieClips we created previously.

Puede juguetear un poco con los cálculos de escala para obtener resultados diferentes. Puede desear un camino más amplio o una vista a la distancia, más larga.


Paso 8: Hacer un Segundo Gráfico de Camino.

En este momento el camino parece tan plano que usted no es capaz de decir si nos estamos moviendo hacia adelante. Necesitamos al menos dos estilos diferentes de segmentos para distinguir cuan rápido o lento nos estamos moviendo.

Vaya al panel de la Librería y haga doble clic sobre el Clip de Película Road  para que obtenga los rectángulos que dibujó. Ahora presione F6 para insertar un nuevo Keyframe (Si tiene más de un cuadro va a necesitar insertar un nuevo Keyframe en cada capa). Ahora, basado en el primer cuadro, puede cambiar los colores de los rectángulos o modificar su diseño de alguna manera. Voy a cambiar su color y añadir algunas líneas de carril para el segundo cuadro.

Change the colors or add lane lines on the second frame.Change the colors or add lane lines on the second frame.Change the colors or add lane lines on the second frame.

Paso 9: Mantener la Línea del Jugador sin Escalar.

Definiremos una nueva variable en la clase Main para sostener la consistencia en la línea del jugador (asumiendo que va a haber un auto en el juego, vamos a mantener la escala a 1 en esa línea).

A continuación, modificaremos la función Main.


Paso 10: Añadir Líneas Alternativas al Camino.

Esta variable será usada en la función Main. Ahora las líneas Road serán segmentadas, algunas se visualizarán en el segundo cuadro y el resto en el primero, aumentando la ilusión de una pista de carrera.

Puede no ser necesario multiplicar por 100 para obtener los segmentos de manera correcta, pero estos son números que voy a usar en este ejemplo, siéntase libre de modificar los números a su gusto (y si arruina algo, tiene esto como referencia).

Add alternate lines to the road.Add alternate lines to the road.Add alternate lines to the road.

Paso 11: Configurar una Velocidad y un Offset

Vamos a comenzar a hacer que las cosas se muevan. Estableceremos una variable para la velocidad. Esto indicará la profundidad que avanzaremos por cuadro. Voy a comenzar a una velocidad de 20, puede usar cualquier número que usted quiera.

También necesitaremos un indicador para los segmentos del camino, que cambiará de acuerdo a la velocidad.


Paso 12: Comenzar a Avanzar

Antes de que podamos hacer algo con esas variables, vamos a necesitar importar un nuevo Evento en esta clase. Podemos usar un Timer o un EnterFrame. En este ejemplo voy a usar un Evento EnterFrame.

Ahora, vamos a cortar el último condicional en la función Main() y moverlo a una nueva función que estamos creando. Esta nueva función va a ser disparada por el Evento EnterFrame, de manera tal que vamos a tener movimiento continuo en el camino. Vamos a nombrarlo race().


Paso 13: Definir una Función Race.

A continuación, vamos a traer de vuelta el condicional que fue cortado a la nueva función para obtener movimiento. El texOffset apuntará la posición del camino para mantener una ilusión precisa de movimiento.

Si Publica esto ahora, debería obtener un camino animado.


Paso 14: Direccionamiento

Caminos perpetuamente derechos son aburridos y hay miles de maneras de hacer una perspectiva que vaya sólo para adelante. Ahora vamos a añadir algunas nuevas variables que se encarguen de las curvas en movimiento.

En este ejemplo voy a alternar curvas hacia la derecha con secciones rectas. El camino por delante va a ser almacenado en la variable nextStretch. También, vamos a mover la posición x en las curvas.


Paso 15: Añadir Curvas al Camino

La variable rx va a almacenar la posición x de cada línea, así que vamos a querer que comience en el centro y tomar las curvas a partir de allí. Otra cosa, ddx controla la agudeza de las curvas. En este ejemplo lo tengo a 0.02; usted puede variar su valor entre curvas. Así es como la nueva función race() se verá.

Esta vez no vamos a tocar la función Main. Si lo Publica ahora, va a ver algo como esto.

Curves.Curves.Curves.

Puede querer cambiar el valor de la Curva para Izquierda y Derecha y los valores de la dirección. En este punto debería ser capaz de añadir un auto a la escena y controlar manualmente la velocidad. 


Paso 16: Colinas, Pendientes

¿Recuerda que los rectángulos para el camino son de más de 1 pixel de alto?  Eso puede ayudarle a ampliar la vista del camino en caso de querer colinas en nuestro juego.

Hay un método para hacer colinas que es muy similar al de las curvas. Puede haber muchos métodos diferentes, pero este es uno de los que estaré usando aquí. Para simplificarlo, voy a reciclar la mayor cantidad del código que ya tenemos y sólo añadir unas pocas líneas para este nuevo efecto. Como siempre, si no le gustan los resultados puede modificar los valores a su voluntad.

Acabamos de hacer unas variables para las posiciones x de las líneas del camino, ahora vamos a hacer las de las posiciones y, también.


Paso 17: Cuesta abajo, Cuesta arriba

Para hacerlo más sencillo, en este ejemplo voy a usar los mismos segmentos rectos para un efecto cuesta arriba recto y las curvas para una curva y un efecto de descenso.

En su juego puede separar las curvas de las colinas y hacer dos algoritmos diferentes, pero este ejemplo muestra los similares que pueden ser.

Hills.Hills.Hills.

Paso 18: Mejorar la Estética del Camino

Los juegos de antes no tenían la ventaja del Flash, pero nosotros si. Algo tan simple como añadir un gradiente a las líneas del camino hará una buena diferencia. Si lo desea, puede usar cualquier filtro y texturas que guste, pero en este ejemplo estaré añadiendo algunos gradientes simples, así que volvamos al MovieClip Road.

En el cuadro 1, seleccione el rectángulo gris, luego vaya al panel de Color y seleccione Linear Gradient del menú desplegable, luego elija Reflect color como Flow, de manera que el gradiente se aplicará desde el primero hasta el último color. No le estoy diciendo que elija el mismo color que yo, pero aquí voy a usar el #666666 y el #999999. Si necesita rotar el gradiente, presione F para cambiar a Gradient Transform Tool, que le permitirá mover, rotar y redimensionar su gradiente. En este caso voy a mover el gradiente a un cuarto del rectángulo y redimensionarlo a la mitad del tamaño de modo tal que el centro sea más claro y los bordes más oscuros. Yo uso un tamaño similar para la parte verde, así que cambiaré de verde oscuro (#006600) a un verde claro (#009900) continuamente.

Add gradients for a nicer texture.Add gradients for a nicer texture.Add gradients for a nicer texture.

Ahora vaya al cuadro 2 y haga nuevos gradientes con diferentes colores. Para el rectángulo gris, mantuve el color claro y sólo cambié el color oscuro a #777777. En la parte verde, cambié el tamaño del gradiente para evitar un aspecto de tablero de damas y el cambio de colores fue muy sutil (#007700 y #008800).

A subtle change of colors from frame 1 to frame 2.A subtle change of colors from frame 1 to frame 2.A subtle change of colors from frame 1 to frame 2.

Tal vez ahora va a querer agregar un lindo fondo en el horizonte, o algunos gráficos para el cielo.


Conclusión.

Ya sea que cuente con pocos recursos para frameworks 3D o simplemente quiera un aspecto de vieja escuela, ahora tiene un ejemplo simple sobre cómo hacer una ilusión de profundidad para un juego de carreras. Ahora depende de usted si será un Gran Prix o una carrera callejera en una autopista llena de tráfico o quizás algo que no tenga relación con las carreras.

Espero que este tutorial le haya sido de ayuda. ¡Gracias por leer!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.