Programando con Love 2D – Ejemplos de animación I

Posiblemente escribiré más de un post sobre como realizar animación programando con el framework love2D en LUA. El motivo es que no existe una sola forma de hacer las cosas y es por eso que quiero cubrir unas cuantas formas de realizar una animación.

Para entender la forma de animación que voy a proponer en este post es recomendable mirar por encima estas otras entradas anteriores:

* Programando con Love 2D – Rectángulos de colores en movimiento
* Programando con Love 2D – Moviendo rectángulos con el teclado

Dicho eso vamos a ver un ejemplo sencillo en el que vamos a animar al rex del juego que sale en google chrome en Android cuando no tenemos conexión. Este:

Necesitaremos ese archivo llamado rex.png. Un sprite en el que disponemos de 6 frames tal y como puede verse en este otro gráfico:

El ancho total del sprite es 528 y el alto 94. Por tanto cada frame tendrá un ancho de 88 px (528/6) y un alto de 94 px.

De primeras vamos a realizar un código sencillo en el que solamente pulsaremos la tecla cursor derecha y se moverá el dinosaurio hacia la derecha. Cada vez que pulsemos la tecla derecha cambiará del frame 1 al frame 2, luego al frame 3 y así hasta llegar al frame 6. Luego comenzará de nuevo con el frame 1.

Importante saber que no es la forma más correcta de hacerlo pero si creo que es una en la que nos vemos obligados a ver el proceso. Luego realizaremos algo mejor tranqui.

El código para que podamos mover el dinosaurio y ver la animación de los 6 frames:

function love.load()
	love.window.setFullscreen(true, "desktop") -- set fullscreen
	sw, sh = love.graphics.getDimensions() -- sw screen width and sh screen height
	x = 0
	y = sh-94

	image = love.graphics.newImage("rex.png") -- image rex.png 528x94px (528/6 = 88)
	frames = {}
	table.insert(frames, love.graphics.newQuad(0, 0, 88, 94, 528, 94))
        table.insert(frames, love.graphics.newQuad(88, 0, 88, 94, 528, 94)) 
        table.insert(frames, love.graphics.newQuad(176, 0, 88, 94, 528, 94)) 
        table.insert(frames, love.graphics.newQuad(264, 0, 88, 94, 528, 94)) 
        table.insert(frames, love.graphics.newQuad(350, 0, 88, 94, 528, 94)) 
        table.insert(frames, love.graphics.newQuad(440, 0, 88, 94, 528, 94)) 
	nframe = 1
end

function love.update()
end

function love.draw()
		love.graphics.setColor(255, 255, 255) -- set white color
		love.graphics.rectangle("fill", 0, 0, sw, sh) -- white color in all the background
		love.graphics.draw(image, frames[nframe], x, y)
end

function love.keypressed(key)
	if ( key == "right" ) then
		x = x + 5
		if ( nframe >=  6 ) then
			nframe = 1
		else
			nframe = nframe + 1
		end
	end
end

Aquí se puede ver lo mismo pero coloreado en una captura del editor emacs:

Pese a que el gif que he puesto se ve un poco mal creo que se entiende que pulsando la tecla derecha moveremos de posición al dinosaurio y que va cambiando el frame a mostrar de 1 hasta el 6.

Los problemas que se aprecian son 2 a groso modo inicialmente. Lo primero es que realmente todos los frames no se corresponden con el dinosaurio corriendo, es decir, solamente el 3 y el 4 son del dinosaurio corriendo. El 1 y el 2 son del dinosaurio parado con un ojo abierto y otro cerrado. Los frames 5 y 6 son del dinosaurio parado con ojo de sorpresa.

Realmente para lo que queremos solo nos interesan el 1 para que cuando el dinosaurio esté parado sus 2 patas estén sobre el suelo y el 3 y 4 para que cuando pulsemos tecla se le vea correr.

Para apañar esto mejor veamos este otro código de ejemplo en el que ahora el frame 1 y 2 son el dinosaurio corriendo y el frame 3 parado:

function love.load()
	love.window.setFullscreen(true, "desktop") -- set fullscreen
	sw, sh = love.graphics.getDimensions() -- sw screen width and sh screen height
	x = 0
	y = sh-94

	image = love.graphics.newImage("rex.png") -- image rex.png 528x94px (528/6 = 88)
	frames = {}
        table.insert(frames, love.graphics.newQuad(176, 0, 88, 94, 528, 94)) -- rex running 1
        table.insert(frames, love.graphics.newQuad(264, 0, 88, 94, 528, 94)) -- rex running 2
        table.insert(frames, love.graphics.newQuad(0, 0, 88, 94, 528, 94)) -- rex stop 1
	nframe = 1
end

function love.update()

	if ( love.keyboard.isDown("right") ) then
		x = x + 5
		if ( nframe >=  2 ) then 
			nframe = 1
		else
			nframe = nframe + 1
		end
	--else
		--nframe = 3
	end

end

function love.draw()
		love.graphics.setColor(255, 255, 255) -- set white color
		love.graphics.rectangle("fill", 0, 0, sw, sh) -- white color in all the background
		love.graphics.draw(image, frames[nframe], x, y)
end

Si descomentamos las líneas con el else y nframe = 3 veremos al dinosaurio pararse cuando dejemos de pulsar la tecla cursor derecha. Tal y como puede verse (más o menos, con el fallo de que se pone amarillo al crear el gif pero en la realidad eso no ocurre) aquí:

Saludos cordiales.

próximo Publicación

Atrás Publicación

Dejar una contestacion

© 2018 [ MIERDA TV ]

Tema de Anders Norén