A Fond Farewell to the Lost Decades Podcast

How long have I been listening to the Lost Decade Podcast? Three years? Maybe five years? Listening to Geoff and Matt talk about their exploration of game development and the business and life around it has been a part of my every week.

I honestly can’t remember a pair of game developer icons that I more deeply identify with.

Recently, they announced that Lostcast is coming to an end after all these years and the last episode has been published, now. I haven’t brought myself to listen to that final episode. Maybe I’m holding on to the feeling of looking forward to it just a little long.

So, I want to say a deep and heartfelt thank you to both of, Geoff and Matt. The podcast has made me feel like I really am a part of the game development community. If I can identify with two great indie developers as much as I do with the Lost Decade pair, then I can feel much less out of place. The technical topics are always thought provoking. The personal touches are always endearing. Hearing about the gaming community through their developer lenses is always great. Lostcast is just… great.

Thanks, Lostcast, for everything. Thanks and farewell.

Learning to LÖVE: We’re Gonna Make Pong

This is Lesson 2 in my series on getting start making games Learning to LoveIf you need to get your computer setup for making games with the LOVE framework, see Lesson 1:  Learning to LÖVE: Getting Started with LÖVE.

At the end of the first Lesson we created a blank project in a new folder with a single empty file called main.lua  in it. This was the minimum setup for LOVE to run a game, but it just opened a empty window with that blank file. We’ll fill that file up with our first game now.

We’re going to make pong!

This is the actual version of PONG we’re going to be making today. The paddle on the right is the player, controlled by the up and down arrows. The paddle on the left is an AI player that tracks the ball, trying to bounce it back at us. The score will be kept at the top of the screen, and the ball will increase in speed as the play continues, getting trickier and trickier to follow.

If you’ve never programmed before, don’t worry. We’ll walk through every step one at a time. You’ll be able to learn along the way.

You build anything by breaking it down into little steps. Any game, even one as tiny as PONG, is too big to make all at once. Instead, we’ll start with a very simple thing, and we’ll keep adding pieces until we have our PONG game. Here are the steps we’ll be taking to build the game.

  1. Draw a simple rectangle on the screen. This will be our ball.
  2. Make the ball bounce around the screen
  3. Make the player and AI paddles on the sides of the screen, controlled by the computer and the player.
  4. Make the ball bounce off the paddles and not the sides of the screen.
  5. Add a score counter and we’re done.

Let’s jump into step one!

Step 1: Drawing Simple Boxes with LOVE

Let’s start learning some basics. We’re going to draw a square! Enter these simple lines and run your game.

(If you need a refresher about how to run the game, which we covered in Lesson 1, just press that big play button in the top-left toolbar of your Atom editor!)

This is your very first actual LOVE program, so lets break down what it did. If you ran it, you’d see this screen (I’ve drawn on the screen to explain what’s happening).

We decided where to draw the box by naming two numbers BALL_X  and BALL_Y . We decided how large to draw it by naming two numbers BALL_WIDTH  and BALL_HEIGHT .

We can tell LOVE to draw a rectangle for us using the love.graphics.rectangle()  command. (The words “command” and “function” are largely interchangeable) We use the numbers we named (those are called “variables”) to tell the command how we want to draw the rectangle.

Games draw to the screen very fast. Usually the screen is drawn 30 to 60 times every single second. Your game is no different. LOVE needs to know what code in your program draws everything so that it can re-run it every single frame.

Hey, Wait A Minute… Why “30 to 60” instead of an Exact Number?
Good question, intrepid reader!

Your game has a lot of work to do moving things around and handling input and doing all the things to make your game work. This draw function is called in between that work, when the game has a small break to draw()  everything to the screen. If the computer can’t draw fast enough, draw() will be called less often.

That’s how we get frame-rates (or FPS) in games!

We wrap our drawing code into our own function called “ love.draw() ” which LOVE will call every time it needs to draw to the screen. Functions are commands that do a certain job.

love.graphics.setColor()  is a function to tell LOVE what color we want to draw things to the screen with. We use love.graphics.setColor(255, 255, 255) to set the color to white.

love.graphics.rectangle()  is a function we use and love.draw()  is a function we create.

Of course, that’s much too big for a PONG ball, so make it a bit smaller before moving on. Feel free to play around with all four numbers to see how it draws different rectangles on the screen before continuing on to the next part of the lesson.

Step 2: Move the rectangle with a velocity

Now that we can draw a simple square, lets start turning this into our pong game. We’re going to start it moving.

