Livening up the world
A lot of the updates made since the last post have ended up being visual tweaks. Normally I’d save these for later, but it turns out that some of them mattered more than I thought they would! Turns out the video of a video game is important, too!
Tweaking the camera
Centering our camera directly on our player was functional enough, but seeing what’s above you is generally more important than seeing what’s below you. A future update will probably also include shifting the camera to bias in the direction the player is facing, but one step at a time.
Now we clamp the camera to never show below the map and put the player closer to the bottom of the screen. We still need at least a little bit below the player to show, since sometimes the player explores downwards and we don’t want to make that completely blind. I think it works pretty well!
Fixing the vines
Before, our vines were a big green rectangle. That’s fine and all, but really what we want is to show what’s behind the vines, to better inform the player of the level layout. These vines are removable, and having them draw over the existing background helps ground them in the world and communicate their removable nature. But how do we do that?
Each map tile can only fit one sprite on it after all, and shared tiles also share flags. Do we duplicate our background tiles to flag only ones we want replaced? That could work, but it’d be expensive (we don’t have that many tiles to work with!) and inflexible (what if we want to move the vines later?). Plus, we want our vines to behave like solid tiles, and that’s much easier to do if we make our vines part of the actual map tiles.
Luckily, there’s a way to get the best of both worlds! First, we add a new tile in our sprite map which has the appropriate flag set to be a solid wall (note that we’ve made yellow our transparency color here):
Then, we use the PICO-8 function mset() to change specific tiles of our map to this new tile. And here’s the special sauce, we also store the tile that was previously at this map location. Then we draw all the old tiles behind the new ones!
-- A table to store our previous tiles
vine_1_prev_tiles = {}
function vine_1_init()
-- Store all the old tiles in the from X pos 66 to 68
-- and y pos 21 to 37, then set those tiles to the new one
for i=66,68,1 do
for j=21,37,1 do
add(vine_1_prev_tiles, {mget(i,j),i,j})
mset(i,j,96)
end
end
end
-- Called before the map() function to draw the map, draw all of our
-- previous tiles
function vine_1_draw(self)
if not vine_1.alive then return end
foreach(vine_1_prev_tiles, vine_tile)
end
-- Draw a previous map tile at its stored map position in sprite coordinates
function vine_tile(t)
spr(t[1],t[2]*8,t[3]*8)
end
And now instead of a big green square, it looks like this! Much better!
Adding a background
It occured to me that this was probably a good time to experiment a little with the nature background, and I’m glad I did! Turns out your background is actually very important for contextualizing all your other color choices.
My first instinct was just to make the sky blue. I thought it’d be more interesting for this game about a ninja to not take place in the middle of the night, and after all, this fortress is abandoned. Stealth is unnecessary here, why not explore it during the day? Turns out I don’t really look how the blue sky looks.
Light blue is already an important color in our game (it’s the ice!), and making everything light blue fights with that. So no light blue. What are our alternatives then if we still want this game to take place during the day?
It occurred to me that it’d be cool if this game took place at sunrise for narrative reasons. This is a game about reclaiming a space, and a sunrise fit in nicely with that narrative. “It’s a new day!”, says the background. In order to draw our sunrise I figured it’d be good to have our sun rising over some mountains, but here we hit another snag. If our mountains are a dark green, then they’re now fighting with our plant sprites! Luckily, we also have an out here too. PICO-8 may only support 16 colors at a time, but you can swap out any of those 16 colors for one of an entire secondary palette, called the secret palette.
If we replace a color that we don’t intend to use in our game, like bright yellow, with color 131, a sort of dark teal, that would work well. Do we still have contrast? Do the plants stand out?
They do! So let’s make our mountains out of this color. Our sunset sky will be orange on top. We can build our mountains out of a big green rectangle with a series of circles on top.
Getting there! Let’s add in our sun, and a few rectangles for a gradient sky. PICO-8’s fillp() function lets us draw patterns instead of just solid blocks, so we can have some dithering to help sell the scene. Our sun can be a dark pink to help sell that really early morning look and to not be too distracting.
One final touch, let’s add a little parallax scrolling. As the player gets closer to the top of the map (and closer to the end of the game), they can slowly approach the horizon line of the mountains. This isn’t too hard to achieve, just offset the mountains a little bit based on the player’s vertical position. Put it all together and you get this:
Looks pretty good to me! Down the line we might fiddle with our dithering a bit, but this is good enough for now. Heck I’d even call it shippable, should we choose not to fiddle with it more.
Building the Library
The last visual touch for today, the library. This is our vertically focused section and we really want to sell that “gigantic, impossibly tall” library vibe. Luckily drawing something that looks like a shelf of books is pretty easy, and adding in a few columns finishes selling the illusion.
Oops, our magic meter is drawing in the wrong place on the left side of the map. Fix for next time.
Next time: Fleshing out the content of the library and the hallway leading up to it.
