building gpu-accelerated mobile application interfaces with starling and feathers
DESCRIPTION
360|Stack 2013TRANSCRIPT
BUILDING GPU-ACCELERATED MOBILE APPLICATION
INTERFACES WITH STARLING AND FEATHERS
Joseph Labrecque
360|Stack 2013
JOSEPH LABRECQUE
Senior Interactive Software Engineer | Adjunct FacultyUniversity of Denver
Proprietor | OwnerFractured Vision Media, LLC
Adobe Community ProfessionalAdobe Education LeaderAdobe Certified ExpertAdobe Certified EducatorAdobe Influencer
Author Lynda.com | Peachpit Press | Adobe Press | Packt Publishing | O’Reilly Media | video2brain
ArtistAn Early Morning Letter, Displaced | Shivervein
HERE’S THE PLAN
• Talk about Stage3D – some history
• Introduce some Stage3D frameworks
• Basic Starling project setup
• Feathers setup and theming
• Feathers screens, components, and layouts
• Advanced explorations
STAGE3D: GPU ACCELERATED FLASHFlash Player 11.x & Adobe AIR 3.x
SOME HISTORY
• Adobe shows off Molehill at MAX 2010
• Lots of excitement around 3D in Flash!
• MAX 2011 - Stage3D made available with Flash Player 11 and AIR 3.
• Mobile support for Flash Player was coming soon.
• November 2011. Fffuuuu…
RECENT HISTORY
• 11.1/3.1 – bugfixes and stuff…
• 11.2/3.2 – Stage3D on mobile AIR
• 11.3/3.3 – Texture Streaming
• 11.4/3.4 – Concurrency & Telemetry
• 11.5/3.5 – Shared ByteArray
• 11.6/3.6 – readGraphicsData()
• 11.7/3.7 – GameInput APIs
FLASH PLAYER 11.0 AND AIR 3.0
11.8/3.8 - RECENT ADDITIONS
• BASELINE_EXTENDED : 4096×4096 texture support
• Rectangle Textures in BASELINE and BASELINE_EXTENDED
plus…• Recursive stop on MovieClip
• StageVideo on AIR desktop
• GameInput APIs
FUTURE EXPLORATIONS
• Mobile Workers – Threading on mobile
• “Molehill 2” – Stage3D Improvements
• Integrated 2D/3D physics
also…• Improved iOS compile time
• Reduced iOS file sizes
• Android Key Lime Pie and iOS7 support
ADOBE GAMING SDKStarling, Feathers, and more…
GAMING SDK?
The Adobe Gaming SDK provides an essential collection of frameworks, code samples, and learning resources that work together to help developers create and deliver ActionScript games across multiple devices.
GAMING SDK 1.2
• AIR SDK 3.8
• Starling
• Feathers
• Away3D & Away Builder
• DragonBones
• FlashCC [CrossBridge]
• GamePad Support, Native Extensions, & ATF Tools
FLASH IS FOCUSED ON GAMINGBut what about apps?
ADOBE ROADMAP FOR THE FLASH RUNTIMES
Adobe believes that the Flash runtimes are particularly and uniquely suited for two primary use cases: creating and deploying rich, expressive games with console-quality graphics and deploying premium video.
This focus does not mean that existing content will no longer run, or that Flash cannot be used for content other than gaming and premium video. However, it does mean that when prioritizing work, gaming and premium video use cases will take priority.
STAGE3D APPLICATIONS
• Realaxy [facebook.com/Realaxy]
• APEXvj [apexvj.com]
• Messi 2012 Matrix [messimatrix2012.com]
• VisYOUalize Yourself[hp.denon.com/visyoualize_yourself]
• Sendra Custom Boots [custom.sendra.com]
• SimplyMpress [simplympress.com]
STAGE3D APPLICATIONS
• Psykopaint (iOS) [psykopaint.com]
• Sense [sense-app.com]
• Bathplanner Pro [app.onlinebadplaner.at]
• Teleport [teleport.io]
• Mizuno Product Customizator[mizunocustom.com/volleyball/sublimated]
• DeezCovr [deezcovr.com]
• Total Body Fitness [totalbodyfitness.biz]
• Paper Critters [papercritters.com]
BUILDING AN APP WITH STAGE3DWith the Gaming SDK? Yes.
WHAT DO WE NEED?
STARLING
• Sets up the GPU stuff for us.
• Build a Starling instance.
• Load in Feathers!
FEATHERS
• Implement a theme.
• Apply a ScreenNavigator
• Decide upon a Layout or two.
• Build out the content.
STARLING2D Stage3D Framework
STARLING SETUP
• Import the Starling classes.
• Declare a new Starling instance.
• Optionally set Starling to handle lost context and multitouch.
• Instantiate a new Starling instance, passing in both a main class and the stage to bind it to.
• Start up the instance.
import starling.core.Starling;
private var starling:Starling;
Starling.handleLostContext = true;
Starling.multitouchEnabled = false;
starling = new Starling(Main, stage);
starling.start();
MAIN STARLING CLASS
• Import the Starling Sprite class.
• Have the main Starling class extend Starling Sprite.
• We are now ready for Feathers.
import starling.display.Sprite;
public class Main extends Sprite {}
FEATHERSUser Interface Components for Starling
FEATHERS SETUP
• Import a Feathers theme for use in the app.
• Wait for the Stage to become ready.
• Instantiate a new Feathers theme within the main Starling class once the Stage is ready.
• Feathers is now ready and skinned.
import feathers.themes.FeathersTheme;
this.addEventListener(Event.ADDED_TO_STAGE, onStageReady);
new FeathersTheme();
FEATHERS SCREENS
• Similar to mobile Flex Views.
• Many individual Screens.
• Use with a ScreenNavigator.
• Optionally bind Screen controls to Feathers components like TabBar or ButtonGroup.
BUILDING A SCREENNAVIGATOR
• Import the Feathers ScreenNavigator class to hold and manage our screens.
• Declare and instantiate the ScreenNavigator instance.
• Add the instance to the display.
import feathers.controls.ScreenNavigator;
private var screenNavigator:ScreenNavigator = newScreenNavigator();
addChild(screenNavigator);
BUILDING SCREENS
• Create a new class for each screen which extends the Feathers Screen class.
• Override the initialize function for instantiating and building objects.
• Override the draw function for managing the size and layout of objects.
import feathers.controls.Screen;
public class ParticleScreen extends Screen {}
override protected function initialize():void {}
override protected function draw():void {}
POPULATING SCREENNAVIGATOR
• Import the Feathers ScreenNavigatorItemclass and our Screen classes.
• Declare various screens as constants.
• Use ScreenNavigator.addScreen() to populate the ScreenNavigator with references to our Screen classes.
• Use ScreenNavigator.showScreen() to switch screens.
import feathers.controls.ScreenNavigatorItem;
import com.josephlabrecque.demo.screens.MyScreen;
private static const SCREEN:String = “myScreen”;
screenNavigator.addScreen(SCREEN, newScreenNavigatorItem(MyScreen));
screenNavigator.showScreen(SCREEN);
FEATHERS COMPONENTS
• Similar to Flex components.
• Buttons, Callouts, Headers, Lists, Loaders, Labels, Steppers, Panels, Pickers, Radios, Checkboxes, Containers, Sliders, TabBars, TextAreas, TextInputs, Toggles, and more…
• All GPU accelerated through Starling!
USING COMPONENTS
• Import the Feathers component we want to use – Button, in this example.
• Declare the Button instance.
• Instantiate the instance within the initialize function.
• Adjust visual properties within the draw function.
import feathers.controls.Button;
private var myButton:Button;
override protected function initialize():void {myButton = new Button();myButton.label = “Click Me";addChild(myButton);
}
override protected function draw():void {myButton.validate();myButton.y = 500;
}
FEATHERS LAYOUTS
• Lots of similarities to Flex layouts.
• Horizontal
• Vertical
• Tiled (rows/columns)
• Anchored
• Lots of options for each!
CREATING LAYOUTS
• Import the specific Feathers layout classes you intend to use.
• Declare your layout for later use.
• Instantiate your layout and set the optional properties of that specific layout.
import feathers.layout.VerticalLayout;
private var layout:VerticalLayout;
layout = new VerticalLayout();
layout.horizontalAlign = VerticalLayout.HORIZONTAL_ALIGN_CENTER;
layout.verticalAlign = VerticalLayout.VERTICAL_ALIGN_MIDDLE;
layout.hasVariableItemDimensions = true;
APPLYING LAYOUTS
• We’re applying our layout to a ScrollContainer – so be sure you have imported the Feathers ScrollContainer class.
• Declare and then instantiate a new ScrollContainer instance.
• Set the previously created layout object to the layout property of your ScrollContainer.
• Add the ScrollContainer instance to the view.
import feathers.controls.ScrollContainer;
private var container:ScrollContainer;
container = new ScrollContainer();
container.layout = layout;
this.addChild(container);
ADVANCED FEATHERSA few other things…
POPUPS
• Import the Feathers PopUpManager class.
• Declare and instantiate an object to use as the visual popup component.
• Utilize the PopUpManager class to add or remove a popup using the declared object.
• Options for modal and centered.
import feathers.core.PopUpManager;
private var popUp:Image;
popUp = new Image(texture);
PopUpManager.addPopUp(popUp, true, true);
FEATHERS AND FLEX
<feathers:PanelScreen xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:feathers="library://ns.feathersui.com/mxml"
>
<feathers:Button label="Click Me" />
</feathers:PanelScreen>
• Feathers has partial MXML support.
• Components, Containers, Layouts, and Collections will all work.
• No binding allowed!
• Special build with Flex SDK and not ASC 2.0 for this to work…
FEATHERS EXTENSIONS
• SoftKeyboard[cote.cc/projects/softkeyboard]
• Logi[github.com/justpinegames/Logi]
• Feathers Extensions [wiki.starling-framework.org/feathers/extensions]
