Log In  

Here's a guide I've put together to document how I set up Atom to be as helpful for PICO-8 game development as I could with the help of the #pico8 channel. I'll hopefully be adding more as I fine-tune the IDE and know what works and what ultimately doesn't.

1. Hide the left "file" pannel (tree-view):
Because PICO-8 carts are only ever going to be single-file projects, it makes no sense to have it waste valuable screen space being open. You can manually close it using the "Ctrl + \" command, but, more likely than not, you're going to want a more proactive approach.

Go to File > Init script...
Copy and paste this snippet without a hash in front: atom.commands.dispatch('atom.workspace','tree-view:toggle')

2. Get PICO-8 specific language syntax highlighting
PICO-8 is a subset of the Lua language, and, as such, has specific built-in stuffs that won't highlight if you're using the basic Lua syntax highlighting. Go into settings and install the package "language-pico8" to get a more customized, helpful syntax highlighter. Be warned, I believe this has some screwy tab and auto-indent behavior, but, for the most part, it'll be very helpful to have.

3. Use optional PICO-8 style UI theme
If you get the syntax highlighting and check it out, you'll immediately notice that it doesn't look very much like the PICO-8 editor within the program because the colors will be off. If that bugs you, install the "pico8-syntax" theme in the settings menu.

4. Get your git!
If you're making games and would like to have version control (very important for any decently-sized project), consider getting "git-control". It has a GUI interface that helps one perform git commands within Atom.

Things I'm still trying to work out:
How to get atom to run the currently scoped cartridge using the pico8 executable.

P#21261 2016-05-24 15:57 ( Edited 2017-12-13 23:42)

I'm pretty sure it does have some screwy autoindent behavior. It's kind of a mess, a little inherited from language-lua, most caused by me bashing it with a wrench until it worked for pico-8 stuff.

P#21280 2016-05-24 22:50 ( Edited 2016-05-25 02:50)

thanks for the tutorial. Do you know if there is an IDE for pico-8 which can give shortcuts to functions. Or maybe Atom can do that to?

At the moment I'm using the Geany text editor, which does this so it's easier and quicker to access the functions.

P#22747 2016-06-12 07:50 ( Edited 2016-06-12 11:50)

In Atom: Preferences > Packages > language-pico8 > Snippets (scroll down)

or see here: https://github.com/keiyakins/language-pico8

edit: oh, you mean quickly go to a function? Install this https://atom.io/packages/goto

P#22795 2016-06-12 19:59 ( Edited 2016-06-13 00:08)

thanks, this goto package is interesting. It would have been even better with functions list in a left pane, instead of the tree view for example.

P#22851 2016-06-13 17:52 ( Edited 2016-06-13 21:52)

that would be https://atom.io/packages/symbols-tree-view

but there's a small problem somewhere meaning no functions appear.

I am trying to fix that...

P#22855 2016-06-13 18:33 ( Edited 2016-06-14 00:34)

OK! I figured out how to add support for symbols-tree-view.

We need to add custom ctags configuration :)
This method removes need for "goto" package, for symbol search and display.

file location:

~/.ctags (macOS/linux)
$HOME/ctags.cnf (on MSDOS, MSWindows only) 

with contents (this is a renamed Lua ctags setup):

--langdef=Pico8
--langmap=Pico8:.p8
--regex-Pico8=/^.*\s*function[ \t]*([a-zA-Z0-9_]+):([a-zA-Z0-9_]+).*$/\2/f,function/
--regex-Pico8=/^.*\s*function[ \t]*([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+).*$/\2/f,function/
--regex-Pico8=/^.*\s*function[ \t]*([a-zA-Z0-9_]+)\s*\(.*$/\1/f,function/
--regex-Pico8=/([a-zA-Z0-9_]+) = require[ (]"([^"]+)"/\1/r,require/
--regex-Pico8=/[ \t]{1}([a-zA-Z0-9_]+)[ \t]*[=][^=]/\1/v,variable/
--regex-Pico8=/[ \t]*([a-zA-Z0-9_]+)[ \t]*=[ \t]*module_define.*$/\1/m,module/
--regex-Pico8=/func_table\[ msg\.([A-Z_]+) \].+/\1/
--regex-Pico8=/\([ \t]*msg.([A-Z_]+)[ \t]*\)/\1/

...that's it!

Notes:
You can choose to sort alphabetically and even hide certain types of symbols (eg. variables)
Make changes in Atom Settings for symbols-tree-view to make them permanent.
Sort By Name Scopes: source.p8
AutoHideTypes: variable

Example symbols-tree-view sidebar (part of worm nom nom code)

P#22860 2016-06-13 20:30 ( Edited 2016-06-14 12:56)

that is really useful! what do i need to put exactly in the hide setting to get rid of variables. i just want functions!

i'm the one who did the pico-8 syntax theme. i'm glad people like it and i actually use it a lot because of its low contrast. i will probably make a couple of more based on the palette in the future :)

