SpriteKit Advanced - Cómo construir un juego 2,5D (Parte I)

Introducción

Este artículo trata sobre la evolución gráfica de Raft Challenge desde el prototipo hasta el producto final. Está dirigido a AIM para las personas que están pensando en hacer su propio juego con gráficos como Raft, pero no saben exactamente cómo comenzar.

El comienzo de Raft Challenge

Raft Challenge nació durante el primer hackathon organizado por All In Mobile. La idea era hacer un juego donde un jugador evite obstáculos. Queríamos mantener las cosas lo más simples posible.

Después del fin de semana, tuvimos un prototipo que se veía así:

Raft Challenge ganó el hackathon. La compañía anunció que creará los recursos para mejorar el juego.

¡Hagámoslo 2,5D!

Al comienzo del proyecto, Raft tenía los gráficos más simples posibles. Una vista estaba directamente sobre una textura plana del suelo, con círculos de colores que indicaban al jugador y a los enemigos. Era hermoso y tan simple como el código debajo. Luego vino nuestro diseñador gráfico y lo estropeó todo. Él dijo: "¡Hagámoslo 2,5D!". El desafío fue aceptado y la animación anterior fue el resultado.

Después del hackathon apareció una vez más. Esta vez fue algo más que una oración.

Fue una sonrisa malvada y este video:

Perspectiva explicada

Ok, dejemos el acto :-). He querido darle la sensación de que él está a cargo. ¡Pero yo soy el jefe aquí! La perspectiva es fácil de implementar en el código, independientemente del motor 2D que usemos.

Primero, tenemos que determinar dónde queremos poner el punto de fuga. El siguiente ejemplo muestra este punto en el centro del lienzo.

Raft Challenge tiene este punto en la mitad superior de la pantalla, porque el cielo y todo lo que está arriba no es tan importante como los obstáculos en el río.

¿Cómo se hacen los sprites? Si bien puede ser obvio para alguien con experiencia artística, no está necesariamente claro para una persona técnica.

Hay dos reglas:

  • Las partes móviles deben dibujarse a lo largo de las líneas auxiliares como se muestra arriba
    Todas esas líneas se cruzan en el punto de fuga.

Nota: La parte de la costa no está llegando al punto de fuga. Se detiene en algún lugar en el medio, dejando atrás el área transparente.

  • Esa área vacía entre el gráfico y el punto de fuga tiene un propósito importante.
    Tendrá elementos que están más lejos.

Esas partes se hacen aplicando una escala dos veces más pequeña para cada paso. La imagen resultante debe ser perfecta si la textura está bien hecha.

Armando la escena

Después de que hayamos preparado todos nuestros activos, necesitamos ponerlos a todos en escena.

Veamos cómo se ve en Raft Challenge.

Comenzando desde la base:

  1. Capas de fondo
    Fondo
    Hierba
    Fondo de niebla
    Dom
    Montañas
    Linea Horizon
  • Estas capas son todas estáticas, no se mueven
  • El fondo actúa tanto para el cielo como para el agua.
  • El fondo es un degradado simple
    Se estira para llenar toda la pantalla del dispositivo.
    La relación de aspecto se ignora
  • Podemos fusionar capas que no sean Fondo para aumentar el rendimiento, a menos que queramos cambiar algunas propiedades
  • Podemos mover el sol durante el juego.
     o reemplazar montañas por algo diferente

2. Capas de perspectiva
Árboles con reflejos
Costa
Los obstáculos

  • Para la claridad de la imagen de arriba, se agruparon las capas con contenido similar
    Había:
    2 capas de obstáculos
    8 capas de costa
    8 capas de árboles con reflejos
  • Estas capas se amplían en 2 cuando un jugador avanza
  • El orden de estas capas depende de
    distancia
    los más cercanos están arriba
    prioridad
    Obstáculo> Costa> Árboles

3. Carácter

  • Si un obstáculo está en la posición más cercana posible, puede tener una posición z más alta que el personaje en sí
    En este caso, el obstáculo cubre el personaje, lo cual es deseable

4. GUI

  • Los buenos gráficos deben depender de ilusiones y trucos en lugar de hardware

Resumen

Este artículo debería darnos una idea de cómo abordar el problema de hacer activos para un juego 2,5D y organizarlos en una escena.

Puedes leer la parte 2 de esta serie aquí.

Sobre el autor: Kamil Ziętek es desarrollador de iOS en www.allinmobile.co