Hats.wiki
author Wuzzy
Sun, 07 Jun 2020 18:17:12 +0200
changeset 2150 e1df0e677664
parent 2139 b1aadfd754ab
permissions -rw-r--r--
Hats: Add preview page
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     1
#summary Explanation of hats, how Hedgewars draws them and how one can create them
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     2
750
bb84e70c01b7 Hats: Add title, fix header levels
Wuzzy
parents: 663
diff changeset
     3
= Hats =
2136
fb06b29ebba0 Add images to hats and graves pages
Wuzzy <almikes@aol.com>
parents: 2135
diff changeset
     4
https://www.hedgewars.org/images/hats.png
2139
b1aadfd754ab Hats: Whitespace
Wuzzy
parents: 2136
diff changeset
     5
750
bb84e70c01b7 Hats: Add title, fix header levels
Wuzzy
parents: 663
diff changeset
     6
== Introduction ==
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     7
2135
8f0808b0f894 Hats: fix link again
Wuzzy
parents: 2134
diff changeset
     8
In Hedgewars, every hedgehog can optionally wear its own hat as decoration. They can be selected on a per-hog basis in the team editor. More info on [https://hedgewars.org/wiki/Hat the Hedgewars Wiki].
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     9
750
bb84e70c01b7 Hats: Add title, fix header levels
Wuzzy
parents: 663
diff changeset
    10
== Types of hats ==
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    11
There are two types of hats: normal hats and team hats.
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    12
Normal hats look always the same.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    13
Team hats are hats which will be colored accordingly to the team color.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    14
I.e. if a hedgehog plays in a red team, its hat will we red.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    15
1126
756712384ff3 Hats: Edited via web interface
Wuzzy
parents: 1125
diff changeset
    16
Additionally, hats can be either static or animated.
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    17
1126
756712384ff3 Hats: Edited via web interface
Wuzzy
parents: 1125
diff changeset
    18
In the default Hedgewars installation, most hats are normal hats, and many hats are animated.
1419
b47b108c9885 Hats: team hat preview no longer broken
Wuzzy
parents: 1203
diff changeset
    19
Examples for team hats in the default Hedgewars installation are `cap_team` and `hair_team`.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    20
750
bb84e70c01b7 Hats: Add title, fix header levels
Wuzzy
parents: 663
diff changeset
    21
== Data structure ==
1980
c46ebe308440 Hats: alternative word for alpha channel
Wuzzy
parents: 1419
diff changeset
    22
Hats are specified as PNG files with alpha channel (transparency).
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    23
They consist of a set of sub-images of a size 32px×32px each.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    24
Hedgewars counts the sub-images, or animation frames, from top-left to
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    25
bottom-left, then it goes on with the next column, etc.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    26
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    27
=== Static normal hats ===
1126
756712384ff3 Hats: Edited via web interface
Wuzzy
parents: 1125
diff changeset
    28
These are the simplest hats. It's just a single 32×32 image containing the hat. This image will be put on the hedgehog's head with a vertical offset of 5 pixels.
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    29
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    30
That's it!
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    31
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    32
=== Static team hats ===
1134
c67aa9fa2487 Hats: explain static team hats better
Wuzzy
parents: 1133
diff changeset
    33
This is a 64px×32px image with 2 frames. The left half is the base coloring of the hat, the right half should _only_ use grayscale colors for the parts of the hat for which to use the team colors. The left part may be even completely blank. The same offset of 5 pixels applies here.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    34
1134
c67aa9fa2487 Hats: explain static team hats better
Wuzzy
parents: 1133
diff changeset
    35
To create the final hat, Hedgewars will first colorize the right part to the team color, then overlay that on top of the left base image.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    36
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    37
=== Animated normal hats ===
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    38
Animated normal hats use an image of a total size of 64px×512px. Only the first
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    39
19 frames are used, the remainder of the image is unused. It is best to keep the unused area transparent.
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    40
1131
bfaa8cfa4138 Hats: template 2
Wuzzy
parents: 1130
diff changeset
    41
For animated hats, we highly recommend the use of the template (see below).
bfaa8cfa4138 Hats: template 2
Wuzzy
parents: 1130
diff changeset
    42
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    43
=== Animated team hats ===
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    44
Animated team hats use an image of a total size of 128px×512px. This image is similar to that of animated normal hats, the same pattern is repeated 64 pixels to the right.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    45
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    46
The team hat image consists of two “halves”: The left half is the base coloring of the helmet, the right half should _only_ use grayscale colors. The left part may be completely blank. So you have basically two sets of helmet animations. Again, both animations have exactly 19 frames, the remainder is unused.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    47
1135
892e24492895 Hats: Edited via web interface
Wuzzy
parents: 1134
diff changeset
    48
Hedgewars will use the right grayscale frames to color them and overlay them on the base color frames to the left.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    49
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    50
Transparent pixels on the right part will not be overlayed. This way, you can decide which parts of the helmet become colored and which won’t.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    51
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    52
== Alignment of hats ==
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    53
When creating hats, it is important to know where the hat will be actually placed.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    54
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    55
For static hats, this is trivial: Hedgewars will just move the hat up by 5 pixels before drawing it on the hedgehog.
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    56
The hat will automatically slightly bounce up and down with the hedgehog idle animation.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    57
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    58
Now to animated hats:
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    59
In the game, Hedgewars will use the idling frames (see `Data/Graphics/Hedgehog/Idle.png`)
1125
2e4c07468366 Hats: Add static hats
Wuzzy
parents: 903
diff changeset
    60
together with the hat frames. For static hats, the reference point is the first frame of `Idle.png`.
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    61
If a hat is used, Hedgewars will draw the hat over the idling hedgehog for each frame, but
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    62
first it will move the hat’s frame up by 5 pixels.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    63
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    64
The first frame of the hat animation will be drawn over the first frame of the idle animation,
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    65
the second frame of the hat animation will be drawn over the second frame of the idle animation,
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    66
and so on.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    67
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    68
Another tricky part in creating hats is the fact that the idle hedgehog moves slightly up and down.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    69
This means, a good hat must consider this, otherwise the hat does not seem to be actually on the
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    70
hedgehog’s hat, because it does not move with the hedgehog.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    71
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    72
This table shows the relative height of the idle hedgehog compared to the frist frame of `Idle.png`:
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    73
|| *nth frame of `Idle.png`* || *Offset to first frame* ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    74
|| 1 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    75
|| 2 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    76
|| 3 || +1 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    77
|| 4 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    78
|| 5 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    79
|| 6 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    80
|| 7 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    81
|| 8 || +1 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    82
|| 9 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    83
|| 10 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    84
|| 11 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    85
|| 12 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    86
|| l3 || +1 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    87
|| 14 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    88
|| 15 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    89
|| 16 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    90
|| 17 || −1 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    91
|| 18 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    92
|| 19 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    93
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    94
This is how to read this table: If you would like to create a simple hat with no fancy animation, like, let’s say, a fedora, you would like the hat to “follow” the hedgehog. You could, for example, draw and align the hat image on the first frame, then copy it on all other frames and apply the offsets to the four “special” frames.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    95
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    96
750
bb84e70c01b7 Hats: Add title, fix header levels
Wuzzy
parents: 663
diff changeset
    97
== Installation ==
520
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    98
To install a hat, you have to save the file into `Data/Graphics/Hats` in your Hedgewars
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    99
user data directory. The file name _must_ end with “`.png`”.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
   100
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
   101
The Hedgewars frontend will display the same name as the file name you used, minus the file name
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
   102
suffix. For example, the file “`Awesome Example Hat.png`” would be displayed as “Awesome Example Hat”.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
   103
521
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
   104
Hedgewars will always use the very first frame of a hat image to create the preview in the team editor. This also applies to team hats.
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
   105
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
   106
750
bb84e70c01b7 Hats: Add title, fix header levels
Wuzzy
parents: 663
diff changeset
   107
== Templates ==
1132
a7edef700a91 Hats: Edited via web interface
Wuzzy
parents: 1131
diff changeset
   108
For your convenience, we have created some templates to ease the creation of hats to help you to align the hats pixel-perfectly. Use them as background layer.
521
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
   109
1131
bfaa8cfa4138 Hats: template 2
Wuzzy
parents: 1130
diff changeset
   110
 * Static normal hat: [https://www.hedgewars.org/images/Static_Hat_Template.png Static_Hat_Template.png]
bfaa8cfa4138 Hats: template 2
Wuzzy
parents: 1130
diff changeset
   111
 * Static team hat: [https://www.hedgewars.org/images/Static_Team_Hat_Template.png Static_Team_Hat_Template.png]
bfaa8cfa4138 Hats: template 2
Wuzzy
parents: 1130
diff changeset
   112
 * Animated normal hat: [https://www.hedgewars.org/images/Hat_Template.png Hat_Template.png]
bfaa8cfa4138 Hats: template 2
Wuzzy
parents: 1130
diff changeset
   113
 * Animated team hat: [https://www.hedgewars.org/images/Team_Hat_Template.png Team_Hat_Template.png]
1127
87e8bb1e7a29 Hats: Edited via web interface
Wuzzy
parents: 1126
diff changeset
   114
1130
216ffcca9ede Hats: Simplify list of templates
Wuzzy
parents: 1129
diff changeset
   115
For GIMP users, we also have XCF files with layers for your convenience:
1131
bfaa8cfa4138 Hats: template 2
Wuzzy
parents: 1130
diff changeset
   116
 * Animated normal hat: [https://www.hedgewars.org/images/Hat_Template.xcf Hat_Template.xcf]
bfaa8cfa4138 Hats: template 2
Wuzzy
parents: 1130
diff changeset
   117
 * Animated team hat: [https://www.hedgewars.org/images/Team_Hat_Template.xcf Team_Hat_Template.xcf]
521
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
   118
1130
216ffcca9ede Hats: Simplify list of templates
Wuzzy
parents: 1129
diff changeset
   119
=== Quick explanation ===
1133
b0458918e0c8 Hats: whitespace
Wuzzy
parents: 1132
diff changeset
   120
Use these images as a temporary background layer. They show a colored checkerboard pattern, each field represents an animation frame. The green and red fields are those where the idle hedgehog has an offset of +1px or −1 px (see above). The black fields are the unused frames.
b0458918e0c8 Hats: whitespace
Wuzzy
parents: 1132
diff changeset
   121
b0458918e0c8 Hats: whitespace
Wuzzy
parents: 1132
diff changeset
   122
In the front, the idle hedgehog can be seen, already shifted correctly. The gray hedgehogs remind you of the fields which need to be in grayscale for team hats.
663
c20d902a6d1e Sharing section
Wuzzy
parents: 565
diff changeset
   123
2150
e1df0e677664 Hats: Add preview page
Wuzzy
parents: 2139
diff changeset
   124
== Official hats ==
e1df0e677664 Hats: Add preview page
Wuzzy
parents: 2139
diff changeset
   125
A list of official hats can be seen [https://hg.hedgewars.org/hedgewars/raw-file/tip/misc/hats_js_anim.xhtml here].
e1df0e677664 Hats: Add preview page
Wuzzy
parents: 2139
diff changeset
   126
750
bb84e70c01b7 Hats: Add title, fix header levels
Wuzzy
parents: 663
diff changeset
   127
== Sharing hats ==
1203
f2a88f6a92af Hats: fix doublette
Wuzzy
parents: 1202
diff changeset
   128
Custom hats (hats which are not part of the official Hedgewars installation) are only visible to other players if they have the hat installed under the same file name.
663
c20d902a6d1e Sharing section
Wuzzy
parents: 565
diff changeset
   129
c20d902a6d1e Sharing section
Wuzzy
parents: 565
diff changeset
   130
In case the other player does not have the custom hat installed, the player will see no hat instead.
c20d902a6d1e Sharing section
Wuzzy
parents: 565
diff changeset
   131
2136
fb06b29ebba0 Add images to hats and graves pages
Wuzzy <almikes@aol.com>
parents: 2135
diff changeset
   132
You are encouraged to share your hats in the thread “[https://www.hedgewars.org/node/690 Hats! additions, submissions, information.]”, where submissions are considered for official inclusion into Hedgewars.
2139
b1aadfd754ab Hats: Whitespace
Wuzzy
parents: 2136
diff changeset
   133