-
Notifications
You must be signed in to change notification settings - Fork 0
/
source_index.html
executable file
·742 lines (690 loc) · 21.3 KB
/
source_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
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
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>Universal LPC Sprite Sheet Character Generator</title>
<link rel="stylesheet" type="text/css" href="chargen.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.3/underscore.string.min.js"></script>
<script type="text/javascript" src="jhash-2.1.min.js"></script>
<script type="text/javascript" src="sources/custom-animations.js"></script>
<script type="text/javascript" src="sources/chargen.js"></script>
</head>
<body>
<form id="customizeChar">
<div id="controls">
<h1>Universal LPC Spritesheet Generator</h1>
<p>Free/Libre pixel art sprites from the <a href="lpc.opengameart.org">Liberated Pixel Cup</a> and <a href="https://opengameart.org/content/lpc-collection">OpenGameArt.org</a>. License: <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA 3.0</a>. You must <a id="scroll-to-credits" href="#">credit the authors of this artwork.</a></p>
<div>
<label class="control-label">Download:</label>
<a id="saveAsPNG"><input type="button" value="Image (PNG)"></a>
<button type="button" class="generateSheetCreditsTxt">Credits (text)</button>
<button type="button" class="generateSheetCreditsCsv">Credits (CSV)</button>
</div>
<div>
<label class="control-label">Edit:</label>
<button type="button" id="resetAll">Reset all</button>
<button type="button" class="replacePinkMask">Replace Mask (pink)</button>
</div>
<div>
<label class="control-label">View:</label>
<button type="button" id="collapse">Collapse All</button>
<button type="button" id="expand">Expand Selected</button>
<label for="displayMode-compact"><input type="checkbox" name="displayMode" value="compact" id="displayMode-compact"> Compact Display</label>
</div>
<div>
<label class="control-label" for="searchbox">Search: </label><input type="search" id="searchbox" name="" placeholder="Search" />
</div>
</div>
<section id="chooser">
<h3>Body</h3>
<ul>
<li>
<!-- Body types -->
<span class="expanded">Body type</span>
<ul style="display:block;">
<li class="noPreview">
<input type="radio" id="sex-male" name="sex" checked>
<label for="sex-male">Male</label>
</li>
<li class="noPreview">
<input type="radio" id="sex-female" name="sex">
<label for="sex-female">Female</label>
</li>
<li class="noPreview">
<input type="radio" id="sex-teen" name="sex">
<label for="sex-teen">Teen</label>
</li>
<li class="noPreview">
<input type="radio" id="sex-child" name="sex">
<label for="sex-child">Child</label>
</li>
<li class="noPreview">
<input type="radio" id="sex-pregnant" name="sex">
<label for="sex-pregnant">Pregnant</label>
</li>
<li class="noPreview">
<input type="radio" id="sex-muscular" name="sex">
<label for="sex-muscular">Muscular</label>
</li>
</ul>
</li>
<!-- Shadow -->
div_sheet_shadow
<!-- Bodies -->
div_sheet_body
<li>
<span class="condensed">Special</span>
<ul>
div_sheet_body_zombie
div_sheet_body_skeleton
</ul>
</li>
<!-- Wounds -->
<li data-required="">
<span class="condensed">Wounds</span>
<ul>
div_sheet_wound_arm
div_sheet_wound_brain
div_sheet_wound_ribs
div_sheet_wound_eye
div_sheet_wound_mouth
</ul>
</li>
<li data-required="male,female,muscular,pregnant">
<span class="condensed">Prostheses</span>
<ul>
div_sheet_prosthesis_hook
div_sheet_prosthesis_peg_leg
</ul>
</li>
<li>
<span class="condensed">Lizard</span>
<ul>
div_sheet_wings_lizard
div_sheet_tail_lizard
</ul>
</li>
</ul>
<h3>Head</h3>
<ul>
<!-- Heads -->
<li>
<span class="condensed">Heads</span>
<ul>
div_sheet_heads_human_child
div_sheet_heads_human_female
div_sheet_heads_human_male
div_sheet_heads_human_female_elderly
div_sheet_heads_human_male_elderly
div_sheet_heads_boarman
div_sheet_heads_boarman_child
div_sheet_heads_pig
div_sheet_heads_pig_child
div_sheet_heads_sheep
div_sheet_heads_sheep_child
div_sheet_heads_minotaur
div_sheet_heads_minotaur_female
div_sheet_heads_minotaur_child
div_sheet_heads_wartotaur
div_sheet_heads_wolf_child
div_sheet_heads_wolf_female
div_sheet_heads_wolf_male
div_sheet_heads_rabbit
div_sheet_heads_rabbit_child
div_sheet_heads_rat
div_sheet_heads_rat_child
div_sheet_heads_mouse
div_sheet_heads_mouse_child
div_sheet_heads_lizard_child
div_sheet_heads_lizard_female
div_sheet_heads_lizard_male
div_sheet_heads_orc_child
div_sheet_heads_orc_female
div_sheet_heads_orc_male
div_sheet_heads_goblin
div_sheet_heads_goblin_child
div_sheet_heads_alien
div_sheet_heads_troll
div_sheet_heads_troll_child
div_sheet_heads_skeleton
div_sheet_heads_zombie
div_sheet_heads_jack
div_sheet_heads_vampire
div_sheet_heads_frankenstein
</ul>
</li>
<!-- Ears -->
<li>
<span class="condensed">Ears</span>
<ul>
div_sheet_head_ears_big
div_sheet_head_ears_elven
div_sheet_head_ears_long
</ul>
</li>
<!-- Nose -->
<li>
<span class="condensed">Nose</span>
<ul>
div_sheet_head_nose_big
div_sheet_head_nose_button
div_sheet_head_nose_straight
div_sheet_head_nose_elderly
</ul>
</li>
<!-- Eyes -->
div_sheet_eyes
div_sheet_head_wrinkles
<!-- Beards -->
<li data-required="male,muscular">
<span class="condensed">Beards</span>
<ul>
div_sheet_beards_beard
div_sheet_beards_bigstache
div_sheet_beards_mustache
div_sheet_beards_winter
</ul>
</li>
<!-- Hair -->
<li>
<span class="condensed">Hair</span>
<ul>
<li><span class="condensed">afro</span><ul>
div_sheet_hair_afro
div_sheet_hair_natural
div_sheet_hair_dreadlocks_short
div_sheet_hair_twists_fade
div_sheet_hair_twists_straight
div_sheet_hair_dreadlocks_long
div_sheet_hair_flat_top_straight
div_sheet_hair_flat_top_fade
div_sheet_hair_cornrows
</ul></li>
<li><span class="condensed">curly</span><ul>
div_sheet_hair_jewfro
div_sheet_hair_curly_short
div_sheet_hair_curly_long
</ul></li>
<li><span class="condensed">bald/shaved</span><ul>
div_sheet_hair_balding
div_sheet_hair_longhawk
div_sheet_hair_shorthawk
div_sheet_hair_high_and_tight
div_sheet_hair_buzzcut
</ul></li>
<li><span class="condensed">short</span><ul>
div_sheet_hair_plain
div_sheet_hair_pixie
div_sheet_hair_page
div_sheet_hair_idol
div_sheet_hair_mop
div_sheet_hair_parted
div_sheet_hair_part2
div_sheet_hair_messy2
div_sheet_hair_messy3
div_sheet_hair_messy1
div_sheet_hair_bedhead
div_sheet_hair_unkempt
div_sheet_hair_bangsshort
div_sheet_hair_swoop
div_sheet_hair_curtains
div_sheet_hair_page2
div_sheet_hair_bangs
div_sheet_hair_single
div_sheet_hair_cowlick
div_sheet_hair_cowlick_tall
</ul></li>
<li><span class="condensed">spiky</span><ul>
div_sheet_hair_spiked_porcupine
div_sheet_hair_spiked_liberty2
div_sheet_hair_spiked_liberty
div_sheet_hair_spiked_beehive
div_sheet_hair_spiked
div_sheet_hair_spiked2
div_sheet_hair_halfmessy
</ul></li>
<li><span class="condensed">pigtails</span><ul>
div_sheet_hair_bunches
div_sheet_hair_pigtails
div_sheet_hair_pigtails_bangs
</ul></li>
<li><span class="condensed">bob</span><ul>
div_sheet_hair_bob
div_sheet_hair_lob
div_sheet_hair_bob_side_part
</ul></li>
<li><span class="condensed">braids, ponytails, updos</span><ul>
div_sheet_hair_half_up
div_sheet_hair_bangs_bun
div_sheet_hair_shortknot
div_sheet_hair_longknot
div_sheet_hair_ponytail
div_sheet_hair_ponytail2
div_sheet_hair_high_ponytail
div_sheet_hair_braid
div_sheet_hair_braid2
div_sheet_hair_shoulderl
div_sheet_hair_shoulderr
div_sheet_hair_long_tied
</ul></li>
<li><span class="condensed">long</span><ul>
div_sheet_hair_loose
div_sheet_hair_bangslong
div_sheet_hair_bangslong2
div_sheet_hair_long
div_sheet_hair_long_messy
div_sheet_hair_long_messy2
div_sheet_hair_curtains_long
div_sheet_hair_wavy
div_sheet_hair_long_center_part
</ul></li>
<li><span class="condensed">very long</span><ul>
div_sheet_hair_princess
div_sheet_hair_sara
div_sheet_hair_long_band
div_sheet_hair_xlong
</ul></li>
</ul>
</li>
<li>
<span class="condensed">Appendages</span>
<ul>
div_sheet_head_horns_backwards
div_sheet_head_horns_curled
div_sheet_head_fins_fin
div_sheet_head_fins_fin_short
</ul>
</li>
<!-- Head coverings (under hat) -->
<li>
<span class="condensed">Head coverings</span>
<ul>
div_sheet_head_bandana
div_sheet_head_bandana_skull
div_sheet_head_kerchief
div_sheet_head_band_tied
div_sheet_hat_helmet_mail
</ul>
</li>
<!-- Hats -->
<li>
<span class="condensed">Hats and Helmets</span>
<ul>
div_sheet_hat_formal
div_sheet_hat_reptile
div_sheet_hat_magic
div_sheet_hat_cloth
<li>
<span class="condensed">Helmets</span>
<ul>
div_sheet_hat_helmet_armet
div_sheet_hat_helmet_armet_simple
div_sheet_hat_helmet_barbarian
div_sheet_hat_helmet_barbarian_nasal
div_sheet_hat_helmet_barbarian_viking
div_sheet_hat_helmet_barbuta
div_sheet_hat_helmet_barbuta_simple
div_sheet_hat_helmet_bascinet
div_sheet_hat_helmet_bascinet_pigface
div_sheet_hat_helmet_close
div_sheet_hat_helmet_flattop
div_sheet_hat_helmet_greathelm
div_sheet_hat_helmet_horned
div_sheet_hat_helmet_kettle
div_sheet_hat_helmet_legion
div_sheet_hat_helmet_maximus
div_sheet_hat_helmet_morion
div_sheet_hat_helmet_nasal
div_sheet_hat_helmet_norman
div_sheet_hat_helmet_spangenhelm
div_sheet_hat_helmet_spangenhelm_viking
div_sheet_hat_helmet_sugarloaf
div_sheet_hat_helmet_sugarloaf_simple
div_sheet_hat_helmet_xeon
</ul>
</li>
<li>
<span class="condensed">Visors</span>
<ul>
div_sheet_hat_visor_grated
div_sheet_hat_visor_grated_narrow
div_sheet_hat_visor_horned
div_sheet_hat_visor_pigface
div_sheet_hat_visor_pigface_raised
div_sheet_hat_visor_round
div_sheet_hat_visor_round_raised
div_sheet_hat_visor_slit
div_sheet_hat_visor_slit_narrow
</ul>
</li>
<li>
<span class="condensed">Pirate hats</span>
<ul>
div_sheet_hat_pirate_bonnie
div_sheet_hat_pirate_bonnie_feather
div_sheet_hat_pirate_cavalier
div_sheet_hat_pirate_cavalier_feather
div_sheet_hat_pirate_tricorne
div_sheet_hat_pirate_tricorne_stitched
div_sheet_hat_pirate_tricorne_thatch
div_sheet_hat_pirate_tricorne_captain_pirate
div_sheet_hat_pirate_tricorne_lieutenant
div_sheet_hat_pirate_tricorne_captain
div_sheet_hat_pirate_bicorne_athwart
div_sheet_hat_pirate_bicorne_athwart_pirate
div_sheet_hat_pirate_bicorne_athwart_admiral
div_sheet_hat_pirate_bicorne_athwart_admiral_cockade
div_sheet_hat_pirate_bicorne_athwart_commodore
div_sheet_hat_pirate_bicorne_foreaft
div_sheet_hat_pirate_bicorne_foreaft_commodore
</ul>
</li>
<li>
<span class="condensed">Hat Accessories</span>
<ul>
div_sheet_hat_accessory_crest
div_sheet_hat_accessory_crest_centurion
div_sheet_hat_accessory_wings
div_sheet_hat_accessory_horns
div_sheet_hat_accessory_plumage
div_sheet_hat_accessory_plumage_centurion
div_sheet_hat_accessory_plumage_legion
</ul>
</li>
<li>
<span class="condensed">Crowns</span>
<ul>
div_sheet_hat_crown
div_sheet_hat_tiara
</ul>
</li>
<li>
<span class="condensed">Special</span>
<ul>
div_sheet_hat_santa
div_sheet_hat_elf
</ul>
</li>
</ul>
</li>
<!-- Facial accessories -->
<li data-required="male,female,pregnant,muscular">
<span class="condensed">Accessories</span>
<ul>
div_sheet_facial
div_sheet_facial_eyepatch
div_sheet_facial_earring
</ul>
</li>
<!-- Neck -->
<li data-required="male,female,pregnant,muscular">
<span class="condensed">Neck</span>
<ul>
div_sheet_neck_tie
div_sheet_neck_scarf
div_sheet_neck_capeclip
div_sheet_neck_capetie
div_sheet_neck_jabot
div_sheet_neck_cravat
div_sheet_necklace
</ul>
</li>
</ul>
<h3>Arms</h3>
<ul>
<!-- ARMS -->
<!-- Shoulders -->
<li data-required="male,female,pregnant,muscular">
<span class="condensed">Shoulders</span>
<ul>
div_sheet_shoulders_legion
div_sheet_shoulders_plate
div_sheet_shoulders_leather
div_sheet_shoulders_epaulets
div_sheet_shoulders_mantal
</ul>
</li>
<!-- Arms -->
div_sheet_arms_armour
<!-- Bauldron -->
div_sheet_bauldron
<!-- Bracers -->
<li data-required="male,female,pregnant,muscular">
<span class="condensed">Wrists</span>
<ul>
div_sheet_arms_bracers
div_sheet_wrists_cuffs
div_sheet_wrists_cuffs_lace
</ul>
</li>
<!-- Greaves -->
div_sheet_gloves
</ul>
<!-- TORSO -->
<h3>Torso</h3>
<ul>
<!-- Dress -->
<li data-required="female,pregnant">
<span class="condensed">Dresses</span>
<ul>
div_sheet_dress
div_sheet_dress_sash
div_sheet_dress_slit
div_sheet_dress_bodice
</ul>
</li>
<!-- Torso clothes -->
<li data-required="male,female,pregnant,child">
<span class="condensed">Shirts</span>
<ul>
div_sheet_torso_clothes_child_shirt
div_sheet_torso_clothes_longsleeve
div_sheet_torso_clothes_longsleeve_collared
div_sheet_torso_clothes_male_longsleeve_laced
div_sheet_torso_clothes_shortsleeve
div_sheet_torso_clothes_male_sleeveless
div_sheet_torso_clothes_male_sleeveless_laced
div_sheet_torso_clothes_male_sleeveless_striped
div_sheet_torso_clothes_tanktop
div_sheet_torso_clothes_female_sleeveless
div_sheet_torso_clothes_corset
div_sheet_torso_clothes_blouse
div_sheet_torso_clothes_blouse_longsleeve
div_sheet_torso_clothes_scoop_shirt
div_sheet_torso_clothes_tunic
div_sheet_torso_clothes_robe
</ul>
</li>
<!-- Apron -->
<li>
<span class="condensed">Aprons</span>
<ul>
div_sheet_torso_aprons_overalls
div_sheet_torso_aprons_apron
div_sheet_torso_aprons_apron_half
div_sheet_torso_aprons_apron_full
</ul>
</li>
<!-- Bandages -->
div_sheet_torso_bandages
<!-- Chainmail -->
div_sheet_torso_chainmail
<!-- Jackets -->
<li data-required="male,female">
<span class="condensed">Jacket</span>
<ul>
div_sheet_torso_jacket_collared
div_sheet_torso_jacket_iverness
div_sheet_torso_jacket_trench
div_sheet_torso_jacket_tabard
div_sheet_torso_jacket_frock
div_sheet_torso_jacket_santa
<li>
<span class="condensed">Jacket trim</span>
<ul>
div_sheet_torso_jacket_frock_collar
div_sheet_torso_jacket_frock_lace
div_sheet_torso_jacket_frock_lapel
div_sheet_torso_jacket_frock_buttons
div_sheet_torso_jacket_pockets
</ul>
</li>
</ul>
</li>
<!-- Vest -->
<li data-required="male,female">
<span class="condensed">Vest</span>
<ul>
div_sheet_torso_clothes_vest
div_sheet_torso_clothes_vest_open
</ul>
</li>
<!-- Armour -->
<li data-required="male,female">
<span class="condensed">Armour</span>
<ul>
div_sheet_torso_armour_plate
div_sheet_torso_armour_leather
div_sheet_torso_armour_legion
</ul>
</li>
<!-- Cape -->
<li data-required="male,female,pregnant,muscular">
<span class="condensed">Cape</span>
<ul>
div_sheet_cape_solid
div_sheet_cape_tattered
div_sheet_cape_trim
</ul>
</li>
<!-- Belt -->
<li data-required="male,female">
<span class="condensed">Waist</span>
<ul>
div_sheet_belt_leather
div_sheet_belt_double
div_sheet_belt_loose
div_sheet_belt_belly
div_sheet_belt_other_female
div_sheet_belt_other_male
div_sheet_belt_sash
div_sheet_belt_sash_narrow
</ul>
</li>
<!-- Buckles -->
div_sheet_buckles
</ul>
<h3>Legs</h3>
<ul>
<!-- LEGS -->
<!-- Legs -->
<li>
<span class="condensed">Legs</span>
<ul>
div_sheet_legs_armour
div_sheet_legs_widepants
div_sheet_legs_pants
div_sheet_legs_pantaloons
div_sheet_legs_leggings
div_sheet_legs_pregnantpants
div_sheet_legs_childpants
div_sheet_legs_childskirts
div_sheet_legs_skirts_plain
div_sheet_legs_skirts_slit
div_sheet_legs_skirts_legion
div_sheet_legs_skirt_straight
div_sheet_legs_skirt_belle
div_sheet_legs_skirt_overskirt
</ul>
</li>
<!-- FEET -->
<!-- Boots -->
div_sheet_feet_boots
<!-- Shoes -->
<li data-required="male,female,muscular,pregnant">
<span class="condensed">Shoes</span>
<ul>
div_sheet_feet_armour
div_sheet_feet_slippers
div_sheet_feet_shoes
div_sheet_feet_hoofs
div_sheet_feet_sandals
div_sheet_feet_ghillies
div_sheet_feet_sara
</ul>
</li>
</ul>
<!-- TOOLS -->
<h3>Tools</h3>
<ul>
div_sheet_tool_rod
div_sheet_tool_smash
div_sheet_tool_thrust
</ul>
<h3>Weapons</h3>
<ul>
<!-- WEAPONS -->
<!-- Shield -->
div_sheet_shield
<!-- Quiver -->
div_sheet_quiver
<!-- Weapons -->
<li>
<span class="condensed">Weapon</span>
<ul>
div_sheet_weapon_bow
div_sheet_weapon_spear
div_sheet_weapon_thrust
div_sheet_weapon_slash
div_sheet_weapon_slash_oversize
div_sheet_weapon_slash_oversize_layered
div_sheet_weapon_thrust_oversize_attack_only
</ul>
</li>
<!-- Ammo -->
div_sheet_ammo
</ul>
</section>
</form>
<section id="preview">
<div id="previewAnimationsBox">
Preview
<select id="whichAnim">
<option value="spellcast" data-row="0" data-num="4" data-cycle="7">Spellcast</option>
<option value="thrust" data-row="4" data-num="4" data-cycle="8">Thrust</option>
<option value="walk" selected data-row="8" data-num="4" data-cycle="9">Walk</option>
<option value="slash" data-row="12" data-num="4" data-cycle="6">Slash</option>
<option value="shoot" data-row="16" data-num="4" data-cycle="13">Shoot</option>
<option value="hurt" data-row="20" data-num="1" data-cycle="6">Hurt</option>
<option value="watering" data-row="4" data-num="4" data-cycle="4" data-cycle-custom="0-1-4-4-4-4-5">Watering</option>
</select>
<canvas id="previewAnimations" width="1024" height="192"></canvas>
</div>
<div class="instr">Complete sprite sheet (click to zoom): </div>
<canvas id="spritesheet" width="832" height="1344">HTML5 Browser required.</canvas>
</section>
<div id="credits">
<h2>Credits</h2>
<p>This art is available under the <a href="http://www.gnu.org/licenses/gpl-3.0.html">GNU GPL 3.0</a> and/or <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA 3.0</a> licenses. You must credit the authors. <a href="https://github.com/sanderfrenken/Universal-LPC-Spritesheet-Character-Generator/blob/master/README.md">Detailed attribution instructions</a>. </p>
<p><strong>Download: </strong>
<button type="button" class="generateSheetCreditsTxt">Credits for this sheet</button>
<button type="button" class="generateSheetCreditsCsv">Credits for this sheet (CSV)</button>
<button type="button" class="generateAllCredits">Credits for all sprites (CSV)</button>
</p>
<p>Authors of this spritesheet:</p>
<textarea id="creditsText" rows="20" cols="300" readonly>Credits</textarea>
</div>
<div id="advanced">
<h2>Advanced Tools</h2>
<p>
<strong>Custom file: </strong><span>Draw local file with custom z-position:</span>
<input type="file" id="previewFile">
<label for="ZPOS">Z-position:</label><input id="ZPOS" type="text" name="ZPOS">
</p>
</div>
<imgPrev></imgPrev>
</body>
</html>