Desarrolla un juego 'Word Drop' en Corona SDK

Spanish (Español) translation by Steven (you can also view the original English article)

En este tutorial, te enseñaré cómo crear un juego de palabras usando el SDK Corona. Construiremos el juego de principio a fin, por lo que te invito a seguirlo. En este tutorial, trabajaremos con temporizadores, física e implementaremos nuestros propios controles táctiles. Empecemos.

Introducción

El objetivo del juego es crear palabras con las letras que están dentro de bolas. Si las bolas cruzan la barra en la parte superior, el juego termina. Tienes tres bombas, que puedes usar para eliminar cinco bolas, así que es clave usarlas con moderación. Cada diez segundos, más bolas caen desde la parte superior de la pantalla. Echa un vistazo a la captura de pantalla para tener una idea del juego.

1. Nuevo proyecto

Abre el simulador de Corona y elige Nuevo Proyecto.

En la siguiente pantalla, aplica las siguientes configuraciones.

Haz clic en Siguiente y elige Abrir en Editor. Esto abrirá Main.lua en el editor de texto que elijas.

2. Configuración del proyecto

Abre Config.lua y reemplaza el contenido del archivo con la configuración que se muestra a continuación. Esto establecerá el ancho, la altura, la escala y los FPS predeterminados del proyecto (cuadros por segundo). La configuración letterBox significa que la aplicación se escalará en ambas direcciones de la manera más uniforme posible. Si es necesario, sin embargo, el juego será buzón.

application = {
   content = {
     width = 320,
     height = 480,
     scale = "letterBox",
     fps = 30,
   }
}

3. Ocultar la barra de estado

Para evitar que la barra de estado se muestre en la parte superior de la pantalla, agrega el siguiente fragmento de código a Main.lua.

display.setStatusBar(display.HiddenStatusBar)

4. Variables locales

En el siguiente fragmento de código, puedes ver una lista de las variables que usaremos en este juego. Lee los comentarios para tener una idea de la responsabilidad de cada variable.

local gameBackground = display.newImage("background.png",true)
local theWord = "" -- the word the user spells
local theWordText -- shows the word
local isNewGame = true
local allBallsGroup -- group to hold all the balls
local wordTable = {} -- will hold the words from the text file
local chosenBalls = {} -- holds the balls the user has chosen
local instructionsText -- shows instructions
local countDownText -- shows the time
local numBallsToGenerate = 10 -- how many balls to generate
local allBalls = {} -- holds all the balls that have been generated
local theBombs = {} -- holds references to the bomb image
local generateBallTimer -- timer for generating balls
local clockTimer -- timer for the clock
local gameTime = 10 -- how many seconds before new balls drop

5. Configuración de la física

Con el siguiente fragmento de código, requerimos y arrancamos el motor de física. Establecemos la gravedad alta para asegurarnos de que las bolas caigan rápido.

local physics = require("physics")
physics.start(true)
physics.setGravity(0,50)

6. `setup`

En setup, sembramos el generador aleatorio para asegurarnos de que math.random genera un número aleatorio cuando lo necesitamos.

function setup()
    math.randomseed(os.time())
end

Llama a setup inmediatamente después de su declaración.

setup()

7. `setupGameAssets`

En los siguientes pasos, se mostrarán algunas funciones, que implementaremos un poco más adelante en este tutorial.

En setupGameAssets, los recursos del juego están configurados.

function setupGameAssets()

end

8. `newGame`

La función newGame es responsable de comenzar un nuevo juego.

function newGame()

end

9. `setupGameBoundaries`

En setupGameBoundaries, se establecen los límites de las bolas a la izquierda, derecha e inferior de las pantallas.

function setupGameBoundaries()

end

10. `setupButtons`

La función setupButtons configura los botones.

function setupButtons()

end

11. `setupTextFields`

En setupTextFields, los campos de texto están configurados.

function setupTextFields()

end

12. `setupBombs`

Esta función configura las imágenes para las bombas.

function setupBombs()

end

13. `setBombsVisible`

Al invocar a setBombsVisible, las bombas se establecen para ser visibles.

function setBombsVisible()

end

14. `setBombsInvisible`

Esta función no necesita explicación. ¿Verdad?

function setBombsInvisible()

end

15. `generateBalls`

La función generateBalls es responsable de generar nuevas bolas a intervalos de tiempo regulares.

function generateBalls()

end

16. `startTimer`

startTimer inicia el temporizador.

function startTimer()

end

17. `doCountDown`

En doCountDown, el tiempo de juego se decrementa.

function doCountdown()

end

18. `createBall`

La función createBall es responsable de crear una bola. Se necesita un argumento, la letra que contiene la pelota.

function createBall(createVowel)

end

19. `checkGameOver`

En checkGameOver, verificamos si el juego ha terminado, es decir, si la pared de bolas ha cruzado la barra en la parte superior de la pantalla.

function checkGameOver()

end

20. `checkWord`

En checkWord, verificamos si la palabra escrita por el usuario es válida.

function checkWord()

end

21. `resetWord`

La función resetWord se invoca cuando el jugador cancela un envío.

function resetWord()

end

22. `createVowelBalls`

La función createVowelBalls asegura que algunas de las bolas contengan una vocal. Se necesita un parámetro, el número de bolas que debe contener una vocal.

function createVowelBalls(number)

end

23. `formString`

Esta función crea una cadena a partir de las letras en las bolas que el usuario ha elegido.

function formString(e)

end

24. `explode`

La función explode es invocada cuando el jugador usa una bomba. Quita cinco bolas del juego.

function explode(e)

end

25. `removeBall`

La función removeBall elige una bola aleatoria para eliminar del juego.

function removeBall()

end

26. `readTextFile`

La función readTextFile se usa para leer un archivo de texto y almacenar las palabras que contiene en una tabla para usar en el juego.

function readTextFile()

end

27. Progress Check

Vuelve a comprobar que has creado implementaciones de código auxiliar para las funciones anteriores antes de continuar. En los siguientes pasos, implementaremos cada función.

28. Implementando `readTextFile`

En readTextFile, leemos el archivo de texto del directorio de recursos y almacenamos cada palabra en wordTable. Hacemos uso de string.sub para recortar espacios en blanco desde el final de cada palabra.

local path = system.pathForFile( "wordlist.txt", system.ResourceDirectory)
local file = io.open( path, "r" )

