Tutorial Parte 1 Double Dragon

Para desarrollar nuestro videojuego, y poder seguir el tutorial, asumo que tienes ciertos conocimientos de programación. Se utilizarán variable, bucles y condicionales básicas de Lua. Uno de los lenguajes de scripting más utilizados por la industria. Me haré uso del fantástico Framework LÖVE (Love2D), que no confundir con un motor gráfico. Es una herramienta que nos ayudará a trabajar más rápido. Pero no podremos arrastrar y soltar características, como pudieras en Unity3D. Aquí te enseñaré a hacer un videojuego tan potente como lo seas tú. El único límite lo marcará tu imaginación y tus ganas de aprender. Además, podrás distribuirlo en cualquier plataforma sin pagar ninguna licencia. Y con la posibilidad de trabajar en cualquier sistema operativo.

Instalación

Necesitarás dos elementos.

• Love2D; que tendrás que descargarlo e instalarlo desde su página oficial.

Para comprobar si funciona correctamente, abre un terminal y escribe.

love

Se abrirá una ventana demo para comprobar si rinde con fluidez Love2d en tu equipo. Ya puedes cerrarla.

• Un editor de texto; yo te recomiendo Sublime Text, Atom o Vim. Puedes bajarlos en sus respectivas páginas.

Preparando el proyecto

Para realizar nuestro juego solo nos hará falta crear un solo archivo: main.lua. Pero un juego no solo come de código, necesita más disciplinas artísticas: como sonidos, imágenes, sprites, texturas… Para no tener todo mezclado, y como buena práctica, vamos a crear una serie de directorios.

• main.lua -> Archivo: Contendrá el código de nuestro juego.
• assets -> Directorio: Pondremos cualquier cosa que no sea el main.lua.
  • scripts -> Directorio: Para no tener un código espagueti, guardaremos en trozos más pequeños de código en formato.lua . Por ejemplo: camera.lua , hero.lua, level.lua…
  • sprites -> Directorio: Aquí pondremos todas las imágenes o sprites.
    • hero -> Directorio: Cualquier elemento gráfico que tenga nuestro protagonista.
    • level -> Directorio: Gráficos de los niveles. En nuestro caso del único que realizaremos.
    • vendor -> Directorio: Plugins externos.

touch main.lua
mkdir -p assets/scripts
mkdir -p assets/sprites/hero
mkdir -p assets/sprites/level

A continuación guarda dentro de hero el siguiente sprite.

Descarga: Hero double dragon

Guarda también el fondo del nivel en level.

Descarga: Fondo nivel

o sino con dos simples comandos.

wget -P assets/sprites/hero https://programadorwebvalencia.com/img/blog/2016/12/hero.avif
wget -P assets/sprites/level https://programadorwebvalencia.com/img/blog/2016/12/background.avif

Teoría

Antes de continuar quiero que tengas unos conceptos claros. Mi intención no es solo enseñarte a hacer el Double Dragon, sino que aprendas técnicas para realizar cualquier otro. Por ello creo que es básico que sepas que cualquier videojuego que se precie realiza las siguientes tareas.

Al iniciarse.

1. Cargar todos los scripts que necesite.
2. Ejecutar los scripts.
3. Actualizar las variables.
4. Dibujar en la ventana los gráficos.

Después, de ese momento de estrés para la cpu, habrá un bucle infinito que siempre repetirá el siguiente orden.

1. Comprobar eventos: si se ha pulsado algun botón del teclado, mando o ratón.
2. Actualizar las variables: Cada script será modificado siguiendo una lógica que hemos definido. Por ejemplo, la posición de la cámara o la posición de nuestro héroe.
3. Redibujar: a partir de los datos anteriores, se vuelve a construir lo que ve el jugador.

Por curiosidad os digo que esta tarea se realiza muy muy rápido. Si el juego trabaja a 60 frames/seg, en ese caso se realizará cada 16 milisegundos aprox (1000 milisegundos que es un segundo / 60 frames).

Siguiente esta guía trabajaremos con Love2D para replicar la mecánica.

Configurando el juego

Antes de nada vamos a dar una estructura a nuestro juego. Abrimos main.lua y escribiremos el siguiente código.

-- Bibliotecas
local game = require 'assets/scripts/game' -- Cargamos al script game.lua que un poco más tarde crearemos.

-- Cargar
function love.load()
	game.load()	-- Ejecutamos game.lua
end

-- Actualizar
function love.update(dt)
	-- Por ahora no tenemos nada que actualizar
end

-- Pintar
function love.draw()
	-- No pintamos
end

-- Eventos
function love.keypressed(key, scancode, isrepeat)
	-- Eventos de teclado: apretando una tecla
end

function love.keyreleased(key, scancode)
	-- Eventos de teclado: Soltando una tecla
end

Creamos un nuevo archivo llamado game.lua que estará en assets/scripts.

local game = {} -- Para poder usarlo en main.lua, debemos crear un diccionario con todo y luego devolverlo

function game.load()
	-- Configuración
	game.window = { width = 800 , height = 600 } -- Definimos el tamaño de la ventana. Será el mismo que el fondo. Crearemos un diccionario de Lua para almacenarlo y acceder cómodamente.
	love.window.setMode(game.window.width, game.window.height) -- Decimos a Love2d las medidas de la ventana.
end

return game

Ahora vamos a ejecutar nuestro juego. Abre el terminal y sitúate sobre el directorio.

	cd ruta-de-la-carpeta-de-tu-juego
	love

Si no te da ningún error, deberías ver una ventana negra.

Vamos a añadir nuestro nivel. Para ello creamos level.lua en scripts siguiendo la estructura de game.lua. Que será la que utilizaremos siempre.

local level = {}

function level.load()
	level.background = {}
	level.background.img = love.graphics.newImage('assets/sprites/level/background.png') -- Cargamos la imagen de fondo
	-- Indicamos las posiciones, que siempre empezarán en la esquina superior izquierda
	level.background.x = 0
	level.background.y = 0
end

function level.draw() -- Pintamos
	love.graphics.draw(level.background.img, level.background.x, level.background.y)
end

return level

Y para integrarlo a main.lua así de sencillo.

local game = require 'assets/scripts/game'
local level = require 'assets/scripts/level'

-- Cargar
function love.load()
	game.load()
	level.load()
end

-- Actualizar
function love.update(dt)
	-- Por ahora no tenemos nada que actualizar
end

-- Pintar
function love.draw()
	level.draw()
end

-- Eventos
function love.keypressed(key, scancode, isrepeat)
	-- Eventos de teclado: apretando una tecla
end

function love.keyreleased(key, scancode)
	-- Eventos de teclado: Soltando una tecla
end

Continúa en la parte 2