Введение в stencyl

Design Problem: More Animations or More Actors?

There is no limit to the number of animations an actor may have. However, it’s best to consider when it’s appropriate to go with more animations or whether it’s better to create a brand new actor.

The «Zelda» Dilemma

The «Zelda» Dilemma is a classic game design problem you run into when making an Adventure game and decide how you want to create your Hero character.

So suppose that we start with just the basic animations.

• Walk
  • Left
  • Right
  • Up
  • Down

Not to bad so far. But Link holds a sword! So we have to add 2 more sets of animations, one for holding the sword and one for slashing it.

• Walk
  • Left
  • Right
  • Up
  • Down
• Walk + Sword
  • Left
  • Right
  • Up
  • Down
• Walk + Slashing Sword
  • Left
  • Right
  • Up
  • Down

But wait, there’s more! Link changes swords throughought the game. He can hold the plain sword, the Master Sword and the Golden Sword, and they all look different! That would triple the animation count.

And what about the Bow and Arrow, holding a shield and… you get the picture.

The Bottom Line

In cases like these, it’s better to create a new actor rather than add more animations. This is particularly applicable when an actor equips items that don’t alter his animation and could be convincingly drawn separately.

There are other benefits to having «attachments» as different actors.

• Easier to define collision bounds, particularly for weapons.
• Confines extra behaviors to the separate actor, rather than creating 1 monolithic actor with everything.

Example: Text Input

Sometimes the player input is not limited to a specific set of keys. Instead, the player is expected to enter in text. For example…

• You want the player to enter in a name for a high score entry.
• A word game where the player has to enter letters.

To make this, you can use the when any key is pressed/released event for this kind of user input. Here is a brief example of a behavior that accepts user input and puts that into a text attribute.

Explanation

• The event is triggered when any key is pressed or released respectively.
• The «character» block returns the character that has been generated by the event.
• For example, if the player presses the A key, the character «a» is generated.
• The example also takes modifier keys into account, so pressing A while holding the SHIFT key, generates the upper-case character «A».
• Pressing enter submits the whole phrase while pressing backspace will remove the last character. We explain this part next.

Gotcha: Special Keys (ENTER, BACKSPACE)

Special keys such as ENTER and BACKSPACE do not map to characters. To check if these keys have been pressed, use the key code block instead. This block returns a unique number for each keyboard key.

It is best practice to compare the «key code» of the event with the «key code of » block, rather than hardcoding the number directly. Like this.

For reference, the full list of key codes can be looked up here.

Exercise: Create a Text Field for the player’s name

• When the player clicks on the text field, wait for user input.
• Store the input in a text attribute.
• Draw the text that the player has entered.
• When the enter key is pressed, stop waiting for input.
• Challenge — Draw a blinking cursor when the text field is focused.

Actor Terminology

Actor (Instance)

An individual object in a Scene that has a parent Actor Type. Note that each Actor shares the Behaviors, and related Attributes and Attribute values, that a user attaches to its parent Actor Type.

Actor Type

A template or “blueprint” that an Actor is based on. An Actor Type is the “parent” of an Actor. Each Actor Type can have its own set of Behaviors that define what its “child” Actors can do and any other related game logic characteristics.

Actor Group

The specific Collision Group associated with an Actor Type, and any related child Actors. An Actor Type can have more than one Collision Group associated with it.

Animation

A group of images that display in order over a set period of time. An Actor Type can have multiple Animations but a Tile can only have a single Animation. An individual image in an Animation is called an Animation Frame. Each Animation associated with an Actor Type can have its own Collision Group(s). An Animation can be set to play once or to repeat (looping). A Tile cannot have more than one Collision Group associated with its Animation. In addition, each Animation will have its own Collision Shape.

Collision Group

A Collision Group is an arbitrary category that Actor Types, and their child Actors, can belong to. A user can define which Collision Groups can interact and which cannot. A user can also create new Collision Groups and define how they interact with one another. There are five default Collision Groups that a user cannot change: Players, Tiles, Doodads/Decoration, Actors, and Regions. A user can assign any Actor Type to one of those groups or to new groups. Be default, all Actor Types belong to the “Actors” Collision Group. Tiles always belong to their own Collision Group and cannot be associated with any other group. Doodads and Regions are non-colliding groups. They are used to detect collisions but not move colliding Actors.

