DEV Community: Jens Genberg

Quake-style Sliding Console

Jens Genberg — Mon, 12 Aug 2019 16:29:04 +0000

Bored with your plain, old cmder console? This tutorial will show you how to add some retro Quake-style flavor to it!

Prerequisites

A cmder installation with default settings.

https://cmder.net/

Background image

Let's start by adding the Quake console background image. Download the image from here. Open up the settings dialog and go to General->Background. Check Background image and set the path to the image you just downloaded with Placement Stretch.

Font

The next step is to download the Quake font in order to add some more visual flavor. You can get it from here. Install the font and go to General->Fonts and set Main console font to Quake1.

Slide down

Now we will add the slide down behavior from Quake and similar games. Go to General->Quake style and check Quake-style slide down and Always on top. Set Frame width to 0 to hide the borders around the console window.

Go to Keys & Macro and select Minimize/Restore (Quake-style hotkey also). Click the Choose hotkey field and press the tilde key (or whichever one your prefer). Make sure nothing is selected in the dropdown menus after Choose hotkey (such as Ctrl or Shift).

Finishing touches

Go to Features->Status bar and uncheck Show status bar. Go to General->Tab bar and check Don't show. The settings button will be hidden now, but you can access settings through Win+Alt+P.

Don't forget to save your new settings!

Credits

How to stop relying on the mouse

Jens Genberg — Mon, 28 Aug 2017 10:57:40 +0000

I have recently been looking into keyboards, mechanical and otherwise, and decided that I will most likely upgrade my old Logitech one that I got with my desktop to a nicer one. This is part of my plan to encourage myself to program more at home (my last step was getting a really comfy chair).

Since I'm going to be getting a "high end" keyboard for the first time, I would like to also use it as much as possible. I would like to stop relying on the mouse for most tasks and learn more about keyboard shortcuts as well as get better at touch typing.

Do you have any tips on how to accelerate this process and possibly make it more fun? I am using Windows 10 and Visual Studio Code as my primary tools at the moment.

Make a Shooter in Lua/Love2D - Music and Sound Effects

Jens Genberg — Mon, 24 Jul 2017 06:56:18 +0000

Hello, and welcome to the final part of this tutorial! In the last post, we added some visual effects to the game. It won't really feel complete until we add some audio, though. Read on to find out how.

Loading some files

We will be using the love.audio module to play back sound and music files, so the first thing we'll do is load some files into memory. This is very similar to loading image files, except we are using objects of the type "Source" to store the data.

musicTrack = love.audio.newSource("resources/audio/Mercury.wav", "static")
musicTrack:setLooping(true)
shootSfx = love.audio.newSource("resources/audio/Explosion.wav", "static")
shootSfx:setVolume(0.5)
enemyDestroySfx = love.audio.newSource("resources/audio/Shoot.wav", "static")
playerDestroySfx = love.audio.newSource("resources/audio/Lightening.wav", "static")

We call the newSource() method and provide the paths to our sound files. The second parameter "static" tells Love2D to read the whole file into memory. It can be omitted for larger files, in order to stream them piece by piece. Since the files I'm using are very small, I decided to just load all of the data at startup. We want the music track to loop and luckily there is a function called setLooping() just for that. One of the audio files had a higher volume level than the others, so we call the setVolume() function to bring it in line with the others.

Playing music

Since there will only ever be one instance of the music track playing, handling it won't require much code. All we have to do is call musicTrack:play() in the startGame() method and musicTrack:stop() when the player is hit and the game ends. That's it!

Playing sound effects

We need to add a bit more logic for playing sound effects, so I decided to create a reusable function.

function playSound(sound)
  sound:rewind(sound)
  pitchMod = 0.8 + love.math.random(0, 10)/25
  sound:setPitch(pitchMod)
  sound:play()
end

The playSound() function takes a Source object as a parameter. It calls the rewind() function on the Source, which is needed to get Love2D to play the sound effect from the start. This probably happens because the same Source is used for all instances of a sound.

A trick to add some variety to sound effects is to slightly modify the frequency of each sound when it's triggered. We generate a pitchMod value between 0.8 and 1.2 and give it to the setPitch() function. Then we call sound:play() just like when starting the music track.

After that it's just a matter of placing calls to playSound() at appropriate locations in the code.

playerAlive = false
musicTrack:stop()
playSound(playerDestroySfx)

Stop the music and play a loud explosion sound when the player is hit by an enemy.

table.remove(enemies, index)
table.remove(torpedoes, index2)
playSound(enemyDestroySfx)

Play a similar sound when an enemy is hit by a torpedo.

torpedoTimer = torpedoTimerMax
playSound(shootSfx)

Play a whooshing sound whenever a torpedo is spawned.

Conclusion

This concludes the series on making a shooter using Lua/Love2D! I hope you have found these posts useful. At some point in the future, I will be writing some more advanced tutorials using the same framework. Feel free to contact me at any time with questions and comments.

Links

Latest source
Love2D wiki
Lua reference

Credits

The music track used for this part was made by SketchyLogic and is hosted over here.
The sound effects are by bart and can be found here.

Make a Shooter in Lua/Love2D - Animations and Particles

Jens Genberg — Fri, 21 Jul 2017 09:11:54 +0000

In the first three parts of this tutorial, we implemented movement, shooting, and enemies, which means we now have a working, if basic, shoot 'em up. Now it's time to add some flair! In this post, I will go through animations, particle effects and scrolling backgrounds.

Animations

At this point, the player and enemies are not animated. Their images are simply moved across the screen. To make them a tiny bit more lifelike, we will introduce a tilting animation for when they're moving vertically.

if down and player.yPos<love.graphics.getHeight()-player.height then
  player.yPos = player.yPos + dt * speed
  player.angle = 0.1
  player.pSystem:setLinearAcceleration(-75, -15, -150, -15)
elseif up and player.yPos>0 then
  player.yPos = player.yPos - dt * speed
  player.angle = -0.1
  player.pSystem:setLinearAcceleration(-75, 15, -150, 15)
else
  player.angle = 0
  player.pSystem:setLinearAcceleration(-75, 0, -150, 0)
end

We add an "angle" key to the player table, which we modify in the updatePlayer() function. We then pass player.angle as the "orientation" argument to the draw() function. Note that the angle is given in radians and not degrees, which is why the numbers are so small.

love.graphics.draw(player.img, player.xPos, player.yPos, player.angle, 2, 2)

We add similar code to the enemy behavior functions and the updateEnemies() function.

I was thinking about adding some swimming animations to the enemies, but decided that's not in the scope of this tutorial. To read more about animations in Love2D you can check out something like this.

Particle effects

Particle systems are used in order to create effects like dust, smoke and explosions in games. Particle systems emit a stream of particles that move according to a set of variables. The particles are rendered using either a basic shape or an image. We're going to use the particle system functionality built into Love2D to create trails for the player and torpedoes as well as explosions for player and enemy destruction.

Trails

We start by drawing an ellipse shape to get something looking like a bubble, which will be used for our submarine and torpedo trails. Since we want different sized particles we create a function that takes a size parameter.

function getBubble(size)
  local bubble = love.graphics.newCanvas(size, size)
  love.graphics.setCanvas(bubble)
  love.graphics.setColor(255, 255, 255, 255)
  love.graphics.ellipse("fill", size/2, size/2, size/2, size/4)
  love.graphics.setCanvas()
  return bubble
end

We create a new "canvas" object, which is Love2D's way of letting you draw something "off-screen" for later use. We then draw a white ellipse shape to the canvas and return it.

function getBubbleTrail(image)
  pSystem = love.graphics.newParticleSystem(image, 50)
  pSystem:setParticleLifetime(1, 1)
  pSystem:setSpeed(-50)
  pSystem:setColors(255, 255, 255, 200, 255, 255, 255, 100, 255, 255, 255, 0)
  pSystem:setSizes(0.2, 0.8)
  return pSystem
