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

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!

16. code

17. Isometric
worlds
–
Diablo
II

18. WebGL
–
logical
and
modern
next
step

19. So
why
not
WebGL?
• Security
reasons
• Compability
with
browsers
• I’m
not
3D
modeler..
…let’s
try
the
canvas
and
classical
2D!

20. 2D
Technology
in
RTS
(AoE)
2D
Flora
(Sprite)
2D
Buildings
(Sprite)
2D
Isometric
Canvas/Terrain
Units
-­‐
Tanks,
Arty,
Cars
(2D
Sprite)

21. Isometric
worlds
–
AoE
II

22. AnimaBon
of
2D
Units,
sprite
sheet

23. 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.

24. 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

25. My
Way…
• Do
It
from
scratch
• Make
it
efficient
• Simple
UI
• Simple
graphics
• Focus
player
on
tacBcs
rather
than
„click-­‐fest”

26. …my
desBnaBon
• Game
for
every
plakorm
• Game
designed
for
Social
Networks
• Different
difficulty
levels
• BaXles
must
be
HUGE!

27. 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.

28. Current
progress

29. Problems…
• Framerate
and
animaBons
• AI
• MulBple
objects
• MulBple,
simultaneous
changes
in
big
canvas
• Complicated
appliance
of
complex
logic
• Shadow
casBng

30. Maybe
Bme
for
different
aproach…
• Google
Web
Toolkit?
• Hardware
acceleraBon
of
browsers?
• …or…

31. Join
to
me?

32. Thanks
for
your
aXenBon!
dawidlijewski@wp.pl

33. 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