Skip to content

Commit a706b40

Browse files
sujayvadlakondasujayvadlakonda
committed
Primitives Complete
1 parent 8bfa6f5 commit a706b40

2 files changed

Lines changed: 295 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ <h1>Tutorials</h1>
8080
<li><a href="index.html?tutorial=tutorial-hello-world.html">Hello World</a></li>
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>
83+
<li><a href="index.html?tutorial=tutorial-primitives.html">Primitives</a></li>
8384
</ul>
8485
</div>
8586
</div>

‎tutorial-primitives.html‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
<html>
2+
<head>
3+
<title>DragonRuby Game Toolkit - Primitives</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 - Primitives</h1>
11+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="1">
12+
<div itemscope="itemscope" itemtype="tutorial-text">
13+
<h1>Lines</h1>
14+
DragonRuby has several primitive structures used to render.
15+
One of these primitives is lines.
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+
# Some simple lines
23+
# X Y X2 Y2
24+
args.outputs.lines << [ 0, 0, 50, 50]
25+
args.outputs.lines << [50, 80, 80, 40]
26+
27+
# Colorful blue line
28+
args.outputs.lines << [
29+
20, # X
30+
40, # Y
31+
70, # X2
32+
90, # Y2
33+
35, # R
34+
72, # G
35+
254 # B
36+
]
37+
# [x, y, x2, y2, [r, g, b]] also works
38+
# Can be used to alias RGB values
39+
args.outputs.lines << [
40+
30, # X
41+
70, # Y
42+
60, # X2
43+
60, # Y2
44+
lavender # RGB
45+
]
46+
47+
# The alpha parameter affects transparency
48+
# 255 is the max alpha and is fully opaque
49+
# [x, y, x2, y2, r, g, b, a] or
50+
# [x, y, x2, y2, [r, g, b, a]]
51+
args.outputs.lines << [
52+
20, 20, 140, 20, # X Y X2 Y2
53+
28, 178, 54, # R G B
54+
args.state.tick_count % 255 # A
55+
]
56+
end
57+
58+
def lavender
59+
# R G B
60+
[171, 127, 251]
61+
end
62+
63+
# reset the game on save
64+
$gtk.reset
65+
</code>
66+
</pre>
67+
</div>
68+
</div>
69+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="2">
70+
<div itemscope="itemscope" itemtype="tutorial-text">
71+
<h1>Borders</h1>
72+
Borders is a primitive that draws the lines to a rectangle.
73+
</div>
74+
<div itemscope="itemscope" itemtype="tutorial-code">
75+
<pre>
76+
<code class="language-ruby" itemprop="text">
77+
def tick args
78+
# A simple border
79+
# X Y W H
80+
args.outputs.borders << [20, 20, 70, 50]
81+
82+
# A colorful border
83+
args.outputs.borders << [
84+
60, # X
85+
30, # Y
86+
70, # W
87+
50, # H
88+
lavender # RGB
89+
]
90+
91+
# A colorful fading border
92+
args.outputs.borders << [
93+
50, # X
94+
10, # Y
95+
50, # W
96+
40, # H
97+
fading_crimson(args) # RGBA
98+
]
99+
end
100+
101+
def lavender
102+
[171, 127, 251]
103+
end
104+
105+
def fading_crimson args
106+
# R G B
107+
[175, 40, 91,
108+
# Alpha descending from 255
109+
255 - args.state.tick_count % 255]
110+
end
111+
112+
$gtk.reset
113+
</code>
114+
</pre>
115+
</div>
116+
</div>
117+
118+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="3">
119+
<div itemscope="itemscope" itemtype="tutorial-text">
120+
<h1>Solids</h1>
121+
Solids are borders that are filled in.
122+
</div>
123+
<div itemscope="itemscope" itemtype="tutorial-code">
124+
<pre>
125+
<code class="language-ruby" itemprop="text">
126+
def tick args
127+
# A simple solid
128+
# X Y W H
129+
args.outputs.solids << [20, 20, 70, 50]
130+
131+
# A colorful solid
132+
args.outputs.solids << [
133+
60, # X
134+
30, # Y
135+
70, # W
136+
50, # H
137+
lavender # RGB
138+
]
139+
140+
# A colorful fading solid
141+
args.outputs.solids << [
142+
50, # X
143+
10, # Y
144+
50, # W
145+
40, # H
146+
fading_crimson(args) # RGBA
147+
]
148+
end
149+
150+
def lavender
151+
[171, 127, 251]
152+
end
153+
154+
def fading_crimson args
155+
[175, 40, 91,
156+
255 - args.state.tick_count % 255]
157+
end
158+
159+
$gtk.reset
160+
</code>
161+
</pre>
162+
</div>
163+
</div>
164+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="4">
165+
<div itemscope="itemscope" itemtype="tutorial-text">
166+
<h1>Labels</h1>
167+
Labels are a primitive that show text.
168+
</div>
169+
<div itemscope="itemscope" itemtype="tutorial-code">
170+
<pre>
171+
<code class="language-ruby" itemprop="text">
172+
def tick args
173+
# A simple label
174+
# X Y TEXT
175+
args.outputs.labels << [5, 85, 'Simple']
176+
177+
# A small label
178+
# X Y TEXT SIZE
179+
args.outputs.labels << [5, 65, 'Small', -7]
180+
181+
# A big label
182+
# X Y TEXT SIZE
183+
args.outputs.labels << [5, 55, 'Big', 7]
184+
185+
# A left-aligned label
186+
args.outputs.labels << [
187+
args.grid.left.shift_right(5), # X
188+
args.grid.bottom.shift_up(10), # Y
189+
'Left', # TEXT
190+
-6, # SIZE
191+
0 # ALIGN
192+
]
193+
194+
# A center-aligned label
195+
args.outputs.labels << [
196+
args.grid.center.x, # X
197+
args.grid.bottom.shift_up(10), # Y
198+
'Center', # TEXT
199+
-6, # SIZE
200+
1 # ALIGN
201+
]
202+
203+
# A right-aligned label
204+
args.outputs.labels << [
205+
args.grid.right.shift_left(5), # X
206+
args.grid.bottom.shift_up(10), # Y
207+
'Right', # TEXT
208+
-6, # SIZE
209+
2 # ALIGN
210+
]
211+
212+
# A colorful label
213+
args.outputs.labels << [
214+
args.grid.center.x.shift_right(10), # X
215+
args.grid.center.y.shift_up(10), # Y
216+
'Color', # TEXT
217+
-3, # SIZE
218+
0, # ALIGN
219+
lavender # RGB
220+
]
221+
222+
# A fading label
223+
args.outputs.labels << [
224+
args.grid.center.x.shift_right(10), # X
225+
args.grid.center.y.shift_down(10), # Y
226+
'Fade', # TEXT
227+
-3, # SIZE
228+
0, # ALIGN
229+
fading_crimson(args) # RGBA
230+
]
231+
end
232+
233+
def lavender
234+
[171, 127, 251]
235+
end
236+
237+
def fading_crimson args
238+
[175, 40, 91,
239+
255 - args.state.tick_count % 255]
240+
end
241+
242+
$gtk.reset
243+
</code>
244+
</pre>
245+
</div>
246+
</div>
247+
<div itemscope="itemscope" itemtype="tutorial-step" data-step-number="5">
248+
<div itemscope="itemscope" itemtype="tutorial-text">
249+
<h1>Sprites</h1>
250+
Sprites are used for images and complex shapes.
251+
</div>
252+
<div itemscope="itemscope" itemtype="tutorial-code">
253+
<pre>
254+
<code class="language-ruby" itemprop="text">
255+
def tick args
256+
# A simple sprite
257+
args.outputs.sprites << [
258+
10, # X
259+
25, # Y
260+
40, # W
261+
40, # H
262+
'sprites/isometric-violet.png' # PATH
263+
]
264+
265+
# A rotating sprite
266+
args.outputs.sprites << [
267+
60, # X
268+
25, # Y
269+
40, # W
270+
40, # H
271+
'sprites/circle-blue.png', # PATH
272+
args.state.tick_count # ANGLE
273+
]
274+
275+
# A fading sprite
276+
args.outputs.sprites << [
277+
110, # X
278+
25, # Y
279+
40, # W
280+
40, # H
281+
'sprites/hexagon-orange.png', # PATH
282+
0, # ANGLE
283+
255 - args.state.tick_count % 255 # ALPHA
284+
]
285+
end
286+
287+
$gtk.reset
288+
</code>
289+
</pre>
290+
</div>
291+
</div>
292+
<footer id="bottom"></footer>
293+
</body>
294+
</html>

0 commit comments

Comments
 (0)