Making a game in PICO-8: Getting stuff moving

This is the second part of my diary about making my first-ever game, using PICO-8. Yesterday, I grappled with ideas and fiddled around with code enough to realise that most of them are beyond me. But now I have a concept I think I can make: a game in which you push frogs into boxes. It’s called No Frog Left Behind.

And yet… I have no idea whatsoever how to start. Other than to hit escape, which brings up PICO-8’s suite of tools, and typing out its fundamental structure in an attempt to feel constructive and full of direction.

These are the key functions for a game: init(), which the system calls only when the game first runs so you can use it to set stuff up; update(), which the system calls for each frame, so 30 times a second; and draw(), which then draws what got updated. But how do you even start to structure code for a game about pushing frogs into boxes?

OK, I know I need to put a sprite on the screen and I need to be able to control it, and it needs to be able to shoot something which pushes another computer-controlled sprite. I also like the idea of the levels having impassable areas. Being about frogs, perhaps the impassable areas are water, and you walk around on … lily pads? So I draw some, using PICO-8’s standard 8×8 pixel sprites and its 16 colours.

My aim is to use the map editor to draw the levels using these sprites, and after a little random splurging and the following code, I get a level filling the screen.

function _draw()
    map(0,0,0,0,16,16)
end

This feels good! It looks like a game! A game without any function whatsoever. But it’s a start.

But how to stop the player going where they shouldn’t? It’s collision time, and I’m already afraid of collisions because Benjamin Soule’s fateful words are still echoing around my head: “Collisions and readjusting position code are sometimes tricky.”

I start to look at collision code in other games, but they tend not to be based on grids like mine will be. And it’s incredibly complex. There are all kinds of variables and maths going on that I can’t follow. And it’s all tied into other systems, systems I only have the haziest awareness of their function. I spend a couple of hours copying other people’s code into my text window, seeing if I can get it to work (it generally doesn’t) and being tempted into building in systems that I don’t understand or need.

But one of these bits of code is from PICO-8’s built-in demos, called Collide, made to show off realtime ball-bouncing physics. I notice that other games have used its code, too, and reading the first few lines I realise it has a pretty neat way of spawning objects which I can totally nick to create the player, the frog, the projectiles you shoot. Each can be loaded with variables and it sets up x and y coordinates for where they appear. It doesn’t give any answers to solving collision, but after several hours of agonised wondering about how to get started, I’ve finally got something on the screen. OK, they’re an awful lurid frog and a weird figure, but they’re something.

But my jubilation is short-lived, since this poses a new problem. How do I get them to move on a grid that is matched to the 8×8 pixel sprites of lily pads I’ve drawn? Afraid of pulling myself into another fretful and confusing tour of how proper games work, I hit on my own solution: if the screen is 128×128 pixels and my tiles are 8×8, I can simply always divide the on-screen coordinates by 8. Instantly, the character snaps to a 16×16 grid. I stick in some lines to take inputs from PICO-8’s six-button controls; here’s the up button:

if btnp(2) then 
    player.y -= 8
end

I also decide to make the level a bit smaller. And I have a moving character (and a stationary frog).

I have a strong suspicion that I’ve broken every rule, that what I’m doing will lead to terrible repercussions as the game becomes more complex, but I feel I’m on the road, because solving one thing naturally led to the next thing to make.

And now collision has to be next.

Here’s the full series, which we’ll be publishing daily over the week of Christmas. Also, just to note that PICO-8 is available right now in a Humble GameDev Software Bundle, in case you’re interested in trying it out.

From this site