Collision Shape

A Collision Shape is the shape of one set of collision bounds for a given Animation. It can be rectangular, circular, or polygonal (i.e customizable by a user).

Frame

A single image within an Animation. Each Frame shares the Collision Group(s) specified for a complete Animation. A Frame cannot have its own Collision Group(s) separate from those of its Animation and Actor Type. In the case of a Frame in a Tile’s animation, the Collision Group is always Tiles.

Origin Point

Only used when you need to reference “origin” coordinates related to an Actor for specific operations. Two operations refer to the Origin Point’s coordinates, rotate and scale. A user can choose a number of options for the Origin Point from a dropdown menu in the Actor Type Appearance tab and create custom coordinates for an Origin Point. The Origin Point is relative to the default horizontal and vertical (x and y) coordinates of a given Actor Type’s Animation. Origin Point ONLY applies to Web games, not iOS games.

Sensor

An option related to the collision bounds and group(s) associated with an Actor Type. An Actor that has collision bounds set as Sensors will detect when something else collides with it but won’t produce a standard collision response (i.e. bouncing off each other). If an Actor collides with another Actor that has its collision bounds set to the Sensor option, the two Actors will appear to pass through one another. A user can still perform logic on Actors (via Behaviors) that are Sensors, though. For example, although one Actor that is a Sensor can pass through another, that Actor could still take damage from colliding with another Actor.

The Nitty Gritty

Do I need to know how to code?

Absolutely not. You can use code (Haxe, Java, Objective-C), but the vast majority of our users prefer to use our visual tools to build their game’s behaviors.

Are there any game graphics or sounds available with Stencyl?

Yes. Through StencylForge, our «marketplace for game resources», you can browse an extensive collection of royalty-free game graphics and sounds for your games.

What image format do I use with Stencyl?

Any raster format will do — PNG, JPG, and GIF. We even support animated GIF’s. We don’t support vector art to a satisfactory degree. It will import, but it will be converted to raster form.

What kind of audio files can I use?

MP3s for Flash and OGGs for everything else.. It’s best if these are at a 44.1kHz sampling rate with a 16-bit resolution. You can use Audacity or a similar program to change the sampling rate, if need be.

Changes to iOS Publishing

Better Workflow

Testing on a Mac has been simplified. Apps run directly on a device without going through Xcode, and there is no longer a MAC address requirement to run on a device.

Universal Apps & Scaling

Deploying an app that looks and runs great on all iOS and Android devices is simpler.

Stencyl’s engine will select an appropriate “scale” for the game to run at depending on the device, and you have control how the frame is shown via a rescaling mode, after that scale is picked.

Handling Touch Input

Stencyl 3.0 simplifies touch detection. In the past, you had to detect touch using a separate set of touch blocks. In 3.0, you just use the mouse blocks instead.

Atlases

Atlases were somewhat of a pain to work with in past releases. That is now a thing of the past in 3.0, where the size restrictions are gone as well as the hardcoded limit on how many you could make.

Drawing Text

In past releases, we discouraged using the “draw text” block to draw text on mobile apps due to performance reasons. This is no longer the case in 3.0.

However, if you prefer the old way, labels remain available through a pre-installed extension that you can enable.

Events for Purchases, Ads & Game Center

We’ve added Events for In-App Purchases, Ads, and Game Center. Particularly for purchases, these are essential pieces of the puzzle that are finally in place.

iOS Purchases GuideiAds GuideGame Center Guide

How To: Importing Animations

Now that you understand what animations are, let’s go over the import process. You can import animations in one of several ways.

• Pick an image.
• Drag and Drop.

Method 1: Pick an Image

1. Click on Click here to add frame under the Frames pane.

2. You’ll now see this dialog. Click the Choose an Image… button and pick out the desired image. Want to follow this exact example? Use this image.

3. Now, configure columns and rows to break up the image, as appropriate depending on how many cells it has in those directions.

4. If applicable, enter in values for the border and spacing fields. The majority of images do not need to worry about these fields.

5. Click Add to complete the process. That’s it.

After importing frames, you can give the Animation a name, alter frame durations and other properties we described above.

Method 2: Drag and Drop

You can drag and drop an image into Stencyl while the Actor Editor is open. Doing this will bring up the dialog you see in Step (2) of the standard method.

How to Upgrade your Games

