-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
253 lines (242 loc) · 8.79 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
<!DOCTYPE html>
<html>
<head>
<title>Doom / Heretic / Hexen / Strife Sprite Animator</title>
<meta charset="UTF-8">
<meta name="description" content="Sprite animator for Doom, Heretic, Hexen, and Strife.">
<meta name="keywords" content="Sprite,Sprite Sheet,Animation,FPS,Shooting,Game,Doom,Heretic,Hexen,Strife,C#,CSS,HTML">
<meta name="author" content="Howie Hsu">
<style>
body {
background-color: #222;
color: #ddd;
font-family: sans-serif;
line-height: 150%;
}
h1, h2, h3, h4, h5, h6 {
color: #eee;
}
hr { margin-top: 3em; }
a:link, a:visited, a:hover, a:active { color: cyan; }
span {
color: white;
font-weight: bold;
}
step {
text-decoration: underline;
font-weight: bold;
font-size: 1.1em;
}
table tr:nth-child(odd) {
background-color: #333;
}
table td:first-child {
color: #eee;
font-weight: bold;
border-right: 1px solid #444;
}
table td {
padding: 0.5em;
}
ul {
display: inline-block;
text-align: left;
}
footer {
margin-top: 2em;
text-align: right;
font-style: italic;
}
.SAni_Doom_BaronOfHell_R2 {
display: inline-block;
width: 82px;
height: 79px;
background: url('Instruction/Doom_BaronOfHell.png');
animation: SKF_Doom_BaronOfHell_R2 4.114s step-end infinite;
}
@keyframes SKF_Doom_BaronOfHell_R2 {
0.00% { background-position: -82px 0px }
4.17% { background-position: -82px -79px }
8.33% { background-position: -82px -158px }
12.50% { background-position: -82px -237px }
16.67% { background-position: -82px 0px }
20.83% { background-position: -82px -79px }
25.00% { background-position: -82px -158px }
29.17% { background-position: -82px -237px }
33.33% { background-position: -82px 0px }
37.50% { background-position: -82px -79px }
41.67% { background-position: -82px -158px }
45.83% { background-position: -82px -237px }
50.00% { background-position: -82px 0px }
54.17% { background-position: -82px -79px }
58.33% { background-position: -82px -158px }
62.50% { background-position: -82px -237px }
66.67% { background-position: -82px 0px }
70.83% { background-position: -82px -79px }
75.00% { background-position: -82px -158px }
79.17% { background-position: -82px -237px }
83.33% { background-position: -82px -316px }
88.89% { background-position: -82px -395px }
94.44% { background-position: -82px -474px }
}
.SAni_Doom_BaronOfHell_R1 {
display: inline-block;
width: 82px;
height: 79px;
background: url('Instruction/Doom_BaronOfHell.png');
animation: SKF_Doom_BaronOfHell_R1 4.114s step-end infinite;
}
@keyframes SKF_Doom_BaronOfHell_R1 {
0.00% { background-position: 0px 0px }
4.17% { background-position: 0px -79px }
8.33% { background-position: 0px -158px }
12.50% { background-position: 0px -237px }
16.67% { background-position: 0px 0px }
20.83% { background-position: 0px -79px }
25.00% { background-position: 0px -158px }
29.17% { background-position: 0px -237px }
33.33% { background-position: 0px 0px }
37.50% { background-position: 0px -79px }
41.67% { background-position: 0px -158px }
45.83% { background-position: 0px -237px }
50.00% { background-position: 0px 0px }
54.17% { background-position: 0px -79px }
58.33% { background-position: 0px -158px }
62.50% { background-position: 0px -237px }
66.67% { background-position: 0px 0px }
70.83% { background-position: 0px -79px }
75.00% { background-position: 0px -158px }
79.17% { background-position: 0px -237px }
83.33% { background-position: 0px -316px }
88.89% { background-position: 0px -395px }
94.44% { background-position: 0px -474px }
}
.SAni_Doom_BaronOfHell_R8 {
display: inline-block;
width: 82px;
height: 79px;
background: url('Instruction/Doom_BaronOfHell.png');
animation: SKF_Doom_BaronOfHell_R8 4.114s step-end infinite;
}
@keyframes SKF_Doom_BaronOfHell_R8 {
0.00% { background-position: -164px 0px }
4.17% { background-position: -164px -79px }
8.33% { background-position: -164px -158px }
12.50% { background-position: -164px -237px }
16.67% { background-position: -164px 0px }
20.83% { background-position: -164px -79px }
25.00% { background-position: -164px -158px }
29.17% { background-position: -164px -237px }
33.33% { background-position: -164px 0px }
37.50% { background-position: -164px -79px }
41.67% { background-position: -164px -158px }
45.83% { background-position: -164px -237px }
50.00% { background-position: -164px 0px }
54.17% { background-position: -164px -79px }
58.33% { background-position: -164px -158px }
62.50% { background-position: -164px -237px }
66.67% { background-position: -164px 0px }
70.83% { background-position: -164px -79px }
75.00% { background-position: -164px -158px }
79.17% { background-position: -164px -237px }
83.33% { background-position: -164px -316px }
88.89% { background-position: -164px -395px }
94.44% { background-position: -164px -474px }
}
</style>
</head>
<body>
<center>
<h1>Sprite Animator for Doom, Heretic, Hexen, and Strife</h1>
<hr>
<section>
<h2>Introduction</h2>
<p>This tool converts sprites from a <a href="https://doomwiki.org/wiki/WAD">WAD</a> to a sprite sheet...</p>
<img src="Instruction/Doom_BOSS.png">
<p>a CSS animation...</p>
<div class="SAni_Doom_BaronOfHell_R2"></div>
<div class="SAni_Doom_BaronOfHell_R1"></div>
<div class="SAni_Doom_BaronOfHell_R8"></div>
<p>or an animated GIF...</p>
<img src="Instruction/Doom_BaronOfHell_R2.gif">
<img src="Instruction/Doom_BaronOfHell_R1.gif">
<img src="Instruction/Doom_BaronOfHell_R8.gif">
<p>in respect of sprite offset and required size to fit every individual sprite.</p>
</section>
<hr>
<section>
<h2>Usage Instruction</h2>
<p>There is an <span>"Example"</span> folder which contains all necessary elements to start your first attempt at making your own sprite sheet / animation.</p>
<p>
<step>Step 1:</step> Open the WAD you want to export sprites in <a href="http://slade.mancubus.net/">Slade</a>.<br>
(WAD files are limited to DOOM2.wad, TNT.wad or Plutonia.wad in this example.)
</p>
<p><step>Step 2:</step> Export all sprites as PNGs to <span>"Example/Graphics/Doom/"</span>.</p>
<img src="Instruction/Usage_1.png">
<p><step>Step 3:</step> Some of the lumps in WAD contain invalid characters for making a path, so they are exported in different names.</p>
<img src="Instruction/Usage_2.png">
<p>
<step>Step 4:</step> Run batch file <span>"Example/Graphics/Renamer_Doom.bat"</span> to correct victim files.<br>
(You might need to create your own way of renaming other files for other games.)
</p>
<p><step>Step 5:</step> Drop <span>"Example/Doom_Definition.json"</span> to <span>"Example/DoomSpriteAnimator.exe"</span></p>
<p><step>Step 6:</step> After the application ends, there is a new folder <span>"Example/Export_Doom/"</span> created with everything inside.</p>
<p>Tadaaaaaaaah!</p>
<img src="Instruction/Usage_3.png">
<img src="Instruction/Usage_4.png">
</section>
<hr>
<section>
<h2>Who Are Getting Exported?</h2>
<p>All files are exported to <span>Example/Export_Doom/</span>.</p>
<table cellspacing="0">
<tr>
<td>SpriteSheet/</td>
<td>All sprite sheets.</td>
</tr>
<tr>
<td>
SpriteSheet/_DoomAnimation.css<br>
SpriteSheet/_DoomAnimation.html
</td>
<td>All animated sprites by CSS and an HTML to view the result.</td>
</tr>
<tr>
<td>DoomFullSpriteSheet.json</td>
<td>Contains information about every sprite from file name of the sprite sheet, size of each sprite, and frame name with rotation, which is useful if you want to make your own animation based on the sprite sheet exported.</td>
</tr>
<tr>
<td>AnimatedGIF/</td>
<td>All animated GIFs.</td>
</tr>
</table>
</section>
<hr>
<section>
<h2>For More Information About How to Make My Own Animations</h2>
<p>Please open definition JSON file <span>"Example/Doom_Definition.json"</span> in a text editor.</p>
</section>
<hr>
<section>
<h2>Where to Get This</h2>
<p><a href="https://github.com/doombarracks/DoomSpriteAnimator/">GitHub</a>. Absolutely.</p>
</section>
<hr>
<section>
<h2>Possible Known Issues</h2>
<ul>
<li>Never tested on sprites with different colormaps to one sprite sheet or GIF.</li>
<li>Never tested on sprites outside 8-bit-indexed PNG images.</li>
<li>Do not use absolute paths in definition JSON file since it is designed to work on relative paths.</li>
<li>This is not a production-grade application, so there are some places skipping sanity checks, which might cause exceptions.</li>
</ul>
</section>
<hr>
<section>
<h2>Credit</h2>
<p><a href="https://github.com/mrousavy/AnimatedGif">AnimatedGif</a> library for creating animated GIF.</p>
</section>
</center>
<footer>Written by Howie Hsu on Thursday, June 21, 2018</footer>
</body>
</html>