UVic Startup Slam September 2014 (Kano Apps)
27
Building a Game For Every Platform With HTML5 KANO/APPS PRESENTS
-
Upload
sendwithus -
Category
Technology
-
view
145 -
download
2
Transcript of UVic Startup Slam September 2014 (Kano Apps)
Building a Game For Every Platform With HTML5
KANO/APPS PRESENTS
What we’ll be coveringAGENDA● HTML5 Landscape
● Cross-Platform HTML5 Games
● Marketing your HTML5 Game
● HTML5 Performance
● Conclusion plus Q&A
will be hybrid, using HTML5 by 2016
- GARTNER (HTTP://WWW.MOBILEEUROPE.CO.UK/PRESS-WIRE/OVER-50-OF-MOBILE-APPS-DEPLOYED-WILL-BE-HYBRID-USING-HTML-5-BY-2016)
“
OVER 50% OF MOBILE APPS DEPLOYED
Incredible communityDEDICATED TO BUILDING POWERFUL HTML5 GAME ENGINESSome of the top HTML5 game engines out there today:● ImpactJS● Phaser● EaselJS● GameMaker● Construct 2
Source http://html5gameengine.com/
PLAY ON ANY PLATFORM THAT CAN BROWSE THE INTERNET
Some of the platforms HTML5 games run on:
● iOS● Xbox One● The list goes on..
● Windows● Mac● Android
● HTML5 games are resolution independent
● Run on both Android and iOS devices of any size, with little extra work required
● No need to worry about the vast market of third party Android devices
Develop for ALL MOBILE SCREEN RESOLUTIONS
Let’s look at PhoneGap● Release as a native Android/iOS
application
● Run your HTML5 application on the operating system’s integrated WebView
● This webview is loaded by launching a native application
● Performance issues have always been one limitation of PhoneGap however
Improving on this technique throughCOCOONJS● PhoneGap has been proven time and
time again in the market, though never popular for games
● CocoonJS developed by Ludei provides a game focused, performance driven JavaScript virtual machine
● Packaging CocoonJS with PhoneGap optimizes the webview providing an even faster experience for the user
Release to ANY WEB MARKET WITH YOUR HTML5 GAMERelease to the Facebook App Center, Chrome Store and Firefox Store with no further packaging required
Releasing to theiOS AND ANDROID STORES● The largest markets available to
developers
● Promotions and Hot New games provide immense visibility
● Delayed releases and updates (1-2 week approval)
● 30% purchase taxes
Emerging MarketTAPPING INTO AN
Focusing on web releases hasNEVER BEEN SO VIABLE● Market which has recently been on a
tremendous incline
● Release updates and changes on your own schedule, no approvals required
● Web games are great procrastination tools. Use this to your advantage!
Releasing to theWEB APP MARKET● Facebook, Chrome Store and Firefox Store
are all rapidly growing, widely spanning markets
● Store promotion based on popularity, ratings, and business connections
● While Facebook has a 30% purchase tax in place, Chrome and Firefox have nothing of the sort
What are the other options forRELEASING TO THE WEB?● Portal Sites
● User base revolves around web-games, very applicable market
● Purchase taxes apply on some networks, but others not (30% on Kong/Armor)
Have the drive to promote yourself?RELEASE ON YOUR OWN● This option provides no visibility or user
base
● Purchase tax is a non-issue
● You have control over every aspect of your app
● Promote yourself through search engine optimization
Rebooting Free Rider into Free Rider HDREVISITING A CLASSIC
THE RIDE TO HTML5
What we learnedWHEN BUILDING THE WEBSITE● Media Queries ● CSS Transitions / Translations● Custom fonts for dynamic Icons● User Agent strings
We did a fair amount of research into cross platform / mobile frameworks to help address the biggest challenges we would face.
What we learnedWHEN BUILDING THE GAME● Moving from AS2 to JavaScript● Leveraging CreateJS
Free Rider HD is written in JavaScript, and is built on top of the html5 canvas element.
Go into detail on yor infestructer
Build, MeasureLEARN● Keep it light
● Design for mobile first
● Take into retina devices , ie high pixel
ratio
● Single page app
Optimize and compress your images, scripts and CSS.
KEEP IT LIGHT
We eliminated features we didn’t necessarily need, and made it easier to develop media queries.
DESIGN FOR MOBILE FIRST
We doubled the size images would be viewed at allowing high pixel ratio devices such as new iOS devices to render images in HD.
TAKE INTO ACCOUNT DEVICE PIXEL RATIO
We designed using push state, which allows you to change the browser URL, without refreshing the page for smoother UX.
SINGLE PAGE APP
The EndTHANKS FOR WATCHINGDon’t forget to learn more about our company at http://www.kanoapps.com/.
