author | Wuzzy |
Wed, 17 Apr 2019 00:19:05 +0100 (2019-04-16) | |
changeset 1735 | 4b658d116488 |
parent 1419 | b47b108c9885 |
child 1980 | c46ebe308440 |
permissions | -rw-r--r-- |
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 | 3 |
= Hats = |
4 |
== Introduction == |
|
520
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
5 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
6 |
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
|
7 |
|
750 | 8 |
== Types of hats == |
1125 | 9 |
There are two types of hats: normal hats and team hats. |
10 |
Normal hats look always the same. |
|
520
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
11 |
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
|
12 |
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
|
13 |
|
1126 | 14 |
Additionally, hats can be either static or animated. |
1125 | 15 |
|
1126 | 16 |
In the default Hedgewars installation, most hats are normal hats, and many hats are animated. |
1419 | 17 |
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
|
18 |
|
750 | 19 |
== Data structure == |
520
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
20 |
Hats are specified as PNG files with alpha channel. |
1125 | 21 |
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
|
22 |
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
|
23 |
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
|
24 |
|
1125 | 25 |
=== Static normal hats === |
1126 | 26 |
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 | 27 |
|
28 |
That's it! |
|
29 |
||
30 |
=== Static team hats === |
|
1134 | 31 |
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
|
32 |
|
1134 | 33 |
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
|
34 |
|
1125 | 35 |
=== Animated normal hats === |
36 |
Animated normal hats use an image of a total size of 64px×512px. Only the first |
|
37 |
19 frames are used, the remainder of the image is unused. It is best to keep the unused area transparent. |
|
38 |
||
1131 | 39 |
For animated hats, we highly recommend the use of the template (see below). |
40 |
||
1125 | 41 |
=== Animated team hats === |
42 |
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
|
43 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
44 |
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
|
45 |
|
1135 | 46 |
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
|
47 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
48 |
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
|
49 |
|
1125 | 50 |
== Alignment of hats == |
51 |
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
|
52 |
|
1125 | 53 |
For static hats, this is trivial: Hedgewars will just move the hat up by 5 pixels before drawing it on the hedgehog. |
54 |
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
|
55 |
|
1125 | 56 |
Now to animated hats: |
520
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
57 |
In the game, Hedgewars will use the idling frames (see `Data/Graphics/Hedgehog/Idle.png`) |
1125 | 58 |
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
|
59 |
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
|
60 |
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
|
61 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
62 |
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
|
63 |
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
|
64 |
and so on. |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
65 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
66 |
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
|
67 |
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
|
68 |
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
|
69 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
70 |
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
|
71 |
|| *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
|
72 |
|| 1 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
73 |
|| 2 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
74 |
|| 3 || +1 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
75 |
|| 4 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
76 |
|| 5 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
77 |
|| 6 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
78 |
|| 7 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
79 |
|| 8 || +1 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
80 |
|| 9 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
81 |
|| 10 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
82 |
|| 11 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
83 |
|| 12 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
84 |
|| l3 || +1 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
85 |
|| 14 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
86 |
|| 15 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
87 |
|| 16 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
88 |
|| 17 || −1 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
89 |
|| 18 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
90 |
|| 19 || 0 px || |
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
91 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
92 |
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
|
93 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
94 |
|
750 | 95 |
== Installation == |
520
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
96 |
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
|
97 |
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
|
98 |
|
b006de5eeed1
Started a technical guide about hats. May need extension.
almikes@aol.com
parents:
diff
changeset
|
99 |
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
|
100 |
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
|
101 |
|
521 | 102 |
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. |
103 |
||
104 |
||
750 | 105 |
== Templates == |
1132 | 106 |
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 | 107 |
|
1131 | 108 |
* Static normal hat: [https://www.hedgewars.org/images/Static_Hat_Template.png Static_Hat_Template.png] |
109 |
* Static team hat: [https://www.hedgewars.org/images/Static_Team_Hat_Template.png Static_Team_Hat_Template.png] |
|
110 |
* Animated normal hat: [https://www.hedgewars.org/images/Hat_Template.png Hat_Template.png] |
|
111 |
* Animated team hat: [https://www.hedgewars.org/images/Team_Hat_Template.png Team_Hat_Template.png] |
|
1127 | 112 |
|
1130 | 113 |
For GIMP users, we also have XCF files with layers for your convenience: |
1131 | 114 |
* Animated normal hat: [https://www.hedgewars.org/images/Hat_Template.xcf Hat_Template.xcf] |
115 |
* Animated team hat: [https://www.hedgewars.org/images/Team_Hat_Template.xcf Team_Hat_Template.xcf] |
|
521 | 116 |
|
1130 | 117 |
=== Quick explanation === |
1133 | 118 |
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. |
119 |
||
120 |
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 | 121 |
|
750 | 122 |
== Sharing hats == |
1203 | 123 |
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 | 124 |
|
125 |
In case the other player does not have the custom hat installed, the player will see no hat instead. |
|
126 |
||
798
30c5f1ebd552
global replace of http with https for hedgewars.org wiki links
nemo
parents:
797
diff
changeset
|
127 |
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. |