Hats.wiki
author almikes@aol.com
Fri, 19 Dec 2014 23:49:19 +0000
changeset 524 bebf8feb9550
parent 523 0527898a6e2d
child 565 55d662a30467
permissions -rw-r--r--
Short description of team hat templates.
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
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     3
= Introduction =
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     4
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     5
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.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     6
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     7
= Types of hats =
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     8
There are two types of hats: non-team hats and team hats.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
     9
Non-team hats have a fixed coloring which does not depend on the team color.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    10
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
    11
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
    12
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    13
In the default Hedgewars installation, most hats are non-team hats.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    14
Examples for team hats in the default Hedgewars installation are cap_team
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    15
and hair_team. Please note that those hats currently have no proper
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    16
preview images.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    17
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    18
= Data structure =
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    19
Hats are specified as PNG files with alpha channel.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    20
They consist of a set sub-images of a size 32px×32px each.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    21
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
    22
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
    23
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    24
_All_ hats are animated. Even those hats which appear to be “static” (for example: `constructor`)
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    25
are animated, too, they use the animation to align the hat to the idle hedgehog.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    26
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    27
== Non-team hats ==
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    28
Non-team hats use an image of a total size of 64px×512px. Only the first
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    29
19 frames are used, the remainder of the image is currently unused.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    30
It is best to keep this area blank.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    31
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    32
== Team hats ==
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    33
Team hats use an image of a total size of 128px×512px. This image is similar to that of non-team hats, the same pattern is repeated 64 pixels to the right.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    34
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    35
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
    36
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    37
Hedgewars will use the right base image and use the colored right part of the image and simply overlay it.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    38
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    39
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
    40
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    41
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    42
= Alignment =
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    43
When creating new hats, it is important to now where the hat will be actually placed.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    44
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    45
In the game, Hedgewars will use the idling frames (see `Data/Graphics/Hedgehog/Idle.png`)
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    46
together with the hat frames.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    47
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
    48
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
    49
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    50
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
    51
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
    52
and so on.
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    53
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    54
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
    55
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
    56
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
    57
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    58
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
    59
|| *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
    60
|| 1 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    61
|| 2 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    62
|| 3 || +1 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    63
|| 4 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    64
|| 5 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    65
|| 6 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    66
|| 7 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    67
|| 8 || +1 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    68
|| 9 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    69
|| 10 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    70
|| 11 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    71
|| 12 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    72
|| l3 || +1 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    73
|| 14 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    74
|| 15 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    75
|| 16 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    76
|| 17 || −1 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    77
|| 18 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    78
|| 19 || 0 px ||
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    79
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    80
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
    81
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    82
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    83
= Installation =
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    84
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
    85
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
    86
b006de5eeed1 Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff changeset
    87
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
    88
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
    89
521
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
    90
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
    91
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
    92
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
    93
= Templates =
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
    94
For your convenience, we have created some templates to ease the creation of hats. You can use them as background layer to help you align your hats.
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
    95
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
    96
== Non-team hats ==
523
0527898a6e2d Rewrote templates section.
almikes@aol.com
parents: 522
diff changeset
    97
A basic PNG template is [http://www.hedgewars.org/images/Hat_Template.png Hat_Template.png]. You can use this image as a background layer. This image shows 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. In the front, the idle hedgehog can be seen but shifted 5 pixels lower and the 5 lowest pixels cut off.
0527898a6e2d Rewrote templates section.
almikes@aol.com
parents: 522
diff changeset
    98
You can use this image to exactly align the hat properly.
521
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
    99
523
0527898a6e2d Rewrote templates section.
almikes@aol.com
parents: 522
diff changeset
   100
This image is also available as XCF for GIMP users: [http://www.hedgewars.org/images/Hat_Template.xcf Hat_Template.xcf]. It got an additional layer and you can easily toggle a couple of layers on and off.
521
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
   101
522
2b6da59e5489 Add SVG template.
almikes@aol.com
parents: 521
diff changeset
   102
521
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
   103
== Team hats ==
524
bebf8feb9550 Short description of team hat templates.
almikes@aol.com
parents: 523
diff changeset
   104
You can use [http://www.hedgewars.org/images/Team_Hat_Template.png Team_Hat_Template.png]. This is similar to the previous PNG. The hedgehogs on the right half are in gray to remind you that you only should use grayscale colors on this side.
521
5c3e756ee5e3 Add templates.
almikes@aol.com
parents: 520
diff changeset
   105
524
bebf8feb9550 Short description of team hat templates.
almikes@aol.com
parents: 523
diff changeset
   106
The XCF source of this file is here: [http://www.hedgewars.org/images/Hat_Template.xcf Hat_Template.xcf].