ogdc2012 cross-platform development on mobile devices_mr.takaaki mizuno_dena
DESCRIPTION
Presentation in OGDC 2012 organized by VNG Corp.TRANSCRIPT
![Page 1: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/1.jpg)
CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICESTakaaki Mizuno
DeNA
![Page 2: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/2.jpg)
Takaaki Mizuno• 15 years experience in Engineering.• Works to DeNA Co., Ltd and Oceans Inc.
![Page 3: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/3.jpg)
How to develop the app both for iOS/Android ?
There are 2 options:
• Develop for both separately with different languages ( Objective-C / Java )
• Use cross-platform development environment and develop for both platform at once
![Page 4: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/4.jpg)
Cross-Platform development environments
![Page 5: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/5.jpg)
Are cross-platform dev denelopment envivonments workable ?
• Not good at least now• It’s ok for simple apps
Business Apps
• Not so badGames
![Page 6: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/6.jpg)
Most important thing is…
To know the characteristics of each environment
Native Layer
Cross-platformEnvironment layer
Your code
Erase the differenceBut limit the capability sometimes
![Page 7: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/7.jpg)
Business Apps• Pros
• Write once, run on both devices• No need to pass Apple’s review
• Cons• UI of both environments are totally different• Really slow
![Page 8: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/8.jpg)
UI of both environments are different• Android have “hardware back key” and “Menu”• Positions of Tab Bar are different• Android devices have so many aspect ratios and screen
sizes.• You have to care about such differences in your code
![Page 9: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/9.jpg)
Difficult to catch up with interface trends.
• Pull to refresh• Side menu
![Page 10: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/10.jpg)
UIWebView based application for iOS
Really Slow
![Page 11: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/11.jpg)
Why ?• Apple doesn’t allow to use JIT strategy
![Page 12: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/12.jpg)
Chrome iOS version is SLOW
![Page 13: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/13.jpg)
Facebook Application for iOS
![Page 14: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/14.jpg)
Facebook will return to native
![Page 15: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/15.jpg)
Game• Pros
• Write once, run on both devices• No need to pass Apple’s review
• Cons• UI of both environments are totally different• Really slow• Use JavaScript
![Page 16: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/16.jpg)
User Interface• You don’t need to use native-like user interface
![Page 17: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/17.jpg)
Speed• Compiling code to native ( Unity )• Preparing alternative Canvas ( appMobi )• Use OpenGL directly ( ngCore )
![Page 18: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/18.jpg)
JavaScript• JavaScript for mobile application is totally different from
web app’s one ( such as using jQuery ).• JavaScript is not suitable for large scale development.
• Because it is difficult to find a bug.
![Page 19: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/19.jpg)
But if you want to use JavaScript still…
![Page 20: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/20.jpg)
Closure Compiler• Google’s answer for large scale JavaScript development• It optimizes the code and finds error in code.
![Page 21: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/21.jpg)
DeNA’s answer
![Page 22: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/22.jpg)
ngCore• JavaScript based Game development environment.
• Try https://developer.mobage.com/⇛
![Page 23: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/23.jpg)
JSX• a faster, safer, easier alternative to JavaScript• JSX compilers compiles JSX code into JavaScript
interface Flyable {abstract function fly() : void;
}
abstract class Animal {function eat() : void {
log "An animal is eating!”;}
}
class Bat extends Animal implements Flyable {override function fly() : void {
log "A bat is flying!”;}
}
![Page 24: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/24.jpg)
JSX
we are observing 4% to 27% increase in performance
![Page 25: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/25.jpg)
Try it
http://jsx.github.com/
![Page 26: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/26.jpg)
Arctic.js• Game engine for smartphone web browsers written in
JavaScript with HTML5 Canvas.• It provides ActionScript3 friendly APIs which Flash
developers are familiar to.
var keyFrame = new arc.anim.KeyFrameAnimation(12, 5, [new arc.anim.Timeline(this._yellowImg, {
1 : {visible:true},3 : {visible:false}
}),new arc.anim.Timeline(this._orangeImg, {
1 : {visible:true},5 : {visible:false}
}),new arc.anim.Timeline(this, {
1 : {scaleX:0.5, scaleY:0.5, transition:arc.anim.Transition.SINE_OUT},5 : {scaleX:3, scaleY:3}
})]);
![Page 27: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/27.jpg)
Try it
http://denadev.github.com/Arctic.js/
![Page 28: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/28.jpg)
ExGame• Converts Flash Lite 1.1 SWF into JavaScript and make it
executable on iOS/Android devices.
![Page 29: OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNA](https://reader036.vdocument.in/reader036/viewer/2022070315/5554dd23b4c905a16f8b525b/html5/thumbnails/29.jpg)
How to use ExGame• DeNA provides ExGame to the partner developers.• Please access to our development sites:
http://developer.dena.jp/mbga/en/