end

The next step is to create a function that returns the actual particle system. As arguments, we pass in an image and a limit for the number of particles to be kept alive at the same time. We then set the lifetime of the particles to one second and their speed to -50 since we want them to spray toward the left of the screen. We set the color to draw the particles - we pass in three color arguments in RGBA pairs, which will make the opacity decrease to zero as the particle ages. Finally, we set the size to vary between 0.2 and 0.8 and return the particle system.

if(left) then
  player.pSystem:setEmissionRate(10)
elseif(right) then
  player.pSystem:setEmissionRate(20)
else
  player.pSystem:setEmissionRate(15)
end

player.pSystem:setPosition(player.xPos, player.yPos + player.height / 2)
player.pSystem:update(dt)

In the updatePlayer() function, we add some code to control the particle emission rate in order to create more particles when the player accelerates. We also set the position of the particle system to the rear of the player. Then we call update on it, passing in the delta time.

love.graphics.draw(player.pSystem, 0, 0)

Make sure to add the drawing code for the particle system as well, or we won't see anything! We are drawing the system in the top left corner, since it uses the value from setPosition() as an offset for the actual particles.

If you look at the source code, you will see that the code for torpedo trails is very similar.

Explosions

For the explosions, we create another function to return a circle shape instead of an ellipse. We add a size parameter here as well, since we want two different sizes.

function getBlast(size)
  local blast = love.graphics.newCanvas(size, size)
  love.graphics.setCanvas(blast)
  love.graphics.setColor(255, 255, 255, 255)
  love.graphics.circle("fill", size/2, size/2, size/2)
  love.graphics.setCanvas()
  return blast
end

The function that returns the explosions particle system is also very similar to the one returning the bubble trail system.

function getExplosion(image)
  pSystem = love.graphics.newParticleSystem(image, 30)
  pSystem:setParticleLifetime(0.5, 0.5)
  pSystem:setLinearAcceleration(-100, -100, 100, 100)
  pSystem:setColors(255, 255, 0, 255, 255, 153, 51, 255, 64, 64, 64, 0)
  pSystem:setSizes(0.5, 0.5)
  return pSystem
end

Instead of just setting the speed of the particles, we use setLinearAcceleration() to cause the explosion particles to randomly go in different directions. We also set the color to go from yellow to orange and then fade away to dark grey.

Then it's just a simple matter of adding new explosion particle systems to an explosion table whenever an enemy or the player is destroyed. Note that we're calling the emit() function now in order to create a single burst of particles and not a continuous stream.

local explosion = getExplosion(smallBlast)
explosion:setPosition(enemy.xPos + enemy.width/2, enemy.yPos + enemy.height/2)
explosion:emit(10)
table.insert(explosions, explosion)

local explosion = getExplosion(blast)
explosion:setPosition(enemy.xPos + enemy.width/2, enemy.yPos + enemy.height/2)
explosion:emit(20)
table.insert(explosions, explosion)

We also add a function to update our explosions and remove them after all the particles have been destroyed.

function updateExplosions(dt)
  for i = table.getn(explosions), 1, -1 do
    local explosion = explosions[i]
    explosion:update(dt)
    if explosion:getCount() == 0 then
      table.remove(explosions, i)
    end
  end
end

In the last part, we made the game restart as soon as the player was destroyed. I modified this behavior by adding a "playerAlive" flag and a short timer. Otherwise the player explosion wouldn't have time to animate.

Scrolling backgrounds

In order to make the background look more lively, I decided to draw a sea floor and have that scroll along the bottom of the screen. I drew a foreground image and a background image and loaded them up in the load() function.

if groundPosition > -800 then
  groundPosition = groundPosition - dt * 100
else
  groundPosition = 0
end
if backgroundPosition > -800 then
  backgroundPosition = backgroundPosition - dt * 50
else
  backgroundPosition = 0
end

Since we know the screen width is 800 pixels, we make the groundPosition tick down from 0 to -800 and restart. The background image will be moving slower, in order to add the illusion of depth. This is called Parallax scrolling.

