SlideShare a Scribd company logo
1 of 33
Download to read offline
2.5D	
  RTS	
  Game	
  in	
  HTML5	
  
part	
  1	
  
Dawid	
  Lijewski	
  
dawidlijewski@wp.pl	
  
Hey!	
  
•  Dawid	
  Lijewski	
  
•  InformaBon	
  &	
  
ComunicaBon	
  Technology	
  
Engineer	
  
•  SoJware	
  Developer	
  &	
  
Network	
  Engineer	
  
•  Graduate	
  student	
  (Master-­‐
Sc.),	
  Wrocław	
  Technology	
  
University,	
  Computer	
  
Science	
  
Few	
  words	
  about	
  me…	
  
Few	
  words	
  about	
  new	
  Berliner…	
  
•  New	
  in	
  Berlin,	
  live	
  in	
  
CharloXenburg	
  since	
  27th	
  
August	
  
•  I	
  fell	
  in	
  love	
  to	
  Berlin	
  at	
  first	
  
sight	
  
•  Berlin	
  is	
  awesome	
  
Few	
  words	
  about	
  my	
  world…	
  
•  JAVA,	
  C++	
  
•  IP	
  Networks	
  
•  I	
  see	
  no	
  problems,	
  only	
  challenges	
  
•  Programming	
  languages	
  and	
  frameworks	
  are	
  
just	
  only	
  tools	
  in	
  my	
  hand,	
  	
  
•  I	
  feel	
  no	
  hip	
  toward	
  anything…except	
  SAAB’s…	
  
Modern	
  mobiles	
  are	
  so	
  fast…	
  
InspiraBon	
  
…that’s	
  Blitzkrieg…	
  
2D/3D	
  technology	
  in	
  Blitzkrieg	
  
2D	
  
Flora	
  
(Sprite)	
  

2D	
  Buildings	
  
(Sprite)	
  
2D	
  Isometric	
  Canvas/Terrain	
  

Units	
  -­‐	
  Tanks,	
  Arty,	
  Cars	
  
(3D	
  Model	
  +	
  Textures)	
  
Isometry	
  –	
  Bme	
  for	
  boring	
  math	
  	
  
Isometry	
  is	
  sBll	
  2D	
  surface	
  
Isometric	
  angle	
  problem	
  
SoluBon!	
  
Do	
  not	
  transform	
  and	
  rotate…	
  
…save	
  CPU’s	
  power!	
  
code	
  
Isometric	
  worlds	
  –	
  Diablo	
  II	
  
WebGL	
  –	
  logical	
  and	
  modern	
  next	
  step	
  
So	
  why	
  not	
  WebGL?	
  
•  Security	
  reasons	
  
•  Compability	
  with	
  browsers	
  
•  I’m	
  not	
  3D	
  modeler..	
  
…let’s	
  try	
  the	
  canvas	
  and	
  classical	
  2D!	
  
2D	
  Technology	
  in	
  RTS	
  (AoE)	
  
2D	
  
Flora	
  
(Sprite)	
  

2D	
  Buildings	
  
(Sprite)	
  
2D	
  Isometric	
  Canvas/Terrain	
  

Units	
  -­‐	
  Tanks,	
  Arty,	
  Cars	
  
(2D	
  Sprite)	
  
Isometric	
  worlds	
  –	
  AoE	
  II	
  
AnimaBon	
  of	
  2D	
  Units,	
  sprite	
  sheet	
  
What	
  exactly	
  is	
  RTS	
  Game?	
  
•  Real-­‐Bme	
  strategy	
  (RTS)	
  is	
  a	
  sub-­‐genre	
  of	
  
strategy	
  video	
  game	
  which	
  does	
  not	
  progress	
  
incrementally	
  in	
  turns.	
  
•  In	
  an	
  RTS,	
  as	
  in	
  other	
  wargames,	
  the	
  
parBcipants	
  posiBon	
  and	
  maneuver	
  units	
  and	
  
structures	
  under	
  their	
  control	
  to	
  secure	
  areas	
  
of	
  the	
  map	
  and/or	
  destroy	
  their	
  opponents'	
  
assets.	
  
More	
  backend	
  than	
  frontend	
  
•  Algorithm	
  for	
  sight	
  detecBon	
  
