[HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 891 views

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/

Statistics

Views

Total Views
891
Views on SlideShare
848
Embed Views
43

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 43

http://blog.bemyapp.com 42
http://feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[HTML5 BUG] 2,5D RTS Game in HTML5 by Dawid Lijewski Presentation 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