Now, we’ll move it. The love.update()  function is the next command we’ll create for LOVE, a lot like love.draw()  and also called many times a second. Instead of drawing to the screen, this function is called when LOVE wants us to update all the data in our game. This is when we’ll move characters who are moving on the screen, change colors to make lights flash, and check if lots of moving objects hit each other.

If we change the value of the BALL_X variable the square will move along the screen. Run the game with this added to your mail.lua file.

You’ll see the ball moving quickly across the screen. Probably too fast.

Every time LOVE calls our love.update function we move the ball by 25 pixels. Unfortunately, because this could happen any number of times a second, we don’t actually know how maybe times this happens or fast it will move. We can fix that!

Let’s say we want the ball to move 25 pixels per second. The function is passed an important value we can use: the amount of time that passed since the last time it was called. We can use this to figure out exactly how far to move the ball every frame. We’ll go ahead and move it in two directions, as well, by adding a line to change BALL_Y the same way.

All we’ve changed is multiplying the movement by this value we’re given, and now our ball will move at a steady pace. If you change the value 25 you’ll make the ball move faster or slower.

Bound the rectangle on the screen top/bottom

The first thing you might notice is the ball just flying right off the edge of the screen! That’s not going to make a very good game of pong. Let’s start to keep it inside the game area.

This version of our update function moves the ball in the down-right direction. We’ll make the ball bounce against the bottom edge. After we’ve moved the ball we want to ask, “Has it reached the edge of the screen?” and, if so, we want to make it bounce.

Now, because we need to be able to change the direction of the ball we need the direction its moving in to be a variable instead of just a number. We’ll make separate variables for the movement along the X axis and Y axis.

How do we change the direction the ball is moving in? We just make the number negative. If BALL_VX or BALL_VY are -100 instead of 100 then we’ll be subtracting from BALL_X and BALL_Y every time our update function is called.

With the ball moving based on our new variables, we can add a few lines to check if the ball has moved past the left side of the screen, because that’s the direction the ball starts moving.

…of course, we want to make it bounce on both sides…

and we want to bounce on the top and bottom of the screen, as well!

 If you need to catch up, here’s the complete main.lua code you should have at the end of Step 2

Step 3: Adding both Computer and Player Controlled Paddles

We’ve got the ball bouncing around the screen, but we need to do something with it, so we’ve got to create the Player and Computer paddles. We’ll be giving the player the ability to move the paddle on the right side of the screen up and down. The computer will move the other paddle to track the ball as it bounces around the screen.

First, we’ll draw the paddles. This works just like drawing the ball. Let’s add some more variables at the top of our code to track the placement and speed of the paddles.

And we add two lines to love.draw()  to put the paddles on the screen.

They’ll try to hit the ball with it to keep it from hitting the edge. So, we’ve only got two directions of control to implement and we’ll start with wiring up the down button.

The love.keyboard.isDown() function will tell you if a button is being held down by the player. Ask it if the player is holding the down button and, if they are, move the paddling down. We use the same trick of multiplying by dt to ensure a smooth speed.

…and we’ll do the same thing for the up button to move the right-side paddle up.

If you need the code as it should appear at the end of Step 3, here it is:

Step 4: Bouncing the ball off the paddle

Now comes the really important bit: making the ball bounce off both of our moving paddles. Bouncing on the screen edges was pretty easy, relatively, because those are fixed and stretch the full size of the screen. The paddles are smaller and move and we have to let the ball bounce on them but pass to the edge if they miss.

Let’s look at some measurements we can use in a typical game of PONG. We’ll focus on the player paddle on the right, first.

BY: How far is the ball from the top?

PY: How far is the paddle from the top?

BX and PY: How far are they from the left side?

25: The size of the ball

150: The height of the paddle

Now, we just ask three questions to find out if the ball hits this paddle:

Is the ball far enough to the right to touch the paddle?

Is the ball below the top of the paddle?

Is the ball above the bottom of the paddle?

Here’s how our three questions translate into a simple if  statement to determine the collision:

Bouncing on the left paddle is almost the same.

The ball still bounces against all the edges of the screen, but now it bounces against the paddles as well. Of course, the point of the game is that you have to hit the ball with the paddle, so what should happen when the ball touches the left or right edges? It shouldn’t bounce. Instead, it should pass through the edge and then re-appear in the center of the screen for a new round to start.

Here’s how we’re currently bouncing the ball on the sides of the screen:

We want to allow the ball to pass a little beyond the edges, so we want to change the values 800 and 0. And, we’ll replace the line that bounces with a line of code to move the ball back to the start.

