4. What we’ll be covering
AGENDA
● HTML5 Landscape
● Cross-Platform HTML5 Games
● Marketing your HTML5 Game
● HTML5 Performance
● Conclusion plus Q&A
5. 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
6. Incredible community
DEDICATED TO
BUILDING POWERFUL
HTML5 GAME ENGINES
Some of the top HTML5 game engines out there
today:
● ImpactJS
● Phaser
● EaselJS
● GameMaker
● Construct 2
Source http://html5gameengine.com/
7. 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
8. Develop for
ALL MOBILE SCREEN
RESOLUTIONS
● 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
9. 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
10. Improving on this technique
through
COCOONJS
● 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
11. Release to
ANY WEB MARKET
WITH YOUR HTML5
GAME
Release to the Facebook App Center, Chrome
Store and Firefox Store with no further packaging
required
12. Releasing to the
iOS 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
14. Focusing on web releases has
NEVER 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!
15. Releasing to the
WEB 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
16. What are the other options for
RELEASING 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)
17. 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
20. What we learned
WHEN 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.
21. What we learned
WHEN 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.
22. Build, Measure
LEARN
● Keep it light
● Design for mobile first
● Take into retina devices , ie high pixel
ratio
● Single page app
23. KEEP IT LIGHT
Optimize and
compress your
images, scripts
and CSS.
24. DESIGN FOR MOBILE FIRST
We eliminated
features we didn’t
necessarily need,
and made it easier
to develop media
queries.
25. TAKE INTO ACCOUNT DEVICE PIXEL RATIO
We doubled the size images
would be viewed at allowing
high pixel ratio devices such as
new iOS devices to render
images in HD.
26. SINGLE PAGE APP
We designed using push state,
which allows you to change the
browser URL, without
refreshing the page for
smoother UX.
27. The End
THANKS FOR
WATCHING
Don’t forget to learn more about our
company at http://www.kanoapps.com/.
