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 entry is part 2 of 2 in the series Learning to Love

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)

This entry is part 1 of 2 in the series Learning to Love

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.

Publishing ES6 Modules on NPM

I had an adventure over the last couple days with ES6!

There was a pattern I’d already used in a few of my React projects to make ES6 classes a little nicer. ES6 did a lot to make working with this mechanics nicer, but there was a still a gap that bit me: the sugar provided by ES6 classes don’t extend to keeping method bound to instances of the class.

Maybe you, like me, would expect this to work:

But, like non-class methods on any regular Javascript object, onClick will loose its binding to the Counter instance. There are a few existing solutions to this, but I wanted one that didn’t change the syntax of defining a method on these classes.

Enter AutoBind, via my new NPM module es6-class-auto-bind:

You can read all about the AutoBind class [at its NPM readme](https://www.npmjs.com/package/es6-class-auto-bind) and you can read on to learn about what I learned to publish this ES6 module on NPM, consumable by other ES6 (and even ES5) code.

The Problems of ES6 on NPM

For the moment, NPM is a tool for distributing and installing ES5 modules. While you can point it at any types of files you want (some people have even used NPM to distribute C libraries!) the mechanisms that install and then import those modules in NodeJS (or Browserify) are expecting ES5 modules, so they won’t do your users any good.

There are two problems we’ll face shipping ES6 code directly.

First, most of the ES6 code we might ship would be completely useful for consumption by ES5 code. My choice of ES6 shouldn’t prohibit anyone from consuming my libraries. We want to publish something that both new ES6 and legacy ES5 code can make use of without caring much about what’s inside. And, we want to do so without carrying build constraints on our users, like requiring they integrate BabelJS into their pipeline when they haven’t done so already.

Second, for those consumers of our module who already are using BabelJS or another transpiler to ship their ES6 to ES5 runtimes, importing ES6 code installed by NPM is probably not going to work out of the box! Browserify here is a big culprit, refusing to apply configured transform plugins to packages installed from node_modules/, only to those from your own local project.

Now, I understand Webpack may be better about enabling this usecase, but I don’t want to impose that move to people still on Browserify (and I still want to support ES5 users), so I wanted a solution that works for everyone.

How To Combine Packaging and Transformation

The solution is to tranform our ES6 module to ES5 before publication, and idealy to automate this. We want to transform it into an ES5 version of itself and tell NPM to publish that version of our module, instead of the original ES6 version. Here’s how we do it.

We’ll put our two versions into a src/index.js and build/index.js. Transforming the first to the second is straightforward with BabelJS, which we’ll install first:

Now we have both versions, and we only need to tell NPM what we actually want a consumer to get when they require()or import it.

Great! But we still need to make this happen automatically any time we issue an npm publish, never allowing us to publish a version that isn’t compiled from the most recent version of the ES6 source.

We’ve defined two npm run scripts now: compile and prepublish. We can run npm run compile to test our preparation any time, and NPM itself will invoke prepublish before any new version you attempt to upload via npm publish. We’ve now configured our module to transform from ES6 to ES5 before publication to NPM, where it is consumable by any other project that needs it!

We’re almost done at this point. There is a last step we can take to make the whole process more consistent between ES5 and ES6 norms. The ES6 module syntax’s export statement is largely comparable to exports.member = somethingstatements in NodeJS’ ES5 modules, and BabelJS will transform them appropriately. But export has a special form for exporting one member as a default, to be handed to an importing module when it only asks for a single thing from the module.

The problem is BabelJS transforms this by exporting these defaults with the obvious name “default”, and accesses the .default member of a module when performing a default import. But, this means ES5 code would need to access the .default member explicitly, with the unfortunate requires() invoking as require(“es6-class-auto-bind”).default. We’d like to get rid of that ugly .default at the end, obviously.

It turns out this is a behavior BabelJS did have but changed. It is also a behavior we can restore through a plugin that re-implementes the deprecated behavior. I think allowing it to be optional like this is just fine. We just need to install the plugin

And change our compile script to enable the plugin

And, that’s it. Everything works great now. This is how I was able to ship my ES6 AutoBind class via NPM and install into other ES6 classes, seamlessly building my ES6 code across packages. Very exciting!

Here’s the whole portion of the package.json necessary to make this work.

Stay subscribed for follow up posts on the subject, as I dig into how to expand this to:

  • Ship a copy of the ES6 code in parallel and pull that into the project’s own transform options
  • Understand how to expand this approach to packages with more than one module