love.graphics.setColor(100, 200, 200, 200)
love.graphics.draw(backgroundImage, backgroundPosition, 380, 0, 2, 2)
love.graphics.draw(backgroundImage, backgroundPosition + 800, 380, 0, 2, 2)
love.graphics.setColor(255, 255, 255, 255)
love.graphics.draw(groundImage, groundPosition, 400, 0, 2, 2)
love.graphics.draw(groundImage, groundPosition + 800, 400, 0, 2, 2)

In the draw() method, we need to draw both images twice with an 800 pixel offset to get them to scroll seamlessly. We modify the drawing color before drawing the background image in order to make it a bit dimmer and darker. Then we reset the color and draw the foreground image like normal and there we go!

I have decided to make one final post dealing with sound effects and music, so stay tuned and thank you for reading!

Links

Source - part 4
Latest source
Love2D wiki
Lua reference

Make a Shooter in Lua/Love2D - Enemies and Combat

Jens Genberg — Mon, 17 Jul 2017 18:39:45 +0000

Since we have now implemented shooting, it's time to introduce some enemies to our game. In this post I will show you how to add a few enemy types with different behaviors.

If you look at the source code at this stage, you can see I've added a few more lines to the load() function. These are fairly self-explanatory so we won't go through them here.

Starting a new game

With the introduction of enemies comes the possibility of the player being destroyed. When that happens, we need to reset the game. That's why it's a good idea to move some of the initialization logic out of the load() function into a function called startGame() for example. This way we can start the game over whenever we want, simply by calling that function. We will leave the image loading code and the constant values in the load() function.

function startGame()
  player = {xPos = 0, yPos = 0, width = 64, height = 64, speed=200, img=submarineImage}
  torpedoes = {}
  enemies = {}

  canFire = true
  torpedoTimer = torpedoTimerMax
  spawnTimer = 0
end

Enemy logic

The enemy handling code contains a bit more logic than the player movement and projectile code, since we have to give the enemies some semblance of intelligence. It also took me a bit longer to write. Please bear with me as I try to explain it function by function.

All right. First up is the updateEnemies() function which is called from the main update() function. It's essentially responsible for adding and removing objects much like the updateTorpedoes() function. It uses a timer to control when a new enemy is spawned.

function updateEnemies(dt)
  if spawnTimer > 0 then
    spawnTimer = spawnTimer - dt
  else
    spawnEnemy()
  end

  for i=table.getn(enemies), 1, -1 do
    enemy=enemies[i]
    enemy.update = enemy:update(dt)
    if enemy.xPos < -enemy.width then
      table.remove(enemies, i)
    end
  end
end

You'll notice I changed the remove loop yet again. I am using a numeric for loop that iterates through the objects from end to beginning. This is the most convenient type of loop to use when you need to remove objects inside the loop.

Prototypes

It's time to introduce some object-oriented programming concepts into our code. Since we will be creating a large number of enemies, we want them to be able to share some common properties. Lua uses something called "metatables" to implement prototype-based inheritance. I won't go through what happens in the background here - just know that the following code defines an Enemy prototype with some default values as well as a constructor function. The constructor function can then be called with the desired arguments. If an argument is left out, the corresponding key will use the default value defined in the prototype.

Enemy = {xPos = love.graphics.getWidth(), yPos = 0, width = 64, height = 64}

function Enemy:new (o)
  o = o or {}
  setmetatable(o, self)
  self.__index = self
  return o
end

Spawning enemies

Now let's look at how to use this in our spawnEnemy() function.

We start by using the random() function provided by Love2D. We first get a random y-position for the new enemy which will always be between zero and the height of the screen minus the height we use for our enemies. We also ask for a number between zero and two, in order to determine the type of enemy to spawn. We then call the Enemy:new() function, overriding the yPos parameter and adding values for the "speed" and "img" keys. If we wanted to, we could have defined defaults for these keys in the prototype as well. The last argument we pass in will actually be a function and not a field. Lua treats functions as objects, so this is not a problem. After constructing the enemy, we add it to the enemies table and reset the spawn timer.

