-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
169 lines (153 loc) · 8.74 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
<!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. -->
<script type="text/javascript">
var require = {
baseUrl: "src"
};
</script>
<script data-main="read_bgs_dat" src="src/vendor/require.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-5">
<div id="loading-indicator" class="spinner">
<div class="cube1"></div>
<div class="cube2"></div>
</div>
<canvas id="ebbb-holder" class="hidden" width="256" height="256">
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">
<option>1</option>
<option>2</option>
</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">Fullscreen (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>
</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 />
<iframe src="http://ghbtns.com/github-btn.html?user=gjtorikian&repo=Earthbound-Battle-Backgrounds-JS&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=gjtorikian&repo=Earthbound-Battle-Backgrounds-JS&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" 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];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</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--they only <em>potentially</em> exist.</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>About three years ago, 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>
</div>
</div>
<div class="footer">
<p>©2014. MIT licensed. In no way endorsed or affiliated by Nintendo, Ape, HAL Laboratory, <em>e.t.c.</em> Please don't sue me.</p>
</div>
</div>
<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>