by Jon (Updated on 2014-01-27)
Stencyl supports Code Mode, a way to write behaviors entirely using code (currently, Haxe).
This article surveys the interface and explains how to accomplish crucial tasks, such as defining attributes through annotations.
- Attributes Pane
- Editing Area
- Using External Editors
- Switching Between Design and Code Mode
- How to Define Attributes
- The Future
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.
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.
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. A behavior is designated as always being in one or another and cannot be changed after the fact.
If you want to mix the two, you need to make a design mode behavior and stick in code blocks.
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";
|id||Must be a unique integer||Yes|
|order||What order it appears in the Behavior page||No|
|desc||Display name on the Behavior page||Yes|
|type||Use this if you are defining a Control, Animation, Effect or Game Attribute attribute and set to "control" "animation" "effect" or "game-attribute"||Yes, for certain types|
Down the road, we'd like to completely replace and revamp the code editing experience with something significantly more advanced and productive for serious coding. For the time being, sending code mode behaviors to an external editor of your choosing is the best way to edit code in Stencyl.