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

2.5D RTS Game in HTML5

part 1 Dawid Lijewski

[email protected]

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!

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!

[email protected]

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

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

Technology

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