P#22927 2016-06-15 13:39 ( Edited 2016-06-15 17:39)

Right clicking the sidebar will let you make changes for that session.

To make the setup stick, enter like below in Atom > Preferences > Packages > symbols-tree-view > Settings

P#22933 2016-06-15 17:00 ( Edited 2016-06-15 21:02)

This is great! I was trying to configure Sublime Text for editing pico-8 files but this solution with Atom is just what I needed.

Thanks.

P#23102 2016-06-18 04:57 ( Edited 2016-06-18 08:57)

Thanks a lot, it works really well this way!
I'll use you tips for other syntax as well... (lightweight markup language called txt2tags)

P#23130 2016-06-18 16:32 ( Edited 2016-06-18 20:32)

Is it possible to set Pico-8 in order to live reload automatically a specific .P8 file each time it is externally modified by an editor such as Atom ?

I'd like to be able to do this:

1) Open Atom with a .p8 file (for example: example.p8)
2) Open Pico-8 with the same file as Atom (example.p8)
3) Make some edits to the example.p8 lua code in Atom
4) Switch to Pico-8 and just enter "RUN" to see my edited code in action

I could enter a command in Pico-8 that could tell it to continously listening for edits on the current-opened .P8 file, and whenever it recognize that the file has been modified it should reload it...

That would be super handy because when I mess with the code I wouldn't have to manually load again and again a file in Pico-8 before run it again.

Thank you and best regards

P#31999 2016-10-29 05:27 ( Edited 2016-10-29 10:03)
1

@Cesco: you can ctrl-r in pico-8, it will reload the modified file before running it, provided you didn't edit anything from within pico-8 since last load. same thing you're asking for, just not automated.

also, I'm using notepad++ and set it to launch pico-8 -run with ctrl-f9. quite handy too.

P#32007 2016-10-29 07:41 ( Edited 2016-10-29 11:44)

@ultrabrite Thank you very much for these tips. Very handy, I really appreciate them.

P#32012 2016-10-29 10:27 ( Edited 2016-10-29 14:27)

Hi @matt,

I just wanted to let you know that the latest Atom Beta build (1.13.0) gives a deprecation error with your plugin:

language-pico8/styles/p8gfx.less

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

atom-text-editor::shadow .p8.gfx.zero => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--zero
atom-text-editor::shadow .p8.gfx.one => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--one
atom-text-editor::shadow .p8.gfx.two => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--two
atom-text-editor::shadow .p8.gfx.three => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--three
atom-text-editor::shadow .p8.gfx.four => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--four
atom-text-editor::shadow .p8.gfx.five => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--five
atom-text-editor::shadow .p8.gfx.six => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--six
atom-text-editor::shadow .p8.gfx.seven => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--seven
atom-text-editor::shadow .p8.gfx.eight => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--eight
atom-text-editor::shadow .p8.gfx.nine => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--nine
atom-text-editor::shadow .p8.gfx.a => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--a
atom-text-editor::shadow .p8.gfx.b => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--b
atom-text-editor::shadow .p8.gfx.c => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--c
atom-text-editor::shadow .p8.gfx.d => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--d
atom-text-editor::shadow .p8.gfx.e => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--e
atom-text-editor::shadow .p8.gfx.f => atom-text-editor.editor .syntax--p8.syntax--gfx.syntax--f

P#32409 2016-11-12 05:46 ( Edited 2016-11-12 10:46)

To run PICO-8 directly from Atom:

1) install 'language-pico8' package (see first post in this thread)
2) install 'script' package
3) add pico-8 executable to your PATH
4) add this code snippet to ~.atom\packages\script\lib\grammars\index.coffee

  Pico8:
    "File Based":
      command: "pico8"
      args: (context) -> ["-run",context.filepath]

Now you can use CTRL-SHIFT-P --> run

EDIT: updated path to index.coffee

P#32446 2016-11-13 16:46 ( Edited 2021-01-05 16:04)

Hi,
I am new to all of this. May you please help me, because symbols-tree-view does not work with Pico-8.
I created the ctags.cnf and tried to put it into my user's home folder. Atom does not find any symbols in the Pico-8 file when pressing Ctrl-R.

P#34429 2016-12-29 10:06 ( Edited 2016-12-29 15:06)