Note: All sample games that we shipped with 2.0 are incompatible with 3.0. Grab the new ones from here.

1) Recommended — Back up your game first.
2) Open your game in Stencyl 3.0.3) Save your game.

Beyond that, you may run into some issues when attempting to run the game for the first time in 3.0. The following is a checklist of things to consider when bringing your 2.x based game to 3.0.

FAQ: My game never runs and shows «Compiling» forever.See this article on how to deal with this. Your game is not compiling forever.

Clean your project.
Select Run > Clean Project from the main menu before running your game in 3.0 for the first time. This will remove legacy output that can sometimes trip up Stencyl.

Does your project include ActionScript code?
If your project includes code, you’ll have to port it from AS3 to Haxe. Likewise, if you used any Flixel-specific classes (references to FlxG for example), you’ll need to figure out what to do on your own. If you don’t know how to code, you’ll either have to seek help on the forums or drop the behavior in question.

Building for mobile or desktop? Import OGG copies of your sound.
Due to the technology change, Stencyl now requires OGG format sounds for all non-Flash games. The Sound Editor now includes a second import field that accepts OGG.

Update your Pre-Shipped Behaviors.
If you used any Pre-Shipped Behaviors, we recommend updating all of them. Since Pre-Shipped Behaviors are *copied* to a project upon use, you have to manually remove them from the game and reattach them to the desired Actors and Scenes.

Block Changes
Some blocks have changed or have been removed. For example, Single-Touch blocks are now deprecated in favor of using our regular mouse blocks. Stencyl converts these blocks to the new form, but it helps to double-check that that’s the case if something seems off.

Common Gotcha — Handling Collisions
When working with the “Collision Group for colliding shape” block, be sure to compare groups directly, rather than comparing the textual name of the Group, which can lead to bugs and crashes.

(This is the right way)

(This is the wrong way, don’t do this!)

Summary

This isn’t the extent of what you may have to do, but it is a list of the most common pitfalls in the process.

If you get stuck at any time in the upgrade process, please post on the forums and provide logs.

One last tip — if your game is giving you lots of trouble, you may want to consider removing all behaviors from it and, using a second computer with Stencyl + the game open, rebuilding that portion in 3.0. You may spend less time doing that than trying to struggle the other way.

Other Changes to Watch For

• StencylForge, for compatibility reasons, does not list some resources in Stencyl 3.0 that were built for 2.0.
• The Flixel console no longer exists in-game. It’s moved to the Log Viewer, a window you can activate from the main menu (View > Log Viewer).

Note: Our coverage of the upgrade process ends here. Everything below covers the changes between 1.x/2.x and Stencyl 3.0.

Using Custom Blocks

Now that we’ve created a custom block, let’s use it. Where can you find it?

Custom Blocks reside inside the «Custom» category of the Palette

Custom blocks are organized by behavior. Those created inside an Actor/Scene versus a standalone behavior will be under a header that looks like ActorEvents_1 or SceneEvents_1.

Implementing a Custom Block

Now that we’ve defined the wrapper for a custom block, it’s time to implement it.

The short summary is this:

1. Drag in the parameter blocks to use them in your custom block’s implementation.

2. If your custom block returns a value, use the return block to do so.

Using a Custom Block

Custom blocks with «None» as a return value will work like action blocks.

Otherwise, custom blocks that return a value will act like blocks of that type. For example, our distance block acts like a number block because we set the return type to number.

Areas of the Toolset

Actor Editor

An Editor in Stencyl that allows you to create and customize Actor Types, from Animations to the Behaviors attached to an Actor Type.

Background Editor

An Editor in Stencyl that allows you to upload images to use as backgrounds and foregrounds, and set scrolling speeds for them.

Scene Editor

An Editor in Stencyl that allows you to create and edit Scenes, and place Actors in a game’s Scenes. The Inspector pane (added in 2.x) is a properties pane that allows you to customize Actors on the fly.

Tileset Editor

An Editor in Stencyl that allows you to upload and edit Tilesets, including setting up Animations and collision bounds for individual Tiles.

Design Mode

Stencyl’s visual code editor, which uses Blocks that can snap into one another, to create game logic. Design Mode can be used to create Actor Behaviors and Scene Behaviors. Stencyl’s Design Mode visual code Block system is based on MIT’s Scratch software and is used with permission. Note that code written in specific programming languages (depending on the platform the game is targeting) can also be embedded in Blocks.

