From Web to Mobile with Stage 3D
-
Upload
frimastudio -
Category
Technology
-
view
3.357 -
download
0
description
Transcript of From Web to Mobile with Stage 3D
![Page 1: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/1.jpg)
From Web to Mobilewith Stage 3D
Luc BeaulieuCTO, Frima Studio
Jean-Philippe DoironPrincipal Software Architect R&D, Frima Studio
![Page 2: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/2.jpg)
• 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
![Page 3: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/3.jpg)
• 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
![Page 4: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/4.jpg)
![Page 5: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/5.jpg)
The Game
![Page 6: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/6.jpg)
Code Name: TOROMPSCMPHSDDMultiplatform, Synchronous Cooperative Multiplayer Hack-n-Slash with Support for Drop-in Drop-out
![Page 7: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/7.jpg)
![Page 8: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/8.jpg)
• Fun• Multiplayer
• Drop-in Drop-out
• Multiplatform• Facebook• Mobile
Key Features of the Game
![Page 9: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/9.jpg)
Why Multiplatform?
![Page 10: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/10.jpg)
• Facebook• Mobile interaction• More screens = more attraction• An emerging trend
Why Multiplatform ?
![Page 11: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/11.jpg)
Facebook Progression
![Page 12: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/12.jpg)
Facebook – 1 Billion MAU (September)
![Page 13: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/13.jpg)
June 2010
![Page 14: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/14.jpg)
February 2011
![Page 15: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/15.jpg)
Why Stage3D?
![Page 16: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/16.jpg)
• 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 ?
![Page 17: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/17.jpg)
•MMO Engine• Skylanders Universe• Yu-Gi-Oh! BAM • Bearville
•Air 3.x: It works…
Multiplayer
![Page 18: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/18.jpg)
Stage 3D IS an Option
![Page 19: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/19.jpg)
Efficient Pipeline
![Page 20: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/20.jpg)
• 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
![Page 21: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/21.jpg)
• Artist DesignerProgrammer
Efficient Production Pipeline
![Page 22: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/22.jpg)
• Don’t: • Let programmers do art integration• Move files manually
• Do:• Streamlined 3ds Max -> game• WYSIWYG
Art Iteration
![Page 23: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/23.jpg)
![Page 24: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/24.jpg)
• 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
![Page 25: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/25.jpg)
![Page 26: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/26.jpg)
• Don’t:• Let them integrate art and design• Let them wait for a build
• Do:• Ease iteration for gameplay• Scripting
Programmer Iteration
![Page 27: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/27.jpg)
![Page 28: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/28.jpg)
• Don’t let a programmer do art
Last Point
![Page 29: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/29.jpg)
Collaborative Iteration
![Page 30: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/30.jpg)
![Page 31: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/31.jpg)
Good Habits
![Page 32: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/32.jpg)
• 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
![Page 33: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/33.jpg)
• #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
![Page 34: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/34.jpg)
• # 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
![Page 35: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/35.jpg)
…or are you?
You are now ready to deploy…
![Page 36: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/36.jpg)
Premium Features
![Page 37: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/37.jpg)
Premium Features
![Page 38: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/38.jpg)
Recast Navigation
![Page 39: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/39.jpg)
Opcode-Optimized Particle System
![Page 40: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/40.jpg)
• Interpreter worked
• Painfully slow• Optimize using simple collision
Alchemy on Mobile
![Page 41: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/41.jpg)
• 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
![Page 42: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/42.jpg)
• 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
![Page 43: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/43.jpg)
![Page 44: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/44.jpg)
•Physics• Ray picking• Collision• Tweening
Not Premium
• Navigation system• Only rewrite the game logic
• Particle system• GPU-based
![Page 45: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/45.jpg)
• 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
![Page 46: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/46.jpg)
Performance
![Page 47: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/47.jpg)
• 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
![Page 48: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/48.jpg)
• 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
![Page 49: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/49.jpg)
• Draw calls
• Alpha blending
• Polygon count
• Normal mapping
• Specular mapping
• GPU particles
Mobile GPU Cost Cheat-Sheet
• Features
![Page 50: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/50.jpg)
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
![Page 51: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/51.jpg)
Demo Time!
![Page 52: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/52.jpg)
It might look funny, but it does the job!
When All Else Fails: KISS
![Page 53: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/53.jpg)
When All Else Fails : KISS
![Page 54: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/54.jpg)
•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
![Page 55: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/55.jpg)
• SmartTV• Constrained mode (11.4)• Multithreaded (11.4)• Stage 3D 2.0• AS4• Advanced devices
What’s Next?
![Page 56: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/56.jpg)
• Stage3D
• Interface
• Sounds
• Network
• Consistency
Takeaway
![Page 58: From Web to Mobile with Stage 3D](https://reader036.fdocuments.us/reader036/viewer/2022070319/557e7843d8b42a7b5c8b54aa/html5/thumbnails/58.jpg)
• 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: