1. PREHĽAD
CROSS-PLATFORM
rie"ení pre vývoj mobilných hier a aplikácii
Jozef Prídavok @jozef_pridavok

3. AGENDA
• Cross platform
• Appcelerator’s Titanium
• Corona SDK
• Xamarin
• Cocos2D
• (Adobe) PhoneGap (Apache Cordova)
• Made with Marmalade
• Unity 3D
• Ďaľ"ie...

4. PREČO?

5. Web Hybrid Native
HTML5
(responsive UI)
Wrapper
HTML5
Binary Code
Byte Code
✓ jednoduchosť vývoja a cena
✓ nasadenie a správa
✓ A/B testing
✗ inštalovateľnosť
✗ UX
✓ jednoduchosť vývoja a cena
✓ lepšie využitie zariadenia
✓ A/B testing
✓ inštalovateľnosť
✗ UX
✓ “bez obmedzení”
✓ UI/UX
✗ A/B testing
✗ jednoduchosť vývoja
✗ cena
webové prezentácie
informačné websites
(periodiká, blogy...)
konzumentské sajty
retail a e-commerce
niektoré enterprise apps
SaaS
web apps
(Enterprise) apps
games
špecializované nástroje
STRATÉGIA

6. X-PLATFORM VS NATÍV
výhody x-platform
• urýchluje a zjednodu"uje
vývoj - easy to use
• znižuje náklady na vývoj a
údržbu - increases
productivity
• jeden kód na v"etko -
easy to learn
výhody natívu
• maximálny výkon
• nelimituje možnosti
(black box)
• natívne UI/UX

7. X-PLATFORM
PRE MOBILNÉ ZARIADENIA

9. • 2006 - vznik - Je! Haynie a Nolan Wright
• 2008 - investícia (Series A - $6,2mil, Storm Ventures)
• 2009 - jún - podpora pre iOS a Android
• 2010 - podpora pre iPad, (Series B - $9mil, Sierra V. & eBay)
• 2011 - investícia (Series C - $15mil - May(eld Fund,
RedHat), kúpa Aptana Studio
• 2012 - investícia (Series C-1, $15mil - May(eld Fund &
Relay Ventures), Lanica (Platino)
• Komunita: 150+ emps., 460.000+ devs, 50.000+ apps
• Referencie: NBC Universal, ZipCar, LegoLand, eBay...

10. • Podporované OS: Android, iOS, HTML5
• Zameranie
• Business Apps
• Platino sľubuje podporu pre 2D hry (OpenGL ES)
• Jazyk: JavaScript + Nativ
• JavaScriptCore
• IDE: branded Eclipse (Aptana)
• pre spustenie sa vyžaduje internet
• Build & Deploy: O)ine
• Cena/Licencia: $$$/Open Source (GPL)

11. UKÁŽKA

14. //bootstrap and check dependencies
if (Ti.version < 1.8 ) {
alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');
}
// This is a single context application with mutliple windows in a stack
(function() {
//determine platform and form factor and render approproate components
var osname = Ti.Platform.osname,
version = Ti.Platform.version,
height = Ti.Platform.displayCaps.platformHeight,
width = Ti.Platform.displayCaps.platformWidth;
//considering tablet to have one dimension over 900px - this is imperfect, so you should feel free to decide
//yourself what you consider a tablet form factor for android
var isTablet = osname === 'ipad' || (osname === 'android' && (width > 899 || height > 899));
var Window;
if (isTablet) {
Window = require('ui/tablet/ApplicationWindow');
}
else {
// iPhone and Mobile Web make use of the platform-specific navigation controller,
// all other platforms follow a similar UI pattern
if (osname === 'iphone') {
Window = require('ui/handheld/ios/ApplicationWindow');
}
else if (osname == 'mobileweb') {
Window = require('ui/handheld/mobileweb/ApplicationWindow');
}
else {
Window = require('ui/handheld/android/ApplicationWindow');
}
}
new Window().open();
})();

15. //Master View Component Constructor
function MasterView() {
//create object instance, parasitic subclass of Observable
var self = Ti.UI.createView({
backgroundColor:'white'
});
//some dummy data for our table view
var tableData = [
{title:'Apples', price:'1.25', hasChild:true, color: '#000'},
{title:'Grapes', price:'1.50', hasChild:true, color: '#000'},
{title:'Oranges', price:'2.50', hasChild:true, color: '#000'},
{title:'Bananas', price:'1.50', hasChild:true, color: '#000'},
{title:'Pears', price:'1.40', hasChild:true, color: '#000'},
{title:'Kiwis', price:'1.00', hasChild:true, color: '#000'}
];
var table = Ti.UI.createTableView({
data:tableData
});
self.add(table);
//add behavior
table.addEventListener('click', function(e) {
self.fireEvent('itemSelected', {
name:e.rowData.title,
price:e.rowData.price
});
});
return self;
};
module.exports = MasterView;

16. function DetailView() {
var self = Ti.UI.createView();
var lbl = Ti.UI.createLabel({
text:'Please select an item',
height:'auto',
width:'auto',
color:'#000'
});
self.add(lbl);
self.addEventListener('itemSelected', function(e) {
lbl.text = e.name+': $'+e.price;
});
return self;
};
module.exports = DetailView;

20. • 2007 - vznik - Carlos Icaza a Walter Luh
• 2008 - dostupné SDK pre iOS
• 2009 - investícia (Series A - $1mil, Merus Capital)
• 2010 - podpora Android
• 2011 - Bubble Ball - 14 ročný Robert Nay
• podpora Kindle a Nook
• 2012 - odchod Carlosa Icazu, investícia (Series A - $1,25mil,
Merus Capital), premenovanie z AnscaMobile na
CoronaLabs, $750k in Dept funding
• Komunita: 250.000+ devs, 27.000+ apps

21. • Podporované OS: iOS, Android (armv7+)
• Zameranie
• 2d hry
• komixy, ebooks, veľmi jednoduché apps
• Jazyk: Lua
• IDE: N/A
• CodeHelper, Corona ProjectManager
• Build & Deploy: Build server (o)ine iba pre Enterprise)
• pre testovanie na zariadení je potrebný internet
• Cena/Licencia: $$$/Proprietary

22. UKÁŽKA

26. • Jazyk je Lua (enterprise umožuňuje písanie add-ons)
• Používa vlastný framework
• OpenGL + Box2d
• knižnica controls (limitované)
• Fragmenácia (android a rozlí"enia)
• programuje sa jedno rozlí"enie
• scale policy
• Veľmi pomalé reakcie na nové OS a nové features

28. • dávno predtým: Microsoft, Ximian, Gnome, Mono,
MonoDevelop
• 2011 - vznik Net Friedman & Miguel de Icaza
• 2012 - investícia (Series A - $12mil, Charles River Ventures,
Ignition Partners &Floodgate), Xamarin.Mac
• Komunita: 62 employees, 12.000+ business clients,
230.000+ devs,

29. • OS: Android, iOS, Windows Phone, Mac OS, Windows
• Zameranie
• primárne business apps (.NET)
• hry (MonoGames)
• Jazyk: C#
• IDE: Xamarin Studio (a.k.a MonoDevelop), Visual Studio,
XCode
• Build & Deploy: O)ine
• Cena/Licencia: $$$/Proprietary

30. UKÁŽKA

34. ! public class HomeScreen : Activity {
! ! protected Adapters.TaskListAdapter taskList;
! ! protected IList<Task> tasks;
! ! protected Button addTaskButton = null;
! ! protected ListView taskListView = null;
! !
! ! protected override void OnCreate (Bundle bundle)
! ! {
! ! ! base.OnCreate (bundle);
! ! !
! ! ! // set our layout to be the home screen
! ! ! SetContentView(Resource.Layout.HomeScreen);
! ! ! //Find our controls
! ! ! taskListView = FindViewById<ListView> (Resource.Id.lstTasks);
! ! ! addTaskButton = FindViewById<Button> (Resource.Id.btnAddTask);
! ! ! // wire up add task button handler
! ! ! if(addTaskButton != null) {
! ! ! ! addTaskButton.Click += (sender, e) => {
! ! ! ! ! StartActivity(typeof(TaskDetailsScreen));
! ! ! ! } ;
! ! ! }
! ! !
! ! ! // wire up task click handler
! ! ! if(taskListView != null) {
! ! ! ! taskListView.ItemClick += (object sender, AdapterView.ItemClickEventArgs e) => {
! ! ! ! ! var taskDetails = new Intent (this, typeof (TaskDetailsScreen));
! ! ! ! ! taskDetails.PutExtra ("TaskID", tasks[e.Position].ID);
! ! ! ! ! StartActivity (taskDetails);
! ! ! ! } ;
! ! ! }
! ! }
! !
! ! protected override void OnResume ()
! ! {
! ! ! base.OnResume ();
! ! ! tasks = TaskManager.GetTasks();
! ! !
! ! ! // create our adapter
! ! ! taskList = new Adapters.TaskListAdapter(this, tasks);
! ! ! //Hook up our adapter to our ListView
! ! ! taskListView.Adapter = taskList;
! ! }
! }