Code Mode

A development environment, built into Stencyl, that allows you to use different common programming languages to create Behaviors.

Working with Animations

Now that you’ve imported an image, you’ll see its details, We’ll step through what each part means.

Synchronized?

Synchronized animations will animate in at the same time as each other. To put this more concretely, think about the coins in a Mario game. Have you noticed that their animations always look the same no matter what? If this weren’t the case, it would look disconcerting.

Origin Point

An Animation can also have a designated origin point. The origin point is used to determine the point by which an actor rotates or scales. By default, this is set to the center point.

Every frame can be given a different duration (in milliseconds). Double-click each frame’s box to edit the duration.

Editing in an External Editor

Individual animation frames can be edited in an external editor. This is useful for making small tweaks to the graphics, without having to re-import the whole animation.

Double-click a frame’s box to bring up its edit dialog. Then, click the Edit Image button to open it up an external editor.

How to Upgrade to 3.0

To upgrade to Stencyl 3.0 and beyond, you must download it in full from our site. For best results, do the following.

1. Back up your existing games. The simplest way is to ZIP up your games folder.
2. Uninstall Stencyl.
3. Download Stencyl 3.0.
4. Install Stencyl 3.0.

After upgrading to Stencyl 3.0, upgrading involves redownloading the app in full each time. This may not be as convenient as our prior patch-based solution, but it makes it significantly easier for us to deliver automated, regular, timely updates and in the long run, is a win-win for all. Thanks for your understanding!

Note: It is OK to have both 2.0 and 3.0 installed. It is not OK to have them open simultaneously. It is also not OK to open a game in 3.0 and then reopen it in 2.0.

Global Custom Blocks

Global Custom Blocks are custom blocks that can be used in any behavior. You may have noticed this as an option when first creating the custom block.

What is the catch? You can’t refer to any of a behavior’s attributes from within the custom block’s implementation.

Why do you think this is the case?

A global custom block isn’t tied to any behavior at all. Because it lacks a «home,» it’s unable to refer to a behavior’s attributes. On the flip side, the advantage to a global custom block is that it can be used from anywhere in the game. This can be convenient for game-wide functionality such modifying a game’s score, which is frequently stored inside of a game attribute.

Print ArticleEdit ArticleHow 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 Animations?

Animations bring actors to life. They represent the visuals of an actor, its collision bounds and the notion of being in a certain «state» — such as running, walking and jumping.

What are examples of animation states?

• A platformer hero’s states (Stand, Walk, Run, Jump)
• Destructible Objects that «break» when hit by something else (Broken, Not Broken)
  treasure-chest-animation
• Treaure Chest (Opened, Not Opened)

What does an Animation Consist of?

Each Animation state consists of 2 separate parts:

• Frames (how it looks)
• Collision Bounds (its collision shape)

Frames are like pages in a flipbook. Each frame represents a a different image or «page» in the book. When these images change quickly over a period of time, the result is an animation.

Collision Bounds determine the physical shape(s) that an an actor assumes in a particular Animation state.

Detecting the Keyboard

Detecting keyboard input works differently in Stencyl than it does in other systems. We use the notion of a an Control to make your keyboard controls flexible and easy to remap.

A Control is a name that you assign to an action in a game. For example, if we were designing a control scheme for a Mario game, it would look like this.

Actions	Actual Buttons
Move Left	D-Pad (Left)
Move Right	D-Pad (Right)
Dash	B
Jump	A
Pause	Start

Setting up Controls in Stencyl

The same idea applies to Stencyl, through a game’s Controls Page. To set Controls, click the Settings button, shown below, to open that dialog.

Next, click the Controls button to view the Controls pane. From there, you tell us the name of the Control and the button it maps to.

Now, when you check whether a key is pressed, released or down, instead of checking directly on a certain key (such as spacebar), you check the state of the Control.

Why can’t we just check the key directly?

• What if you decide to change your control scheme? You’d have to change it everywhere.

• What if you wanted to make your control scheme configurable? That would be a mess. With Controls, you just change what key the Control is mapped to.

Gotchas

It’s best if all animations are the same size.

It’s often necesary to ensure that all animations of an actor are equal in size. Making animations different sizes, for the same actor, could have a negative impact, especially if the origin point is different in each animation.

