Tutorial como hacer un Flappy Bird en Love2D - Parte 1

Empezaremos creando un proyecto nuevo en Atom, haremos una carpeta llama "flappyBird" y en Atom iremos a File - Add Project Folder. Seleccionamos la carpeta de nuestro proyecto.

Ahora crearemos el archivo conf.lua y le añadiremos lo siguiente:

function love.conf(t)
  t.window.title = "Flappy Bird - made in Love2D by Deybis Melendez"
  t.window.width = 512
  t.window.height = 288
end




Guardamos el archivo con Ctrl +S, y ahora creamos un archivo nuevo llamado main.lua.

El main.lua:

function love.load():

Comenzaremos con la funcion love.load y añadiremos las variables que utilizaremos para manipular el pajaro, en este caso, el pajaro será representado por un circulo rojo, no utilizaremos imágenes.

Primero añadimos una tabla pajaro = {} esto nos servirá para mantener toda la información del pajaro en un solo lugar, como la posicion, radio del circulo, color, etc.

Luego añadiremos las variables a continuación:

pajaro.radio = 10
pajaro.x = love.graphics.getWidth() / 2 - pajaro.radio
pajaro.y = love.graphics.getHeight() / 2 - pajaro.radio
pajaro.r , pajaro.g , pajaro.b = 255 , 0 , 0 -- Indicamos los colores RGB
pajaro.grav = 20

pajaro.mov = 0
pajaro.salto = 5
pajaro.maxY = love.graphics.getHeight() - pajaro.radio

pajaro.minY = pajaro.radio
end --Indica que la funcion love.load termina ahí.

Explicación:
radio: indicamos el radio del circulo, 10 pixeles de radio.
x,y: calculamos el centro de la pantalla, restando la mitad del ancho y alto respectivamente de la pantalla y lo restamos con el radio.
r, g, b: representa el numero RGB que coloreará el circulo.
grav: el valor de la gravedad que aplicaremos al pajaro.
mov: representa el movimiento en frames del pajaro.
salto: Fuerza que aplicaremos para que el pajaro vuele.
maxY, minY: con esto limitamos a que el pajaro no salga de la pantalla, aplicando una altura maxima (maxY) y una minima (minY)

Nos debe quedar así:


function love.update(dt):

Ahora aplicaremos la lógica del pajaro escribiendo lo siguiente:

  -- Movimiento del pajaro
  pajaro.y = pajaro.y + pajaro.mov -- Indicamos el movimiento en la posicion
  pajaro.mov = pajaro.mov + pajaro.grav * dt -- Aplicamos gravedad al movimiento
  -- Aplicamos limite para que el pajaro no salga de pantalla
  if pajaro.y > pajaro.maxY then -- Si la posicion del pajaro es mayor al limite maximo entonces...
    pajaro.y = pajaro.maxY -- Coloca el pajaro en el limite maximo
    pajaro.mov = 0 -- Su movimiento es 0
  elseif pajaro.y < pajaro.minY then -- además si la posicion del pajaro es menor que el limite minimo entonces...
    pajaro.y = pajaro.minY -- Coloca el pajaro en el limite minimo
    pajaro.mov = 0
  end -- Siempre hay que indicar que el if termina con end.
end


La multiplicación de pajaro.grav por dt es para que el el movimiento se regule en base a la media del fps del juego, y que no dependa de la velocidad de los frames por segundos, que puede variar según la caracteristica del PC.

Nos debe quedar así:


function love.draw():

Ahora que ya tenemos la lógica básica del pajaro, nos hace falta dibujarlo en pantalla, para ello, vamos a escribir:

  -- Dibujamos el pajaro
  love.graphics.setColor(pajaro.r, pajaro.g, pajaro.b)
  love.graphics.circle("fill", pajaro.x, pajaro.y, pajaro.radio)
end


Primero seleccionamos el color que utilizaremos para dibujar el circulo con  love.graphics.setColor() esta función acepta 4 valores, el codigo RGB y un canal alfa. Es decir, Le podemos indicar por separado cuanto R (rojo), G(verde), B (azul), alfa (transparencia) va a tener lo que vamos a dibujar, el canal alfa puede ser omitido ya que por default vale 1. Los codigos RGB los podemos conseguir facilmente en internet.

Segundo indicamos que dibujaremos un circulo con love.graphics.circle() acepta 4 valores, el modo, que puede ser "fill" (rellenar) o "line" (linea), la posicion x, la posicion y, y el radio del circulo.

Nos debe quedar así:


function keypressed(key):

Esta función se ejecuta cuando una tecla es presionada, escribiremos lo siguiente:

-- Controles
function love.keypressed(key)
  if key == "w" then -- Si "key" es igual a "w" entonces...
    pajaro.mov = - pajaro.salto -- Al movimiento del pajaro le restamos el salto.
  end
end


En total el código nos debe quedar así:


Ahora guardamos todo, y si ejecutamos el proyecto, por ahora deberiamos ver el pajaro (circulo rojo) con gravedad y al presionar W pueda hacer saltos en el aire.


No hay comentarios:

Publicar un comentario

Como hacer un Snake en Love2D

Archivos Comenzamos creando los archivos main.lua y conf.lua, en el conf.lua solo añadimos lo siguiente: function love.conf(t)   t.win...