This step was a bit simpler than the previous ones. That’s it. It wasn’t much to add, but here’s the complete code at this end of this step:

Step 5: Keeping Score

Our last step is adding a little bit of polish by keeping score for the two players. Just like the original PONG we’ll put the scores at the top of the screen and they’ll count each time a player scores a point.

Before we keep score we need to add two new variables to keep them in. The scores will start at 0, of course, so add them to the top of your file with the other scores:

Right now we just reset the ball when it passes beyond one of the side edges:

So, we’ll add some lines here, but we need to check which side the ball went through, because now it matters. We need to know which player to award a point to.

And, the very last step in making our game, is adding just a few more lines to the love.draw()  function to use a new LOVE function called love.graphics.printf() . This lets us draw text on the screen. Our variables LEFT_SCORE  and RIGHT_SCORE  are numbers, but we have to give printf()  text and we convert them with the tostring()  function, which you can see in the code here:

Wow.

You just made a whole game. I’m impressed with you! Give yourself a pat on the back. Call someone over to your computer to show it off! Tell your friends about it!

You should feel good about taking this first step. You are a game developer.

The Learning to LOVE series will continue. I hope you enjoyed it so far, and if you want to learn more you should subscribe to my newsletter for all things gamedev related. The newsletter is from my little game studio Stonebird Games, but its a big focus on the making of games. Sign up for new updates about Learning to LOVE and my other game dev projects!

Complete Source

Here’s the complete game running! You made this! If you need it, the complete code is below. You can mess around with it, and I encourage you to do so. Try tweaking the BALL_START_SPEED  or the height of the paddles. Try making them shorter for a challenge? Maybe see what happens if the ball gets even faster with every bounce off the paddles.

Play around, learn more, come back for more LOVE lessons in the future!

 

MDN Brings Browser Vendors To One Table

Have you heard the great news about documentation on the web? Mozilla, Google, Microsoft, and Samsung have made a join commitment to directing documentation focus for their browsers’ web standards to the existing Mozilla Developer Network (MDN).

This is a huge step for the web, for a number of reasons.

First, this commitment means that, with these four vendors committing to combining their documentation, differences will be a lot more obvious. I think this is going to create a big incentive to the vendors towards both compliance and matching pace with each other.

Second, just like the great resource of caniuse.com, developers are going to have even more one-stop shopping for sizing up the differences between browsers on a particular feature, determining when new toys are available consistently enough to use on broad-usage projects, or finding the nuances of working around those differences to provide stable experiences to all your users, regardless of their devices and software.

Lastly, and I think most interestingly, this news is amazing for all that it isn’t. It isn’t particularly shocking or surprising. It gives us a new leg up on cross-browser development, but the gaps it closes aren’t actually that large to begin with. Five years ago? This would have much bigger news then. Ten years ago? This would have been essentially unthinkable. We’ve come a long way to get here, but the vendors cooperation has improved so much that this news, while great, honestly feels almost inevitable.

That feeling gives me a lot of hope for the success of this initiative!

Learning to LÖVE: Getting Started with LÖVE (on Windows)

Learning to LÖVE is a series of tutorials and articles teaching the ins and outs of building games with the LÖVE engine. LÖVE is a great tool for people new to building games. It can serve seasoned developers, too, as a straight forward way to bring game ideas to life.

This first installment of Learning to LÖVE will get you up and running quickly with LÖVE installed, as well as a recommended editor and extensions that make working with LÖVE games easier. You’re going to install LÖVE to run your games, the Atom text editor to work on your games, and several extensions to Atom that help you write Lua, the programming language LÖVE uses, and to run and test your games.

This targets Windows users, but most of the details will work on other platforms. OSX and Linux versions of this article should be available at some point in the future.

Let’s get started by installing LÖVE itself first.

You can get LÖVE from the project’s website love2d.org. The downloads are first and foremost on the main page, so you can easily find them! I recommend grabbing the “64-bit Installer” option. This will be the easiest to work with, including with the extra tools we’ll be adding next.

Just walk through the installer steps and you’ll have LOVE installed in no time.

Next, we’ll install Atom, our text editor of choice. I’m recommending Atom for three crucial reasons for people new to programming:

  • Atom is a free text editor

  • Atom is easy to use

  • Atom has great extensions, including ones that make working with LÖVE a breeze

Just like LÖVE itself, the Atom website makes the download option front and center. You can find it at atom.io, so go there and download the installer now.

Atom doesn’t even require any installer steps. It will install automatically, so just wait for it to complete. Atom is larger than LÖVE itself, so the wait is just a bit longer.

