-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
142 lines (118 loc) · 8.83 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
<!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="shortcut icon" href="./favicon.ico" type="image/x-icon">
<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>
<!-- all of that up there is just crap for the site! now the real fun begins. -->
</head>
<body class="w-100 sans-serif">
<section>
<canvas-overlay></canvas-overlay>
<canvas class="center"></canvas>
</section>
<section class="mb4">
<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.github.io/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 class="bg-washed-blue center pa3 ph5-ns ios-message">
<p class="lh-copy">Note: you might be using iOS, with a browser that's not Safari. Apple <a href="http://daringfireball.net/2011/03/nitro_ios_43">intentionally impedes JavaScript performance for browsers that aren't Safari</a>. Therefore, for the best performance of this demonstration on iOS, I unfortunately suggest you use Safari, or view it on your computer. Or, <a href="http://www.idownloadblog.com/2012/07/30/nitrous/">jailbreak your device</a> to allow the code to run smoothly in <em>any</em> browser.</p>
</section>
<section>
<div class="mw9 center ph3-ns">
<div class="cf ph2-ns">
<div class="fl w-100 w-50-ns pa2">
<div class="pv4">
<form class="pa4 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>
</form>
</div>
</div>
<div class="fl w-100 w-50-ns pa2">
<div class="pv4">
<form class="pa4 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>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="center pa3 ph5-ns">
<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>.
<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="http://gjtorikian.github.io/Earthbound-Battle-Backgrounds-JS/?layer1=50&layer2=300">Layer 1: 50 and Layer 2: 300</a> is the same as <a href="http://gjtorikian.github.io/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">For a list of every possible background, <a href="./samples">visit this link</a>.</p>
<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. <strong>He is better at this than me.</strong></p>
</section>
<footer class="pv4 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>
<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>