Code Mode

by Jon (Updated on 2015-10-11)

Call for Help: This article is out of date. Want to help us rewrite it? Head over to Github and submit edits to this article.

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.


  • The Interface
  • 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 below 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 nicely 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";

Accepted Properties

Name Description Required?
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
dropdown dropdown data No
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

The Types


TODO: This list was drafted for 2.0 / ActionScript and may not be correct in 3.0 / Haxe.

The Future

Down the road, we'd like to significantly enhance the coding experience. The best way is to improve integration of code with external editors rather than trying to build better (but still inferior) support into Stencyl itself.

For the time being, sending code mode behaviors to an external editor of your choosing is the best way to edit code in Stencyl.

Print Article Edit Article How to Edit an Article
Disclaimer: Use comments to provide feedback and point out issues with the article (typo, wrong info, etc.). If you're seeking help for your game, please ask a question on the forums. Thanks!


what are the advantage of usin the scripting code, can you declare variables, use data structure an so on ????
1 1 year, 6 months ago
To answer all the questions, you cannot switch between design and code mode. 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. Which turns out to be quite a popular use case.
1 1 year, 10 months ago
How do you switch the design to code
0 1 year, 11 months ago
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 2 years, 7 months ago
How to switch design/code mode?

2 3 years, 1 month ago
"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.

-1 3 years, 5 months ago
What are "int" attributes?
0 3 years, 5 months ago
How to switch design/code mode?
5 3 years, 11 months ago

Sign In to Comment