function spawnEnemy()
  y = love.math.random(0, love.graphics.getHeight() - 64)
  enemyType = love.math.random(0, 2)
  if enemyType == 0 then
    enemy = Enemy:new{yPos = y, speed = squidSpeed, img = squidImage, update=moveLeft}
  elseif enemyType == 1 then
    enemy = Enemy:new{yPos = y, speed = sharkSpeed, img = sharkImage, update=moveToPlayer}
  else
    enemy = Enemy:new{yPos = y, speed = swordfishSpeed, img = swordfishImage, update=chargePlayer}
  end
  table.insert(enemies, enemy)

  spawnTimer = spawnTimerMax
end

Enemy behavior

The three different functions we assign to the "update" parameter in the spawnEnemy() function will define the behavior of the enemies. The function assigned to each enemy will be called from the updateEnemies() method.

enemy.update = enemy:update(dt)

I will explain their logic one by one.

function moveLeft(obj, dt)
  obj.xPos = obj.xPos - obj.speed * dt
  return moveLeft
end

The moveLeft() function is the simplest behavior. It updates the xPos value of the object it belongs to based on its speed value and the delta time. Note that the object is implicitly passed in as the first parameter which we call "obj". This function causes the enemy to move left in a straight line.

function moveToPlayer(obj, dt)
  xSpeed = math.sin(math.rad (60)) * obj.speed
  ySpeed = math.cos(math.rad (60)) * obj.speed
  if (obj.yPos - player.yPos) > 10 then
    obj.yPos = obj.yPos - ySpeed * dt
    obj.xPos = obj.xPos - xSpeed * dt
  elseif (obj.yPos - player.yPos) < -10 then
    obj.yPos = obj.yPos + ySpeed * dt
    obj.xPos = obj.xPos - xSpeed * dt
  else
    obj.xPos = obj.xPos - obj.speed * dt
  end
  return moveToPlayer
end

The moveToPlayer() function compares the vertical positions of the enemy and the player. If the enemy position is more than ten pixels higher or lower than the player position, the enemy moves diagonally toward the player. Otherwise it keeps moving in a straight line. The reason we're not comparing the exact positions is that it causes very jittery movement. I also used some trigonometric functions in order to make the enemy move at a less steep angle toward the player. I think this makes the movement look less robotic, but that's a matter of taste.

function chargePlayer(obj, dt)
  xDistance = math.abs(obj.xPos - player.xPos)
  yDistance = math.abs(obj.yPos - player.yPos)
  distance = math.sqrt(yDistance^2 + xDistance^2)
  if distance < 150 then
    obj.speed = chargeSpeed
    return moveLeft
  end 
  moveToPlayer(obj, dt)
  return chargePlayer
end

I'm sure you noticed that the result of the update() function is itself assigned to the enemy's update key, every time it's called in updateEnemies(). The purpose of this trick is to allow the behavior functions to return either themselves or another function depending on some condition. This is used in chargePlayer(). We first calculate the distance to the player and if it's less than 200, we return the moveLeft() function after increasing the speed of the enemy. If the object is farther away, we call the moveToPlayer() function instead and then return the chargePlayer() function. This causes any enemy with this behavior to move toward the player and charge in a straight line when it gets close!

Collisions

We have now implemented shooting and enemy spawns, but these mechanics don't interact with each other yet. We need to add some collision checking code in order to detect when an enemy is actually hit by a projectile, or when the player is attacked by an enemy.

function checkCollisions()
  for index, enemy in ipairs(enemies) do
    if intersects(player, enemy) or intersects(enemy, player) then
      startGame()
    end

    for index2, torpedo in ipairs(torpedoes) do
      if intersects(enemy, torpedo) then
        table.remove(enemies, index)
        table.remove(torpedoes, index2)
        break
      end
    end
  end
end

