Create awesome Flash games in no time with StencylWorks

Believe me when I say 2012 will be the year of Flash games made with as less coding as possible.

StencylWorks is a FREE game creation suite that lets anyone create Flash and mobile games in a fraction of the time.

The framework is very robust as it’s built upon Box2D and Flixel engines.

The power and the ease of use of this suite become even more interesting when you can test them on the fly thanks to the hundreds of royalty-free resources to use in your game.

Every developer can share his graphics, game logic, levels, animations, and every other game asset.

Once you install the suite, you can find a very detailed documentation in the Help Center, as well as a Crash Course which will guide you through the creation of a game prototype using only royalty free resources.

What I want to show you in this tutorial series, is how easy is to make a game even if you don’t use any asset downloaded from StencylForge (that’s the name of the resources sharing service). All in all, we are PROgrammers and we are used to do stuff on our own!!

To create a game, the first thing we need is an actor. In Stencyl, everything which acts with its own behavior is an actor.

Our first actor will be, of course, the mail character, the one we’ll control.

Once you click on “Actors” library, you will see an alert saying the game contains no actors. You will see a lot of these alerts during the making of the game, so be used to click on such alerts to proceed with the creation of the required assets.

Give a name to the actor (Kira, in my case) and click on Create

You will see another alert, saying Kira has not animations. So let’s create them in a click!

Give a name to your animation (Walk left) in my case and click to create a new frame.

Here you can import your animation frame by frame, or even load an image strip and say how many rows and columns of frames you are going to import. And you can also define a transparent color. Nice one!! You’ll love this feature.

Since the image strip can be automatically split into frames, we already have the walk left animation up and running. In the left panel you can see an animated preview, while in the main panel you can control the animation frame by frame.

You can repeat this operation as many times as you want, creating new animations. Do you see the star under “Stand right” animation? This represents the default animation, that is the animation which will be played when the actor is placed in the game.

Obviously an animation can have only one frame.

And now we already have a walking animated character in a couple of minutes. Let’s spend some seconds defining the controls. We can assign each key a name (sorry for the italian key names), and we are ready to create a tileset to be used in the game.

Tileset are as easy to crate as animations, anyway this time I would suggest you to download a pre-built one from StencylForge. I loved “Colorful Blocks”, they have a nice retro arcade look.

What can you do with an actor and a tileset? Yes, a scene!

Once you create the scene, you can add actors and tiles simply dragging and dropping on the stage. They will perfectly snap according to tile width and height you specified during the creation of the scene.

Last but not least, to finish this first step, we need a behavior, which is a set of rules that determine how actors will work.

We are creating a behavior for Kira, using the design mode to show you how powerful, easy and fun is to make Kira walk left and right.

This is the behavior screen: on the left, the behavior visual code; oh the right, the palette of items to combine to create any kind of behavior.

This is the finished behavior of Kira moving left and right:

Let’s comment it:

The always block is the same thing as an Event.ENTER_FRAME listener, then everything is very clear: if the right arrow is pressed, then move Kira on the right and show the proper animation, otherwise if the left arrow is pressed, move Kira on the left and show the proper animation, otherwise if no keys are pressed and Kira was moving right, then stop Kira and show her facing right, otherwise if she was moving left, stop her and show her facing left, otherwise do nothing.

Are you a die-hard coder? That’s what we just created:

package scripts
{
	import flash.display.BlendMode;
	import flash.events.*;
	import flash.net.*;
	import flash.filters.*;
	
	import Box2DAS.Collision.*;
	import Box2DAS.Collision.Shapes.*;
	import Box2DAS.Common.*;
	import Box2DAS.Dynamics.*;
	import Box2DAS.Dynamics.Contacts.*;
	import Box2DAS.Dynamics.Joints.*;

	import stencyl.api.data.*;
	import stencyl.api.engine.*;
	import stencyl.api.engine.actor.*;
	import stencyl.api.engine.behavior.*;
	import stencyl.api.engine.bg.*;
	import stencyl.api.engine.font.*;
	import stencyl.api.engine.scene.*;
	import stencyl.api.engine.sound.*;
	import stencyl.api.engine.tile.*;
	import stencyl.api.engine.utils.*;
	
	import org.flixel.*;
	import mochi.as3.*;
	import flash.ui.Mouse;

	
	
	public dynamic class Design_13_13_Walkleftandright extends ActorScript
	{		
				override public function init():void
		{}
		override public function update():void
		{
		
		    if (isKeyDown("right"))
		    {
		        actor.setXVelocity(7);
		        actor.setAnimation("Walk right".toString());
		    }
		
		    else
		        if (isKeyDown("left"))
		        {
		            actor.setXVelocity(-7);
		            actor.setAnimation("Walk left".toString());
		        }
		
		        else
		        {
		            if (sameAs(actor.getXVelocity(), 7))
		            {
		                actor.setXVelocity(0);
		                actor.setAnimation("Stand right".toString());
		            }
		
		            else
		                if (sameAs(actor.getXVelocity(), -7))
		                {
		                    actor.setXVelocity(0);
		                    actor.setAnimation("Stand left".toString());
		                }
		        }
		}
		override public function handleCollision(event:Collision):void
		{
		}
		override public function draw(g:Graphics, x:Number, y:Number):void
		{
		}

		public function Design_13_13_Walkleftandright(actor:Actor, scene:GameState)
		{
			super(actor, scene);
			nameMap["Actor"] = "actor";

		}
		
		override public function forwardMessage(msg:String):void
		{
			
		}
	}
}

Now we just have to assign this behavior to the right actor (Kira).

And what about collisions with the ground and the tiles? Everything is managed by default settings.

This is the result:

Move Kira with LEFT and RIGHT arrow keys. Next time I’ll make her jump and reach the exit of the level.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers