0
2.5D	
  RTS	
  Game	
  in	
  HTML5	
  
part	
  1	
  
Dawid	
  Lijewski	
  
dawidlijewski@wp.pl	
  
Hey!	
  
•  Dawid	
  Lijewski	
  
•  InformaBon	
  &	
  
ComunicaBon	
  Technology	
  
Engineer	
  
•  SoJware	
  Develope...
Few	
  words	
  about	
  me…	
  
Few	
  words	
  about	
  new	
  Berliner…	
  
•  New	
  in	
  Berlin,	
  live	
  in	
  
CharloXenburg	
  since	
  27th	
  ...
Few	
  words	
  about	
  my	
  world…	
  
•  JAVA,	
  C++	
  
•  IP	
  Networks	
  
•  I	
  see	
  no	
  problems,	
  only...
Modern	
  mobiles	
  are	
  so	
  fast…	
  
InspiraBon	
  
…that’s	
  Blitzkrieg…	
  
2D/3D	
  technology	
  in	
  Blitzkrieg	
  
2D	
  
Flora	
  
(Sprite)	
  

2D	
  Buildings	
  
(Sprite)	
  
2D	
  Isometri...
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	
  mo...
2D	
  Technology	
  in	
  RTS	
  (AoE)	
  
2D	
  
Flora	
  
(Sprite)	
  

2D	
  Buildings	
  
(Sprite)	
  
2D	
  Isometric...
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	...
More	
  backend	
  than	
  frontend	
  
•  Algorithm	
  for	
  sight	
  detecBon	
  
•  Pathfinding	
  algorithm	
  and	
  ...
My	
  Way…	
  
•  Do	
  It	
  from	
  scratch	
  
•  Make	
  it	
  efficient	
  
•  Simple	
  UI	
  
•  Simple	
  graphics	
...
…my	
  desBnaBon	
  
•  Game	
  for	
  every	
  plakorm	
  
•  Game	
  designed	
  for	
  Social	
  Networks	
  
•  Differe...
AdapBve	
  Tile	
  Refresh	
  
•  John	
  Carmack’s	
  invenBon	
  
•  In	
  order	
  to	
  implement	
  a	
  similar	
  t...
Current	
  progress	
  
Problems…	
  
•  Framerate	
  and	
  animaBons	
  
•  AI	
  
•  MulBple	
  objects	
  
•  MulBple,	
  simultaneous	
  chan...
Maybe	
  Bme	
  for	
  different	
  aproach…	
  
•  Google	
  Web	
  Toolkit?	
  
•  Hardware	
  acceleraBon	
  of	
  brows...
Join	
  to	
  me?	
  
Thanks	
  for	
  your	
  aXenBon!	
  
dawidlijewski@wp.pl	
  
Sources:	
  
•  Making	
  Isometric	
  Social	
  Real-­‐Time	
  Games	
  with	
  
HTML5,	
  CSS3,	
  and	
  Javascript,	
 ...
[HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski
Upcoming SlideShare
Loading in...5
×

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

774

Published on

Presentation from Dawid during the HTML5 Berlin User Group

Join the next one here: http://www.meetup.com/Berlin-HTML5-User-Group/

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
774
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 2.5D  RTS  Game  in  HTML5   part  1   Dawid  Lijewski   dawidlijewski@wp.pl  
  2. 2. Hey!   •  Dawid  Lijewski   •  InformaBon  &   ComunicaBon  Technology   Engineer   •  SoJware  Developer  &   Network  Engineer   •  Graduate  student  (Master-­‐ Sc.),  Wrocław  Technology   University,  Computer   Science  
  3. 3. Few  words  about  me…  
  4. 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. 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. 6. Modern  mobiles  are  so  fast…  
  7. 7. InspiraBon  
  8. 8. …that’s  Blitzkrieg…  
  9. 9. 2D/3D  technology  in  Blitzkrieg   2D   Flora   (Sprite)   2D  Buildings   (Sprite)   2D  Isometric  Canvas/Terrain   Units  -­‐  Tanks,  Arty,  Cars   (3D  Model  +  Textures)  
  10. 10. Isometry  –  Bme  for  boring  math    
  11. 11. Isometry  is  sBll  2D  surface  
  12. 12. Isometric  angle  problem  
  13. 13. SoluBon!  
  14. 14. Do  not  transform  and  rotate…   …save  CPU’s  power!  
  15. 15. code  
  16. 16. Isometric  worlds  –  Diablo  II  
  17. 17. WebGL  –  logical  and  modern  next  step  
  18. 18. So  why  not  WebGL?   •  Security  reasons   •  Compability  with  browsers   •  I’m  not  3D  modeler..   …let’s  try  the  canvas  and  classical  2D!  
  19. 19. 2D  Technology  in  RTS  (AoE)   2D   Flora   (Sprite)   2D  Buildings   (Sprite)   2D  Isometric  Canvas/Terrain   Units  -­‐  Tanks,  Arty,  Cars   (2D  Sprite)  
  20. 20. Isometric  worlds  –  AoE  II  
  21. 21. AnimaBon  of  2D  Units,  sprite  sheet  
  22. 22. 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.  
  23. 23. 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  
  24. 24. My  Way…   •  Do  It  from  scratch   •  Make  it  efficient   •  Simple  UI   •  Simple  graphics   •  Focus  player  on  tacBcs  rather  than  „click-­‐fest”  
  25. 25. …my  desBnaBon   •  Game  for  every  plakorm   •  Game  designed  for  Social  Networks   •  Different  difficulty  levels   •  BaXles  must  be  HUGE!  
  26. 26. 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.  
  27. 27. Current  progress  
  28. 28. Problems…   •  Framerate  and  animaBons   •  AI   •  MulBple  objects   •  MulBple,  simultaneous  changes  in  big  canvas   •  Complicated  appliance  of  complex  logic   •  Shadow  casBng  
  29. 29. Maybe  Bme  for  different  aproach…   •  Google  Web  Toolkit?   •  Hardware  acceleraBon  of  browsers?   •  …or…  
  30. 30. Join  to  me?  
  31. 31. Thanks  for  your  aXenBon!   dawidlijewski@wp.pl  
  32. 32. 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  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×