Creating Snippets in Atom for Corona SDK

What if you could just type the word ‘scenetemplate’ and have all of the code for a scene template typed out for you? With Atom, you can have this and so much more!

The Atom text editor allows you to add snippets. Snippets allow you to type a keyword and then produce commonly needed code. For example, you can type in the keyword scene to get the code snippet local scene = composer.newScene(). This post will take this further by producing the entire scene template from a keyword.

What You Will Need

You will need to have the Atom text editor installed. You can download and install Atom from atom.io. A basic understanding of Corona and the Lua language will be helpful.

Getting Started

With the Atom text editor open, go to Atom -> Snippets. This option may be a bit different on a PC.

This will open up snippets.cson. CSON is what’s known as coffee script object notation and is a type of JavaScript. We’ll add our Corona SDK snippet to snippets.cson. The format for snippets is as follows:

'.source.coffee':
'Console log':
'prefix': 'log'
'body': 'console.log $1'

The first line you see is .source.coffee. This line defines where the snippet will be used at. You can define something such as .source.js or in our case, .source.lua. The line, Console log, is the name of the snippet. The third line is what you type into the editor (the prefix) and the fourth line is the snippet that appears when you type in the prefix.

How To Use Snippets with Corona SDK

Let’s start with something simple. If you are creating a series of circles, you would need to type out something like local myCircle = display.newCircle(0,0,10). Instead of typing this out every time, Atom allows you to create a snippet such as docircle and it will replace do circle with the code to create a circle.

We can implement this by adding 4 lines to our snippets.cson file.

'.source.lua':
'Create a circle':
'prefix': 'docircle'
'body': 'local myCircle = display.newCircle(0,0,10)'

After you hit save, you can type in docircle and you’ll get a prompt to use the snippet. If you confirm the snippet, docircle will turn into local myCircle display.newCircle(0,0,10)!

 

Tab Stops

You can take snippets a step further by introducing tab stops. Instead of going to the end of the snippet, you can tell the snippet where to place the cursor by using $1, $2, $3, etc. Your code in body would go from this:

'body': 'local myCircle = display.newCircle(0,0,10)'
 to the updated code with tab stops:

'body': 'local myCircle = display.newCircle($1,$2,$3)'

These tab stops will stop at the x, y, and then the radius positions within the display.newCircle function. You can also define default values by using curly braces. You would replace $1 with ${1:0}.

How I Use Snippets

In addition to one line snippets, you can create multi-line snippets using three double quotes – “”” and three more double quotes to close it up. I take advantage of the multi-line snippets to generate new scenes in Corona. Here’s a quick look:

'.source.lua':
 'Scene Template':
 'prefix': 'scenetemplate'
 'body': """local composer = require( "composer" )

local scene = composer.newScene()"""

In my person snippets.cson file, I have the entire scene template being pasted in. If you need a copy of the composer scene template, you can grab it from Corona Documentation or below. The template below was copied in April 2017. The code on the documentation should always be up to date.

If you have other uses for snippets, let me know in the comments below! Thanks for reading!

local composer = require( "composer" )

local scene = composer.newScene()

-- -----------------------------------------------------------------------------------
-- Code outside of the scene event functions below will only be executed ONCE unless
-- the scene is removed entirely (not recycled) via "composer.removeScene()"
-- -----------------------------------------------------------------------------------

-- -----------------------------------------------------------------------------------
-- Scene event functions
-- -----------------------------------------------------------------------------------

-- create()
function scene:create( event )

local sceneGroup = self.view
-- Code here runs when the scene is first created but has not yet appeared on screen

end

-- show()
function scene:show( event )

local sceneGroup = self.view
local phase = event.phase

if ( phase == "will" ) then
-- Code here runs when the scene is still off screen (but is about to come on screen)

elseif ( phase == "did" ) then
-- Code here runs when the scene is entirely on screen

end
end

-- hide()
function scene:hide( event )

local sceneGroup = self.view
local phase = event.phase

if ( phase == "will" ) then
-- Code here runs when the scene is on screen (but is about to go off screen)

elseif ( phase == "did" ) then
-- Code here runs immediately after the scene goes entirely off screen

end
end

-- destroy()
function scene:destroy( event )

local sceneGroup = self.view
-- Code here runs prior to the removal of scene's view

end

-- -----------------------------------------------------------------------------------
-- Scene event function listeners
-- -----------------------------------------------------------------------------------
scene:addEventListener( "create", scene )
scene:addEventListener( "show", scene )
scene:addEventListener( "hide", scene )
scene:addEventListener( "destroy", scene )
-- -----------------------------------------------------------------------------------

return scene

 

Leave a Reply

Your email address will not be published. Required fields are marked *