Skip to content

Commit 5280d88

Browse files
sujayvadlakondasujayvadlakonda
committed
Added animations tutorial
1 parent a706b40 commit 5280d88

2 files changed

Lines changed: 190 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ <h1>Tutorials</h1>
8181
<li><a href="index.html?tutorial=tutorial-collisions-many-to-one.html">Collisions: Many to One</a></li>
8282
<li><a href="index.html?tutorial=tutorial-traveling-at-light-speed.html">Traveling at Light Speed</a></li>
8383
<li><a href="index.html?tutorial=tutorial-primitives.html">Primitives</a></li>
84+
<li><a href="index.html?tutorial=tutorial-animation.html">Animation</a></li>
8485
</ul>
8586
</div>
8687
</div>

‎tutorial-animation.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<html>
2+
<head>
3+
<title>DragonRuby Game Toolkit - Animation</title>
4+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css" />
5+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
6+
<script src="tutorial.js"></script>
7+
<link rel="stylesheet" href="tutorial.css" />
8+
</head>
9+
<body>
10+
<h1>DragonRuby Game Toolkit - Animation</h1>
11+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="1">
12+
<div itemscope="itemscope" itemtype="tutorial-text">
13+
<h1>Separate images, looping</h1>
14+
An animation using images explosion-0.png to explosion-6.png.
15+
This animation is a continuous loop.
16+
</div>
17+
<div itemscope="itemscope" itemtype="tutorial-code">
18+
<pre>
19+
<code class="language-ruby" itemprop="text">
20+
# entry point to game
21+
def tick args
22+
# The frame at which the animation should begin
23+
starting_tick = 0
24+
25+
# The number of sprites in the animation
26+
number_of_sprites = 7
27+
28+
# The number of frames for each sprite
29+
# of the animation
30+
number_of_frames_per_sprite = 6
31+
32+
# Whether the animation should loop
33+
does_animation_loop = true
34+
35+
# A function that calculates the current sprite index
36+
sprite_index = starting_tick.frame_index(
37+
number_of_sprites,
38+
number_of_frames_per_sprite,
39+
does_animation_loop
40+
)
41+
# Draws the animation
42+
args.outputs.sprites << [
43+
50, # X
44+
20, # Y
45+
50, # W
46+
50, # H
47+
"sprites/explosion-#{sprite_index}.png", # PATH
48+
]
49+
end
50+
51+
# reset the game on save
52+
$gtk.reset
53+
</code>
54+
</pre>
55+
</div>
56+
</div>
57+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="2">
58+
<div itemscope="itemscope" itemtype="tutorial-text">
59+
<h1>Non-looping animation</h1>
60+
Press space to start the animation!
61+
Here is how to make an animation that is triggered.
62+
</div>
63+
<div itemscope="itemscope" itemtype="tutorial-code">
64+
<pre>
65+
<code class="language-ruby" itemprop="text">
66+
def tick args
67+
# If the spacebar is pressed
68+
if args.inputs.keyboard.key_down.space
69+
# Start the animation from the current frame
70+
# Storing starting_tick in args.state means
71+
# its value will remain after every tick
72+
args.state.starting_tick = args.state.tick_count
73+
end
74+
75+
number_of_sprites = 7
76+
number_of_frames_per_sprite = 6
77+
does_animation_loop = false
78+
79+
# If the animation is complete
80+
# frame_index will return nil
81+
sprite_index = args.state.starting_tick.frame_index(
82+
number_of_sprites,
83+
number_of_frames_per_sprite,
84+
does_animation_loop
85+
)
86+
87+
# This sets which sprite index should be
88+
# displayed after the animation
89+
sprite_index ||= 0
90+
args.outputs.sprites << [
91+
50, # X
92+
20, # Y
93+
50, # W
94+
50, # H
95+
"sprites/explosion-#{sprite_index}.png", # PATH
96+
]
97+
end
98+
99+
$gtk.reset
100+
</code>
101+
</pre>
102+
</div>
103+
</div>
104+
105+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="3">
106+
<div itemscope="itemscope" itemtype="tutorial-text">
107+
<h1>Animating from Sprite Sheets</h1>
108+
The explosion is animated from a sprite sheet.
109+
The images in the sprite sheet are 32 x 32 px.
110+
</div>
111+
<div itemscope="itemscope" itemtype="tutorial-code">
112+
<pre>
113+
<code class="language-ruby" itemprop="text">
114+
def tick args
115+
starting_tick = 0
116+
number_of_sprites = 7
117+
number_of_frames_per_sprite = 6
118+
does_animation_loop = true
119+
sprite_index = starting_tick.frame_index(
120+
number_of_sprites,
121+
number_of_frames_per_sprite,
122+
does_animation_loop
123+
)
124+
125+
# The sprite should be represented as a hash
126+
# To access the tile-related parameters
127+
args.outputs.sprites << {
128+
x: 50,
129+
y: 20,
130+
w: 50,
131+
h: 50,
132+
path: 'sprites/explosion-sheet.png',
133+
# The dimensions of the tile to be cut
134+
# from the sprite sheet
135+
tile_x: 0 + (sprite_index * 32),
136+
tile_y: 0,
137+
tile_w: 32,
138+
tile_h: 32,
139+
}
140+
end
141+
142+
$gtk.reset
143+
</code>
144+
</pre>
145+
</div>
146+
</div>
147+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="4">
148+
<div itemscope="itemscope" itemtype="tutorial-text">
149+
<h1>Non-looping Animation from a Sprite Sheet</h1>
150+
A combination of the code from previous steps.
151+
</div>
152+
<div itemscope="itemscope" itemtype="tutorial-code">
153+
<pre>
154+
<code class="language-ruby" itemprop="text">
155+
def tick args
156+
if args.inputs.keyboard.key_down.space
157+
args.state.starting_tick = args.state.tick_count
158+
end
159+
160+
number_of_sprites = 7
161+
number_of_frames_per_sprite = 6
162+
does_animation_loop = false
163+
sprite_index = args.state.starting_tick.frame_index(
164+
number_of_sprites,
165+
number_of_frames_per_sprite,
166+
does_animation_loop
167+
)
168+
sprite_index ||= 0
169+
args.outputs.sprites << {
170+
x: 50,
171+
y: 20,
172+
w: 50,
173+
h: 50,
174+
path: 'sprites/explosion-sheet.png',
175+
tile_x: 0 + (sprite_index * 32),
176+
tile_y: 0,
177+
tile_w: 32,
178+
tile_h: 32,
179+
}
180+
end
181+
182+
$gtk.reset
183+
</code>
184+
</pre>
185+
</div>
186+
</div>
187+
<footer id="bottom"></footer>
188+
</body>
189+
</html>

0 commit comments

Comments
 (0)