PREHĽAD CROSS-PLATFORM

riešení pre vývoj mobilných hier a aplikácii

Jozef Prídavok @jozef_pridavok

AGENDA• Cross platform

• Appcelerator’s Titanium

• Corona SDK

• Xamarin

• Cocos2D

• (Adobe) PhoneGap (Apache Cordova)

• Made with Marmalade

• Unity 3D

• Ďaľšie...

PREČO?

Web Hybrid NativeHTML5

(responsive UI)WrapperHTML5

Binary CodeByte 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ácieinformačné websites(periodiká, blogy...)

konzumentské sajty

retail a e-commerceniektoré enterprise apps

SaaSweb apps

(Enterprise) appsgames

špecializované nástroje

STRATÉGIA

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

X-PLATFORM PRE MOBILNÉ ZARIADENIA

• 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...

• 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)

UKÁŽKA

//bootstrap and check dependenciesif (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();})();

//Master View Component Constructorfunction 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;

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;

• 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

• 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

UKÁŽKA

• 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

• 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,

• 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

UKÁŽKA

! 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;! ! }! }

! 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;! ! }! }

• 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

• 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)

• 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)

UKÁŽKA

• 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

• 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)

• 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

• 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

• podporovane OS: iOS, Android, Mac OS, Windows, BB 10

• Jazyk C++

• HTML/CSS/JavaScript

• Lua

• IDE: Xcode, Visual Studio

• Cena/Licencia: $$$/Proprietary

• 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)

• 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

ĎAKUJEM ZA POZORNOSŤ!

Jozef Prídavok @jozef_pridavok

Otázky?