-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
167 lines (150 loc) · 9.35 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
<!DOCTYPE html>
<html>
<head>
<title>Earthbound Battle Backgrounds</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.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>
<div class="container">
<div class="row">
<div class="col-xs-5">
<canvas-overlay></canvas-overlay>
<canvas></canvas>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-sm-6">
<h6>Change Background Animation</h6>
<div class="row">
<div class="col-sm-6">
<label for="layer1" class="control-label">Layer 1</label>
<div>
<select id="layer1" class="form-control">
<!-- generated in forms.js -->
</select>
</div>
</div>
<div class="col-sm-6">
<label for="layer2" class="control-label">Layer 2</label>
<div>
<select id="layer2" class="form-control">
<!-- generated in forms.js -->
</select>
</div>
</div>
</div>
<div>
<label for="suggested" class="control-label">Suggested Layers</label>
<div>
<select id="suggested" class="form-control">
<!-- generated in forms.js -->
</select>
</div>
</div>
<div>
<div class="btn-random-container">
<button type="button" id="randomLayer" class="btn btn-default">Random Layers</button>
</div>
</div>
</div>
<div class="col-sm-6">
<h6>Change Presentation</h6>
<div>
<label for="aspectRatio" class="control-label">Aspect Ratio</label>
<div>
<select id="aspectRatio" class="form-control">
<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>
</div>
</div>
<div>
<label for="frameskip" class="control-label">Frameskip</label>
<div>
<select id="frameskip" class="form-control">
<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>
</div>
<div>
<div class="btn-random-container">
<button type="button" id="fullscreen" class="btn btn-default">Complete fullscreen</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row hidden" id="ios-message">
<div class="col-xs-12 alert alert-warning">
<p>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>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<hr />
<!-- Place this tag where you want the button to render. -->
<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>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<hr />
<p>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>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>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>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>For a list of every possible background, <a href="./samples">visit this link</a>.</p>
<p>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>Because it can.</p>
<p>If you happen to know Shigesato Itoi, tell him about this! I'm a huge fan of his work.</p>
<h3>History</h3>
<p>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>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>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>
</div>
</div>
<div class="footer">
<p>©2017. MIT licensed. In no way endorsed or affiliated by Nintendo, Ape, HAL Laboratory, <em>etc.</em> Please don't sue me.</p>
</div>
</div>
<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>