UVic Startup Slam September 2014 (Kano Apps)

Building a Game For Every Platform With HTML5

KANO/APPS PRESENTS

Griffin Ledingham

gledingham

griffin.ledingham@kanoapps.com

DEVELOPER, KANO/APPS

GriffinLedingham

Charlie Bodman

@charlesbodman

charlesbodman

charlie.bodman@kanoapps.com

DEVELOPER, KANO/APPS

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