This is an old version of SNES9X but was chosen as it runs mostly at full speed on the Raspberry Pi unlike the more recent versions of SNES9X. Game support is therefore not as good as the newer SNES9X versions and graphics & sound is not as accurate. Games that will not work, for example, are Yoshi's Island, Street Fighter Alpha 2, Star Fox. Feb 29, 2016  Street fighter 3 on raspberry pi 2 (recalbox) http://ibblog.tistory.com/309.

• ...

• |

• My Forums
• 
  Customize My Forums

• Topic Sort Options

With a refreshingly simple set of tools, PICO-8 is the perfect place to plot pixels. Sprites – 2D images composed with pixels – have been a mainstay of game development since, well, forever, and have seen a recent resurgence due to the rise of pixel‑art indie titles like Celeste, Spelunky, and Stardew Valley. We’ll be taking a look at how to animate effective 8-bit sprites for our space shooter, how to use a sprite sheet for animation, some basic background ‘parallax’ scrolling, and some simple space explosions for good measure.

See also

PICO-8 Sprites and animation: Tools of the trade

If you’ve been following our PICO-8 tutorials from the start, you’ll already be acquainted with PICO-8’s small, but mighty, sprite editor. Load up your game, then switch to the editor to look more closely at what we’ll be working with (Figure 1). The big box on the top-left is your sprite window where you can plot pixels. The tool set below allows you to draw, copy, select, pan, and fill. And to the right you have your colour selector, brush size, and zoom sliders, as well as sprite flags. What more could you need?

A pixel artist’s palette

Part of PICO-8’s popularity is its striking 8-bit palette. Creator Joseph ‘Zep’ White spent a long time choosing a set of 16 complementary colours that offer a wide range of shades and tones. See the palette image (Figure 2) for a breakdown of how they can be combined. But a classic approach is to choose a primary colour and use a lighter complementary colour to show highlighting, and a darker shade for shadow. To demonstrate, we’ve highlighted the grey (colour 6) of our space fighter, with white (7) on the tips. You can take this approach with all of your sprites.

Sprites, sheets, and animation

So how do we animate? The easiest way is to draw a new sprite for each animation frame and store them in a sprite sheet. Then, in runtime, we swap through these different sprites to make an object appear to come alive. The sprite sheet, shown at the bottom of the screen (see Figure 1), indexes each sprite on the sheet with a number. Let’s start with the bad guys. Next to your original enemy sprite, draw a few more to show it at various stages of jiggling menacingly. Don’t worry too much about smoothness as we can always edit them later.

They live!

To implement the animation, we will need to add a few things to our code. First of all, in the create_enemy() function we need to add a new table to our enemies that stores all the sprite indexes for their gruesome animation. Add

enemy.sprites={2,18,2,34}

We will be moving through this table from left to right at set intervals. To keep track of this we will need a timer: add enemy.animtimer=0 to the function as well. Now, we need to actually tell it to change the enemy sprites along with the timer.

Animation: It’s all in the timing

In the main _draw() function, find the enemy loop and at the start of it add enemy.animtimer+=1 to increment each frame. Below this, add:

enemy.sprite = enemy.sprites[flr(enemy.animtimer/5-enemy.speed*3)%#enemy.sprites+1]

This looks complicated but really just compares the animation timer to the number of sprites in our sprites table and moves us along one. The inclusion of the speed variable adds a little bit of flavour that makes faster-moving enemies animate faster. Run your game and check it out in action.

Flickering fire

We can repeat this process for the player’s ship, too. Draw another sprite which shows the rocket engines flaring or flickering next to the original player sprite. Even just a couple of pixels different between frames is enough to make a sprite come alive. In _init() where we declare our player table, you’ll need to add another animation timer and table of sprites, just as we did for the enemy. We’ll also increment this timer in the draw function and add the line

player.sprite = player.sprites[player.animtimer%#player.sprites+1] below this to make a fast flicker.

Soaring through space

That’s made our ship look a little better, but it still looks static. Let’s animate it banking left or right when it moves. Draw a sprite of the ship banking left and one banking right. You can copy and paste your original to act as a starting point. Then copy these sprites and animate the tail flicker for each. Now we add a conditional to our _update() function that will swap our sprites table depending on if the up or down direction keys are pressed. Now our little space fighter will soar majestically through space.

Things that go boom

Currently our lasers are a puny red rectangle, but we can do better than that. Create a deadly-looking laser sprite in index 16 and replace our previous rect() function call with:

spr(16, laser.x-5,laser.y)

That’s a clear improvement, but something is still missing: you guessed it, explosions. To create dynamic-looking impacts, we will be writing two functions: one to create them, and the other to draw them as flash of circles. Very nice. We will also declare a new explosions table in _init() and write a for loop to handle drawing.

Pyrotechnics in PICO-8

Our createexplosion function creates, you guessed it, explosions. Much in the same way as we’ve created enemies and lasers previously. Our drawexplosion function draws a circle depending on what stage the explosion’s timer is at, then deletes it when it reaches 4. To see it work, add create_explosion(enemy.x,enemy.y,rnd(4)+8) just after we delete enemies upon collision with a laser. Using a random number for explosion radius gives us a little more flavour by varying the size of the explosions slightly. You should add a big explosion when the player is destroyed, too.

Parallax to the max

Parallax scrolling is an easy and effective way of adding depth and movement to a background by scrolling things at different speeds. Let’s make a starfield to give the feeling our plucky starship pilot is in hyperdrive. Create a new stars table in init() and populate it with stars using a for loop. Next, at the start of draw(), add rectfill(0,0,128,128,1) to colour the screen deep space blue, and another for loop that draws each star as a single pixel, moves it from right to left, and resets it when it goes off screen. Warp factor 4!

A simple shader

‘Shader‘ is a term used to describe a graphical treatment given to a rendering of a sprite or other asset. They are used extensively in game development, often to achieve a specific aesthetic style. Now we have a background, our sprites don’t stand out as well as they did. Let’s write a shader function outline_sprite() that draws a sprite offset in eight directions in black, using pal() to reset the palette, then the original colour sprite on top. Now, replace the player and enemy spr() calls, and see how a simple shader can make them pop!

Next PICO-8 steps: sound

Our game looks good. We have both time-based and movement-based animation. We have lasers and explosions. We have a scrolling starfield and a simple shader so our sprites stand out. However, our game will always feel lifeless without sound. So, in issue 87 of The MagPi we will be making some spacey SFX to bring our shooter to life, and we’ll be composing some 8-bit chiptunes. See you there!