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

  • 577 views
Uploaded on

Presentation from Dawid during the HTML5 Berlin User Group …

Presentation from Dawid during the HTML5 Berlin User Group

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
577
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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…  
  • 7. InspiraBon  
  • 8. …that’s  Blitzkrieg…  
  • 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  
  • 12. Isometric  angle  problem  
  • 13. SoluBon!  
  • 14. Do  not  transform  and  rotate…   …save  CPU’s  power!  
  • 15. code  
  • 16. Isometric  worlds  –  Diablo  II  
  • 17. WebGL  –  logical  and  modern  next  step  
  • 18. So  why  not  WebGL?   •  Security  reasons   •  Compability  with  browsers   •  I’m  not  3D  modeler..   …let’s  try  the  canvas  and  classical  2D!  
  • 19. 2D  Technology  in  RTS  (AoE)   2D   Flora   (Sprite)   2D  Buildings   (Sprite)   2D  Isometric  Canvas/Terrain   Units  -­‐  Tanks,  Arty,  Cars   (2D  Sprite)  
  • 20. Isometric  worlds  –  AoE  II  
  • 21. AnimaBon  of  2D  Units,  sprite  sheet  
  • 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. 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. My  Way…   •  Do  It  from  scratch   •  Make  it  efficient   •  Simple  UI   •  Simple  graphics   •  Focus  player  on  tacBcs  rather  than  „click-­‐fest”  
  • 25. …my  desBnaBon   •  Game  for  every  plakorm   •  Game  designed  for  Social  Networks   •  Different  difficulty  levels   •  BaXles  must  be  HUGE!  
  • 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. Current  progress  
  • 28. Problems…   •  Framerate  and  animaBons   •  AI   •  MulBple  objects   •  MulBple,  simultaneous  changes  in  big  canvas   •  Complicated  appliance  of  complex  logic   •  Shadow  casBng  
  • 29. Maybe  Bme  for  different  aproach…   •  Google  Web  Toolkit?   •  Hardware  acceleraBon  of  browsers?   •  …or…  
  • 30. Join  to  me?  
  • 31. Thanks  for  your  aXenBon!   dawidlijewski@wp.pl  
  • 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