Code Mode

Stencyl supports Code Mode, a way to write behaviors entirely using code (currently, ActionScript 3).

This article surveys the interface and explains how to accomplish crucial tasks, such as defining attributes through annotations.

Contents

• The Interface
  • Toolbar
  • Attributes Pane
  • Editing Area
• Using External Editors
• Switching Between Design and Code Mode
• How to Define Attributes
• The Future

The Interface

Top Tool Bar

This area has four separate buttons, Check Syntax, Refresh Attributes, Open in External Editor, and View API.

• Check Syntax: This checks your code's syntax for errors.
• Refresh Attributes: This updates the attributes in your Behavior by running an annotation parser over it.
• Open in External Editor: This allows you to use an IDE of your choosing, such as Eclipse, Notepad++, FlashDevelop, etc.
• View API: Lets you view Stencyl's ActionScript-based API.

Attributes Pane

The Attributes Pane stores all attributes currently defined by this behavior. To define attributes, you have to annotate them. Scroll down to the "How to Define Attributes" section for further details.

Editing Area

This area is split in to two sections, one where you add new code, and the other area that shows compiler output when you press Check Syntax.

Syntax highlighting and simple code completion are supported, as well as find/replace.

Using External Editors

Stencyl plays nice with external editors such as Notepad and FlashDevelop.

Configure this setting inside Preferences > Workspace. It will open up the editor on demand and auto-sync the changes when you save in that external editor.

Switching Between Design and Code Mode

At this point in time, we don't support switching between these two modes.

It's possible in the future for there to be a one-way conversion from Design Mode to Code Mode, but the reverse will likely be impossible to do (think about it...)

How to Define Attributes

In order to expose a class member for a Code Mode Behavior as a configurable attribute, you need to annotate it. The easiest way to learn the syntax is by example.

//Expose your attributes to Stencyl like this
[Attribute(id="1", name="Display Name", desc="An Attribute")]
public var attributeName:String = "default";

Accepted Properties

The Types

•     int
•     Number
•     Object
•     String
•     Boolean
•     Actor
•     FlxGroup
•     ActorType
•     uint (This maps to Color)
•     control
•     animation
•     Font
•     effect
•     GameAttribute
•     Joint
•     Region
•     SoundClip
•     Scene
•     Array

The Future

By Stencyl 3.0 and possibly sooner, we will completely replace and revamp the code editing experience with something significantly more advanced and productive for serious coding. Stay tuned!

gammaworld1
Suggestion for Code/Design mode:
Make the Code Mode with blocks of code available for the user the input, but the relevant parts show up in Code Mode greyed out. That way the user can decide if he wants to optimize or not.

If not, the user can always select to not permanently alter the code. If would be VERY fun to learn this way :)
0 4 weeks ago

badben
How to switch design/code mode?
Same...
2 7 months, 1 week ago

SyKot
"int" or integers, as the name states are integer numbers. In other words, numbers like, ...-2,-1,0,1,2....
With ints you cannot store fractions such as 3.14.

"uint" are unsigned int. They only store positive numbers.

-2 11 months, 1 day ago

SpanishStencylers
What are "int" attributes?
0 11 months, 3 weeks ago

jameschu
How to switch design/code mode?
5 1 year, 5 months ago

Commenting Guidelines