25,104

Views

Beginner

Level

8

Comments

Code Mode

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.

 

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

stencyl-ide-code-mode-pic
 

Top Tool Bar

stencyl-ide-code-mode-toolbar-pic

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.

stencyl-ide-code-mode-editing-area-pic

 

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.

stencyl-code-mode-using-an-external-ide

Note: In the future, we may begin bundling FlashDevelop a popular Haxe/Flash-centric IDE that is in the process of becoming cross-platform.

 

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

 

  •     Int
  •     Number
  •     Object
  •     String
  •     Boolean
  •     Actor
  •     Group
  •     ActorType
  •     Color
  •     Control
  •     Animation
  •     Font
  •     Effect
  •     GameAttribute
  •     Joint
  •     Region
  •     SoundClip
  •     Scene
  •     Array
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 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.

Disclaimer: All articles are geared towards Stencyl 3.0 and above. 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!

8 Comments

Calixto7980
what are the advantage of usin the scripting code, can you declare variables, use data structure an so on ????
0 7 months, 3 weeks ago
Jon
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.
0 10 months, 3 weeks ago
snake13
How do you switch the design to code
0 11 months, 3 weeks ago
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 1 year, 7 months ago
badben
How to switch design/code mode?
Same...

2 2 years, 2 months 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 2 years, 5 months ago
SpanishStencylers
What are "int" attributes?
0 2 years, 6 months ago
jameschu
How to switch design/code mode?
5 2 years, 12 months ago

Sign In to Comment