19 Comments

  1. Reefpirate says:

    Welcome to the rabbit hole of edge cases and ‘this should be easy to implement…’!

    Quick tip on your collision problem if you haven’t solved it already: All you really need to do is make your player movement conditional on the desired space being empty. So instead of ‘player.x += 8’, you want ‘if my x + 8 is empty, then add 8 to my x’. You could probably write a new function, something like ‘CheckEmpty(x, y)’.

    • meepmeep says:

      As Alex mentioned in the comments of the first post, the game is already finished and this series is not being posted ‘live’ as it were – so unfortunately reader suggestions are unlikely to be implemented.

      • CriticalMammal says:

        Oh didn’t realize that it wasn’t a live day to day thing. Thanks for pointing that out. This is a really rad series though, it’s very cool seeing someone start out and how much tools have changed even from when I started just a couple years back. Pico 8 looks perfect for starting out with game development.

      • lesslucid says:

        …might still be useful for people reading along, though.

        • Alex Wiltshire says:

          I would very much like to hear your suggestions! I am fairly sure they’ll be better than the solutions I came to…

    • Scandalon says:

      (I know these are time delayed, but commenting for edification anyway.)

      I believe the more sane method, as this is grid based, would be to do all modeling/logic in an array, then just update display based on that.

      Having only skimmed the P8 docs, I think there’s something to be done also with the “map” memory, but not sure yet.

      If you keep your sprites simple and colored appropriately, you could also color test the center pixel in each tile for a “ugly but works” method.

      • Scandalon says:

        array = table in P8 parlace I believe.

      • Level0gamedev says:

        If I have learned anything so far from my Pico-8 coding adventure, is that tables take time to wrap your mind around… especially for someone who has no background in programming.

        For a beginner, the use of tiled maps and sprite flags might be the way to go.

  2. Level0gamedev says:

    I can’t wait to see what you came up with. Learning programming from scratch is an interesting journey.

    I am actually in the middle of learning gamedev on Pico-8. My first game is taking waaaaay longer than a week, mostly because real life allows me only to spend only few hours each week on it. But I will get there eventually. You can check my slow progress here .

    Nevertheless, if anyone is curious about getting into gamedev, I think Pico-8 is an awesome starting point!

    • Scandalon says:

      I’m reading the blog now, hope I can figure out how to subscribe…

      • Level0gamedev says:

        Thanks for checking it out!

        As for subscribing, there is a button on the left, but I guess google abandoned one-click subscriptions when they discontinued their rss reader. If you use any other rss reader, copy the atom link to your rss reader and it will keep you subscribed.

        Otherwise, you can check my twitter, I always tweet about new posts.

    • Morcane says:

      For a start, that breakout clone looks pretty cool already! And yes, separating code into smaller, more manageable, functions is generally a good idea – divide and conquer and all that.

      For anyone interested in PICO, it seems there’s a Humble Bundle going on including PICO-8 and lots of other stuff for 10 bucks.

      • Level0gamedev says:

        Thanks. In a true 80s fashion I am adding a really out there narrative, hence the tron-esque look.

        I have learned so much from this project. So much so, that I want to start making another game, but I am holding myself accountable for finishing this one first. Just one more major feature and then polish. I can do this.

    • Alex Wiltshire says:

      Oh, that’s fantastic – thanks for linking it!

  3. Donjo says:

    I’ve been using Pico 8 and Gamemaker for a little while – here’s a Jelpy mod called Hanhog’s Adventures in Vetland :D link to lexaloffle.com

    If, like me, you’re fairly new to programming it seems better to start with Gamemaker – there are way more useful tutorials online. There’s really not a lot for Pico. The music editor is lovely though so I’ll be using that for more stuff.

  4. kinyajuu says:

    Coming from a game developer (If curious just look up Kinyajuu Random Gen), it’s awesome to see people start picking up coding in various ways. Programming is very much it’s own reward. Regular video games pale in comparison to having an idea, having to think of yet another idea to make it work, then making it all work and feeling like you’re god of your own little mini world. Good read, keep it up!

    “I have a strong suspicion that I’ve broken every rule, that what I’m doing will lead to terrible repercussions as the game becomes more complex, but I feel I’m on the road, because solving one thing naturally led to the next thing to make.”

    That’s when you know you’re doing it right for certain ;) Programming is all about iteration. You will likely go back over the same code a few times once you find better ways of handling things later down the road.

  5. April March says:

    That is a startlingly lurid frog indeed.

  6. El Mariachi says:

    Why would water be impassable to a frog?

  7. vanessallawton says:

    I leave my 9 to 5 job and now I aam getting paid 98usd hourly. How? I work-over internet! My old work was making me miserable, so I was forced to try-something NEW. One year after…I can say my life is changed-completely for the better! Check it out what i do——

    KLa————->>>> link to ow.ly