# HG changeset patch # User Wuzzy # Date 1510895737 0 # Node ID 2e4c07468366caa44182394c869bb6f375d754b5 # Parent b37c99c55365942053dcbf5f6332f28544bec6a6 Hats: Add static hats diff -r b37c99c55365 -r 2e4c07468366 Hats.wiki --- a/Hats.wiki Fri Nov 17 04:57:29 2017 +0000 +++ b/Hats.wiki Fri Nov 17 05:15:37 2017 +0000 @@ -6,32 +6,38 @@ 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. == Types of hats == -There are two types of hats: non-team hats and team hats. -Non-team hats have a fixed coloring which does not depend on the team color. +There are two types of hats: normal hats and team hats. +Normal hats look always the same. Team hats are hats which will be colored accordingly to the team color. I.e. if a hedgehog plays in a red team, its hat will we red. -In the default Hedgewars installation, most hats are non-team hats. -Examples for team hats in the default Hedgewars installation are cap_team -and hair_team. Please note that those hats currently have no proper -preview images. +Additionally, all hats can be animated. + +In the default Hedgewars installation, most hats are normal hats, and many hats have animations. +Examples for team hats in the default Hedgewars installation are `cap_team` and `hair_team`. Please note that those hats currently have no proper preview images. == Data structure == Hats are specified as PNG files with alpha channel. -They consist of a set sub-images of a size 32px×32px each. +They consist of a set of sub-images of a size 32px×32px each. Hedgewars counts the sub-images, or animation frames, from top-left to bottom-left, then it goes on with the next column, etc. -_All_ hats are animated. Even those hats which appear to be “static” (for example: `constructor`) -are animated, too, they use the animation to align the hat to the idle hedgehog. +=== Static normal hats === +The simplest hat is a static normal hat. It's not animated. 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. + +That's it! + +=== Static team hats === +This is a 64px×32px image with 2 frames. 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. The same offset of 5 pixels applies here. -=== Non-team hats === -Non-team hats use an image of a total size of 64px×512px. Only the first -19 frames are used, the remainder of the image is currently unused. -It is best to keep this area blank. +To create the final image, Hedgewars will use the right base image and use the colored right part of the image and simply overlay it on the left image. -=== Team hats === -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. +=== Animated normal hats === +Animated normal hats use an image of a total size of 64px×512px. Only the first +19 frames are used, the remainder of the image is unused. It is best to keep the unused area transparent. + +=== Animated team hats === +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. 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. @@ -39,12 +45,15 @@ 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. +== Alignment of hats == +When creating hats, it is important to know where the hat will be actually placed. -== Alignment == -When creating new hats, it is important to know where the hat will be actually placed. +For static hats, this is trivial: Hedgewars will just move the hat up by 5 pixels before drawing it on the hedgehog. +The hat will automatically slightly bounce up and down with the hedgehog idle animation. +Now to animated hats: In the game, Hedgewars will use the idling frames (see `Data/Graphics/Hedgehog/Idle.png`) -together with the hat frames. +together with the hat frames. For static hats, the reference point is the first frame of `Idle.png`. If a hat is used, Hedgewars will draw the hat over the idling hedgehog for each frame, but first it will move the hat’s frame up by 5 pixels. @@ -94,14 +103,13 @@ == Templates == 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. -=== Non-team hats === +=== Animated normal hats === A basic PNG template is [https://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. You can use this image to exactly align the hat properly. This image is also available as XCF for GIMP users: [https://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. - -=== Team hats === +=== Animated neam hats === You can use [https://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. The XCF source of this file is here: [https://www.hedgewars.org/images/Team_Hat_Template.xcf Team_Hat_Template.xcf].