1 #summary Explanation of hats, how Hedgewars draws them and how one can create them |
1 #summary Explanation of hats, how Hedgewars draws them and how one can create them |
2 |
2 |
3 = Introduction = |
3 = Hats = |
|
4 == Introduction == |
4 |
5 |
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. |
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. |
6 |
7 |
7 = Types of hats = |
8 == Types of hats == |
8 There are two types of hats: non-team hats and team hats. |
9 There are two types of hats: non-team hats and team hats. |
9 Non-team hats have a fixed coloring which does not depend on the team color. |
10 Non-team hats have a fixed coloring which does not depend on the team color. |
10 Team hats are hats which will be colored accordingly to the team color. |
11 Team hats are hats which will be colored accordingly to the team color. |
11 I.e. if a hedgehog plays in a red team, its hat will we red. |
12 I.e. if a hedgehog plays in a red team, its hat will we red. |
12 |
13 |
13 In the default Hedgewars installation, most hats are non-team hats. |
14 In the default Hedgewars installation, most hats are non-team hats. |
14 Examples for team hats in the default Hedgewars installation are cap_team |
15 Examples for team hats in the default Hedgewars installation are cap_team |
15 and hair_team. Please note that those hats currently have no proper |
16 and hair_team. Please note that those hats currently have no proper |
16 preview images. |
17 preview images. |
17 |
18 |
18 = Data structure = |
19 == Data structure == |
19 Hats are specified as PNG files with alpha channel. |
20 Hats are specified as PNG files with alpha channel. |
20 They consist of a set sub-images of a size 32px×32px each. |
21 They consist of a set sub-images of a size 32px×32px each. |
21 Hedgewars counts the sub-images, or animation frames, from top-left to |
22 Hedgewars counts the sub-images, or animation frames, from top-left to |
22 bottom-left, then it goes on with the next column, etc. |
23 bottom-left, then it goes on with the next column, etc. |
23 |
24 |
24 _All_ hats are animated. Even those hats which appear to be “static” (for example: `constructor`) |
25 _All_ hats are animated. Even those hats which appear to be “static” (for example: `constructor`) |
25 are animated, too, they use the animation to align the hat to the idle hedgehog. |
26 are animated, too, they use the animation to align the hat to the idle hedgehog. |
26 |
27 |
27 == Non-team hats == |
28 === Non-team hats === |
28 Non-team hats use an image of a total size of 64px×512px. Only the first |
29 Non-team hats use an image of a total size of 64px×512px. Only the first |
29 19 frames are used, the remainder of the image is currently unused. |
30 19 frames are used, the remainder of the image is currently unused. |
30 It is best to keep this area blank. |
31 It is best to keep this area blank. |
31 |
32 |
32 == Team hats == |
33 === Team hats === |
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. |
34 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. |
34 |
35 |
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. |
36 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. |
36 |
37 |
37 Hedgewars will use the right base image and use the colored right part of the image and simply overlay it. |
38 Hedgewars will use the right base image and use the colored right part of the image and simply overlay it. |
38 |
39 |
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. |
40 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. |
40 |
41 |
41 |
42 |
42 = Alignment = |
43 == Alignment == |
43 When creating new hats, it is important to now where the hat will be actually placed. |
44 When creating new hats, it is important to now where the hat will be actually placed. |
44 |
45 |
45 In the game, Hedgewars will use the idling frames (see `Data/Graphics/Hedgehog/Idle.png`) |
46 In the game, Hedgewars will use the idling frames (see `Data/Graphics/Hedgehog/Idle.png`) |
46 together with the hat frames. |
47 together with the hat frames. |
47 If a hat is used, Hedgewars will draw the hat over the idling hedgehog for each frame, but |
48 If a hat is used, Hedgewars will draw the hat over the idling hedgehog for each frame, but |
78 || 19 || 0 px || |
79 || 19 || 0 px || |
79 |
80 |
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. |
81 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. |
81 |
82 |
82 |
83 |
83 = Installation = |
84 == Installation == |
84 To install a hat, you have to save the file into `Data/Graphics/Hats` in your Hedgewars |
85 To install a hat, you have to save the file into `Data/Graphics/Hats` in your Hedgewars |
85 user data directory. The file name _must_ end with “`.png`”. |
86 user data directory. The file name _must_ end with “`.png`”. |
86 |
87 |
87 The Hedgewars frontend will display the same name as the file name you used, minus the file name |
88 The Hedgewars frontend will display the same name as the file name you used, minus the file name |
88 suffix. For example, the file “`Awesome Example Hat.png`” would be displayed as “Awesome Example Hat”. |
89 suffix. For example, the file “`Awesome Example Hat.png`” would be displayed as “Awesome Example Hat”. |
89 |
90 |
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. |
91 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. |
91 |
92 |
92 |
93 |
93 = Templates = |
94 == Templates == |
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. |
95 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. |
95 |
96 |
96 == Non-team hats == |
97 === Non-team hats === |
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. |
98 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. |
98 You can use this image to exactly align the hat properly. |
99 You can use this image to exactly align the hat properly. |
99 |
100 |
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. |
101 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. |
101 |
102 |
102 |
103 |
103 == Team hats == |
104 === Team hats === |
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. |
105 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. |
105 |
106 |
106 The XCF source of this file is here: [http://www.hedgewars.org/images/Team_Hat_Template.xcf Team_Hat_Template.xcf]. |
107 The XCF source of this file is here: [http://www.hedgewars.org/images/Team_Hat_Template.xcf Team_Hat_Template.xcf]. |
107 |
108 |
108 = Sharing hats = |
109 == Sharing hats == |
109 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. |
110 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. |
110 |
111 |
111 In case the other player does not have the custom hat installed, the player will see no hat instead. |
112 In case the other player does not have the custom hat installed, the player will see no hat instead. |
112 |
113 |
113 You are encouraged to share your hats in the thread “[http://www.hedgewars.org/node/690 Hats! additions, submissions, information.]”, where submissions are considered for official inclusion into Hedgewars. |
114 You are encouraged to share your hats in the thread “[http://www.hedgewars.org/node/690 Hats! additions, submissions, information.]”, where submissions are considered for official inclusion into Hedgewars. |