How to handle your Flash Starling animations using the Juggler

You already know I am making my next Flash game using Starling, today I will unveil which game I am working on and how to create an animated title screen using Starling’s Juggler.

The juggler takes anything that can be animated and executes the animation, so you just have to define your tweens and add them to the juggler.

First things first, here is the screenshot of the actual title screen we are going to do:

Yes, I am working on the sequel of Circle Chain, my very first Flash game you can also get for free for iOS.

I decided to use Starling for the sequel, called Circle Chain Grid Edition, to easily port it to mobile devices.

Anyway, here is the title screen: first, the name of the game comes from the top, then “Grid Edition” text slides from right, and finally both “Normal Mode” and “Time Attack Mode” buttons fade on, with a slight delay between the first and the second.

Here is the source code:

package {

	import starling.display.Sprite;
	import starling.display.Image;
	import starling.textures.Texture;
	import starling.events.Event;
	import starling.animation.Tween;
	import starling.core.Starling;
	import starling.display.Button;

	public class Game extends Sprite {

		[Embed(source="assets/mainbg.png")]
		private static const MainBG:Class;

		[Embed(source="assets/gametitle.png")]
		private static const GameTitle:Class;

		[Embed(source="assets/gridedition.png")]
		private static const GridEdition:Class;

		[Embed(source="assets/normalmode.png")]
		private static const NormalMode:Class;

		[Embed(source="assets/timeattackmode.png")]
		private static const TimeAttackMode:Class;

		private var splashSprite:Sprite;
		
		public function Game() {
			addBackground();
			showGameTitle();
		}
		
		private function addBackground():void {
			var backgroundTexture:Texture=Texture.fromBitmap(new MainBG());
			var backgroundImage:Image=new Image(backgroundTexture);
			addChild(backgroundImage);
		}

		private function showGameTitle():void {
			splashSprite=new Sprite();
			addChild(splashSprite);
			var gameTitleTexture:Texture=Texture.fromBitmap(new GameTitle());
			var gameTitleImage:Image=new Image(gameTitleTexture);
			gameTitleImage.x=192;
			gameTitleImage.y=-100;
			splashSprite.addChild(gameTitleImage);
			var gameTitleTween:Tween=new Tween(gameTitleImage,0.7);
			gameTitleTween.moveTo(192,80);
			gameTitleTween.onComplete=function():void{showGridEdition();};
			Starling.juggler.add(gameTitleTween);
		}
		
		private function showGridEdition():void {
			var gridEditionTexture:Texture=Texture.fromBitmap(new GridEdition());
			var gridEditionImage:Image=new Image(gridEditionTexture);
			gridEditionImage.x=641;
			gridEditionImage.y=122;
			splashSprite.addChild(gridEditionImage);
			var gridEditionTween:Tween=new Tween(gridEditionImage,0.7);
			gridEditionTween.moveTo(358,122);
			gridEditionTween.onComplete=function():void{showButtons();};
			Starling.juggler.add(gridEditionTween);
		}
		
		private function showButtons():void {
			var normalModeTexture:Texture=Texture.fromBitmap(new NormalMode());
			var normalModeButton:Button=new Button(normalModeTexture);
			splashSprite.addChild(normalModeButton);
			normalModeButton.x=266;
			normalModeButton.y=240;
			normalModeButton.alpha=0;
			normalModeButton.scaleWhenDown=0.95;
			var normalModeTween:Tween=new Tween(normalModeButton,0.7);
			normalModeTween.fadeTo(1);
			Starling.juggler.add(normalModeTween);
			normalModeButton.addEventListener(Event.TRIGGERED,startNormalGame);
			var timeAttackModeTexture:Texture=Texture.fromBitmap(new TimeAttackMode());
			var timeAttackModeButton:Button=new Button(timeAttackModeTexture);
			splashSprite.addChild(timeAttackModeButton);
			timeAttackModeButton.x=247;
			timeAttackModeButton.y=310;
			timeAttackModeButton.alpha=0;
			timeAttackModeButton.scaleWhenDown=0.95;
			var timeAttackModeTween:Tween=new Tween(timeAttackModeButton,0.7);
			timeAttackModeTween.delay=0.2;
			timeAttackModeTween.fadeTo(1);
			Starling.juggler.add(timeAttackModeTween);
		}

		private function startNormalGame(e:Event):void {
			e.target.removeEventListener(Event.TRIGGERED,startNormalGame);
			var removeSplashTween:Tween=new Tween(splashSprite,0.7);
			removeSplashTween.moveTo(0,-480);
			removeSplashTween.onComplete=function():void{removeChild(splashSprite,true)};
			Starling.juggler.add(removeSplashTween);
			//showLevels();
		}		
	}
}

I decided not to use the texture atlas in this step so you can easily see how many objects we have on the stage in the debug panel. For more information about texture atlas, read how to properly optimize your Starling Flash projects.

Following the code is easy, as I wrote it in top down order, which upper functions being called first.

The first interesting function is showGameTitle which I am going to explain:

private function showGameTitle():void {
	splashSprite=new Sprite();
	addChild(splashSprite);
	var gameTitleTexture:Texture=Texture.fromBitmap(new GameTitle());
	var gameTitleImage:Image=new Image(gameTitleTexture);
	gameTitleImage.x=192;
	gameTitleImage.y=-100;
	splashSprite.addChild(gameTitleImage);
	var gameTitleTween:Tween=new Tween(gameTitleImage,0.7);
	gameTitleTween.moveTo(192,80);
	gameTitleTween.onComplete=function():void{showGridEdition();};
	Starling.juggler.add(gameTitleTween);
}

Line 42: creation of new sprite called splashSprite, this will be the container of all title screen images

Line 43: adding splashSprite to Display List

Line 44: loading GameTitle bitmap into gameTitleTexture image

Line 45: creation of gameTitleImage using gameTitleTexture

Lines 46-47: positioning gameTitleImage. Notice it’s outside the screen (y=-100)

Line 48: adding gameTitleImage to Display List as a child of splashSprite

Line 49: this is the core of the function: the creation of a new tween involving gameTitleImage (first argument) which will last 0.7 seconds (second argiment).

Line 50: now it’s time to specify the kind of animation to assign to the tween. In our case, we are moving gameTitleImage down.

Line 51: this is the callback of the function. Once the tween is completed, we are calling showGridEdition which basically does the same thing with “Grid Edition” text.

Line 52: Finally, the tween is added to the juggler, which process it immediately.

Why did I say “immediately”? Because you can set a delay before the tween starts, as I did at line 87:

timeAttackModeTween.delay=0.2;

The rest of the script is just following the same concept, creating a tween and executing it, then calling a function which will create next tween.

Finally, when the player presses “Normal Mode”, the whole splash screen moves up and disappears.

And this is the result:

You may have to reload the page to see how splash screen is created, then press “Normal Mode” button.

Next time, I’ll show you how to use the juggler to create a level selection screen.

Download the source code.

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

214 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
// 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