-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
361 lines (340 loc) · 13.5 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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="en">
<head>
<title>Earthbound Battle Backgrounds</title>
<link
rel="stylesheet"
href="https://unpkg.com/tachyons/css/tachyons.min.css"
/>
<link rel="stylesheet" href="assets/styles.css" />
<link
rel="icon"
type="image/png"
href="assets/favicon-32x32.png"
sizes="32x32"
/>
<link
rel="icon"
type="image/png"
href="assets/favicon-16x16.png"
sizes="16x16"
/>
<script src="assets/utils.js"></script>
<script src="assets/form.js"></script>
<script src="assets/history.js"></script>
<script src="assets/history.adapter.native.js"></script>
<script>
// var anigif_base_url = `${window.location.origin}/assets/GifW00t-28649fc/anigif/`;
var anigif_base_url = `https://www.gjtorikian.com/Earthbound-Battle-Backgrounds-JS/assets/GifW00t-28649fc/anigif/`;
</script>
<script src="assets/anigif.min.js"></script>
<style>
canvas#full {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<meta property="og:title" content="Earthbound Battle Backgrounds" />
<meta property="og:locale" content="en_US" />
<meta
name="description"
content="The battle backgrounds from the SNES RPG Earthbound/Mother 2, rendered entirely in client-side JavaScript."
/>
<meta
property="og:description"
content="The battle backgrounds from the SNES RPG Earthbound/Mother 2, rendered entirely in client-side JavaScript."
/>
<link
rel="canonical"
href="https://www.gjtorikian.com/Earthbound-Battle-Backgrounds-JS/"
/>
<meta
property="og:url"
content="https://www.gjtorikian.com/Earthbound-Battle-Backgrounds-JS/"
/>
<meta property="og:site_name" content="Earthbound Battle Backgrounds" />
<meta
property="og:image"
content="https://www.gjtorikian.com/Earthbound-Battle-Backgrounds-JS/assets/card.png"
/>
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@gjtorikian" />
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "Earthbound Battle Backgrounds",
"headline": "Garen J. Torikian",
"image": "https://www.gjtorikian.com/Earthbound-Battle-Backgrounds-JS/assets/card.png",
"description": "The battle backgrounds from the SNES RPG Earthbound/Mother 2, rendered entirely in client-side JavaScript.",
"sameAs": [
"https://twitter.com/gjtorikian",
"https://github.com/gjtorikian"
],
"url": "https://www.gjtorikian.com/Earthbound-Battle-Backgrounds-JS/"
}
</script>
</head>
<body class="w-100 sans-serif">
<section class="pv2">
<canvas-overlay></canvas-overlay>
<canvas id="main" class="center"></canvas>
</section>
<section id="everything">
<section id="canvas-container" class="mb1">
<div class="dt mw6 center pt0 pb5 pv5-m pv1-ns">
<a
class="github-button"
href="https://github.com/gjtorikian/Earthbound-Battle-Backgrounds-JS"
data-count-href="/gjtorikian/Earthbound-Battle-Backgrounds-JS/stargazers"
data-show-count
>Star</a
>
<!-- Place this tag right after the last button or just before your close body tag. -->
<script
async
defer
id="github-bjs"
src="https://buttons.github.io/buttons.js"
></script>
<a
href="https://twitter.com/share"
class="twitter-share-button"
data-url="https://gjtorikian.com/Earthbound-Battle-Backgrounds-JS/"
data-text="SMAAAASH!! Earthbound's battle backgrounds generated entirely in JavaScript"
data-via="gjtorikian"
>Tweet</a
>
<script>
!(function (d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? "http" : "https";
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
})(document, "script", "twitter-wjs");
</script>
</div>
</section>
<section id="not-canvas">
<section id="forms">
<div class="mw9 center ph3-ns">
<div class="cf ph2-ns">
<div class="fl w-100 w-50-ns pa2">
<div class="pv2">
<form class="pa2 black-80">
<label for="layer1" class="f5 b db mv2 mb2">Layer 1</label>
<select
id="layer1"
class="w-100 db h2 f5 bg-near-white ba b--sliver"
>
<!-- generated in forms.js -->
</select>
<label for="layer2" class="f5 b db mv2 mb2">Layer 2</label>
<select
id="layer2"
class="w-100 db h2 f5 bg-near-white ba b--sliver"
>
<!-- generated in forms.js -->
</select>
<label for="suggested" class="f5 b db mv2 mb2"
>Suggested Layers</label
>
<select
id="suggested"
class="w-100 db h2 f5 bg-near-white ba b--sliver"
>
<!-- generated in forms.js -->
</select>
<a
id="randomLayer"
class="pointer f5 link dim ba ph3 pv2 mv2 mb2 dib black"
>Random Layers</a
>
<a
id="endlessRandom"
class="pointer f5 link dim ba ph3 pv2 mv2 mb2 dib black"
>Endless Random (off)</a
>
</form>
</div>
</div>
<div class="fl w-100 w-50-ns pa2">
<div class="pv2">
<form class="pa2 black-80">
<label for="aspectRatio" class="f5 b db mv2 mb2"
>Aspect Ratio</label
>
<select
id="aspectRatio"
class="w-100 db h2 f5 bg-near-white ba b--sliver"
>
<option value="0">Full (8:7)</option>
<option value="16">Wide Letterbox (4:3)</option>
<option value="48">Medium Letterbox (2:1)</option>
<option value="64">Narrow Letterbox (8:3)</option>
</select>
<label for="frameskip" class="f5 b db mv2 mb2"
>Frameskip</label
>
<select
id="frameskip"
class="w-100 db h2 f5 bg-near-white ba b--sliver"
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div class="w-100 db h2 f5"></div>
<div class="w-100 db h2 f5"></div>
<a
id="fullscreen"
class="pointer f5 link dim ba ph3 pv2 mv2 mb2 dib black"
>Go fullscreen!</a
>
<a
id="gifMakerContainer"
></a
>
<span class="f6"</span>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="center pa3 ph5-ns">
<h3>What is this?</h3>
<p class="lh-copy">
Earthbound Battle Background JS is exactly what its name implies:
the battle backgrounds from the SNES RPG Earthbound/Mother 2,
rendered entirely in client-side JavaScript.
</p>
<p class="lh-copy">
For more information, see
<a
href="https://github.com/gjtorikian/Earthbound-Battle-Backgrounds-JS"
>the project's README and source code</a
>. You might also like
<a
href="https://github.com/gjtorikian/Earthbound-Battle-Backgrounds"
>the Android Live Wallpaper version</a
>.
</p>
<h3>How it works</h3>
<p class="lh-copy">
Every battle background is composed of two layers, each with 327
possible styles (including "blank"/zero). The layer styles can be
interchanged, such that
<a
href="https://gjtorikian.com/Earthbound-Battle-Backgrounds-JS/?layer1=50&layer2=300"
>Layer 1: 50 and Layer 2: 300</a
>
is the same as
<a
href="https://gjtorikian.com/Earthbound-Battle-Backgrounds-JS/?layer1=300&layer2=50"
>Layer 1: 300 and Layer 2: 50</a
>. Thus, there are C(n,r) = 52,650 possible different background
combinations. Obviously, this many don't exist in the game--the
SNES's graphical capabilities only allow it to properly render 3,176
of these combinations, and of those, only 225 are ever used.
</p>
<p class="lh-copy">
The data for each of the 327 styles is bundled within the SNES
cartridge. Tiles are constructed from various memory addresses in
Earthbound game data. Each background also has its own distortion
effect.
</p>
<h3>List of backgrounds</h3>
<p class="lh-copy">
It's pretty damn hard to find out which battle backgrounds
correspond to which enemies. You can review the list of enemies
matched with known battle backgrounds to try and get your favorite
on the <strong>Suggested Layers</strong> option. If you discover a
new one, please, make a pull request and I'll add it to the list,
giving you full credit!
</p>
<h3>Why does this exist?</h3>
<p class="lh-copy">Because it can.</p>
<p class="lh-copy">
If you happen to know Shigesato Itoi, tell him about this! I'm a
huge fan of his work.
</p>
<h3>History</h3>
<p class="lh-copy">
Around 2010, Mr. Accident of forum.starmen.net provided me with the
original battle background generation code, which was a C# project
that uses the battle backgrounds as Windows screensavers. He also
provided me with help along the way, and as far as I'm aware, he
discovered the math behind it all, including the entire Offset
function calculation.
<em>This port would be nothing without him.</em>
</p>
<p class="lh-copy">
After that, I created the Android live wallpapers in 2010. I worked
on this JavaScript version off and on throughout 2013, and finished
it in mid-December.
</p>
<p class="lh-copy">
In 2016,
<a href="https://github.com/kdex"><strong>@kdex</strong></a>
<a href="https://github.com/kdex/earthbound-battle-backgrounds"
>rewrote</a
>
much of my shitty JS into nice and clean ES2016 code, for which I am
grateful. As of
<a
href="https://github.com/gjtorikian/Earthbound-Battle-Backgrounds-JS/commit/dc877f33e5637291c7aa93c75dd1e5d615aca567"
><code>dc877f33</code></a
>, the entirety of his modifications have been brought over here.
</p>
</section>
<footer class="pv2 ph3 ph5-m ph6-l mid-gray">
<small class="f6 db tc"
>© 2018 MIT licensed. In no way endorsed or affiliated by Nintendo,
Ape, HAL Laboratory, <em>etc.</em> Please don't sue me.</small
>
</footer>
</section>
</section>
<script src="dist/index.js"></script>
<script>
setTimeout(
() => (document.querySelector("canvas-overlay").style.opacity = 0)
);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-46624461-1"]);
_gaq.push(["_trackPageview"]);
(function () {
var ga = document.createElement("script");
ga.type = "text/javascript";
ga.async = true;
ga.src =
("https:" == document.location.protocol
? "https://ssl"
: "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>