SlideShare une entreprise Scribd logo
1  sur  27
#babylonjs
Babylon.js ?
Free & open source project (Apache 2 license):
https://github.com/babylonjs/babylon.js
Written in TypeScript
Our philosophy?
Simple to use
High performance
Run everywhere
WebGL. simple. powerful.
#babylonjs
Advanced features
Offline support
IndexedDB
Network optimizations
Incremental loading
Blender, 3DS Max & Unity
exporters
Design & render +
babylonjs.com/sandbox
Complete collisions and
physics engine
#babylonjs
Advanced features
Smart shaders engine
postprocesses
PBR support
Complete Web Audio
engine
Advanced texture support
(Bump, DDS)
Touch, Gamepad, VR &
virtual joysticks
#babylonjs
Handling touch devices
One event to rule them all!
#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)
TB3
TA3 TC3
Towers and evolutions
Tower 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
(Road
Horizontal)
Code : RV
(Road
Vertical)
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
R1
R2
R3
R4
R5 R6
R7
R8
R9
R10
R11
R12 R13
R14
R15 R16
R17
R18
R19 R20 R21 R22 R23 R24 R25 R26
R27
R28 R29
R30 R31
R32 R33
R34
R35 R36
#babylonjs
Trees
T1
T2
T3 T4 T5 T6 T7
T8
T9
T10 T11 T12
T13 T14
T15 T16 T17
T18
T19 T20
T21 T22
#babylonjs
Other decorative elements
D1 D2
D3
D4 D5
#babylonjs
Working with 3D artists
#babylonjs
Creation Pipeline
From 3D tooling to WebGL using 0 line of code!
.babylonoffline
converter
.FBX
.OBJ
.FBX
.OBJ
#babylonjs
Optimizations
- We must pay attention to draw calls, specifically on
mobiles
- For that, 2 solutions: Merge or use Instances
#babylonjs
Debug layer
Draw calls
Time spent per feature
Number of objects
Number of active vertices
Are you GPU / CPU locked?
User marks + F12
Tool to help you reviewing performance issues
#babylonjs
Making it an app
Using Manifold.js to target Windows Store & Cordova
Using a Progressive Web Apps approach (Chrome on
Android only today)
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
@deltakosh
@davrous

Contenu connexe

Similaire à Building a cross platforms tower defense game Dev Days 2016

Efficient Data Storage for Analytics with Apache Parquet 2.0
Efficient Data Storage for Analytics with Apache Parquet 2.0Efficient Data Storage for Analytics with Apache Parquet 2.0
Efficient Data Storage for Analytics with Apache Parquet 2.0
Cloudera, Inc.
 
Html5 game using impact js
Html5 game using impact jsHtml5 game using impact js
Html5 game using impact js
Ha Bogay
 
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game developmentmloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
David Galeano
 

Similaire à Building a cross platforms tower defense game Dev Days 2016 (20)

How video codec work
How video codec work How video codec work
How video codec work
 
OrientDB - the 2nd generation of (Multi-Model) NoSQL - Codemotion Warsaw 2016
OrientDB - the 2nd generation of (Multi-Model) NoSQL - Codemotion Warsaw 2016OrientDB - the 2nd generation of (Multi-Model) NoSQL - Codemotion Warsaw 2016
OrientDB - the 2nd generation of (Multi-Model) NoSQL - Codemotion Warsaw 2016
 
[HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski
[HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski[HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski
[HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski
 
Restrição == inovação - 17o Encontro Locaweb SP
Restrição == inovação  - 17o Encontro Locaweb SPRestrição == inovação  - 17o Encontro Locaweb SP
Restrição == inovação - 17o Encontro Locaweb SP
 
Hacking for salone: drone races
Hacking for salone: drone racesHacking for salone: drone races
Hacking for salone: drone races
 
Serverless ddd
Serverless dddServerless ddd
Serverless ddd
 
DirectX 11 Rendering in Battlefield 3
DirectX 11 Rendering in Battlefield 3DirectX 11 Rendering in Battlefield 3
DirectX 11 Rendering in Battlefield 3
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
 
OrientDB - the 2nd generation of (MultiModel) NoSQL - Luigi Dell Aquila - Cod...
OrientDB - the 2nd generation of (MultiModel) NoSQL - Luigi Dell Aquila - Cod...OrientDB - the 2nd generation of (MultiModel) NoSQL - Luigi Dell Aquila - Cod...
OrientDB - the 2nd generation of (MultiModel) NoSQL - Luigi Dell Aquila - Cod...
 
Hacking for Salone: Drone Races - Di Saverio; Lippolis - Codemotion Milan 2016
Hacking for Salone: Drone Races - Di Saverio; Lippolis - Codemotion Milan 2016Hacking for Salone: Drone Races - Di Saverio; Lippolis - Codemotion Milan 2016
Hacking for Salone: Drone Races - Di Saverio; Lippolis - Codemotion Milan 2016
 
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup -  360 video production basicsFairfax Sydney #mojo #mojocon Feb 2017 Meetup -  360 video production basics
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
 
WaveEngine Dotnet 2018
WaveEngine Dotnet 2018WaveEngine Dotnet 2018
WaveEngine Dotnet 2018
 
Efficient Data Storage for Analytics with Apache Parquet 2.0
Efficient Data Storage for Analytics with Apache Parquet 2.0Efficient Data Storage for Analytics with Apache Parquet 2.0
Efficient Data Storage for Analytics with Apache Parquet 2.0
 
Efficient Data Storage for Analytics with Parquet 2.0 - Hadoop Summit 2014
Efficient Data Storage for Analytics with Parquet 2.0 - Hadoop Summit 2014Efficient Data Storage for Analytics with Parquet 2.0 - Hadoop Summit 2014
Efficient Data Storage for Analytics with Parquet 2.0 - Hadoop Summit 2014
 
Secrets to Optimizing Your Live Ops | Scott Humphries
Secrets to Optimizing Your Live Ops | Scott HumphriesSecrets to Optimizing Your Live Ops | Scott Humphries
Secrets to Optimizing Your Live Ops | Scott Humphries
 
MLflow with R
MLflow with RMLflow with R
MLflow with R
 
Html5 game using impact js
Html5 game using impact jsHtml5 game using impact js
Html5 game using impact js
 
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game developmentmloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
 
OrientDB - Perché le tue applicazioni meritano un DB Multi-Model
OrientDB - Perché le tue applicazioni meritano un DB Multi-ModelOrientDB - Perché le tue applicazioni meritano un DB Multi-Model
OrientDB - Perché le tue applicazioni meritano un DB Multi-Model
 

Plus de davrous

Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSIntroduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
davrous
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGL
davrous
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
davrous
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
davrous
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
davrous
 

Plus de davrous (20)

Create fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audioCreate fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audio
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.js
 
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esCreating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
 
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSIntroduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
 
Babylon.js WebGL Paris
Babylon.js  WebGL ParisBabylon.js  WebGL Paris
Babylon.js WebGL Paris
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Source
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGL
 
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsNGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
 
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsRéaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Pointer events
Pointer eventsPointer events
Pointer events
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
 

Dernier

introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
VishalKumarJha10
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
mohitmore19
 

Dernier (20)

introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
 
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdfAzure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 

Building a cross platforms tower defense game Dev Days 2016

Notes de l'éditeur

  1. T+2
  2. T+5 Sponza: - Demo mode plein écran - Free mode mouse/keyboard, touch & gamepad  parler de Web Audio 3D - Demo sur iPhone 6s - Démo offline sur PC depuis start screen - Démo Jedi - Demo Dynamic Shadows : http://babylonjs.com/demos/SponzaDynamicShadows/ - Démo Xbox Avatars
  3. T+10
  4. T+14
  5. T+15
  6. T+20
  7. T+17 Show Unity exporter Show assets exported in the solution Show the sandbox & editor to quickly modify the scene Show the game
  8. T+24
  9. T+27 Show Maze in the Playground without merging + show with it Show the game without instancing and with it Start base: http://david.blob.core.windows.net/techdays2014/lovemaze/step2/index.html Without merging: http://www.babylonjs-playground.com/#1PS6M2 Optimized: http://www.babylonjs-playground.com/#1PS6M2#1
  10. T+33