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  Isometric  Canvas/Terrain  

2D/3D  technology  in  Blitzkrieg  

2D  Buildings  (Sprite)  

2D  Flora  (Sprite)  

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  Isometric  Canvas/Terrain  

2D  Buildings  (Sprite)  

2D  Flora  (Sprite)  

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