PICO-8 Easier development with Atom

Hello retro devs,

Note: this article is definitely adressing noobs/beginners and people that have difficulty with coding but are perseverant enough to try and keep going.

Pico8 is nice and all, but at some point I stumbled against how do I organize my code. Though the IDE is nice and clever, it quickly began difficult to find stuff I was looking for for editing, adding features or debugging.
Well, the fact that days, weeks and months can pass in between two coding sessions surely doesn't help. 

However, as a hobbyist/beginner coder, I spent quite some time doing stuff in Godot which feature in my honest opinions, one of the best IDE one could dream for. I wouldn't realize this until I tried to code for Pico8 with an external code editor.
There are plenty of external tool for coding, each of them with specific useful features and customisable to match the programming languages you may use.
I know that I don't know much about external code editors though, but I eventually found one that could recreate a similar environment I had with Godot along with bringin in Pico8's feel and supporting its language: Atom.

This whole stuff of coding outside the engine was all new to me, so I found myself as a real noob when it comes to this ^^ For everey hobbyist/aspiring/beginner/noob gamedeveloper out there, this article is for you!

I will humbly try to demystificate coding with an external tool.

1- Why using an external code editor?

Coding with Pico8 is a very interesting experience for anyone who wants to make games. It actually forces you to code everything from scratch, from collision detection to a frame animation formula, camera movement and particles systems.
There's more than one way to do it and for those who are at ease, it quickly become a game in itself to create dedicated and optimized functions.
However for those that are a bit more coding reluctant, this may quickly became a big wall that hits hard. Pico 8 provides an IDE with great options like visual help for code formatting, multiple tabs organization, etc... 

Even within the sscope of a really small game, there is a lot to do, and it quickly become a mess. The Pico8 font for instance, even though is cool and fun with a retro style is not the more readable. The screen format as well limits you to its own constraints, which are not the more comfortable to read and scroll text. You are limited to Pico8's screen size instead of your own screen size.

An external tool can help solve this and give you a more breathable environment. It helped a lot for me and I hope it will help some others.
Downloading Atom isn't enough though and luckily the awesome community brought some nice optional features dedicated to coding with Pico8.

2- Get Atom

First things first! I invite you to download and install Atom from their website atom.io

Atom's website welcoming page at the time this article has been writtenThere's a big Download button, you can hardly miss it, so please download and install it.

Once it's done, open Atom and you'll see the main page. What we want to do now is to download and install extra packages. Those are a bit like DLCs created by the dev's community.
Downloading and installing isn't enough (tough it may perfectly be for advanced programmers) and here is why:
Pico8 natively features stuff like color syntaxing. If you go coding outside Pico8, you will loose that color code. I think that most of Pico8 devs start coding in the IDE, so they became used to it's color coding. Most tutos are made within Pico8 as well, so we naturally get accustomed to it's specific color coding.
Luckily a nice guy named tobiasvl gave the community the means to get back that in Atom, along with some nice other stuff.

3- The stuff we need

There are basically 3 things we need:
Colored syntax, as we just saw it, but also Pico8's language itself and finally an UI theme that mimicks Pico8's UI, which adds to the fun and comfort!

We'll also install a very useful function index, which will greatly help getting organized and gain time.

So, once you opened Atom, llocate the Packages tab, and open the installer.
Atom's package installer tab

Click on packages and open the installer

This will open a secion in which you can search and install cummunity created components.
Please select "Packages", then type "language-pico8" in the search bar. The first result shold be the one we need. Click the install button to download and install it in Atom.

Installing Pico8's language in Atom

Installing Pico8's language in Atom

Pico8's language has now been added to Atom. This mean that Atom will recognize any code typed following Pico8's syntax and is able to signal errors.

Now, press the "Themes" button, next to packages. This will filter the results for UI themes. Just type "Pico8" in the serch box and the two first results should be the ones.
The precious Pico8 syntax package has been brought to us by catnipped.

Install custom UI and color syntax

Install custom UI and color syntax for Pico8

Once this is done, Atom will now assign a color coding to expressions, variables, built in functions etc the way it's done in Pico8. The Ui theme will nicely match Pico8 general UI.
Color syntax is definitely the most important here. The UI is more for fun as it doesn't really bring new useful features. You may even want to revert to some dark layout if you feel it more comfortable.

4- Activating UI and color code

Now language, theme and UI are installed.
Click on the Themes tab to get back to the Theme Settings tab. From here, choose the newly installed components from their respective drop down menus.

Activate custom UI and color syntax
Activate custom UI and color syntax

Congratz, you're done! You have now a nice looking code editor that will still looks familiar to Pico8's!
If you followed the steps, Atom should now look ike this:
Atom <3 Pico8

Atom <3 Pico8

To be continued in the next article!

Leave a comment

Log in with itch.io to leave a comment.