Emanuele Feronato

Talking about Actionscript 3, Flash and Starling.

Starling is a great game engine because it allows to create mobile optimized content using AS3 but unfortunately it does not support gesture events, having only touch events.

That’s why today I am showing you two ways of detecting swipes using two different libraries: AcheGesture and Gestouch.

For this test I have this large image, originally 1920×480:

and I want to scroll among screens with a swipe, which in this case will be done with the mouse, although you should know mouse events are directly converted into touch events once you export Starling projects for mobile.

The scrolling animation will be managed by Starling’s juggler. Read more information about it in the post how to handle your Flash Starling animations using the Juggler.

AcheGesture

The main class of a Starling project powered by AcheGesture is absolutely normal:

package {
	
	import flash.display.Sprite;
	import starling.core.Starling;
	
	[SWF(width="640",height="480",frameRate="60",backgroundColor="#ffffff")]
	
	public class Main extends Sprite {
		private var _starling:Starling;
		public function Main() {
			_starling=new Starling(Game,stage);
			_starling.showStats=true;
			_starling.start();
		}
	}
}

Then in Game class we will detect swipes this way:

package {

	import starling.display.Sprite;
	import starling.display.Image;
	import starling.animation.Tween;
	import starling.core.Starling;
	import acheGesture.data.SwipeGesture;
	import acheGesture.data.Gesture;
	import acheGesture.data.GestureVars;
	import acheGesture.events.AcheGestureEvent;
	import acheGesture.GestureManager;

	public class Game extends Sprite {

		[Embed(source="scrolling.png")]
		private static const ScrollingBG:Class;

		private var scrollingBG:Image;
		private var screenShowed:Number=0;

		public function Game() {
			scrollingBG = Image.fromBitmap(new ScrollingBG());
			addChild(scrollingBG);

			var gesture:Gesture=new SwipeGesture(onSwipeRec);
			GestureManager.add(scrollingBG, new GestureVars().onSwipe(gesture).vars);
		}

		private function onSwipeRec(e:AcheGestureEvent):void {
			if (e.dx>10&&screenShowed>0) {
				screenShowed--;
				swipeIt();
			}
			if (e.dx<-10&&screenShowed<2) {
				screenShowed++;
				swipeIt();
			}
		}

		private function swipeIt():void {
			var swipeTween:Tween=new Tween(scrollingBG,0.5);
			swipeTween.moveTo(-640*screenShowed,0);
			Starling.juggler.add(swipeTween);
		}
	}
}

And this is the result:

Try to make a swipe with the mouse. It won’t be that easy because to detect the swipe, you must release mouse button. This can be a little tricky, but I guess on mobile it should be better.

Gestouch

Gestouch requires some more code in the main class:

package {
	
	import flash.display.Sprite;
	import starling.core.Starling;
	import starling.display.DisplayObject;
	import org.gestouch.core.Gestouch
	import org.gestouch.input.NativeInputAdapter;
	import org.gestouch.extensions.starling.StarlingDisplayListAdapter;
	import org.gestouch.extensions.starling.StarlingTouchHitTester;
	
	[SWF(width="640",height="480",frameRate="60",backgroundColor="#ffffff")]
	
	public class Main extends Sprite {
		private var _starling:Starling;
		public function Main() {
			_starling=new Starling(Game,stage);
			Gestouch.inputAdapter ||= new NativeInputAdapter(stage);
			Gestouch.addDisplayListAdapter(starling.display.DisplayObject, new StarlingDisplayListAdapter());
			Gestouch.addTouchHitTester(new StarlingTouchHitTester(_starling), -1);
			_starling.showStats=true;
			_starling.start();
		}
	}
}

And Game class is:

package {

	import starling.display.Sprite;
	import starling.display.Image;
	import starling.animation.Tween;
	import starling.core.Starling;
	import org.gestouch.gestures.SwipeGesture;
	import org.gestouch.events.GestureEvent;

	public class Game extends Sprite {

		[Embed(source="scrolling.png")]
		private static const ScrollingBG:Class;

		private var scrollingBG:Image;
		private var screenShowed:Number=0;

		public function Game() {
			scrollingBG = Image.fromBitmap(new ScrollingBG());
			addChild(scrollingBG);
			var swipe:SwipeGesture = new SwipeGesture(scrollingBG);
			swipe.addEventListener(GestureEvent.GESTURE_RECOGNIZED, onSwipeRec);
		}
		
		private function onSwipeRec(e:GestureEvent):void {
			var swipeGesture:SwipeGesture=e.target as SwipeGesture;
			if (swipeGesture.offsetX>6&&screenShowed>0) {
				screenShowed--;
				swipeIt();
			}
			if (swipeGesture.offsetX<-6&&screenShowed<2) {
				screenShowed++;
				swipeIt();
			}
		}

		private function swipeIt():void {
			var swipeTween:Tween=new Tween(scrollingBG,0.5);
			swipeTween.moveTo(-640*screenShowed,0);
			Starling.juggler.add(swipeTween);
		}
	}
}

and this is the result:

Way smoother than before, because swipe is detected even if you do not release the button, so I would stich on Gestouch.

Download the source code with all required libraries.

Next time, a mobile game level select screen like the HTML template I published on HTML5 mobile game template featuring splash screen, level select with swipe based scrolling and web storage post.