35. ! public partial class AppDelegate : UIApplicationDelegate {
! ! // class-level declarations
! ! UIWindow window;
! ! UINavigationController navController;
! ! UITableViewController homeViewController;
! ! public override bool FinishedLaunching (UIApplication app, NSDictionary options)
! ! {
! ! ! // create a new window instance based on the screen size
! ! ! window = new UIWindow (UIScreen.MainScreen.Bounds);
! ! !
! ! ! // make the window visible
! ! ! window.MakeKeyAndVisible ();
! ! !
! ! ! // create our nav controller
! ! ! navController = new UINavigationController ();
! ! ! // create our home controller based on the device
! ! ! if (UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone) {
! ! ! ! homeViewController = new Screens.HomeScreen();
! ! ! } else {
// sample does not contain an iPad UI, so re-use the iPhone one for now
! ! ! ! homeViewController = new Screens.HomeScreen ();
! ! ! }
! ! !
! ! ! // push the view controller onto the nav controller and show the window
! ! ! navController.PushViewController(homeViewController, false);
! ! ! window.RootViewController = navController;
! ! ! window.MakeKeyAndVisible ();
! ! !
! ! ! return true;
! ! }
! }

36. • Jazyk je C#
• Abstrahuje sa predov"etkým jazyk
• Použitie assemblies .NET
• System, System.Core, System.Data, System.XML,...
• UI/UX sa rie"i vyslovene platformovo
• Vhodné rie"enie pre MS orientovaný enterprise
• Rýchle reakcie na zmeny v OS

38. • 2008 - vznik - Cocos2d, Ricardo Quesada
• Cocos2d-iphone
• 2008 - version 0.1, 40+ games in AppStore
• 2009, máj - Stick Wars je #1 selling game
• 2011 - Zynga (Ricardo Quesada, Rolando Abarca)
• Cocos2d-html5
• 100% kompatibilné s Cocos2d-x/iPhone + JS Bindings
• Cocos2d-x (with JavaScript bindings)
• 2010 - vznik - Zhe Wang (Walzer), XiaoMing Zhang
(Minggo), JianHua Chen (Dumganhar)
• ChinaMobile (WoPhone)

40. • OS: Android, iOS, Windows Phone, Mac, Windows, HTML5
• Zameranie
• 2d hry
• Jazyk: Objective-C, C++, JavaScript, Lua
• IDE: N/A
• Cena/Licencia: $0/Open Source (MIT)

41. UKÁŽKA

42. • Jazyk je možné si vybrať: Objective-C, C++, JavaScript, Lua
• Je to “len” framework
• OpenGL (XNA, DirectX)
• roz"írenia (Box2d, Chipmunk, Controls, ...)
• Otvorený a komunitný
• Build & Deploy: o)ine

44. • 2008 - vznik na iPhoneDevCamp v SF
• 2009 - People’s Choice Award na Web 2.0 conference
• 2011 - Adobe kupuje Nitobi Software
• Apache Cordova (core/engine) -> PhoneGap (distro)
• 2012 - PhoneGap Build service (cloud)

45. • Podporované OS: “v"etky” ☺
• Zameranie
• apps a tools
• veľmi jednoduché games
• “inteligentnej"í” web
• Jazyk: HTML5/CSS3/JavaScript
• IDE:
• Xcode, Visual Studio, Eclipse
• Roz"írenia
• appMobi (dnes už Intel)
• Cena/Licencia: $0 -$$$/Open Source

47. • 1998 - vznik - Ideaworks3D (interný framework)
• 2005-2008 - interný vývoj (Metal Gear Solid, Final Fantasy,
Need for Speed, Resident Evil...)
• 2009 - AirPlay SDK
• 2011 - premenovaný na Made with Marmalade
• 2012 - Web Marmalade (HTML5/CSS3)
• 2013 - Marmalade Quick (Lua scripting)
• Referencie: Cut the Rope, Draw Something, Need for
Speed Shift

48. • podporovane OS: iOS, Android, Mac OS, Windows, BB 10
• Jazyk C++
• HTML/CSS/JavaScript
• Lua
• IDE: Xcode, Visual Studio
• Cena/Licencia: $$$/Proprietary

50. • 2001 - vznik
• 2008 - podpora iPhone, Wii
• 2009 - investicia (Series A - $5,5mil Sequoia Capital)
• 2010 - podpora Android, Nacl
• 2011 - investicia (Series A - $12mil WestSummit Capital
and iGlobe Partners )
• 2012 - podpora pre Linux, expanzia do Ázie
• 2013 - podpora pre BlackBerry 10
• Komunita: 168 employees, 500.000+ devs (2011)

51. • Podpora: Android, iOS, PC/Mac, Wii/PS3/XBox, Web
• Jazyk: JavaScript, C#, Boo
• “IDE”: Unity Pro
• Editor, Project Browser, Scene editor, Asset
management
• Asset Store
• Cena/Licencia: $$$/Proprietary

53. ĎAKUJEM ZA POZORNOSŤ!
Jozef Prídavok @jozef_pridavok
Otázky?