En la entrega anterior vimos como cargar un fondo lo que nos sirvió como breve iniciación al uso de imágenes.

Ahora vamos a cargar la imagen del jugador, en nuestro caso una nave. Veremos como se organiza el sistema de coordenadas y estableceremos su posición de inicio.

Recursos del juego

Ahora que vamos a empezar en serio necesitamos para nuestro juego recursos de calidad.

No soy un gran artista gráfico, así que mejor dejar ese trabajo para los que saben. Utilizaremos uno de los muchos recursos gratuitos de disponibles en OpenGameArt, en este caso todo lo necesario para construir nuestro juego está en https://opengameart.org/content/space-shooter-redux, gracias a Kenney.nl por su increíble trabajo, me encanta el diseño de sus naves.

Descarga el zip, crea un directorio en tu carpeta de juego llamado «recursos» y descomprímelo.

Verás que se han creado varios directorios: background, bonus, PNG, …

Código

Ok, ahora vamos al código. Dejo aquí el fuente completo, reemplaza el código anterior por el siguiente y ejecutalo.

También puedes descargarlo aquí: altaruru_lec2_invaders

Para que todo quede más claro dividiremos el código por tareas. Así será más entender qué estamos haciendo y localizar el código.

function xInit()
	print("altaruru intro a love2d")
	print("ESCAPE TO QUIT")	
  -- recupera dimensiones de la ventana
	WINDOWH = love.graphics.getHeight()
	WINDOWW = love.graphics.getWidth()
	-- coordenadas iniciales del jugador
end

function xloadobjs()
	background = love.graphics.newImage('recursos/Backgrounds/clouds.png')
	backgroundW = background:getWidth()
	backgroundH = background:getHeight()
	player1 = love.graphics.newImage("recursos/PNG/playerShip1_blue.png")
	player1W = player1:getWidth()
	player1H = player1:getHeight()
	player1x=(WINDOWW-player1W)/2
	player1y=WINDOWH-player1H-40
	print("(x,y) --> " .. player1x .. "," .. player1y)	
end

function love.load()
	xInit()
	xloadobjs()	
end

function love.draw()
	-- Draw background  
  love.graphics.setColor(255, 255, 255)
  love.graphics.draw(background, 0, 0, 0, WINDOWW/backgroundW, WINDOWH/backgroundH)
	-- Draw player
  love.graphics.draw(player1, player1x, player1y)
end

function love.keypressed(key)
  if key == "escape" then
    love.event.quit()
  end
end

Es mejor dividir el código por tareas. Podríamos escribirlo todo seguido sin embargo, cuando avanzamos en el juego el código va creciendo, llegaría un momento que se haría ilegible y localizar algo seria muy difícil, un juego completo puede ser muy extenso.

Vamos a comentar el código paso a paso.

xInit()

Vamos a construir una función de inicio xInit() donde mostraremos los mensajes de inicio e iniciaremos algunos elementos.

function xInit()
  print("altaruru intro a love2d")
  print("ESCAPE TO QUIT")	
  -- recupera dimensiones de la ventana
  WINDOWH = love.graphics.getHeight()
  WINDOWW = love.graphics.getWidth()
end

Hasta aquí nada nuevo, escribir por pantalla y recuperar las dimensiones de la ventana.

xloadobj()

Creamos otra función xloadobj() para la carga de objetos del juego.

function xloadobjs()
	background = love.graphics.newImage('recursos/Backgrounds/clouds.png')
	backgroundW = background:getWidth()
	backgroundH = background:getHeight()
	player1 = love.graphics.newImage("recursos/PNG/playerShip1_blue.png")
	player1W = player1:getWidth()
	player1H = player1:getHeight()
	player1x=(WINDOWW-player1W)/2
	player1y=WINDOWH-player1H-40
end

En este caso creamos un objeto background con la imagen de fondo y otro objeto player1 con nuestra nave.

Será necesario conocer las dimensiones de la nave así que ya que estamos las guardamos en variables, player1W y player1H.

Coordenadas de la Nave

Utilizamos dos variables para la posición de la nave, player1x para coordenada X y player1y para coordenada Y.

	player1x=(WINDOWW-player1W)/2
	player1y=WINDOWH-player1H-40

Podríamos iniciarlas a cero, sin embargo la coordenada 0,0 está arriba a la izquierda, y nosotros queremos la nave centrada en la parte más baja de la pantalla. Como conocemos el ancho y el alto de la pantalla podemos calcular como colocar la nave.

Toda la zona de juego está comprendida entre el punto 0,0 (arriba a la izquierda) y el punto WINDOWW,WINDOWH (abajo a la derecha.

WINDOWW/2 seria el punto central del eje X

WINDOWH/2 sería el punto central del eje Y

Como queremos la nave en la parte inferior, pero si usamos todo el alto al pintarla quedaría fuera de la zona visible, hacemos un ajuste y restamos al alto total de la ventana, windowH, 40pixels.

Sin embargo, si establecemos las coordenadas  x,y como (windowW/2),(windowH/2) todavía estaría mal centrada, porque no hemos tenido en cuenta las dimensiones de la propia nave.

Con un pequeño ajuste utilizando las dimensiones de nuestra nave quedará donde queremos.

En la función draw() incluimos la siguiente linea y veremos nuestra nave en la zona inferior.

love.graphics.draw(player1, player1x, player1y)

Si nunca has trabajado con gráficos puede que al principio será un poco complicado pero una vez entendida la idea todo es más fácil.

En breve… utilizando el teclado, control de la nave y movimiento.

Dudas y comentarios abajo.

Saludos y feliz código.

Deja tu comentario