Press the arrow keys or the dpad to move the map around!
Have you ever wanted to use larger sprites on Pico-8 and it just got too complicated? Well do I have the tool for you!
Say hello to my MetaTile system, with tools!
While developing a game I created a meta tile system as well as tools I use to facilitate easier development. The tools themselves are very crude, but effective. In the following post I will show you how to use the tools and implement the system in a game of your own!
Download the tool at this link.
This contains a few files that need to be extracted to your Pico-8 carts directory. You can find that on windows by typing %appdata% into your file explorer and finding the Pico-8 folder.
The files contained are:
map_style.css (This is a very very light CSS file that just removes anti aliasing on a number of browsers. The upshot is the images are much sharper and easier to work with)
tile_editor.html (Open this file to start using the tool)
tile_editor.js (Fell free to spool through this file. It's quite janky, I developed the tool in about a day and didn't do much in the way of prettying it up for release. Please excuse the terrible code.)
map_tiles.png (this is a demonstration image that can show you how the tool works)
map_file.txt (this is a JSON file that contains a stored map and tileset. Read on to understand how to load and save with this tool)
A couple of notes before we get started, I made this in JavaScript because I wasn't in the mood to make a dedicated windows application. The upshot here is you should be able to use it across any system. As stated above the actual tool is quite unpolished, but it should still be useful.
Instructions!
This hilariously bad UI hides underneath it a powerful development tool!
First things first, you must go to your Pico-8 project and type the following in the console.
export map_tiles.png
This will create a PNG of your spritesheet titled map_tiles. The tool will only recognize this filename.
Let's go over the window now.
The Selection header shows what tile you have selected at the moment. You can flip this tile vertically or horizontally by checking either the "Vertical Flip" or "Horizontal Flip" box respectively.
To select a tile simply click on the desired tile on the left. You can then place the tile in the tileset by clicking on the window on the right. It will store the correct tile and how it is flipped for use later.
Now we have a couple more useful tools here. We will come back to Make Strings soon, but keep them in mind.
On the Map Editor we have two windows. The left window represents the meta tileset you've created. You can select a tile by clicking on this window. The right window displays what the map will be saved as in the map editor of pico-8. It will look like garbage! This because it is a representation of the hash values of each meta tile. By doing it this way you retain the normal map size, while also getting more fidelity with the meta tile system.
Now let's look at the mapper area.
This is a representation of what the game will look like when rendered using a couple functions in game.
You can place the tile you have selected in the Tile Selector by clicking on the mapper area. The map is delineated into 8x8 chunks that show what a full screen will look like.
Now let's go over the Make Strings button.
By clicking it two strings will be generated that make the whole thing work.
On the left you will see the Tile String box. Select everything in here and paste it into your Pico-8 project. Then store it to a string called tiledat. Like so.
tiledat = "0100020002000200020001103000121024002400210021000400130007000800080008000800071034002800280034100c000d000e000f000a000d000e000b0011001200030003001210111012003000240024002100210013000400170027002a0029002710170038100700071038001c001d001e001f001c001d001e001f001100030003000300030011101400140005000600200020004000400017003800070007103810170038100701071138002c002d002e002f00600060101b001b001100030003000300030011101400140015001600200020004000400017003800070107113810170019002a00290019103c003d003e003f00700070102b002b001100120003000300121011102200230025002600100010005000500017003700280028003710170019002a0029001910690069106900740174016910000000000101020102010201020101112200230026002500100010005000500007010800080008000800071119002a002900191076007610760075007510761000000000440045004500450045004410460046106a006a103a003b004a004a10620062106300631029002a0019002a002900191076007610760075017511761000000000540055005500550055005410560056107a007a103a003b005a005a10720072107300731029002a0039002a002900391076007610790074007400791000000000540055005500550055005410490049004b004b103a003b0009000800080009101300130010001000090008000800091076007610740174016900691000000000640065006500650065006410590059005b005b10660066101a002a0029002a002a002a002a002a0029002a0029001a107900791074007400790079100000000048004810470047101b0023000200020011001110000000000000000000000000000066100000000038100701071138000000000000000000670067100000000058005810570057102b0023000201020111001110000000000000000000000000000000000000000039002a0029003910000000000000000067006710000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000670067100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000007700771000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"
Because of the way pico-8 tokens work this will store the entire tile set while using only 3 tokens!
These are displayed using the spr_ex function I've written below.
The function is structured this way to make it easier to read, but it can be further optimized for tokens. Not many, but remember this if you start running out!
By using this function in leu of the spr() function you can replace sprites with metasprites!
Now the Map String textbox is most important. Follow along carefully.
Right click into the text box and select all. Now copy everything and open your carts folder.
Save the pico-8 project you are working on and open its P8 file in your text editor/IDE of choice.
Under the map header, select everything preceding sfx and delete it. Then paste the copied string into it.
This will completely overwrite your map data so be very careful with this! It cannot be recovered without a backup!
Now, when you load your project and go to the map editor it will look like the representation found in the tool!
Finally let's look at the Save Data, Load Data and Choose File buttons!
By clicking Save Data a txt file called map_file.txt will be generated and saved to your download folder. Because this tool is essentially a web app there is no local file storage and I didn't feel like going through the rigmarole needed to create cloud storage for the files. No worries!
To load the file simply click choose file, select a file that was generated by this tool and then click Load Data. I have included a map_file.txt file for you to test!
If you have further questions please reach out to me here, or at my website!
I hope this tool helps you make very interesting games!!