Two common scenarios are:

• The actor magically jumps to a slightly off-center location when you switch animations.
• The actor’s collisions mess up because the new animation has the collision bounds located in a different part of the animation.

Animations, Blocks & Attributes

Note that when using the «switch animation» block, you cannot type text directly into the blank. Instead, you have to wrap that text inside an «as animation» block like the following.

Actors with No Animations

Actors with no animations at all may crash the game. We’ll address this in a future version of Stencyl. Note that this is different from an Actor with a single blank (0 frame) animation, which will work just fine.

Changes to Desktop Publishing

Native, Hardware-Accelerated Apps

Stencyl 2.0 introduced desktop publishing through the use of Adobe’s technologies. Stencyl 3.0 changes that around by going the native route.

Apps are truly native (cross-compiled to C++) and use hardware-accelerated graphics. They run significantly faster than their web and mobile counterparts.

OGG Sounds are Required

One notable change is that if you intend to export a desktop or mobile app, you must provide an OGG copy of every sound in your game due to some peculiarities in the underlying technology.

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!

Review

Stencyl is a program that allows the creation of video games for multiple platforms, without the need of writing code.

The creation of video games is something that attracts many people, because creating a video game we can can tell an interactive story, create a challenge for the player, or simply make the user pass a good time. One of the basic requirements to create a video game, is to know how to code.

Stencyl is presented as a tool that allows the game development without the need of programming skills. To achive that, it makes use of graphics blocks representing the basic control structures (loops, conditions, events, etc). Thanks to that, we will be able to program the behavior of the game using only the mouse. Even so, we must know a few programming fundamentals to be able to understand how to operate the control blocks. While it is true that we will be able to start using the program without knowing anything about programming, having prior knowledge will help us greatly to understand the use of this program.

The program is divided into several sections belonging to the different elements that we will be able to create within the game. For example:

• Actor Types: Here we can create the characters of the game, the main character, as the enemies. Within this section we will be able to import or create the sprites that will make up the characters.Also we will control the behavior of the characters when they are jumping, running, squatting, etc.We will be able to add events that happens when a key is pressed, or they happen from time to time, etc.We can also define the collision detection between the different characters, and also we can define the physics that affect the character we are creating.
• Background: Here we can define how it will be the background of the video game, and how the scroll will move, in vertical or horizontal. This is an essential step to creating a typical platform video game with horizontal scroll, or create a shoot ’em-up with vertical scroll.
• Scenes: Here we add and edit levels of the game. For example, if we’re creating a 2D platforms game, we will be able to define where the platforms will be located, in which place there are obstacles, and where will be a hole in the ground. The creation/editing of maps is very simple, since we will use an interface very similar to a graphical editor.
• Sound: Here we can add the sounds that will be part of the game. We will be able to use MP3 and OGG files. The audio files that we import may be used as sound effects: when the character jumps, or falls on an enemy, or shoot, etc. We can also import a song and use it as background music.
• Tiles: In this screen we will be able to create the “images blocks” that we will use to create objects that appear in each of the levels of the game.
• Logic: In this section we can define the behavior of the characters (jumping, running, squatting, etc.), and the behavior of the scenes. In this part is where we program, and to do this we will be able to make use of the “graphics blocks”, that allow us to program without coding, or if we know programming, we can select the “Code Mode” option, where we can type the instructions that we want to give to the characters and scenarios of the game.

In the “StencylForge” option, located in the top menu of the program, we can download a large amount of items that have already been created, in such a way that we will be able to download images of characters, background images, sounds, behaviors, etc. This way we can create a game by reusing already existing elements, which is a great advantage when we are just beginning to using the program.

Learn how to manage Stencyl is somewhat complex, since there are many sections that we must master in order to start the creation of our own video games. It is for this reason that we should not to confuse the comfort of the creation and programming games using only using the mouse, with the ease to understand and master this software.

One of the outstanding features of the program is that it is free, and we will be able to use all its features without any limitation. The free version allows us to export our game to Flash format, which can be used on almost any browser. If we want to export our video game to desktop platforms (Windows, Linux and Mac), we will have to buy a license. If, in addition, if we want to export the game to mobile platforms iOS (iPhone, iPad) and Android, we must acquire other license.

The program is available for download, and run in i>Windows, Mac and Linux platforms.