1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Copyright (C) 2017-2023 David Thompson dthompson2@worcester.edu
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
A copy of the license is also available from the Free Software
Foundation Web site at http://www.gnu.org/licenses/fdl.html.
* Chickadee: (chickadee). Game programming toolkit for Guile.
The document was typeset with
http://www.texinfo.org/ (GNU Texinfo).
-->
<!-- Created by GNU Texinfo 6.7, http://www.gnu.org/software/texinfo/ -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Getting Started (The Chickadee Game Toolkit)</title>
<meta name="description" content="Getting Started (The Chickadee Game Toolkit)" />
<meta name="keywords" content="Getting Started (The Chickadee Game Toolkit)" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="Generator" content="makeinfo" />
<link href="index.html" rel="start" title="Top" />
<link href="Index.html" rel="index" title="Index" />
<link href="index.html#SEC_Contents" rel="contents" title="Table of Contents" />
<link href="index.html" rel="up" title="Top" />
<link href="Command-Line-Interface.html" rel="next" title="Command Line Interface" />
<link href="Requirements.html" rel="prev" title="Requirements" />
<style type="text/css">
<!--
a.summary-letter {text-decoration: none}
blockquote.indentedblock {margin-right: 0em}
div.display {margin-left: 3.2em}
div.example {margin-left: 3.2em}
div.lisp {margin-left: 3.2em}
kbd {font-style: oblique}
pre.display {font-family: inherit}
pre.format {font-family: inherit}
pre.menu-comment {font-family: serif}
pre.menu-preformatted {font-family: serif}
span.nolinebreak {white-space: nowrap}
span.roman {font-family: initial; font-weight: normal}
span.sansserif {font-family: sans-serif; font-weight: normal}
ul.no-bullet {list-style: none}
@media (min-width: 1140px) {
body {
margin-left: 14rem;
margin-right: 4rem;
max-width: 52rem;
}
}
@media (min-width: 800px) and (max-width: 1140px) {
body {
margin-left: 6rem;
margin-right: 4rem;
max-width: 52rem;
}
}
@media (max-width: 800px) {
body {
margin: 1rem;
}
}
-->
</style>
<link rel="stylesheet" type="text/css" href="https://dthompson.us/css/dthompson.css" />
</head>
<body lang="en">
<span id="Getting-Started"></span><div class="header">
<p>
Next: <a href="Command-Line-Interface.html" accesskey="n" rel="next">Command Line Interface</a>, Previous: <a href="Installation.html" accesskey="p" rel="prev">Installation</a>, Up: <a href="index.html" accesskey="u" rel="up">Top</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html" title="Index" rel="index">Index</a>]</p>
</div>
<hr />
<span id="Getting-Started-1"></span><h2 class="chapter">2 Getting Started</h2>
<p>One of the simplest programs we can make with Chickadee is rendering
the text “Hello, world” on screen. Here’s what that looks like:
</p>
<div class="lisp">
<pre class="lisp"><span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-open">(</span><span class="syntax-symbol">draw</span> <span class="syntax-symbol">alpha</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">draw-text</span> <span class="syntax-string">"Hello, world!"</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">64.0</span> <span class="syntax-symbol">240.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
</pre></div>
<p>The <code>draw</code> procedure is called frequently to draw the game scene.
For the sake of simplicity, we will ignore the <code>alpha</code> variable
in this tutorial.
</p>
<p>To run this program, we’ll use the <code>chickadee play</code> command:
</p>
<div class="example">
<pre class="example">chickadee play hello.scm
</pre></div>
<p>This is a good start, but it’s boring. Let’s make the text move!
</p>
<div class="lisp">
<pre class="lisp"><span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-symbol">position</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">0.0</span> <span class="syntax-symbol">240.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-open">(</span><span class="syntax-symbol">draw</span> <span class="syntax-symbol">alpha</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">draw-text</span> <span class="syntax-string">"Hello, world!"</span> <span class="syntax-symbol">position</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-open">(</span><span class="syntax-symbol">update</span> <span class="syntax-symbol">dt</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">set-vec2-x!</span> <span class="syntax-symbol">position</span> <span class="syntax-open">(</span><span class="syntax-symbol">+</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2-x</span> <span class="syntax-symbol">position</span><span class="syntax-close">)</span> <span class="syntax-open">(</span><span class="syntax-symbol">*</span> <span class="syntax-symbol">100.0</span> <span class="syntax-symbol">dt</span><span class="syntax-close">)</span><span class="syntax-close">)</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
</pre></div>
<p>The <code>vec2</code> type is used to store 2D coordinates
(see <a href="Vectors.html">Vectors</a>.) A variable named <code>position</code> contains the
position where the text should be rendered. A new hook called
<code>update</code> has been added to handle the animation. This hook is
called frequently to update the state of the game. The variable
<code>dt</code> (short for “delta-time”) contains the amount of time that
has passed since the last update, in seconds. Putting it all
together, this update procedure is incrementing the x coordinate of
the position by 100 pixels per second.
</p>
<p>This is neat, but after a few seconds the text moves off the screen
completely, never to be seen again. It would be better if the text
bounced back and forth against the sides of the window.
</p>
<div class="lisp">
<pre class="lisp"><span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-symbol">position</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">0.0</span> <span class="syntax-symbol">240.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-open">(</span><span class="syntax-symbol">draw</span> <span class="syntax-symbol">alpha</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">draw-text</span> <span class="syntax-string">"Hello, world!"</span> <span class="syntax-symbol">position</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-open">(</span><span class="syntax-symbol">update</span> <span class="syntax-symbol">dt</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">update-agenda</span> <span class="syntax-symbol">dt</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-open">(</span><span class="syntax-symbol">update-x</span> <span class="syntax-symbol">x</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">set-vec2-x!</span> <span class="syntax-symbol">position</span> <span class="syntax-symbol">x</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-special">let</span> <span class="syntax-open">(</span><span class="syntax-open">(</span><span class="syntax-symbol">start</span> <span class="syntax-symbol">0.0</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">end</span> <span class="syntax-symbol">536.0</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">duration</span> <span class="syntax-symbol">4.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">script</span>
<span class="syntax-open">(</span><span class="syntax-symbol">while</span> <span class="syntax-symbol">#t</span>
<span class="syntax-open">(</span><span class="syntax-symbol">tween</span> <span class="syntax-symbol">duration</span> <span class="syntax-symbol">start</span> <span class="syntax-symbol">end</span> <span class="syntax-symbol">update-x</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">tween</span> <span class="syntax-symbol">duration</span> <span class="syntax-symbol">end</span> <span class="syntax-symbol">start</span> <span class="syntax-symbol">update-x</span><span class="syntax-close">)</span><span class="syntax-close">)</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
</pre></div>
<p>This final example uses Chickadee’s scripting features
(see <a href="Scripting.html">Scripting</a>) to bounce the text between the edges of the window
indefinitely using the handy <code>tween</code> procedure. The only thing
the <code>update</code> procedure needs to do now is advance the clock of
the “agenda” (the thing that runs scripts.) The script takes care
of the rest.
</p>
<p>This quick tutorial has hopefully given you a taste of what you can do
with Chickadee. The rest of this manual gets into all of the details
that were glossed over, and much more. Try rendering a sprite,
playing a sound effect, or handling keyboard input. But most
importantly: Have fun!
</p>
<hr />
<div class="header">
<p>
Next: <a href="Command-Line-Interface.html" accesskey="n" rel="next">Command Line Interface</a>, Previous: <a href="Installation.html" accesskey="p" rel="prev">Installation</a>, Up: <a href="index.html" accesskey="u" rel="up">Top</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html" title="Index" rel="index">Index</a>]</p>
</div>
</body>
</html>
|