function intersects(rect1, rect2)
  if rect1.xPos < rect2.xPos and rect1.xPos + rect1.width > rect2.xPos and
     rect1.yPos < rect2.yPos and rect1.yPos + rect1.height > rect2.yPos then
    return true
  else
    return false
  end
end

The checkCollisions() function is called in the main update() loop. It calls the intersects() function to check if two objects are overlapping. We first check for collisions between the player and all enemies. If a collision is detected, we restart the game. Then we loop through each of the torpedoes to see if it's touching an enemy. If so, we destroy both the projectile and the enemy.

The next and possibly final part of this tutorial will focus on adding some more eye candy in the form of animations and particle effects. Please let me know if you have any questions or if I can explain something better!

Links

Source - part 3
Latest source
Love2D wiki
Lua reference

Make a Shooter in Lua/Love2D - Firing Projectiles

Jens Genberg — Tue, 11 Jul 2017 19:38:57 +0000

In the first part of this series, we wrote some code to handle player input and movement for our submarine shoot 'em up. But what good is a shoot 'em up if you can't shoot? No good at all, that's what! In this post I will show you how to get our little submarine to fire some torpedoes.

Initialization

First we will make some additions and changes to the load() method.

function love.load()
  submarineImage = love.graphics.newImage("resources/images/submarine.png")
  torpedoImage = love.graphics.newImage("resources/images/torpedo.png")

  player = {xPos = 0, yPos = 0, width = 64, height = 64, speed=200, img=submarineImage}
  torpedoes = {}

  canFire = false
  torpedoTimerMax = 0.2
  torpedoTimer = torpedoTimerMax
  torpedoStartSpeed = 100
  torpedoMaxSpeed = 300
end

As you can see, we are now loading another image which will be used when drawing torpedoes. Also, all the information related to the player is now grouped in something called a table. Tables are a great way of grouping data and very easy to create. All you need to create a table is a pair of brackets enclosing some keys and values with equal signs in between. In order to access one of the values later, you just type the name of the object followed by a dot and the name of the associated key. We are also adding an empty table to keep track of all the torpedoes on the screen. Finally we add some variables that will be used to control the firing mechanic and the torpedoes themselves.

Let's draw some more things

The first addition to the draw() function tells the engine to draw a rectangle the size of the screen, using a blue color. The second setColor() call is used to reset the color before additional calls to the draw() function.

function love.draw()
  love.graphics.setColor(186, 255, 255)
  background = love.graphics.rectangle("fill", 0, 0, love.graphics.getWidth(), love.graphics.getHeight())
  love.graphics.setColor(255, 255, 255)

  love.graphics.draw(player.img, player.xPos, player.yPos, 0, 2, 2)
  for index, torpedo in ipairs(torpedoes) do
    love.graphics.draw(torpedo.img, torpedo.xPos, torpedo.yPos)
  end
end

The player is now drawn using the new 'player' table we created. We also need to draw the torpedoes, though, and this is where another Lua construct comes in, namely the 'for loop'. This loop allows us to go through all of the torpedoes currently in the table and draw them at their current positions. Lua lets you name two variables when creating a loop. The first one will hold the index of the current torpedo and the second one will hold the value. I chose to simply call these 'index' and 'torpedo'. Torpedoes are tables themselves and hold a reference to the torpedo image as well as values for their horizontal and vertical position. We will be creating some soon!

Let's update some more things

Writing all of the game logic inside of the update() function would lead to some very hard-to-maintain code once we add a few more features. That's why I have decided to extract the logic for the player object and the torpedoes into two separate functions. These functions are forwarded the same delta time value as a parameter.

function love.update(dt)
  updatePlayer(dt)
  updateTorpedoes(dt)
end

More input handling

For the updatePlayer() function, I slightly refactored the keyboard input code to store pressed direction keys in individual variables. I also took the new 'player' table into use. I omitted the player movement code from the above snippet for brevity.

