-
-
Notifications
You must be signed in to change notification settings - Fork 97
/
gameLoop.html
183 lines (119 loc) · 5.86 KB
/
gameLoop.html
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
178
179
180
181
182
183
<!DOCTYPE html>
<html>
<head>
<title>Kontra.js – Kontra.gameLoop</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents-lite.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css">
<link rel="stylesheet" href="../styles.css">
<link rel="import" href="../components/main-nav.html">
<link rel="import" href="../components/code-output.html">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-javascript.min.js"></script>
<script src="../js/kontra.js"></script>
</head>
<body>
<div class="content">
<main-nav></main-nav>
<main id="main">
<div>
<h1>Kontra​.gameLoop(​properties)</h1>
<dl>
<dt><strong>properties</strong> <em>{object}</em></dt>
<dd>Properties of the game loop.</dd>
<dt><strong>properties.update</strong> <em>{function}</em></dt>
<dd>Function called every frame to update the game.</dd>
<dt><strong>properties.render</strong> <em>{function}</em></dt>
<dd>Function called every frame to render the game.</dd>
<dt><strong>properties.fps</strong> <em>{number}</em></dt>
<dd>Optional. Desired frame rate. Defaults to 60.</dd>
<dt><strong>properties.clearCanvas</strong> <em>{boolean}</em></dt>
<dd>Optional. Clear the canvas every frame before the render function is called. Defaults true.</dd>
</dl>
<p>The game loop updates and renders the game every frame. The game loop is not run until the gameLoops <a href="#start">start()</a> function is called.</p>
<p>The game loop uses a time-based animation with a fixed dt to <a href="http://blog.sklambert.com/using-time-based-animation-implement/">avoid frame rate issues</a>. Each update call is guaranteed to equal 1/60 of a second.</p>
<p>This means that you can avoid having to do time based calculations in your update functions and instead do fixed updates.</p>
<pre><code class="language-javascript">let loop = kontra.gameLoop({
fps: 30, // run the game at 30FPS
clearCanvas: false, // don't clear the canvas each frame
update: function(dt) {
// no need to determine how many pixels you want to
// move every second and multiple by dt
// sprite.x += 180 * dt;
// instead just update by how many pixels you want
// to move every frame and the loop will ensure 60FPS
sprite.x += 3;
},
render: function() {
kontra.context.clearRect(0, 0, kontra.canvas.width, kontra.canvas.height);
sprite.render();
}
});</code></pre>
<section class="toc">
<h2 id="toc"><a href="#toc" class="section-link">Table of Contents<span aria-hidden="true">#</span></a></h2>
<ul aria-labeledby="toc">
<li>
<ul>
<li><a href="#lifecycle">Lifecycle Events</a></li></li>
</ul>
</li>
<li>
<h3 id="properties">Properties</h3>
<ul aria-labeledby="properties">
<li><a href="#isStopped">kontra.gameLoop​.isStopped</a></li>
</ul>
</li>
<li>
<h3 id="methods">Methods</h3>
<ul aria-labeledby="methods">
<li><a href="#render">kontra.gameLoop​.render()</a></li>
<li><a href="#start">kontra.gameLoop​.start()</a></li>
<li><a href="#stop">kontra.gameLoop​.stop()</a></li>
<li><a href="#update">kontra.gameLoop​.update(dt)</a></li>
</ul>
</li>
</ul>
</section>
<section>
<h2 id="lifecycle"><a href="#lifecycle" class="section-link">Lifecycle Events<span aria-hidden="true">#</span></a></h2>
<p>Every frame it will emit a <code>tick</code> event.</p>
<pre><code class="language-javascript">kontra.on('tick', () => {
// run code every frame
});</code></pre>
</section>
<section>
<h2 id="isStopped"><a href="#isStopped" class="section-link">kontra.gameLoop​.isStopped<span aria-hidden="true">#</span></a></h2>
<p><em>{boolean}</em></p>
<p>If the game loop is currently stopped.</p>
<pre><code class="language-javascript">let loop = kontra.gameLoop({ /* ... */ });
console.log(loop.isStopped); //=> true
loop.start();
console.log(loop.isStopped); //=> false
loop.stop();
console.log(loop.isStopped); //=> true</code></pre>
</section>
<section>
<h2 id="render"><a href="#render" class="section-link">kontra.gameLoop​.render()<span aria-hidden="true">#</span></a></h2>
<p>Called every frame to render the game. Put all of your games render logic here.</p>
</section>
<section>
<h2 id="start"><a href="#start" class="section-link">kontra.gameLoop​.start()<span aria-hidden="true">#</span></a></h2>
<p>Start the game loop.</p>
</section>
<section>
<h2 id="stop"><a href="#stop" class="section-link">kontra.gameLoop​.stop()<span aria-hidden="true">#</span></a></h2>
<p>Stop the game loop.</p>
</section>
<section>
<h2 id="update"><a href="#update" class="section-link">kontra.gameLoop​.update(dt)<span aria-hidden="true">#</span></a></h2>
<dl>
<dt><strong>dt</strong> <em>{number}</em></dt>
<dd>The fixed dt time of 1/60 of a frame.</dd>
</dl>
<p>Called every frame to update the game. Put all of your games update logic here.</p>
</section>
</div>
</main>
</div>
</body>
</html>