Mobile HTML5 Game Development Design for performance

THINGS TO CONSIDER WHEN MAKING A GAMEAnd this little text no one will read, but it looks nice.

PERFORMANCE

THE IDEA THE MARKET TECHNICAL CONSTRAINTS

CAN I MAKE A WORKING

POC?CODING

THE THINGS I TRY TO FOCUS ONA white bird is only white when it’s white - dojo yoga pants.

BUSINESS

THE IDEA THE MARKET TECHNICAL CONSTRAINTS

CAN I MAKE A WORKING

POC?CODING

2 DIFFERENT COMPANIESSuch similar data, so mobile!

COMPANY Y

COMPANY Y is a multiplier game

dev platform and game provider

in France with over 1M players

each month.

COMPANY X

COMPANY X makes casual games for the Dutch market.

68% DESKTOP

32% MOBILE

62% DESKTOP

38% MOBILE

Mobile is not only gaining

traction in HTML5 gaming -

it’s becoming an important

part of the revenue.

HTML5 Gaming companies

have problems finding

developers.

I’M A BUBBLE!

THE BIG MIGRATIONBye, bye flashy.

Migrating from Flash Multiple job offers for html5

gamers are about migrating flash

games - so that they work on

mobile devices from the browsers.

A sometimes tedious job - but

digging into AS3 and see how

some problems are solved can be

a knowledge gold mine for a

HTML5 Game Dev.

FLASH KILLA!

PLUGIN?

IS HTML5 READY FOR THIS?“No, you’re a towel!” - Towelie

Phones Small desktop / tablets The (big) desktop

By far the most fragmented market - you’ll find most

challenges here.

Things are starting to get edgy here - there’s a big portion of the market that handles really well

(Surface/iPad).

And there’s Android and Galaxy Tab 3 and GPU blacklisting :)

This is the place where most people make their games /

experiment on - it’s easy because having a computer for 1.5K-2K

PLN can give you a pretty smooth ride.

Are you?

TECHNICAL HICCUPS

TEXTURE MEMORY

Still thinking export for web is good enough? Think again.

GOT SOME OF THAT 3D?There are still devices with no proper

hardware acceleration for the browser.

LOOK UNDER THE CANVAS

You need to understand the how canvas backing store works.

A SCRIPTING LANGUAGEJavaScript interpretation can be a pain

when you start doing things like physics (even on native wrappers).

DON’T GET DISCOURAGEDWriting games is hard - it’s normal. Luckily we now write for powerful devices

No sleeping

Test execution performance on different devicesTake your protein pills and put your helmet on

Do small iterationsWhen designing for performance always test in small steps - otherwise the system can get to complex to do anything without frustration.

ALWAYS TRY TO THINK

BIG

Invest money

Abstract common solutions

After you’ve figured something out - write a reusable implementation.

This will allow you to increase your delivery speed.

Be a designerRemember graceful degradation / progressive enhancement?

Design your implementation and talk to your market / customers.

TEXTURES ARE SO MUCH MOREWell maybe except pixel art, pixel art has few pixels in it’s art.

Be creative

Use good tools

Work closely with you’r designer

Check device specs

Snapshot different versions

Compressions saves memory

Compressing from RGBA8888 to RGBA4444 reduces memory usage

by half.

First of all I always segment my textures

by the degree they can be compressed

and then I pack those segments into

separate sprite-sheets.

If you look under the hood of PNG you’ll

find: RGBA8888, RGBA4444, RGB888,

RGB565, RGBA5555, RGBA5551,…

Really, really

You can also cheat

If you’re really low on GPU performance on retina devices, try

scaling not x2 but somewhere between x1.5-x2.

MATH IS THE KEY You should also learn physics. It’s hard so I won’t talk about it.

You’ll find many solutions to one

problem

You can pick solutions optimal for the

computer

You can find solutions faster if you know what

you’re looking for

You’ll be able to communicate issues

better

It will help you make game musics

You won’t get stuck with a performance problem

You’r brain will store the best solutions - so you

can work faster

You can make games

Don’t write poems

POC THE WORLD - USING DIFFERENT TECH“I didn’t think it was physically possible, but this both sucks and blows” - Bart Simpson on JavaScript

Try different JS frameworks,

write something yourself, try

Corona, try Swift.

Pick you SDK

I usually give myself 3 days to

check what tech use for the

project and then talk with the

customer about different

solutions.

Give yourself a deadline

It’s hard and it’s boring but

documenting your endeavours

can save you a lot of time.

I’m still working on this part.

Document

Now you’re ready to do the

juicy stuff and just code. You

know that you’ve minimised

the risks of running into a wall

and you have a better chance

to complete your game :)

Code

Proof of Cake

Clap, clap and questionsŁukasz Wójciak

@lukaszwojciak