•  Pathfinding	
  algorithm	
  and	
  colision	
  detecBon	
  
•  Algorithm	
  for	
  shooBng	
  (ArBllery	
  problem)	
  
•  Algorithm	
  for	
  game	
  states,	
  win/lose	
  condiBons	
  
•  Algorithm	
  for	
  unit	
  construcBon	
  
•  Algorithm	
  for	
  unit	
  auto-­‐acBons	
  and	
  formaBons	
  
•  Algorithm	
  for	
  AI	
  
•  Dynamic	
  enviroment	
  
My	
  Way…	
  
•  Do	
  It	
  from	
  scratch	
  
•  Make	
  it	
  efficient	
  
•  Simple	
  UI	
  
•  Simple	
  graphics	
  
•  Focus	
  player	
  on	
  tacBcs	
  rather	
  than	
  „click-­‐fest”	
  
…my	
  desBnaBon	
  
•  Game	
  for	
  every	
  plakorm	
  
•  Game	
  designed	
  for	
  Social	
  Networks	
  
•  Different	
  difficulty	
  levels	
  
•  BaXles	
  must	
  be	
  HUGE!	
  
AdapBve	
  Tile	
  Refresh	
  
•  John	
  Carmack’s	
  invenBon	
  
•  In	
  order	
  to	
  implement	
  a	
  similar	
  technique,	
  we	
  
need	
  to	
  get	
  rid	
  of	
  the	
  setTimeout()	
  in	
  the	
  draw()	
  
loop	
  and	
  add	
  four	
  parameters	
  to	
  the	
  draw()	
  
funcBon:	
  srcX,	
  srcY,	
  destX,	
  and	
  destY.	
  Calling	
  the	
  
draw()	
  funcBon	
  without	
  passing	
  any	
  parameters	
  
should	
  redraw	
  the	
  enBre	
  canvas;	
  passing	
  the	
  
srcX/Y	
  and	
  destX/Y	
  parameters	
  should	
  redraw	
  
only	
  the	
  area	
  within	
  that	
  boundary.	
  
Current	
  progress	
  
Problems…	
  
•  Framerate	
  and	
  animaBons	
  
•  AI	
  
•  MulBple	
  objects	
  
•  MulBple,	
  simultaneous	
  changes	
  in	
  big	
  canvas	
  
•  Complicated	
  appliance	
  of	
  complex	
  logic	
  
•  Shadow	
  casBng	
  
Maybe	
  Bme	
  for	
  different	
  aproach…	
  
•  Google	
  Web	
  Toolkit?	
  
•  Hardware	
  acceleraBon	
  of	
  browsers?	
  

•  …or…	
  
Join	
  to	
  me?	
  
Thanks	
  for	
  your	
  aXenBon!	
  
dawidlijewski@wp.pl	
  
Sources:	
  
•  Making	
  Isometric	
  Social	
  Real-­‐Time	
  Games	
  with	
  
HTML5,	
  CSS3,	
  and	
  Javascript,	
  Mario	
  Andrés	
  
Pagella	
  
•  Wikipedia	
  
•  hXp://gamedev.tutsplus.com/tutorials/
implementaBon/creaBng-­‐isometric-­‐worlds-­‐a-­‐
primer-­‐for-­‐game-­‐developers/	
  
•  Google	
  Images	
  

More Related Content

What's hot

Implicit Surface Modeling for 3D Printing
Implicit Surface Modeling for 3D PrintingImplicit Surface Modeling for 3D Printing
Implicit Surface Modeling for 3D Printing
Mike Schäkermann
 
Smedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphicsSmedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphics
changehee lee
 

What's hot (17)

Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...
Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...
Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...
 
Open Graphics Library
Open Graphics  Library Open Graphics  Library
Open Graphics Library
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
 
Armand Rousso describes about the Computer graphic
Armand Rousso describes about the Computer graphicArmand Rousso describes about the Computer graphic
Armand Rousso describes about the Computer graphic
 
移動ロボットのナビゲーション
移動ロボットのナビゲーション移動ロボットのナビゲーション
移動ロボットのナビゲーション
 
Implicit Surface Modeling for 3D Printing
Implicit Surface Modeling for 3D PrintingImplicit Surface Modeling for 3D Printing
Implicit Surface Modeling for 3D Printing
 
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...
 
Smedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphicsSmedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphics
 
VFX
VFXVFX
VFX
 
【Unite 2017 Tokyo】「日本列島VR」および「HoleLenz」の開発事例ご紹介
【Unite 2017 Tokyo】「日本列島VR」および「HoleLenz」の開発事例ご紹介【Unite 2017 Tokyo】「日本列島VR」および「HoleLenz」の開発事例ご紹介
【Unite 2017 Tokyo】「日本列島VR」および「HoleLenz」の開発事例ご紹介
 
Computer graphic
Computer graphicComputer graphic
Computer graphic
 
Mojikenshare Art Direction
Mojikenshare Art DirectionMojikenshare Art Direction
Mojikenshare Art Direction
 
202105_portfolio_kazukisakamoto
202105_portfolio_kazukisakamoto 202105_portfolio_kazukisakamoto
202105_portfolio_kazukisakamoto
 
Looking glassrenderinglt en
Looking glassrenderinglt enLooking glassrenderinglt en
Looking glassrenderinglt en
 
Cgi timeline
Cgi timelineCgi timeline
Cgi timeline
 
Cap
CapCap
Cap
 
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
 

Similar to [HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski

Making a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie TycoonMaking a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie Tycoon
Jean-Philippe Doiron
 
Designing an Objective-C Framework about 3D
Designing an Objective-C Framework about 3DDesigning an Objective-C Framework about 3D
Designing an Objective-C Framework about 3D
rsebbe
 
ngGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and TokyongGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and Tokyo
notolab
 
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
 

Similar to [HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski (20)

Low Level Graphics & OpenGL
Low Level Graphics & OpenGLLow Level Graphics & OpenGL
Low Level Graphics & OpenGL
 
XNAPresentation
XNAPresentationXNAPresentation
XNAPresentation
 
Confrontation Pipeline and SCons
Confrontation Pipeline and SConsConfrontation Pipeline and SCons
Confrontation Pipeline and SCons
 
Cocos2d programming
Cocos2d programmingCocos2d programming
Cocos2d programming
 
Developing Next-Generation Games with Stage3D (Molehill)
Developing Next-Generation Games with Stage3D (Molehill) Developing Next-Generation Games with Stage3D (Molehill)
Developing Next-Generation Games with Stage3D (Molehill)
 
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
 
Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014
Benoit fouletier guillaume martin   unity day- modern 2 d techniques-gce2014Benoit fouletier guillaume martin   unity day- modern 2 d techniques-gce2014
Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014
 
2004: Söldner - a Post Mortem
2004: Söldner - a Post Mortem2004: Söldner - a Post Mortem
2004: Söldner - a Post Mortem
 
Dynamic Wounds on Animated Characters in UE4
Dynamic Wounds on Animated Characters in UE4Dynamic Wounds on Animated Characters in UE4
Dynamic Wounds on Animated Characters in UE4
 
Making a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie TycoonMaking a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie Tycoon
 
Designing an Objective-C Framework about 3D
Designing an Objective-C Framework about 3DDesigning an Objective-C Framework about 3D
Designing an Objective-C Framework about 3D
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Cocos2d game programming 2
Cocos2d game programming 2Cocos2d game programming 2
Cocos2d game programming 2
 
ngGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and TokyongGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and Tokyo
 
Making A Game Engine Is Easier Than You Think
Making A Game Engine Is Easier Than You ThinkMaking A Game Engine Is Easier Than You Think
Making A Game Engine Is Easier Than You Think
 
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
 
Brewing Your Own Game Engie eng
Brewing Your Own Game Engie engBrewing Your Own Game Engie eng
Brewing Your Own Game Engie eng
 
A Certain Slant of Light - Past, Present and Future Challenges of Global Illu...
A Certain Slant of Light - Past, Present and Future Challenges of Global Illu...A Certain Slant of Light - Past, Present and Future Challenges of Global Illu...
A Certain Slant of Light - Past, Present and Future Challenges of Global Illu...
 
Past, Present and Future Challenges of Global Illumination in Games
Past, Present and Future Challenges of Global Illumination in GamesPast, Present and Future Challenges of Global Illumination in Games
Past, Present and Future Challenges of Global Illumination in Games
 
Practical Volume Rendering for realtime applications
Practical Volume Rendering for realtime applicationsPractical Volume Rendering for realtime applications
Practical Volume Rendering for realtime applications
 

More from BeMyApp

Présentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM WatsonPrésentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM Watson
BeMyApp
 

More from BeMyApp (20)

Introduction to epid
Introduction to epidIntroduction to epid
Introduction to epid
 
Introduction ciot workshop premeetup
Introduction ciot workshop premeetupIntroduction ciot workshop premeetup
Introduction ciot workshop premeetup
 
Présentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM WatsonPrésentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM Watson
 
Crédit Agricole S.A. Personae et Parcours
Crédit Agricole S.A. Personae et ParcoursCrédit Agricole S.A. Personae et Parcours
Crédit Agricole S.A. Personae et Parcours
 
Cisco Paris DevNet Hackathon slideshow - Intro
Cisco Paris DevNet Hackathon slideshow - IntroCisco Paris DevNet Hackathon slideshow - Intro
Cisco Paris DevNet Hackathon slideshow - Intro
 
Tumeurs Neuroendocrines : une vue d'ensemble
Tumeurs Neuroendocrines : une vue d'ensembleTumeurs Neuroendocrines : une vue d'ensemble
Tumeurs Neuroendocrines : une vue d'ensemble
 
Building your first game in Unity 3d by Sarah Sexton
Building your first game in Unity 3d  by Sarah SextonBuilding your first game in Unity 3d  by Sarah Sexton
Building your first game in Unity 3d by Sarah Sexton
 
Using intel's real sense to create games with natural user interfaces justi...
Using intel's real sense to create games with natural user interfaces   justi...Using intel's real sense to create games with natural user interfaces   justi...
Using intel's real sense to create games with natural user interfaces justi...
 
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon CollinsIntroduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
 
Audio Mixer in Unity5 - Andy Touch
Audio Mixer in Unity5 - Andy TouchAudio Mixer in Unity5 - Andy Touch
Audio Mixer in Unity5 - Andy Touch
 
Shaders - Claudia Doppioslash - Unity With the Best
Shaders - Claudia Doppioslash - Unity With the BestShaders - Claudia Doppioslash - Unity With the Best
Shaders - Claudia Doppioslash - Unity With the Best
 
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
 
Tools to Save Time
Tools to Save TimeTools to Save Time
Tools to Save Time
 
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
 
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
 
[IoT World Forum Webinar] Review of CMX Cisco technology
[IoT World Forum Webinar] Review of CMX Cisco technology[IoT World Forum Webinar] Review of CMX Cisco technology
[IoT World Forum Webinar] Review of CMX Cisco technology
 
HP Helion Episode 6: Cloud Foundry Summit Recap
HP Helion Episode 6: Cloud Foundry Summit RecapHP Helion Episode 6: Cloud Foundry Summit Recap
HP Helion Episode 6: Cloud Foundry Summit Recap
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco Marcellino
 
HP Helion Webinar #5 - Security Beyond Firewalls
HP Helion Webinar #5 - Security Beyond FirewallsHP Helion Webinar #5 - Security Beyond Firewalls
HP Helion Webinar #5 - Security Beyond Firewalls
 
HP Helion Webinar #4 - Open stack the magic pill
HP Helion Webinar #4 - Open stack the magic pillHP Helion Webinar #4 - Open stack the magic pill
HP Helion Webinar #4 - Open stack the magic pill
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Recently uploaded (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 

[HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski

  • 1. 2.5D  RTS  Game  in  HTML5   part  1   Dawid  Lijewski   dawidlijewski@wp.pl  
  • 2. Hey!   •  Dawid  Lijewski   •  InformaBon  &   ComunicaBon  Technology   Engineer   •  SoJware  Developer  &   Network  Engineer   •  Graduate  student  (Master-­‐ Sc.),  Wrocław  Technology   University,  Computer   Science  
  • 3. Few  words  about  me…  
  • 4. Few  words  about  new  Berliner…   •  New  in  Berlin,  live  in   CharloXenburg  since  27th   August   •  I  fell  in  love  to  Berlin  at  first   sight   •  Berlin  is  awesome  
  • 5. Few  words  about  my  world…   •  JAVA,  C++   •  IP  Networks   •  I  see  no  problems,  only  challenges   •  Programming  languages  and  frameworks  are   just  only  tools  in  my  hand,     •  I  feel  no  hip  toward  anything…except  SAAB’s…  
  • 6. Modern  mobiles  are  so  fast…  
  • 9. 2D/3D  technology  in  Blitzkrieg   2D   Flora   (Sprite)   2D  Buildings   (Sprite)   2D  Isometric  Canvas/Terrain   Units  -­‐  Tanks,  Arty,  Cars   (3D  Model  +  Textures)  
  • 10. Isometry  –  Bme  for  boring  math    
  • 11. Isometry  is  sBll  2D  surface  
  • 14. Do  not  transform  and  rotate…   …save  CPU’s  power!  
  • 15.
  • 17. Isometric  worlds  –  Diablo  II  
  • 18. WebGL  –  logical  and  modern  next  step  
  • 19. So  why  not  WebGL?   •  Security  reasons   •  Compability  with  browsers   •  I’m  not  3D  modeler..   …let’s  try  the  canvas  and  classical  2D!  
  • 20. 2D  Technology  in  RTS  (AoE)   2D   Flora   (Sprite)   2D  Buildings   (Sprite)   2D  Isometric  Canvas/Terrain   Units  -­‐  Tanks,  Arty,  Cars   (2D  Sprite)  
  • 21. Isometric  worlds  –  AoE  II  
  • 22. AnimaBon  of  2D  Units,  sprite  sheet  
  • 23. What  exactly  is  RTS  Game?   •  Real-­‐Bme  strategy  (RTS)  is  a  sub-­‐genre  of   strategy  video  game  which  does  not  progress   incrementally  in  turns.   •  In  an  RTS,  as  in  other  wargames,  the   parBcipants  posiBon  and  maneuver  units  and   structures  under  their  control  to  secure  areas   of  the  map  and/or  destroy  their  opponents'   assets.  
  • 24. More  backend  than  frontend   •  Algorithm  for  sight  detecBon   •  Pathfinding  algorithm  and  colision  detecBon   •  Algorithm  for  shooBng  (ArBllery  problem)   •  Algorithm  for  game  states,  win/lose  condiBons   •  Algorithm  for  unit  construcBon   •  Algorithm  for  unit  auto-­‐acBons  and  formaBons   •  Algorithm  for  AI   •  Dynamic  enviroment  
  • 25. My  Way…   •  Do  It  from  scratch   •  Make  it  efficient   •  Simple  UI   •  Simple  graphics   •  Focus  player  on  tacBcs  rather  than  „click-­‐fest”  
  • 26. …my  desBnaBon   •  Game  for  every  plakorm   •  Game  designed  for  Social  Networks   •  Different  difficulty  levels   •  BaXles  must  be  HUGE!  
  • 27. AdapBve  Tile  Refresh   •  John  Carmack’s  invenBon   •  In  order  to  implement  a  similar  technique,  we   need  to  get  rid  of  the  setTimeout()  in  the  draw()   loop  and  add  four  parameters  to  the  draw()   funcBon:  srcX,  srcY,  destX,  and  destY.  Calling  the   draw()  funcBon  without  passing  any  parameters   should  redraw  the  enBre  canvas;  passing  the   srcX/Y  and  destX/Y  parameters  should  redraw   only  the  area  within  that  boundary.  
  • 29. Problems…   •  Framerate  and  animaBons   •  AI   •  MulBple  objects   •  MulBple,  simultaneous  changes  in  big  canvas   •  Complicated  appliance  of  complex  logic   •  Shadow  casBng  
  • 30. Maybe  Bme  for  different  aproach…   •  Google  Web  Toolkit?   •  Hardware  acceleraBon  of  browsers?   •  …or…  
  • 32. Thanks  for  your  aXenBon!   dawidlijewski@wp.pl  
  • 33. Sources:   •  Making  Isometric  Social  Real-­‐Time  Games  with   HTML5,  CSS3,  and  Javascript,  Mario  Andrés   Pagella   •  Wikipedia   •  hXp://gamedev.tutsplus.com/tutorials/ implementaBon/creaBng-­‐isometric-­‐worlds-­‐a-­‐ primer-­‐for-­‐game-­‐developers/   •  Google  Images