function updatePlayer(dt)
  down = love.keyboard.isDown("down")
  up = love.keyboard.isDown("up")
  left = love.keyboard.isDown("left")
  right = love.keyboard.isDown("right")

  --Player movement--

  if love.keyboard.isDown("space") then
    torpedoSpeed = torpedoStartSpeed
    if(left) then
      torpedoSpeed = torpedoSpeed - player.speed/2
    elseif(right) then
      torpedoSpeed = torpedoSpeed + player.speed/2
    end
    spawnTorpedo(player.xPos + player.width, player.yPos + player.height/2, torpedoSpeed)
  end

  if torpedoTimer > 0 then
    torpedoTimer = torpedoTimer - dt
  else
    canFire = true
  end
end

Since the player can now shoot, we need to check for another key. I chose the space bar. When the key is pressed, we first check if the player is moving left or right and if so, we allow the torpedo to be affected by the player velocity. I think it gives the projectiles a better feel, but it's a matter of taste. After calculating the speed, we call another new function called spawnTorpedo() which is described below. Remember those variables we defined at the end of the load() function? We will now use them to control the fire rate of the torpedoes. We let the timer count down until it reaches zero. Then we set the 'canFire' variable to true.

Creating and updating torpedoes

In the spawnTorpedo() function we check the 'canFire' variable and spawn a torpedo only if it's set to true. We simply create a table with position, size, speed and image values and add it to the torpedoes table. Then we reset the 'canFire' variable and the timer.

function spawnTorpedo(x, y, speed)
  if canFire then
    torpedo = {xPos = x, yPos = y, width = 16, height=16, speed=speed, img = torpedoImage}
    table.insert(torpedoes, torpedo)

    canFire = false
    torpedoTimer = torpedoTimerMax
  end
end

The last thing we have to write is the updateTorpedoes() function. We write another loop to go through all the torpedoes and update their position. We let the torpedoes accelerate from their initial speed to the max speed we defined in the load() function. This makes them behave more realistically in my opinion. Once a torpedo leaves the screen we are no longer interested in it, so we set it to nil. In Lua this basically means that the table object no longer exists and so it will no longer be updated or drawn.

function updateTorpedoes(dt)
  for index, torpedo in ipairs(torpedoes) do
    torpedo.xPos = torpedo.xPos + dt * torpedo.speed
    if torpedo.speed < torpedoMaxSpeed then
      torpedo.speed = torpedo.speed + dt * 100
    end
    if torpedo.xPos > love.graphics.getWidth() then
      --torpedo = nil -does not actually work-
      table.remove(torpedoes, index)
    end
  end
end

Edit: I had misunderstood something regarding removing items from tables. To actually remove something you need to call the table.remove() function, supplying the table and the index of the item to be removed.

Next up we will spawn some enemies to shoot!
Part 3

Links

Source - part 2
Latest source
Love2D wiki
Lua reference

Make a Shooter in Lua/Love2D - Setup and Player Movement

Jens Genberg — Fri, 07 Jul 2017 12:55:39 +0000

Hello! This will be the first in a series of posts on developing a simple shoot 'em up game using the Lua programming language and the Love2D framework. I decided to make this game as a bit of a break from another game project that I've been working on for a while. I chose Lua and Love2D due to their focus on simplicity and efficiency. I will be writing these posts as I learn.

Getting started

In order to run the game we are making, you need to install the Love2D framework from https://love2d.org. You might also want to use an IDE or a plugin for your favorite text editor to get things such as autocomplete and syntax checking. Here is a list of such tools. Personally I went with the Atom Editor plugin, since Atom is currently my favorite text editor.

Let's write some code!

After we have our tools set up, the first thing we'll do is simply create a folder containing a file named main.lua. This is where the Love2D executable will look for the game code's entry point. This is where we will put all our code for now.

We will start by writing three very important functions:

love.load()
love.draw()
love.update()

These functions are called by the Love2D engine and are required to get any of our code to run at all. The load() function is called exactly once, when the game is started. The draw() function is called continuously once the game is running and is where any graphics code should be placed. The update() function is also called continuously and is where the state of the game should be updated.

