-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (201 loc) · 16.2 KB
/
index.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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@beetpx/beetpx - v0.37.1</title><meta name="description" content="Documentation for @beetpx/beetpx"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@beetpx/beetpx - v0.37.1</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h2>@beetpx/beetpx - v0.37.1</h2></div><div class="tsd-panel tsd-typography"><a id="md:beetpx" class="tsd-anchor"></a><h1><a href="#md:beetpx">BeetPx</a></h1><p><img src="./logo/BeetPx%20logo%20(x5).png" alt="BeetPx logo"></p>
<blockquote>
<p>A TypeScript engine for pixel art browser games.</p>
</blockquote>
<hr>
<!-- TOC -->
<ul>
<li><a href="#md:getting-started">Getting Started</a></li>
<li><a href="#md:game-controls">Game Controls</a></li>
<li><a href="#md:api-documentation">API Documentation</a></li>
<li><a href="#md:development-setup">Development Setup</a></li>
<li><a href="#md:the-origin">The Origin</a></li>
<li><a href="#md:credits">Credits</a><ul>
<li><a href="#md:fonts">Fonts</a></li>
<li><a href="#md:color-palettes">Color Palettes</a></li>
</ul>
</li>
<li><a href="#md:random-notes">Random Notes</a><!-- TOC --></li>
</ul>
<hr>
<a id="md:getting-started" class="tsd-anchor"></a><h2><a href="#md:getting-started">Getting Started</a></h2><p>Add it to your project with:</p>
<pre><code class="language-shell"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-3">--save-dev</span><span class="hl-1"> </span><span class="hl-3">--save-exact</span><span class="hl-1"> </span><span class="hl-2">@beetpx/beetpx</span>
</code><button>Copy</button></pre>
<p>It might make sense in a future to drop <code>--save-exact</code> flag, but for now better
be safe than sorry – in this early phase of development the engine constantly
evolves and quite often breaking changes are introduced.</p>
<p>ℹ️ 👉 There is a simple single-file example in
<a href="examples/simple/src/beetpx.ts">./examples/simple/src/beetpx.ts</a> . Run it as
described in <a href="examples/simple/README.md">its README</a>.</p>
<p>Also, you might want to take a look at how following projects are using BeetPx:</p>
<table>
<thead>
<tr>
<th>game</th>
<th>GitHub repository</th>
<th>screenshot</th>
</tr>
</thead>
<tbody><tr>
<td><strong>Hat Escape</strong></td>
<td><a href="https://github.com/beetrootpaul/hat-escape">beetrootpaul/hat-escape</a></td>
<td><img src="misc/game-example-hat-escape.png" width="192"></td>
</tr>
<tr>
<td><strong>Dart-07</strong></td>
<td><a href="https://github.com/beetrootpaul/dart-07-beetpx">beetrootpaul/dart-07-beetpx</a></td>
<td><img src="misc/game-example-dart-07.gif" width="192"></td>
</tr>
<tr>
<td><strong>Towers of Survival</strong></td>
<td><a href="https://github.com/beetrootpaul/towers-of-survival-beetpx">beetrootpaul/towers-of-survival-beetpx</a></td>
<td><img src="misc/game-example-towers-of-survival.png" width="192"></td>
</tr>
<tr>
<td><strong>Avoid Your Past</strong></td>
<td><a href="https://github.com/beetrootpaul/avoid-your-past-beetpx">beetrootpaul/avoid-your-past-beetpx</a></td>
<td><img src="misc/game-example-avoid-your-past.png" width="192"></td>
</tr>
</tbody></table>
<a id="md:game-controls" class="tsd-anchor"></a><h2><a href="#md:game-controls">Game Controls</a></h2><p>The BeetPx engine supports a following sets of game buttons and their mappings
from physical devices:</p>
<table>
<thead>
<tr>
<th>game button</th>
<th>keyboard</th>
<th>DualSense controller</th>
<th>Xbox controller</th>
</tr>
</thead>
<tbody><tr>
<td><strong>A</strong></td>
<td><code>C</code> / <code>J</code></td>
<td>cross / triangle</td>
<td><code>A</code> / <code>Y</code></td>
</tr>
<tr>
<td><strong>B</strong></td>
<td><code>X</code> / <code>K</code></td>
<td>circle / square</td>
<td><code>B</code> / <code>X</code></td>
</tr>
<tr>
<td><strong>menu</strong></td>
<td><code>P</code> / <code>return</code> / <code>esc</code></td>
<td>menu</td>
<td>menu</td>
</tr>
<tr>
<td><strong>directions</strong></td>
<td>arrows / <code>WSAD</code></td>
<td>D-pad / sticks</td>
<td>D-pad / sticks</td>
</tr>
<tr>
<td><strong>mute/unmute</strong></td>
<td><code>M</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>full screen</strong></td>
<td><code>F</code></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<p>Other game controllers might works as well. For example, this engine has an
implemented support for <strong>8BitDo Lite 2</strong>.</p>
<p>There are also <strong>touch controls</strong> in form of GUI buttons resembling a physical
ones. You can see and use them on touch devices like e.g. an iPhone.</p>
<p>Dev controls meant to be used by the game developer themselves and gated behind
related engine config fields:</p>
<ul>
<li><strong>toggle debug</strong>:<ul>
<li>on keyboard: <code>;</code></li>
</ul>
</li>
<li><strong>toggle frame-by-frame</strong>:<ul>
<li>on keyboard: <code>,</code></li>
</ul>
</li>
<li><strong>jump to the next frame</strong> (only while in frame-by-frame mode):<ul>
<li>on keyboard: <code>.</code></li>
</ul>
</li>
</ul>
<p>To check if your controls work as expected, go to <code>examples/input-tester</code>, then
run <code>npm install</code>, then <code>npm start</code> and test your controllers in an
automatically opened browser tab.</p>
<a id="md:api-documentation" class="tsd-anchor"></a><h2><a href="#md:api-documentation">API Documentation</a></h2><p>For a nicely formatted list of API exposed by BeetPx run:</p>
<pre><code class="language-shell"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">docs</span>
</code><button>Copy</button></pre>
<p>to open it in your default browser. In case of any issues, the website which is
supposed to open is located under <a href="./docs/index.html">docs/index.html</a></p>
<p>⚠️ Please be aware the docs are very raw so far. There are mostly just a list of
exposed types and classes and constants, and nothing more. This is something to
be improved before 1.0 release.</p>
<a id="md:development-setup" class="tsd-anchor"></a><h2><a href="#md:development-setup">Development Setup</a></h2><p>This projects is developed on
<a href="https://nodejs.org/docs/latest-v18.x/api/index.html">Node.js 18</a>.</p>
<p>You might find it helpful to use
<a href="https://github.com/nvm-sh/nvm#installing-and-updating">nvm</a> in order to make
sure you use the same Node.js version as which is specified in <a href=".nvmrc">.nvmrc</a>.</p>
<p>There is no CI configured for this project. For now, it is developed by me only,
and all tests as well as the compilation happen in a
<a href=".husky/pre-commit">pre-commit hook</a>.</p>
<a id="md:the-origin" class="tsd-anchor"></a><h2><a href="#md:the-origin">The Origin</a></h2><p>My idea for BeetPx came from a good time I had working on mini games in
<a href="https://www.lexaloffle.com/pico-8.php">PICO-8</a>. That fantasy consoles hit a
very sweet spot for me: in PICO-8 you are creating low resolution pixel art
games, to do so you use a globally available simple API, and all your creations
can easily run in a desktop browser or a mobile one.</p>
<p>There are though some areas I would like differently:</p>
<ul>
<li>I prefer to use a typed language and a one which follows a standard. In PICO-8
I had to use a custom version of Lua, which meant difficulties in finding a
decent extension for an IDE of my choice.</li>
<li>PICO-8 has a token limit, which generally means a limit on how much code you
are allowed to write and an incentive to use a short language constructs as
possible rather than optimizing for a code maintenance. I understand this is a
heated topic in PICO-8 community and I also see advantages of the limited
approach – e.g. it helps to keep games low scoped and, in result finish them!
Also, it is sometimes a real fun to come with clever solutions for hunting
tokens down 😄. But when it comes to my personal preferences, I more often was
frustrated by the token limit rather then enjoying it.</li>
<li>There is a minor issues with a browser build of PICO-8 games, where the long
press of a in-game button on iOS Safari results with a system text selection
to appear and prevents from playing a game smoothly. Of course, this is
something I could work around by adjusting an HTML template exported from
PICO-8. But since I decided to create my own engine, I am able to take care of
browser iOS experience and do it the way I like.</li>
<li>Last but not least: I just wanted to have something created for public,
<a href="https://www.npmjs.com/package/@beetpx/beetpx">available on npm</a>, something I
feel I am capable to do and can be proud of later ☺️</li>
</ul>
<p>That being said, I am very grateful that PICO-8 exists and there is a big
community around it. If not for PICO-8, BeetPx would never be created 💛</p>
<a id="md:credits" class="tsd-anchor"></a><h2><a href="#md:credits">Credits</a></h2><a id="md:fonts" class="tsd-anchor"></a><h3><a href="#md:fonts">Fonts</a></h3><p>While you are able (and encouraged) to define your own font (as an
implementation of <code>BpxFont</code> interface), there are 3 fonts ready to use in BeetPx
out of the box:</p>
<ul>
<li><code>font_pico8_</code> (the default one)</li>
<li><code>font_saint11Minimal4_</code></li>
<li><code>font_saint11Minimal5_</code></li>
</ul>
<p>The first one is a font from PICO-8 fantasy console, available under a CC-0
license (public domain, free to use). For more info see:
<a href="https://www.lexaloffle.com/pico-8.php?page=faq">https://www.lexaloffle.com/pico-8.php?page=faq</a></p>
<p>Two other fonts are created by <a href="https://saint11.org/about/">Saint11</a> and
available on <a href="https://saint11.org/blog/fonts/">https://saint11.org/blog/fonts/</a> under a CC-0 license (public
domain, free to use).</p>
<a id="md:color-palettes" class="tsd-anchor"></a><h3><a href="#md:color-palettes">Color Palettes</a></h3><p>There is a PICO-8 color palette ready to use, exported as <code>rgb_p8_</code>. That
palette is created by zep and available under a CC-0 license (public domain,
free to use). For more info see: <a href="https://www.lexaloffle.com/pico-8.php?page=faq">https://www.lexaloffle.com/pico-8.php?page=faq</a></p>
<a id="md:random-notes" class="tsd-anchor"></a><h2><a href="#md:random-notes">Random Notes</a></h2><ul>
<li>Gamepad input seems to be laggy (at least on Firefox), unsuitable for fast
paced games.</li>
<li>It's good to avoid <code>.forEach</code>, <code>.reduce</code> and similar functions and use classic
<code>for</code> loops instead. The former tend to have significantly worse performance
due to an extra function call in each iteration.</li>
</ul>
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:beetpx"><span>Beet<wbr/>Px</span></a><ul><li><a href="#md:getting-started"><span>Getting <wbr/>Started</span></a></li><li><a href="#md:game-controls"><span>Game <wbr/>Controls</span></a></li><li><a href="#md:api-documentation"><span>API <wbr/>Documentation</span></a></li><li><a href="#md:development-setup"><span>Development <wbr/>Setup</span></a></li><li><a href="#md:the-origin"><span>The <wbr/>Origin</span></a></li><li><a href="#md:credits"><span>Credits</span></a></li><li><ul><li><a href="#md:fonts"><span>Fonts</span></a></li><li><a href="#md:color-palettes"><span>Color <wbr/>Palettes</span></a></li></ul></li><li><a href="#md:random-notes"><span>Random <wbr/>Notes</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>@beetpx/beetpx - v0.37.1</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><div class="tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div></body></html>