Hey everybody! Thanks for putting all this together. I had some trouble getting the "pico8" alias to work properly on my Mac in Atom, so I wound up working around it. I just pointed directly to the file in TastyEnchilada's instructions above:

Pico8:
    "File Based":
      # command: "pico8"
      command: "/Applications/PICO-8/PICO-8.app/Contents/MacOS/pico8"
      args: (context) -> ["-run",context.filepath]

This is assuming you just moved the Pico-8 folder to your system Applications folder, as I did.

Thanks again everybody~~~~

P#34775 2017-01-02 18:54 ( Edited 2017-01-02 23:54)

@TastyEnchilada, it works, thanks.

Although it would be nice to have a hook / watcher so the cartridge is updated each time file is saved externally :)

P#41249 2017-06-02 16:12 ( Edited 2017-06-02 20:12)

Hey, in the latest version of the Script package for Atom, the file you need to edit has been changed.

It used to be:
~.atom\packages\script\lib\grammars.coffee

Now it is:
~.atom\packages\script\lib\grammars\index.coffee

Hope that helps for anyone attempting to get this working at the time of this post.

P#47347 2017-12-13 18:42 ( Edited 2017-12-13 23:45)
1

Hey there,
am I the only one who doesn't get any syntax highlighting at all from the atom language-pico8 package?

The standard language-LUA package works fine.

Any clues or help is much appreciated.


Figured it out.
I did just copy and paste scripts from pico-8 ide to atom, and without the header from the original p8 file, the syntax recognition/highlighting didn't work.

as soon as i added

pico-8 cartridge // http://www.pico-8.com
version 16
__lua__

to my file, everything was fine, and highlighted.

P#60033 2018-12-16 22:18 ( Edited 2018-12-16 22:36)

I've started making a PICO-8 UI theme for Atom: https://atom.io/themes/pico8-ui

Together with the aforementioned PICO-8 syntax theme (https://atom.io/themes/pico8-syntax), it'll make Atom look a little cozier:

P#61123 2019-01-23 11:06

@tobiasvl Hey man, thank you for making the theme, i just downloaded it. How can i select it from Atom though?

P#73012 2020-02-12 11:47 ( Edited 2020-02-12 11:52)

@romishou Go to Settings -> Themes. If you've installed them, they should show up in the dropdown menus at the top there. If not, you can search for them right underneath and install them.

P#73032 2020-02-12 20:49

Just reinstalled my OS & Atom -- and heads up, the syntax has changed slightly for the Script plugin, which allows you to launch your carts from Atom directly. The folder and file name you need to edit is still "~.atom\packages\script\lib\grammars\index.coffee", as I wrote in my previous post (which differs from instructions originally posted by @TastyEnchilada)

  Pico8:
    'File Based': {
      # command: "pico8"
      command: 'pico8'
      args: (context) -> ["-run",context.filepath]
    }

Hope this helps y'all out. This is still my favorite way to write, edit, and run code. Thanks to everyone in this thread who posted the instructions originally.

P#81045 2020-08-22 16:06

Im having trouble implementing the 3rd step in @TastyEnchilada's instructions. Im working on Mac and adding an executable to a path is something that I'm sad to admit I don't fully understand. Can anyone help me out? TY.

P#86159 2021-01-05 06:41

@alessandro
You can skip that part if you replace "pico8" in the snippet with the full path to the executable (still has to be surrounded by double quotation marks).

Look at the example @splendorr posted :)

P#86166 2021-01-05 14:01 ( Edited 2021-01-05 14:05)

@TastyEnchilada
Got it, thank you so much. Up and running now np.

P#86196 2021-01-06 06:55

@TastyEnchilada

I'm having a real problem with Windows using this method...
my index.coffee is exactly as how @nocarrier has it. Pico8 opens well with the cartridge loaded, but no output coming out of printh like on my linux computer! Any idea why? It seems to work if I open it directly from my cmd terminal but not on the script plugin!

P#86533 2021-01-17 14:58

I have followed the instrcutions and nearly everthing works like charm. Thank you very much. Is it intendet to reopen pico-8 every time I run the atom script. Like this I get multiple pico-8 windows. -> You can solve this problem by pressing ctrl-r in pico8 window after changing some stuff in atom editor.

Is it possible to edit sound and graphics with atom, too?

P#86593 2021-01-19 23:45 ( Edited 2021-01-20 09:52)

Tried getting this to work and failed. Any ideas? There was no index.coffee file to edit. The syntax in index.js is different for adding Pico-8, and when I tried, I got script errors :-(

P#117818 2022-09-22 20:26

[Please log in to post a comment]

Follow Lexaloffle:          
Generated 2024-03-28 16:10:27 | 0.077s | Q:65