love.load()

function love.load()
  xPos = 0
  yPos = 0
  playerWidth = 64
  playerHeight = 64
  playerSpeed = 200
  submarineImage = love.graphics.newImage("resources/images/submarine.png")
end

The load() function is the perfect place for all kinds of initialization code. We start by defining some integer values for the position, size and speed of the player. We then load an image located on the hard drive - I'm using this little pixel art submarine I drew. This image will represent the player in our game. Note that Lua is a dynamically typed language so we don't need to declare any types for these variables.

love.draw()

function love.draw()
  love.graphics.draw(submarineImage, xPos, yPos, 0, 2, 2)
end

For now, our draw() function will contain a single line of code to draw the image at the player's current position. Normally you would only need the image, x-position and y-position parameters. The three last parameters are there because I wanted to make my tiny 32x32 pixel image a little bit bigger. The 0 means that the image will not be rotated and the 2s mean that the image's width and height are doubled.

love.update()

function love.update(dt)
  downUp = love.keyboard.isDown("down") or love.keyboard.isDown("up")
  leftRight = love.keyboard.isDown("left") or love.keyboard.isDown("right")

  speed = playerSpeed
  if(downUp and leftRight) then
    speed = speed / math.sqrt(2)
  end

  if love.keyboard.isDown("down") and yPos<love.graphics.getHeight()-playerHeight then
    yPos = yPos + dt * speed
  elseif love.keyboard.isDown("up") and yPos>0 then
    yPos = yPos - dt * speed
  end

  if love.keyboard.isDown("right") and xPos<love.graphics.getWidth()-playerWidth then
    xPos = xPos + dt * speed
  elseif love.keyboard.isDown("left") and xPos>0 then
    xPos = xPos - dt * speed
  end
end

The update() function will contain code for listening to keyboard input and moving the player around. You probably noticed that this function takes a parameter called dt. This is passed to the function by the Love2D engine and indicates how much time has passed since the last update() call. This is used as a multiplier to determine how much our variables should change. Without this adjustment, the speed of our game would directly depend on the speed of the computer running it!

Input handling

We begin by using the built in keyboard.isDown() function to check if any arrow keys are currently being pressed. We store this information in two variables. One will indicate whether the down or up key is being pressed. The other one will do the same for the left and right keys. If both of these values are true, it means the player will be moving diagonally. In that case we need to divide the speed value with the square root of two before we apply it to the x- and y-positions. Otherwise diagonal movement would be much faster than horizontal or vertical movement.

Movement constraints

We then check whether the down or up key is being pressed again (not the most optimal code, but sufficient for a tutorial!). If the down key is being pressed, we increment the y-position, since the y-coordinates start at 0 at the top of the screen. We use dt as a multiplier as mentioned above. It's not enough to merely check the player input however. We don't want the submarine to disappear below the screen, so we make sure the yPos variable is never greater than the height of the screen minus the height of the player (the player width and height are 64 pixels since I doubled the width and height of the image when drawing it). Similarly, we want to make sure that the submarine doesn't go above the screen so we check that yPos is greater than zero. The code for horizontal movement is very similar.

Conclusion

You can now use love.exe which comes with the Love2D install to run the game! Just make sure you give it the path to the folder containing your main.lua file as a parameter. You should be able to control the submarine with the arrow keys on your keyboard. If you're on a laptop without arrow keys, simply change the "down", "up", "left" and "right" parameters to some letter keys.

In the following post we will take a look at some shooting, so stay tuned!
Part 2

Links

Source for part 1
Latest source
Love2D wiki
Lua reference

Hi, I'm Jens Genberg

Jens Genberg — Fri, 07 Jul 2017 08:37:06 +0000

I am a software developer living in Vaasa, Finland. I currently work with industrial software, but I am very interested in game development.

I mostly program in C++ and C#.

I am currently working on game projects in C++ and Lua/Love2D.

I am constantly trying to improve my understanding of software and design patterns in general.

Nice to meet you all!