building a cross platforms tower defense game dev days 2016
TRANSCRIPT
![Page 1: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/1.jpg)
David RoussetSr SDEMicrosoft Corp@davrous
Building a cross-platforms tower defense game using WebGL &
![Page 2: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/2.jpg)
![Page 3: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/3.jpg)
#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.
![Page 4: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/4.jpg)
#babylonjs
Advanced features
Offline supportIndexedDB
Network optimizationsIncremental loading
Blender, 3DS Max & Unity exporters
Design & render +babylonjs.com/
sandbox
Complete collisions and physics engine
![Page 5: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/5.jpg)
#babylonjs
Advanced features
Smart shaders engine postprocessesPBR support
Complete Web Audio engine
Advanced texture support (Bump, DDS)
Touch, Gamepad, VR &virtual joysticks
![Page 6: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/6.jpg)
#babylonjs
Handling touch devicesOne event to rule them all!
![Page 7: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/7.jpg)
DEMONSTR
ATION
![Page 8: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/8.jpg)
![Page 9: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/9.jpg)
#babylonjs
Game design
• Simple levels definition in .CSV files
• Our level editor is… Excel
![Page 10: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/10.jpg)
#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
![Page 11: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/11.jpg)
#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)
![Page 12: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/12.jpg)
#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)
![Page 13: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/13.jpg)
#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
![Page 14: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/14.jpg)
#babylonjs
Trees
T1
T2T3 T4 T5 T6 T7
T8T9
T10 T11 T12 T13 T14 T15 T16 T17T18
T19 T20T21 T22
![Page 15: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/15.jpg)
#babylonjs
Other decorative elements
D1 D2 D3D4 D5
![Page 16: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/16.jpg)
Reviewing csv files
DEMONSTR
ATION
![Page 17: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/17.jpg)
#babylonjs
Working with 3D artists
![Page 18: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/18.jpg)
#babylonjs
Creation PipelineFrom 3D tooling to WebGL using 0 line of code!
.babylon
offline
converter
.FBX
.OBJ
.FBX
.OBJ
![Page 19: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/19.jpg)
Unity 3D exporter
DEMONSTR
ATION
![Page 20: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/20.jpg)
#babylonjs
Optimizations
- We must pay attention to draw calls, specifically on mobiles
- For that, 2 solutions: Merge or use Instances
![Page 21: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/21.jpg)
#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
![Page 22: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/22.jpg)
Merging & Instances
DEMONSTR
ATION
![Page 23: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/23.jpg)
#babylonjs
Making it an app
Using Manifold.js to target Windows Store & Cordova
Using a Progressive Web Apps approach (Chrome on Android only today)
![Page 24: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/24.jpg)
On the way to PWA
DEMONSTR
ATION
![Page 25: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/25.jpg)
![Page 26: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/26.jpg)
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
![Page 27: Building a cross platforms tower defense game Dev Days 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5881c3481a28abdd268b5a23/html5/thumbnails/27.jpg)
www.babylonjs.com#babylonjs
Questions?
@deltakosh@davrous