When Atom is done installing, it should open itself automatically. If it doesn’t, you should find it in your Windows menu, so go ahead and open it. You’ll be presented with a lot of first time options. If they are daunting, don’t worry: I’ll walk you through the things you need today.

The first thing you’ll see is the Atom settings and a collection of “Get to know Atom!” options to make it easy to start customizing. The first thing we want to do is “Install a Package” so we click “Open Installer”, search for “love-ide”, and click the “Install” button when the package comes up in the search results.

Atom will run through the package installation steps. It will ask you a few times if you want to install dependencies. Answer “yes” each time. These are just other packages that the one we want depends on to do its job of making LÖVE easier to work with.

When all of these packages are completed you can close the Welcome tab on the right and focus on the settings. Click the settings button on the love-ide package, which should still be present. We’re going to make some small customizations to ensure it works with the version of LÖVE we have installed.

The main thing we want to do is configure Atom to use the debug version of LÖVE , so that we can get information when our code fails. In the first setting, which is labeled “Path to Love Executable”, enter this: C:\Program Files\LOVE\lovec.exe

That’s all the customizations we’re doing right now!

This article is all about getting setup. We’ll make our first game in the next installment, but I’ll at least show you the first tastes of what the process will look like. So we’ll create an empty project and run it to see the most basic LÖVE program run with an empty screen, but its a start!

Click the “File” menu in Atom and select “Open Folder…”

When the dialog appears, click the “New folder” button in the top left and name your first project. We can call it “My First Love Game”.

Now we just want to create a standard file for LÖVE called “main.lua”. All LÖVE games begin with this file, the main script that runs your game. Right click on your project folder and select “New File”, name the file “main.lua” and press enter.

Now you can use love-ide’s LÖVE run button, in your toolbar on the top left, to run this empty script to see the start of your first game run… sort of! It’s just an empty window for now, but you’ll be packing lots of great stuff in that space soon enough.

In the next installment of Learning to LÖVE , we’re going to take this empty script and fill it with our first real game. I hope you’re excited to get into the world of game making!

On Pruning Your Passions

We live in a hobby-rich world. There is no shortage of pastimes to grow a passion for. There is a shortage of one thing: time to indulge those passions. If you’re someone who pours your heart into that one thing that makes your life worthwhile, that’s a great deal. But, what if you’ve got no shortage of interests that draw your attention and you realize you will never have the time for all of them?

If I look at all the things I’d love to do with my life as a rose bush I’m tending, I realize that careful pruning is essential for the best outcome. This is a hard lesson to learn, because it can mean cutting beautiful flowers and watching the petals fall to the ground to wither. It has to be done.

I have a full time job that takes a lot of my mental energy. I have a wife and a son and family time is very important in my house. I try to read more, and I want to keep up with new developments in my career, and I’m trying to make time for simple, intentional relaxing to lower my anxiety and stress. That doesn’t leave a lot of room to pursue any of these hobbies.

I used to play the guitar, if only a bit.

I’ve always had my eye on becoming a writer.

Software development began as a passion hobby, and now that it is a carrier I still feel that draw to it outside of work.

A lot of my life was spent under the assumption that I would end up in some career as an artist, and I was even on a trajectory towards art school in my teens.

But there aren’t enough days in the year, or hours in any of those days, to scratch 100% of those itches.

So, I’m committing to saying “No” to myself more often. When I’m looking for a small app or tool and can’t find just the right thing, I’m going to say “No” to building my own, instead of making the best option work. When NaNoWriMo rolls around next year, I’m not going to cause myself anxiety over the “Will I? Won’t I?” leading up, and I’m going to admit that it just doesn’t work for me. When I end my work day, I’m going to leave the web development at work.

I will be saying “No” to myself on all these interests so I can direct my “Yes” whole heartedly to one: my blossoming foray into game development. And this is a really deliberate choice! Game development is what got me into computers and into programming. But, its also something multi-faceted in a way that few other pursuits are. By throwing myself fully into my game projects, I’ll be able to spend time created art, to code outside of work and learn new techniques and paradigms, and to tell stories.

I’m putting down a lot of interests, and shelving a lot of personal projects. I have dozens of bits of code that’ll only collect dust from now on, even though I think of them often and constantly feel the pull to hack on them in the evening or weekends. But, I have convinced myself this is for the best. I’m working on making 2017 a big year for me, and I can’t do that when I’m pulled in a thousand directions.

Learning to give up just may be the ticket to finally succeeded.