Upload
davrous
View
188
Download
2
Embed Size (px)
Citation preview
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