[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

on

  • 749 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
749
Views on SlideShare
706
Embed Views
43

Actions

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

    • 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