This repository has been archived by the owner on Jul 18, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 29
/
editor.html
330 lines (315 loc) · 17.1 KB
/
editor.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
<html>
<head>
<title>Infringe Royale Editor</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<link rel='icon' href='img/home/icon.png'>
<link rel='stylesheet' type='text/css' href='css/editor.css'>
</head>
<body id='body' style='display: none;'>
<!-- Warning -->
<div id='warn' class='warn' style='display:none'></div>
<!-- Error -->
<div id='error' class='container-center' style='display:none'>
<div id ='error-message' class='error'></div>
</div>
<!-- File -->
<div id="file" style='display:none'>
<b>Open Game File...</b>
<div><input type="file" id="file-input"/></div>
<div class="file-error" id="file-error">...</div>
<div class="ek-info">
<b>This EK is provided as is for anyone interested in it.</b><br>
You can download and open any of the existing levels from the site like this:<br>
<a>http://www.infernoplus.com/royale/game/world-1</a><br>
<a>http://www.infernoplus.com/royale/game/world-l1</a><br>
<a>http://www.infernoplus.com/royale/game/world-p</a><br>
<br>
A fairly blank map is provided for you to start from if you wish to try and make a map:<br>
<a>http://www.infernoplus.com/royale/game/blank</a><br><br>
This EK is intended for those somewhat knowledgeable of programming/modding.<br>
All values listed as 'byte' or 'bit' are in unsigned decimal format.<br>
Which means a byte is a value from 0 to 255 and so on.<br><br>
All zones should have a height of 16. This is a general style rule for the game.<br>
If you plan to try and make a map, please study my maps carefully!<br><br>
If you manage to make a level that looks solid, tweet it at me.<br>
I will only be adding the best ones. Remember to save often and good luck!<br><br>
Oh and please don't directly recreate any levels from <i>other games</i>.<br>
Make your creations your own.
</div>
</div>
<!-- Editor -->
<div id='editor' class="box" style='display:none'>
<div id='editor-top' class="row header panel-top unselectable">
<span id='editor-top-world' class="toolbar-button-top left">World</span>
<span id='editor-top-level' class="toolbar-button-top left">Level</span>
<span id='editor-top-zone' class="toolbar-button-top left">Zone</span>
<span id='editor-top-tile' class="toolbar-button-top left">Tile</span>
<span id='editor-top-object' class="toolbar-button-top left">Object</span>
<span id='editor-top-warp' class="toolbar-button-top left">Warp</span>
<span id='editor-top-copy' class="toolbar-button-top left">Clone</span>
<span id='editor-top-rep' class="toolbar-button-top left">Replace</span>
<span id='editor-top-ref' class="toolbar-button-top left">Reference</span>
<span id='editor-top-about' class="toolbar-button-top right">About</span>
<span id='editor-top-save' class="toolbar-button-top right">Save</span>
</div>
<div id='editor-middle' class="row content">
<div id='editor-list' class="panel-right">
</div>
<div id='editor-display' class='panel-left unselectable' oncontextmenu="return false">
<canvas id="editor-display-canvas" width="320" height="240">
Your browser doesn't appear to support the <code><canvas></code> element.
</canvas>
</div>
</div>
<div id='editor-bottom' class="row footer">
<!-- World Tool -->
<div id='editor-tool-world' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>Initial Level</div><div class='tool-type'>byte</div>
<input id='editor-tool-world-initial' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div id='editor-tool-world-apply' class="toolbar-button-top">Apply</div>
<div id='editor-tool-world-new' class="toolbar-button-top">+ Level</div>
</div>
</div>
<!-- Level Tool -->
<div id='editor-tool-level' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>ID</div><div class='tool-type'>byte</div>
<input id='editor-tool-level-id' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Name</div><div class='tool-type'>string</div>
<input id='editor-tool-level-name' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Initial Zone</div><div class='tool-type'>byte</div>
<input id='editor-tool-level-initial' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div id='editor-tool-level-apply' class="toolbar-button-top">Apply</div>
<div id='editor-tool-level-new' class="toolbar-button-top">+ Zone</div>
</div>
</div>
<!-- Zone Tool -->
<div id='editor-tool-zone' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>ID</div><div class='tool-type'>byte</div>
<input id='editor-tool-zone-id' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Initial Position</div><div class='tool-type'>shor2</div>
<input id='editor-tool-zone-initial' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class='tool-var'>Color</div><div class='tool-type'>html color</div>
<input id='editor-tool-zone-color' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Music</div><div class='tool-type'>string path</div>
<input id='editor-tool-zone-music' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class='tool-var'>Width</div><div class='tool-type'>byte</div>
<input id='editor-tool-zone-width' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Height</div><div class='tool-type'>byte</div>
<input id='editor-tool-zone-height' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div id='editor-tool-zone-resize' class="toolbar-button-top">Resize</div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div id='editor-tool-zone-shiftx' class="toolbar-button-top">Shift X</div>
</div>
<div class='tool-box'>
<div id='editor-tool-zone-unshiftx' class="toolbar-button-top">Unshift X</div>
</div>
<div class='tool-box'>
<div id='editor-tool-zone-shifty' class="toolbar-button-top">Shift Y</div>
</div>
<div class='tool-box'>
<div id='editor-tool-zone-unshifty' class="toolbar-button-top">Unshift Y</div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div id='editor-tool-zone-apply' class="toolbar-button-top">Apply</div>
</div>
</div>
<!-- Tile Tool -->
<div id='editor-tool-tile' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>Tile Data</div><div class='tool-type'>td32</div>
<div id='editor-tool-tile-raw' class="tool-val-im"></div>
</div>
<div class='tool-box'>
<div class='tool-var'>Definition Name</div><div class='tool-type'>string</div>
<div id='editor-tool-tile-name' class="tool-val-im"></div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class='tool-var'>Sprite Index</div><div class='tool-type'>11bit int</div>
<input id='editor-tool-tile-index' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Bump State</div><div class='tool-type'>4bit int</div>
<input id='editor-tool-tile-bump' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Depth</div><div class='tool-type'>1 bit</div>
<input id='editor-tool-tile-depth' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Tile Definition</div><div class='tool-type'>byte</div>
<input id='editor-tool-tile-def' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Extra Data</div><div class='tool-type'>byte</div>
<input id='editor-tool-tile-data' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box' style='font-size: 80%'>
<div class="tool-val-im">Middle click copies a tiles data, left click paints</div>
<div class="tool-val-im">Sprite index defines the visual of the tile.</div>
<div class="tool-val-im">Bump state should always be 0 unless you have some insane reason.</div>
<div class="tool-val-im">Depth 0 is background, Depth 1 is foreground. Warp pipe/item blocks should generally be foreground.</div>
<div class="tool-val-im">Tile Definition defines the physical/interactive properties of a tile. Solid ground is 1, item block is 17, etc...</div>
<div class="tool-val-im">Some blocks need 'extra data' to function. An item block for example, needs the extra data 81 to put a mushroom in it.</div>
<div class="tool-val-im">See doc for more info: <a href='./tile.txt'>tile.txt</a></div>
</div>
</div>
<!-- Object Tool -->
<div id='editor-tool-object' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>Type</div><div class='tool-type'>byte</div>
<input id='editor-tool-object-type' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Name</div><div class='tool-type'>string</div>
<div id='editor-tool-object-name' class="tool-val-im"></div>
</div>
<div class='tool-box'>
<div class='tool-var'>Position</div><div class='tool-type'>shor2</div>
<div id='editor-tool-object-pos' class="tool-val-im"></div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class='tool-var'>Params</div><div class='tool-type'>string[]</div>
<input id='editor-tool-object-param' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class="tool-val-im">Left click selects, middle click creates new, wasd keys to move, delete to delete.</div>
<div class="tool-val-im">See doc for more info: <a href='./object.txt'>object.txt</a></div>
</div>
</div>
<!-- Warp Tool -->
<div id='editor-tool-warp' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>ID</div><div class='tool-type'>byte</div>
<input id='editor-tool-warp-id' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Position</div><div class='tool-type'>shor2</div>
<div id='editor-tool-warp-pos' class="tool-val-im"></div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class='tool-var'>Extra Data</div><div class='tool-type'>byte</div>
<input id='editor-tool-warp-data' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class="tool-val-im">Left click selects, middle click creates new, wasd keys to move, delete to delete.</div>
<div class="tool-val-im">For tiles that have a warp, the extra data of that tile should match the id of the warp point.</div>
<div class="tool-val-im">Example: A warp pipe with extra data 32 will warp to the warp point in that level with the id 32.</div>
<div class="tool-val-im">The extra data of the warp point defines the animation state.</div>
<div class="tool-val-im">0 is default, (1, 2, 3, 4) are warp pipe (up, down, left, right) respectively.</div>
</div>
</div>
<!-- Copy Tool -->
<div id='editor-tool-copy' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>Copy Data</div><div class='tool-type'>td32[]</div>
<div id='editor-tool-copy-raw' class="tool-val-im"></div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class='tool-var'>Width</div><div class='tool-type'>int</div>
<input id='editor-tool-copy-width' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Height</div><div class='tool-type'>int</div>
<input id='editor-tool-copy-height' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Overwrite</div><div class='tool-type'>td32</div>
<input id='editor-tool-copy-over' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class="tool-val-im">Middle click to copy an area, left click to paste.</div>
<div class="tool-val-im">Pasting will only overwrite tiles with the given 'ovewrite value'.</div>
<div class="tool-val-im">Default td32 value for air is 30 so set overwrite to 30 generally.</div>
</div>
</div>
<!-- Rep Tool -->
<div id='editor-tool-rep' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>Target</div><div class='tool-type'>td32</div>
<input id='editor-tool-rep-target' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Replacement</div><div class='tool-type'>td32</div>
<input id='editor-tool-rep-replace' type='text' class="tool-val"/>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div id='editor-tool-rep-apply' class="toolbar-button-top">Apply</div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class="tool-val-im">Replaces all tiles that match the td32 of 'target' with 'replacement'.</div>
</div>
</div>
<!-- Ref Tool -->
<div id='editor-tool-ref' class='tool-container' style='display: none'>
<div class='tool-box'>
<div class='tool-var'>IMG Url</div><div class='tool-type'>string url</div>
<input id='editor-tool-ref-img' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div id='editor-tool-ref-load' class="toolbar-button-top">Load</div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class='tool-var'>Offset X</div><div class='tool-type'>int pixels</div>
<input id='editor-tool-ref-x' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div class='tool-var'>Offset Y</div><div class='tool-type'>int pixels</div>
<input id='editor-tool-ref-y' type='text' class="tool-val"/>
</div>
<div class='tool-box'>
<div id='editor-tool-ref-apply' class="toolbar-button-top">Apply</div>
</div>
<div class='tool-div'></div>
<div class='tool-box'>
<div class="tool-val-im">Press G to show or hide your reference image.</div>
</div>
</div>
</div>
</div>
<!-- Libs -->
<script src='js/lib/jquery/jquery-3.1.1.min.js'></script>
<!-- Core -->
<script src='js/editor.min.js?v=2.1.2'></script>
</body>
</html>