Important - I recommend the reading of this article on Substack App, email may cut content. Thank you for reading!]
Welcome to another PICO-8 workshop, at this series I share my learning through the process of creating a Super Mario Maker Demake, my inspiration is actually coming from the first version released for Wii U - Super Mario Maker
Time Required: 25 minutes*
Difficulty: Beginner
*Being a paid subscriber speed-up this Workshop, in 5 minutes just downloading the source code, you will be able to start playing with the code and try the initial version of this demake
Nothing better than a 2D Platform to learn Gamedev :)
Taking into consideration our fantasy console limitations, one of the hard limits being at the source code up to 8192 tokens, it is actually our advantage to avoid scope creep. We can’t go 1:1 from Super Mario Maker to our PICO-8 version and of course we are going to create our own sprites to respect Nintendo copyright.
Future workshops for this series will be around the following pillars:
Painting tiles through our level editor
Player movement around the level created
Objects interaction with player and environment
Enemies movement around the level created
Now we are going to focus on Painting tiles through our level editor, at the end of this article you will be able to:
Use a Toolbox created by us to Draw and Erase tiles
Move the camera with cursor keys (left and right) around our X Coordinate to create an horizontal level
The Goal
Mmm… This is cool even for grandmas, isn’t it?
Let’s go!
To success at this workshop I recommend that you first take advantage of the following resources:
-- To import assets you just need to place the file on your cart_data folder of PICO-8 and then execute at PICO-8 console:
import workshop-1-spritesheet.png
If you don’t have PICO-8, go with the educational version - EDU Version
Let’s have a look at the Toolbar designed by Nintendo for Super Mario Maker at the video above.
The idea is quite simple, they defined a set of building blocks for each possible tile, starting with bricks that you can break, the classic box with question mark and the last ones for the ground.
Remember! PICO-8 a tiny engine where you can create art, map, sounds and music from a single place in a matter of minutes.
Exciting uh? If you want to learn more about Game Design via PICO-8 and learn through my experience at planning on a weekly basis, you are one click away!
That was my first draft of a Toolbar to manage the actions we want to design; from left to right, a normal cursor, ground tile and erase functionality.
Clear and simple, I’ve done some iterations over it and now looks better, you want to see last version? Let’s move forward then
Creating our Assets for the Toolbar - Pixel Art
To fuel my motivation during gamedev sessions I always like to start within a design-first approach, not only asking myself the what and the why of the functional side of what I do, but also the 2D Design and shape.
Pixel Art Sprite Editor Usage - Creating a Cursor Icon
Assets are available to download here, I’ve recorded myself just to teach you the usage of the Sprite Editor included on PICO-8
-- To import the workshop assets you just need to place the file on your cart_data folder of PICO-8 and then execute at PICO-8 console:
> import workshop-1-spritesheet.png
More information here
IMPORTANT: After you import the assets, make sure the ground sprite have the flags required enabled
The reason to set the sprite flag is because the rubber tool will be only able to erase ground tiles by now, as later on future workshops we will be adding more elements as items, enemies, etc.
So now that we have our Pixel Art resources (assets) available on our engine, we just need to start coding, one of the funniest part from my point of view. Remember that on our previous workshop we already created a main file and a ui-components file with all the code to draw a Window.
Icon Component
Icon being the tiny square inside the menu that react on your click to change the tile/tool you will be using.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
As you can see at the code this component is linked to our mouse component that we will create later to handle all the actions we want to achieve.
It is adding all the logic of switching between the different actions (pointer, brush, rubber)
Toolbar Component
This is the menu that handle all the possible actions avaible to edit our level, it contains the previously mentioned actions as icons and actually response with the click of the user to mark the action as “Being used”
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Now we would need to call our new components from the main.lua file
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Now that you initialized the Objects for each component, your next step will be to call their update() and draw() functions. I will leave that part for you so there is also a space for your own implementation and self learning.
We also need to add the following line at our drawing loop, so we make sure the intenal map that we will use as structure to create our level is rendered at the screen
Cool, we designed our Toolbar with Icons, unfortunatelly pico-8 doesn’t come with native functions to create GUI so we need to create things on our own.
But that’s part of learning process and believe me, those lessons are key for future projects and frameworks you want to play with, I’m not afraid anymore of creating metatables to create Objects like structures on PICO-8 Lua.
New Challengers Approaching!
To wrap-up the previous learning, we modified our ui-components.lua file to add our Toolbar and Icon components so we can create the upper menu where the player can switch between actions and start drawing.
Cute, isn’t it?
Right now is not functional, so we need new actors to work at our code, they will be called:
mouse.lua
Handler of our mouse actions both pointer move and clicks
Switch between pointer, brush and rubber
camera.lua - Handler of the X Coordinate camera movement when designing levels
Let’s go!
Enable Mouse Detection
At the current version of PICO-8 being 0.2.7 in order to enable mouse and keyboard as input, you need call a low-level function to change the memory of the console.
-- Enable mouse support
poke(0x5f2d,1)
I expect ZEP (Creator of PICO-8) to add a more human way to enable Keyboard and mouse input detection in future releases.
Creating Mouse and Camera Handlers
Now it is time to add some intelligence to the Toolbar (menu) we’ve created, we need to create a new file under our project called mouse.lua — At this file we are going to define a new metatable to have an easy to maintain code for the future.
Pro Tip. Metatables are really nice to organice the code, but they come with a cost, as soon as we add more properties and methods at them the token count will be considerable increasing — Just keep it on your mind :)
Mouse Handler (New Object)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
As you can read at the code, our mouse will be operating through a set of modes:
Pointer. It is the cursor, the standard cursor you can see on each Operating System/Application, the great thing is that PICO-8 support mouse and keyboard capabilities natively - More information here
Ground. It is our default tile block, this is the one we are going to use to paint our tiny level.
Rubber. Last but not least, this is the rubber, essential tool for humans in case of mistakes 😉(Message for the AI’s reading this article in the future)
Mouse Handler Full Implementation - mouse.lua
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Apologies for the long source code of the mouse.lua, but it is actually doing all the job:
Switching logic between the different functions (brush, rubber and pointer)
Drawing tiles at the map
Erasing tiles at the map
TO-DO - Animations for the erase or draw functions. Feel free to implement your own animation system here, if you went through the code you probably saw that part.
Camera Handler Implementation - camera.lua
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
So, once again, we created new components to be used at our game mouse.lua and camera.lua now it is time to create the instance of our objects at the main.lua file and make sure everything is working as expected
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Today we created an environment where we are able to draw and erase tiles on pico-8 map space, not only that but we also implemented the cam() function to be able to create a wide 2D World on our Super Pico Maker map.
My previous calculations were right and we just used ~2000 tokens to create the interactive UI for level building, yay!
This is just the first step to get closer to our Super Mario Maker inspiration.
What’s next?
During our next workshop for January 2026, we are going to implement gravity and collision detection, if you are already excited and you want to read about the topic, there is an article for it:
