Knowing where to spend your time and focus will help you finish projects without getting stuck in details.
I’m building a 2D side-scroller game and just got the project to the point where the main character can move left, right, and jump on tiles. A game needs a background and tiles form that background by repeating small rectangular images. Some might look like dirt with some grass on top. Some might look like ice. And some can be dangerous with pointy spikes.
The game uses these tiles to form the environment that the hero can move around on. They form the ground. Even if some of that ground might look like it’s floating. It’s still a solid surface that the hero can jump up and down on and move left and right.
There’s a lot of details so far including some more such as:
- To simulate falling, the hero will move down on the screen at an increasing rate as soon as the player moves the hero off of a tile and into open space.
- Jumping should start out fast, then come to a stop at the top and then speed up again as the hero falls.
- The hero should only be able to jump when currently on a tile.
- Since this is not a space game, the hero can’t change direction in the air while jumping. But if the hero’s already moving, then that should continue. This leads to a nice curved path when jumping while running.
- The hero should stop moving left or right when hitting the side of a tile. This is like running into a wall.
- If the player stops pressing the left or right arrow keys, the hero should come to a gradual stop. The stopping distance should be longer the faster the hero is moving. This is just like how it takes a longer distance to stop a car on a highway and a much shorter distance when driving slowly on a residential street.
I like to explain programming through game development because it’s fun. If you can build a game, though, then you can write any kind of software. It doesn’t matter what you’re building, there will be details like these that you need to think about and decide how to handle.
I like to take things in steps. So when I started this, I wasn’t thinking about any of these details. I knew that there would be a hero character moving around the screen. But I didn’t worry about all these details at the beginning.
Listen to the full episode to learn more about what details I’m working on now and what I’ve ignored so far. You can follow a similar approach to focusing on the most important things at each stage of development. Read further for the full transcript of the episode below.
Transcript
Attention to detail is critical to programming. You don’t need a lot of math and I’ve said this many times. You do need to understand logic. And you have to watch out for small things that can cause problems later.
I thought I’d take a break from distributed computing for a while and talk about a project I’m currently working on and describe where and how I focus my efforts.
I’m building a 2D side-scroller game and just got the project to the point where the main character can move left, right, and jump on tiles. A game needs a background and tiles form that background by repeating small rectangular images. Some might look like dirt with some grass on top. Some might look like ice. And some can be dangerous with pointy spikes.
The game uses these tiles to form the environment that the hero can move around on. They form the ground. Even if some of that ground might look like it’s floating. It’s still a solid surface that the hero can jump up and down on and move left and right.
There’s a lot of details so far including some more such as:
◦ To simulate falling, the hero will move down on the screen at an increasing rate as soon as the player moves the hero off of a tile and into open space.
◦ Jumping should start out fast, then come to a stop at the top and then speed up again as the hero falls.
◦ The hero should only be able to jump when currently on a tile.
◦ Since this is not a space game, the hero can’t change direction in the air while jumping. But if the hero’s already moving, then that should continue. This leads to a nice curved path when jumping while running.
◦ The hero should stop moving left or right when hitting the side of a tile. This is like running into a wall.
◦ If the player stops pressing the left or right arrow keys, the hero should come to a gradual stop. The stopping distance should be longer the faster the hero is moving. This is just like how it takes a longer distance to stop a car on a highway and a much shorter distance when driving slowly on a residential street.
I like to explain programming through game development because it’s fun. If you can build a game, though, then you can write any kind of software. It doesn’t matter what you’re building, there will be details like these that you need to think about and decide how to handle.
I like to take things in steps. So when I started this, I wasn’t thinking about any of these details. I knew that there would be a hero character moving around the screen. But I didn’t worry about all these details at the beginning.
Imagine that you’re building a house. There’s a lot of details there too. Do you worry about the exact placement and length that a 2×4 needs to be cut for the roof when you’re still digging the foundation? No. You wait until you get there and then measure.
The interesting part about software though is that you can build a temporary roof, a rough-cut roof, and put it in place along with some basic walls that don’t need to actually hold any weight yet. You can get these pieces in place quickly and easily without wasting a lot of time and effort.
This allows you to get a feel for what your finished product will look like and how it works before you commit to a specific design. Because once you pour a foundation for a real house in concrete, it’s really hard to change your mind and move the garage to the other side.
When I started work on this, I called the project Bounce because it was just a green ball that moved around on a black screen. The ball would change direction when it hit the edge of the screen like it was bouncing off the wall.
That was all it did. It wasn’t even controllable and just moved randomly around on the screen. It sure didn’t look much like a game.
But I didn’t let that bother me. I just kept adding things. I added the ability to control the ball with the arrow keys, then some different scenes such as an opening splash screen and a menu. And my splash screen even now is just a blank screen that displays a message after five seconds that says “Press any key to begin.” It’s about as far from a finished splash screen as you can get. But it’s there and I can work on it later.
That’s what I’m explaining in this episode. You don’t have to complete every thing along the way until it’s absolutely perfect. And for many things like my splash screen, perfection is a long way off.
Doing all this allowed me to turn that green bouncing ball into an animated hero that looks like it’s walking. Always to the right, I might add. I haven’t worried about getting the hero to face the correct direction yet even though it can move left or right. Right now, when the hero moves to the left, it looks like a moonwalk. That’s okay. Because there are other things that I have been working hard to get absolutely perfect.
For example, at first when I added the ability for the game to detect collisions between the hero and the tiles, it was great because it really made the tiles seem solid. There was something there and not just some background image that the hero would just walk over. The hero could stand on top of a tile.
All I had to do was add some amount of downward movement all the time to simulate gravity. It would be a bit like constantly holding the down arrow pressed. Then on each update of all the game elements, I have the game check if the hero is on top of a tile. And if so, then the hero gets moved up a bit until there’s no more overlap. This gets repeated over and over about 60 times each second.
Well, one of the first problems I noticed was that the hero was shaking. At least that’s what it looked like. The hero was still walking and continued to walk whether standing on a tile or jumping in empty space. But the walking looked a lot smoother when in the air than when on top of a tile.
I didn’t work about this right away. But this whole weekend has been nothing but fixing and improving little things like this.
The problem was caused because the hero’s position on the screen is represented by a couple float values. Check out episode 112 for more information about floats. A float value is a good way to represent fractional values but in this case, it was causing a problem.
Because the game was updating everything so fast, the hero would only get moved down a fraction of a pixel during each update. The code that detected the overlap with the tile would try to put the hero back in the same place but it wasn’t exact. It was accurate within a pixel. But that little error calculating the exact place to put the hero was enough to cause the hero to be drawn let’s say at coordinate 150.0, then at 150.21, then at 150.49, then at 150.85 before finally going back to 150.0. and maybe the next few updates would place the hero at other fractional coordinates. Each of these was close but when I looked closely at the game, there was a slightly noticeable shakiness.
This was the time for me to fix this. In programming and in math too, there’s a method you can call to return either the floor or ceiling of a floating point value. Floor will return the next smallest whole number and ceiling will return the next greater whole number. For example, the floor of 150.85 is 150. Note that this may or may not give the same result as rounding. That depends on how you want to round numbers up or down. And the ceiling of 150.85 is 151.
By using the floor method, I was able to place the hero in an exact location each update and the shakiness went away.
That’s about enough for today. I didn’t break for a sponsor today because this whole project is what will make up a 5 day workshop. I’ll show you exactly how to use all this code that I’m working on and perfecting so that you can build your own side-scroller game. This will take you from absolute beginner to a working game of your own in 5 days. How is that possible? It’s because I’m spending all this time perfecting these little details now so they’ll be ready for you to use. If you want to learn more, just text the single word gameweek to the short number 44222.