Building a cross platforms tower defense game Dev Days 2016

David RoussetSr SDEMicrosoft Corp@davrous

Building a cross-platforms tower defense game using WebGL &

#babylonjs

Babylon.js ?Free & open source project (Apache 2 license): https://github.com/babylonjs/babylon.js

Written in TypeScript

Our philosophy?Simple to useHigh performanceRun everywhere

WebGL. simple. powerful.

#babylonjs

Advanced features

Offline supportIndexedDB

Network optimizationsIncremental loading

Blender, 3DS Max & Unity exporters

Design & render +babylonjs.com/

sandbox

Complete collisions and physics engine

#babylonjs

Advanced features

Smart shaders engine postprocessesPBR support

Complete Web Audio engine

Advanced texture support (Bump, DDS)

Touch, Gamepad, VR &virtual joysticks

#babylonjs

Handling touch devicesOne event to rule them all!

DEMONSTR

ATION

#babylonjs

Game design

• Simple levels definition in .CSV files

• Our level editor is… Excel

#babylonjs

TA1 & TA2 (add scale + particles)

TB1 & TB2 (add scale + particles)

TC1 & TC2 (add scale + particles)

TB3TA3 TC3

Towers and evolutionsTower A Tower B Tower C

#babylonjs

Castle

CTL CTR

CBL CBR

The castle needs 4 slots

It is splitted virtually into 4 areas

• CTL (Castle Top Left)• CTR (Castle Top Right)• CBL (Castle Bottom

Left)• CBR (Castle Bottom

Right)

#babylonjs

Ground types Code : G1

Straight road

Code : RH(RoadHorizontal)

Code : RV(RoadVertical)

Code : RTLT(Road Turn Left Top)Code : RTRT(Road Turn Right Top)Code : RTRB(Road Turn Right Bottom)Code : RTLB(Road Turn Left Bottom)

Code : RYB(Road Y Bottom)

Code : RYT(Road Y Top)

Code : RYL(Road Y Left)

Code : RYR(Road Y Right)

Turning road Y intersection road

Code : SPAWN(Represented like classic grass)

#babylonjs

Rocks

R1R2

R3R4

R5 R6 R7

R8

R9R10 R11

R12 R13 R14 R15 R16 R17

R18 R19 R20 R21 R22 R23 R24 R25 R26R27

R28 R29R30 R31

R32 R33 R34 R35 R36

#babylonjs

Trees

T1

T2T3 T4 T5 T6 T7

T8T9

T10 T11 T12 T13 T14 T15 T16 T17T18

T19 T20T21 T22

#babylonjs

Other decorative elements

D1 D2 D3D4 D5

Reviewing csv files

DEMONSTR

ATION

#babylonjs

Working with 3D artists

#babylonjs

Creation PipelineFrom 3D tooling to WebGL using 0 line of code!

.babylon

offline

converter

.FBX

.OBJ

.FBX

.OBJ

Unity 3D exporter

DEMONSTR

ATION

#babylonjs

Optimizations

- We must pay attention to draw calls, specifically on mobiles

- For that, 2 solutions: Merge or use Instances

#babylonjs

Debug layerDraw callsTime spent per featureNumber of objectsNumber of active verticesAre you GPU / CPU locked?User marks + F12

Tool to help you reviewing performance issues

Merging & Instances

DEMONSTR

ATION

#babylonjs

Making it an app

Using Manifold.js to target Windows Store & Cordova

Using a Progressive Web Apps approach (Chrome on Android only today)

On the way to PWA

DEMONSTR

ATION

Useful links

Play with Babylon.js demos on www.babylonjs.com • And try some tutorials via our playground:

www.babylonjs.com/playground• Documentation: http://doc.babylonjs.com• Forum: http://www.html5gamedevs.com/forum/16-babylonjs/

Contact the Babylon.js developers: @deltakosh & @davrous

www.babylonjs.com#babylonjs

Questions?

@deltakosh@davrous