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.
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.
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.
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
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.
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...
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)
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 :)
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
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.
Thanks a lot, it works really well this way!
I'll use you tips for other syntax as well... (lightweight markup language called txt2tags)
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
@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.
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
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
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.
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~~~~
@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 :)
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.
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.
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:
@tobiasvl Hey man, thank you for making the theme, i just downloaded it. How can i select it from Atom though?
@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.
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.
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.
@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 :)
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!
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?
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 :-(
[Please log in to post a comment]