for line in file:lines() do
   line = string.sub(line,
       1, #line - 1)
    table.insert(wordTable,line)
end
io.close( file )
file = nil

readTextFile se invoca en setupGameAssets como se muestra a continuación. Actualizaremos setupGameAssets un poco más más adelante en este tutorial.

function setupGameAssets()
  readTextFile()
end

29. Implementando `setupGameBoundaries`

En setupGameBoundaries, los límites del juego están definidos. lineLeft y lineRight son los límites derecho e izquierdo, mientras que GroundLine es la parte inferior de la pantalla, el suelo por así decirlo. Estos son utilizados por el motor de física e impedirán que las bolas se muevan fuera del área de juego. Los configuramos para que no sean visibles porque no necesitamos verlos. La razón por la que hemos usado -29, es porque el radio de las bolas es 29 y el sistema de física usa el centro de los objetos al probar la colisión.

local groundLine = display.newRect(0, 380,display.contentWidth, 2)
local lineLeft = display.newRect(-29,0,2,display.contentHeight)
local lineRight = display.newRect(display.contentWidth-29,0,2,display.contentHeight)
physics.addBody(groundLine, 'static',{bounce=0,friction=0})
physics.addBody(lineLeft, 'static',{bounce=0,friction=0})
physics.addBody(lineRight,'static',{bounce=0,friction=0})
groundLine.isVisible = false
lineLeft.isVisible = false
lineRight.isVisible = false

Al igual que readTextFile, setupGameBoundaries se invoca en setupGameAssets.

function setupGameAssets()
  readTextFile()
  setupGameBoundaries()
end

30. Implementando `setupButtons`

Implementa setupButtons como se muestra a continuación e invoca la función en setupGameAssets.

local goButton = display.newImage("goButton.png",260,420)
goButton:addEventListener('tap', checkWord)
local stopButton = display.newImage("stopButton.png",5,430)
stopButton:addEventListener('tap',resetWord)
local bar = display.newImage("bar.png",0,100)

function setupGameAssets()
  readTextFile()
  setupGameBoundaries()
  setupButtons()
end

31. Implementando `setupTextFields`

Implementa setupTextFields como se muestra a continuación e invoca la función en setupGameAssets.

countDownText = display.newText(gameTime,290,10,native.systemFontBold,20)
countDownText:setTextColor("#000000")
theWordText = display.newText("",60,437,native.systemFontBold,25)
theWordText:setTextColor("#000000")
instructionsText = display.newText("",0,0,native.systemFontBold,25)
instructionsText.x = display.contentWidth/2
instructionsText.y = display.contentHeight/2
instructionsText:setTextColor("#000000")

function setupGameAssets()
  readTextFile()
  setupGameBoundaries()
  setupButtons()
  setupTextFields()
end

32. Implementando `setupBombs`

Implementa setupBombs como se muestra a continuación e invoca la función en setupGameAssets. En setupBombs, generamos tres imágenes de bombas. Al almacenar las imágenes en una tabla, podemos hacer referencia a ellas sin tener que declarar tres variables de imagen separadas.

for i=1, 3 do
    local tempBomb = display.newImage("bomb.png")
    tempBomb.width = 30
    tempBomb.height = 30
    tempBomb.x =  33 * i
    tempBomb.y = 20
    tempBomb:addEventListener('tap', explode)
    table.insert(theBombs,tempBomb)
end

function setupGameAssets()
  readTextFile()
  setupGameBoundaries()
  setupButtons()
  setupTextFields()
  setupBombs()
end

33. Acabando `setupGameAssets`

Finaliza la implementación de setupGameAssets agregando el fragmento de código que se muestra a continuación. Se inicializa el grupo para las bolas.

allBallsGroup = display.newGroup();

34. Acabando `setup`

Con la función setupGameAssets lista para usar, podemos invocarla en la función setup como se muestra a continuación.

function setup()
    math.randomseed(os.time())
    setupGameAssets()
end

35. Implementando `createBall`

Tenemos dos tablas, una para el alfabeto y otra solo para las vocales, ya que queremos asegurarnos de que algunas de las bolas contengan vocales. Luego generamos valores aleatorios para las variables ballType y ballSize. El valor de ballType varía de 1 a 4, mientras que el valor de ballSize varía de 1 a 2. Al usar estas variables, obtenemos un color de bola y establecemos su radio. letterText utiliza la letra aleatoria que generamos y establece que x e y son iguales a la bola. Luego insertamos la letra y la bola en un grupo para que aparezcan como un elemento en el juego. A continuación, generamos una posición x aleatoria para la bola y la colocamos en -40 para la posición y. Añadimos física a la pelota para asegurarnos de que caiga desde la parte superior de la pantalla hasta la parte inferior. Asígnale el name y las teclas letter, agrega un evento tap e insértalo en la tabla allBalls, así como en la tabla allBallsGroup. Este último nos permite trabajar con todas las bolas actualmente en el juego.

local var alphabetArray = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"}
local vowels = {"A","E","I","O","U"}
local ballType = math.random(4)
local ballSize = math.random(2)
local letterIndex
local letter
    if(createVowel == true) then
     letterIndex = math.random(#vowels)
     letter = vowels[letterIndex]
    else
   letterIndex = math.random(#alphabetArray);
   letter = alphabetArray[letterIndex]
    end

local ballGroup = display.newGroup();
local ball
local ballRadius
    if(ballType == 1) then
  ball = display.newImage("greenBall.png")
    elseif(ballType == 2) then
  ball = display.newImage("brownBall.png")
  elseif(ballType == 3) then
       ball = display.newImage("pinkBall.png")
  else
       ball = display.newImage("redBall.png")
    end
    if(ballSize == 1)then
    ball.width  = 48
    ball.height = 48
    ballRadius = 24
    else
      ball.width = 58
      ball.height = 58
      ballRadius = 29
    end

local letterText = display.newText( letter, 0,0, native.systemFontBold, 25 );
letterText:setTextColor(0,0, 0)
letterText.x = ball.x
letterText.y = ball.y
ballGroup:insert(ball)
ballGroup:insert(letterText)
ballGroup.x = math.random(ballRadius,display.contentWidth-ballRadius*2)
ballGroup.y= - 40
physics.addBody(ballGroup, 'dynamic',{friction = 0,bounce = 0,radius = ballRadius})
ballGroup.name = "ball"
ballGroup.letter = letter
ballGroup:addEventListener('tap',formString)
table.insert(allBalls,ballGroup)
allBallsGroup:insert(ballGroup)

Si invocas esta función en setup, deberías ver una bola que se está creando y caerá desde la parte superior de la pantalla hacia la parte inferior. No olvides eliminar la llamada desde el método setup cuando hayas terminado la prueba.

36. Implementando `generateBalls`

En generateBalls, invocamos checkGameOver después de 1500 milisegundos, lo que le da a las bolas el tiempo suficiente para caer más allá de la barra. Si es un juego nuevo, necesitamos generar diez bolas, de lo contrario generamos cuatro bolas, de las cuales al menos una contiene una vocal. Exploraremos la implementación de createVowelBalls en breve. Si invocas a GenerateBalls en setup, deberías ver que se generan diez pelotas.

function generateBalls()
  timer.performWithDelay(1500,checkGameOver)
  if(isNewGame == true) then
    numBallsToGenerate = 10
  else
    numBallsToGenerate = 4
    createVowelBalls(1)
  end

  generateBallTimer = timer.performWithDelay( 50, createBall, numBallsToGenerate)
end

37. Implementando `createVowelBalls`

Lo único que hace esta función es invocar a createBall tantas veces como el valor del número que se pasó a la función. Pasamos true como parámetro, lo que significa que createBall generará una bola que contiene una vocal.

for i=1, number do
   createBall(true)
end

38. Implementando `removeBall`

Esta función elige una bola aleatoria de la tabla allBalls y la elimina. Esta función es invocada por la función explode, que implementaremos en unos momentos.

local randomIndex = math.random(#allBalls)
local tempBall = allBalls[randomIndex]
tempBall:removeSelf()
tempBall = nil
table.remove(allBalls,randomIndex)

39. Implementando `setBombsVisible`

En setBombsVisible, recorremos las bombas y las configuramos como visibles.

for i=1, #theBombs do
    theBombs[i].isVisible = true
end

40. Implementando `setBombsInvisible`

En esta función, hacemos exactamente lo contrario que hicimos en setBombsVisible.

for i=1, #theBombs do
   theBombs[i].isVisible = false
end

41. Implementando `explode`

En explode, comprobamos si allBalls contiene menos de cinco bolas. Si hay menos de cinco bolas presentes, eliminamos todas las bolas, de lo contrario solo eliminamos cinco bolas.

local thisSprite = e.target
thisSprite.isVisible = false
local randomIndex
local randomBall
 if(#allBalls < 5) then
     for i=1, #allBalls do
  removeBall()
     end
else
    for i=1, 5 do
  removeBall()
   end
end

42. Implementando `formString`

En formString, formamos una palabra cada vez que el usuario hace clic en una bola. Recuerda que cada bola tiene una tecla letter añadida. Verificamos si la tabla chosenBalls no contiene la bola que seleccionaron. Si no es así, insertamos la bola en la tabla chosenBalls, pegamos la letra al final de la variable theWord y la mostramos en el campo de texto. Si la bola ya fue elegida y agregada a chosenBalls, no la agregamos a chosenBalls e imprimimos un mensaje en la consola. Ya puedes probar nuestro juego tocando algunas bolas y viendo aparecer la palabra en el campo de texto.

local thisSprite = e.target
local theLetter = thisSprite.letter
if(table.indexOf(chosenBalls,thisSprite) == nil) then
    table.insert(chosenBalls,thisSprite)
    theWord = theWord .. theLetter
    theWordText.text = theWord
    theWordText.x = display.contentWidth/2
else
   print("already chose that ball")
end

43. Implementando `resetWord`

instructionsText.text = "";
theWord = ''
theWordText.text = ""
chosenBalls = {}

Esta función restablece la palabra actual y borra la tabla chosenBalls. Si pruebas el juego, puedes hacer clic en el botón Cancelar para borrar el campo de texto.

44. Implementando `checkWord`

En checkWord, verificamos si la longitud de theWord es menor o igual a uno. Si es así, volvemos de la función. Debemos asegurarnos de que el jugador haya elegido una palabra con un mínimo de dos letras. Luego necesitamos verificar si theWord coincide con una palabra de la tabla wordTable. Si no es así, configuramos las instrucciones de texto instructionsText en NO ES UNA PALABRA y se las mostramos al jugador. Si lo hace, recorremos la tabla de bolas elegidas chosenBalls y eliminamos cada bola del juego.

if(#theWord <= 1) then
    return;
end
local lowerCaseWord = string.lower(theWord)
local tempBall
    if(table.indexOf(wordTable,lowerCaseWord) == nil) then
   instructionsText.text = "NOT A WORD!"
   instructionsText:toFront()
    else
    for i=1, #chosenBalls do
    table.remove(allBalls,table.indexOf(allBalls,chosenBalls[i]))
        chosenBalls[i]:removeSelf()
        chosenBalls[i] = nil
        theWord = ""
        theWordText.text = ""
end
chosenBalls = {}
end

45. Implementando `doCountDown`

En doCountDown, tomamos el número del campo de texto, lo disminuimos y comprobamos si es igual a cero. Si es así, llamamos a generateBalls, lo restablecemos y llamamos a startTimer, que a su vez invoca a doCountDown.

local currentTime = countDownText.text
currentTime = currentTime -1
countDownText.text = currentTime
    if(currentTime == 0) then
  generateBalls()
  countDownText.text = gameTime
  startTimer()
end

46. Implementando `startTimer`

La implementación de startTimer es simple. Llamamos a doCountdown cada segundo y repetimos esto tantas veces como el valor de gameTime.

clockTimer = timer.performWithDelay(1000,doCountdown,gameTime)

47. Implementando `newGame`

Para iniciar un nuevo juego, las variables que declaramos anteriormente se restablecen y se invoca startTimer para iniciar el juego.

isNewGame = true
chosenBalls = {}
allBalls = {}
theWord = ""
theWordText.text = ""
instructionsText.text = ""
countDownText.text = gameTime;
createVowelBalls(2)
generateBalls()
setBombsVisible()
startTimer()
isNewGame = false

48. Implementando `checkGameOver`

En esta función, recorremos la tabla allBalls y verificamos si el valor de y de alguna de las bolas es mayor que 100. Si es así, una o más bolas cruzan la barra en la parte superior y el juego termina. Si el juego termina, las bolas se eliminan de la tabla ballGroup. Los temporizadores se cancelan para hacer invisibles las bombas y se invoca newGame después de tres segundos.

local gameOver = false;
    for i=1,#allBalls do
        if(allBalls[i].y < (100 - allBalls[i].height))then
            gameOver = true
            break;
  end
    end
if(gameOver) then
    for i=allBallsGroup.numChildren,1,-1 do
         local child = allBallsGroup[i]
         child:removeSelf()
         child = nil
    end
timer.cancel(generateBallTimer)
timer.cancel(clockTimer)
instructionsText.text = "GameOver"
instructionsText:toFront()
setBombsInvisible()
timer.performWithDelay(3000,newGame)

Finalizando el juego

Todo lo que nos queda por hacer es llamar a newGame o en la función setup.

function setup()
    math.randomseed(os.time())
    setupGameAssets()
    newGame()
end

Conclusión

En este tutorial, creamos un creativo juego de palabras. Siéntete libre de experimentar con el código que hemos escrito para ver cómo afecta el juego. Espero que hayas encontrado útil este tutorial.

Desarrolla un juego 'Word Drop' en Corona SDK

Introducción

1. Nuevo proyecto

2. Configuración del proyecto

3. Ocultar la barra de estado

4. Variables locales

5. Configuración de la física

6. setup

7. setupGameAssets

8. newGame

9. setupGameBoundaries

10. setupButtons

11. setupTextFields

12. setupBombs

13. setBombsVisible

14. setBombsInvisible

15. generateBalls

16. startTimer

17. doCountDown

18. createBall

19. checkGameOver

20. checkWord

21. resetWord

22. createVowelBalls

23. formString

24. explode

25. removeBall

26. readTextFile

27. Progress Check

28. Implementando readTextFile

29. Implementando setupGameBoundaries

30. Implementando setupButtons

31. Implementando setupTextFields

32. Implementando setupBombs

33. Acabando setupGameAssets

34. Acabando setup

35. Implementando createBall

36. Implementando generateBalls

37. Implementando createVowelBalls

38. Implementando removeBall

39. Implementando setBombsVisible

40. Implementando setBombsInvisible

41. Implementando explode

42. Implementando formString

43. Implementando resetWord

44. Implementando checkWord

45. Implementando doCountDown

46. Implementando startTimer

47. Implementando newGame

48. Implementando checkGameOver