From Web to Mobilewith Stage 3D

Luc BeaulieuCTO, Frima Studio

Jean-Philippe DoironPrincipal Software Architect R&D, Frima Studio

• What is Adobe Stage3D?• It is an API in Flash 11 that enables hardware

acceleration (GPU).

• What is Adobe AIR?• Enables developers to package the same Flash

code into native apps for multiplatform, including over 500 million smart devices.

Definitions

• Why Stage 3D is a valid option for mobile games (and multiplatform).

• How to make your Web games also work on mobile devices.

• What you can do to optimize performance along the way.

Takeaway

Jean-Philippe Doiron

This is obviously a joke, we don't want you to think it's a conference about quantum physics

The Game

Code Name: TOROMPSCMPHSDDMultiplatform, Synchronous Cooperative Multiplayer Hack-n-Slash with Support for Drop-in Drop-out

• Fun• Multiplayer

• Drop-in Drop-out

• Multiplatform• Facebook• Mobile

Key Features of the Game

Why Multiplatform?

• Facebook• Mobile interaction• More screens = more attraction• An emerging trend

Why Multiplatform ?

Facebook Progression

Facebook – 1 Billion MAU (September)

June 2010

February 2011

Why Stage3D?

• Flash Player still owns the Web (1.3 billion)*• 500,000+ on mobile*• Development on Windows (even for iOS)• Faster development time• ActionScript versus Objective C• Same code base• GUI

* http://www.adobe.com/ca/products/flashruntimes/statistics.html

Why Stage 3D ?

•MMO Engine• Skylanders Universe• Yu-Gi-Oh! BAM • Bearville

•Air 3.x: It works…

Multiplayer

Stage 3D IS an Option

Efficient Pipeline

• Focus on gameplay• Scripting in AS3• Aim for Touch First*• Most development on PC• Working game editor

• Art, design, programming• Collaborative features

* This technique can also be used at your local bar**** Results may vary

Efficient Production Pipeline

• Artist DesignerProgrammer

Efficient Production Pipeline

• Don’t: • Let programmers do art integration• Move files manually

• Do:• Streamlined 3ds Max -> game• WYSIWYG

Art Iteration

• Don’t:• Let a programmer do the designer’s work

• Spawn points• Minion life and attack• Character speed

• Do:• Offer them the toolset

• Tweak values• Place triggers

Designer Iteration

• Don’t:• Let them integrate art and design• Let them wait for a build

• Do:• Ease iteration for gameplay• Scripting

Programmer Iteration

• Don’t let a programmer do art

Last Point

Collaborative Iteration

Good Habits

• app-store• Awesome final release • Fastest code execution• Takes forever to compile

*See last slide for complete definition

iOS Package Targets*

• Debug-interpreter• Compiles lighting-fast• Slowest code execution• Doesn’t crash on all

errors

• #1 - Don’t do QA using debug-interpreter

• #2 - Use debug-interpreter for fast iteration

• #3 - Don’t load SWF with code at runtime

• #4 - Use compiler constants

Good Habits - Part 1

• # 5 - Pool objects• # 6 - Use ATF, but strip it down*• # 7 - Test early, test often

• On your target platforms• Continuous integration

* This technique can also be used at your local bar**** Use at your own risk

Good Habits - Part 2

…or are you?

You are now ready to deploy…

Premium Features

Premium Features

Recast Navigation

Opcode-Optimized Particle System

• Interpreter worked

• Painfully slow• Optimize using simple collision

Alchemy on Mobile

• A mess to debug• Still not released• Weight compared to native (AS3)

Good habit #1Don’t test using debug-interpreter

Good habit #7Test on target platform with app-store

• Neverending compilation (Older Alchemy version)

Alchemy on Mobile

• Use native code in your app• No royalties• Can use this for:

• Physics (Bullet)• Pathfinding• Particles

• Looks like a silver bullet** No pun intended

Native Extension

•Physics• Ray picking• Collision• Tweening

Not Premium

• Navigation system• Only rewrite the game logic

• Particle system• GPU-based

• On mobile:• Alchemy didn’t work for us• Native extensions didn’t work for us

• AS3 version worked, even on mobile• Same code base• Debug-friendly• ActionScript

Good habit #4 Use compiler constants

Summary

Performance

• Problems

• Optimizations

• Pathfinding on mobile (20% of budget)

• Azoth for Optimized Opcode (5% of budget)

• Particle system heavy on CPU

• Use GPU-based particles

• Object instantiations

• Pool objects and pre-instantiate

Mobile CPU

• Problems

• Optimization

• Draw calls (state change)

• Draw call batching

• Overdraw

• Sort by display order, reduce transparency

• GPU-based particle system (damn it!)

• None - Live with it!

Mobile GPUs

• Draw calls

• Alpha blending

• Polygon count

• Normal mapping

• Specular mapping

• GPU particles

Mobile GPU Cost Cheat-Sheet

• Features

Mobile• Adobe Monocle• Caveman debugging• Guess with Web profiling results• Real-time stats and toggles

Web• Adobe Monocle• Intel GPA• Real-time stats and toggles• The Miner

Profiling

Demo Time!

It might look funny, but it does the job!

When All Else Fails: KISS

When All Else Fails : KISS

•Unity

http://unity3d.com/unity/publishing/flash http://gamasutra.com/view/news/37678/Epic_Games_Unreal_Engine_Heads_To_Flash.php

•Unreal

Use a Commercial Engine

• SmartTV• Constrained mode (11.4)• Multithreaded (11.4)• Stage 3D 2.0• AS4• Advanced devices

What’s Next?

• Stage3D

• Interface

• Sounds

• Network

• Consistency

Takeaway

Jean-Philippe Doironjpd@frimastudio.com

@jphildoiron

Luc Beaulieuluc@frimastudio.com

@LucDOA

Thank you!

• ipa-ad-hoc — an iOS package for ad hoc distribution.• ipa-app-store — an iOS package for Apple App Store distribution.• ipa-debug — an iOS package with extra debugging information. (The SWF files in the

application must also be compiled with debugging support.)• ipa-test — an iOS package compiled without optimization or debugging information.• ipa-debug-interpreter — functionally equivalent to a debug package, but compiles more

quickly. However, the ActionScript bytecode is interpreted and not translated to machine code. As a result, code execution is slower in an interpreter package.

• ipa-debug-interpreter-simulator — functionally equivalent to ipa-debug-interpreter, but packaged for the iOS simulator. Macintosh-only. If you use this option, you must also include the -platformsdk option, specifying the path to the iOS Simulator SDK.

• ipa-test-interpreter — functionally equivalent to a test package, but compiles more quickly. However, the ActionScript bytecode is interpreted and not translated to machine code. As a result, code execution is slower in an interpreter package.

• ipa-test-interpreter-simulator — functionally equivalent to ipa-test-interpreter, but packaged for the iOS simulator. Macintosh-only. If you use this option, you must also include the -platformsdk option, specifying the path to the iOS Simulator SDK.

iOS Package Targets: