Duck Game

Duck Game

Not enough ratings
How to create animated hats with Hats++ mod [EN]
By Polanas
This guide is about creating and using animated hats and other cosmetic elements (wings, pets, etc.) with Hats++ mod.
   
Award
Favorite
Favorited
Unfavorite
Introduction
Hats++ is a client-side mod which greatly expands hats mechanic. It lets you create more complex animated hats and other cosmetics, while also being completely vanilla supportive. So other players don't need to have this mod installed and enabled to see the hats.

Here's the mod.

Additonal info
  • *(Update: now hats do work in offline)
  • You can reload hats without restarting the game. Press F6 (by default) to reload current hat. To reconfigure this keybind use "srkb" console command (E.g: "srkb F")
Creating a hat (part 1)
There are a bunch of elements that you can use to create a hat. Each element must be a separated .png file. All of them should be located in one folder, which name will be the hat's name as well. Folders are checked in all hat folders + hatpack ones.
Here are all the elements: (we will talk about them in detail later):
  • ExtraHat
  • Hat
  • Wings
  • FlyingPet
  • WalkingPet
  • Preview
If a folder doesn't contain preview or Hat element, a hat won't be formed.

To add an element put its .png inside your folder and name it according to this template:
{element_name}_{Width}_{Heght}.png.
Width and height are required if you are using custom metapixels. It points out a part of your .png that contains the hat (sprite or sprite sheet) itself. Anything beyond that size will be considered as metapixels.

Example:




This is Hat element. There's 2 animations defined. The size of a region containing all frames is 128x64 pixels. So, the name of this element would be:
hat_128_64.png
Metapixels
To understand this part you should be familiar with metapixels concept. If you don't, read about them firstly [duckgame.fandom.com]
So, Hats++ has its own metapixels system, allowing to manipulate animations and other related stuff. Here's all of them:

Red
Green
Blue
Type
Name
Description
0
Any
Any
Boolean
Strapped on
If this metapixel exsists, a hat will be strapped on a duck after putting it on
1
Any
Any
Boolean
Create multiple hats
If this metapixel exsists, multiple hats will be used to form a sprite/frame (use this if your sprite/frame size is greater then 32x32. Max size: 64x64)
2
X
Y
2D vector
Frame Size
Size of one frame in pixels (for sprite sheets)
3
Value
Any
Integer
Animation type
Sets the type of an animation, which determines when an animation will be played
4
Value
Any
Integer
Animation delay
Sets the delay between changing frames of an animation
5
Value
Any
Boolean
Animation loop
If G channel equals 1, an animation will be restared and played again after it finishes. Otherwise it won't
6
Value
Any
Integer
Animation frame
Adds a frame to an animation
7
Start point
End point
Integer
Animation frame period
Adds a period of frames to an animation (from the start point to an end point)
8
Linking type
Any
Integer
Link quack animations
Links some animations (depending on the elements), saving the frame and the duration of it upon a change of the current animation. It will work properly only if all linked animations have the same amount of frames and their frame latencies are equal. If G channel equals to 1, frame will be saved. If G channel equals 2, frames will also be inverted (it works only with hat and both pets elements)
9
128-X
128-Y
2D vector
General wings offset
Adds a general offset to wings
10
128-X
128-Y
2D vector
Crouch wings offset
Adds an offset to wings when duck is crouching
11
128-X
128-Y
2D vector
Ragdoll wings offset
Adds an offset to wings when duck is in ragdoll
12
128-X
128-Y
2D vector
Slide wings offset
Adds an offset to wings when duck is sliding
13
Any
Any
Boolean
Generate wings animations
Generates animations for wings
14
Any
Any
Boolean
Flying pet changes angle
If this metapixel exsists, a flying pet will change it's angle towards your duck
15
Value
Any
Integer
Pet distance
Defines, how close will a pet approach to your duck until it stops
16
Any
Any
Boolean
Pet doesn't flip
If this metapixel exsists, a pet won't flip horizontally
17
Value
Any
Integer
Wings auto gliding frame
Defines a frame, that will be used for gliding animation (when duck is falling)
18
Value
Any
Integer
Wings auto idle frame
Defines a frame, that will be used for idle animation (when duck is standing on the ground)
19
Value
Any
Integer
Wings auto animations speed
Defines the speed of auto generated animations
20
Any
Any
Boolean
Change animations on level change
If this metapixel exsists after frames declaration of an animaion, that animation will be added to changing animations list. Create multiple animations with same type(and using this metapixel), so that the animation of this type will change one after another at the start of each match
21
Value
Any
Integer
Flying pet speed
Defines the speed of a flying pet
22
128-X
128-Y
2D vector
Wings net offset
Adds an offset to wings when duck is netted
23
Value
Any
Integer
On spawn animation
Defines an animation that will be set when hat is spawned (put it's index in G channel)

Keep in mind that if a metapixel is appliable only to some hat element, it will work only if placed inside corresponding element.
Creating a hat (part 2)
Preparations
Before adding animations you should define the size of one frame with metapixel 2. If the frame size if larger than 32x32 (max size: 64x64), also add metapixel 1.

Animations
Animations can be created with a special metapixel structure (to read details about these metapixels check the table):
  1. Animation Type (3)
  2. Delay (4)
  3. Loop / not loop (5)
  4. Frames (6/7)
  5. Change animation on level change (20) (optional)
Metapixels are read from the top to bottom. They have to be placed one after another without any blanks.
Let's go through each of them.

Animation type determines when an animation will be played. Some of them will only work with certain hat types.
All of them are listed here:
Index
Name
Description
0
OnDefault
Default animation
1
OnPressQuack
Animation that will be played when your duck quacks
2
OnReleaseQuack
Animation that will be played when your duck stops quacking
3
OnStatic
Animation that will be played when your pet will reach you (works only for pets)
4
OnApproach
Animation that will be played when your pet starts chasing you
5
OnDuckDeath
Animation that will be played when your duck dies (rip)
6
Flying
Wings-only animartion. It's played when your duck is jumping
7
StartIdle
Wings-only animartion. It's played when your duck is landing
8
Gliding
Wings-only animartion. It's played when your duck is falling
9
StartGliding
Wings-only animartion. It's played when your duck starts gliding
10
Idle
Wings-only animartion. It's played after your duck has landed
11
OnRessurect
Aimation that will be played when your duck ressurects (it usually happens when curent level changes)

Delay determines the amount of in-game frames between an animation frame changes. So delay n means that the animation frame will change every n in-game frames.

Loop value determines if an animation will be restarted and played again after it is finished.

Frames are defined using their indexes, so the first frame hat index 0. To define frames you can use either frame metapixel (6), or frame period metapixel (7). However, you can't use both of them in one animation (mb I'll add this feature later).
Frame metapixel just defines 1 frame. You can put any amount of them. Frame period metapixel defines, well, a period of frames. It can be used only 1 time. (For example, if this metapixel if equal to (7,0,5), the following frames will be added to an animation: 0,1,2,3,4,5. It's also possible to start with the index with greater value (e.g: (7,5,0): 5,4,3,2,1,0).
Examples & further explanations
Preview
Hat, that will be added to the extra hats' list in HatSelector. By putting it on you will also put on modded hat.
Example:







Hat
It's putted on you. Hat's size can not be bigger than 32x32. Animations, that can be linked: {on press quack, on release quack}.
Example:












There are two animations defined in this hat, and it's also strapped on.

Flying pet
Flying pets follow you around by air. You can specify it's speed and distance, to which the pet will fly. You can specify their speed, and the closest distane to which they can chase you.
Example:
















In this pet OnRssurect and OnDuckDeath animations are defined. OnRessurect animation is also set as OnSpawn animation. Animations, that can be linked: {on press quack, on release quack}, {on static, on approach}.

Walking pet
Walking pets follow you around by land. You can specify the distance, to which the pet will walk. You can specify the closest distane to which they can chase you,
Example:

























Wings
Wings are located behind your duck. They are prebuild to use specific animations. You can either use metapixel 13 to generate them or define them yourself. You can also specify idle and gliding frames.
Frames must be locaed vertically, from top to bottom. The first frame represents closed state of the wings, the last one - opened.
To make auto generated auto changing animations, put metapixel 20 and set it's G channel to how many different textures you have.
Example:

















In this element auto animations are generated 3 times. The color of wings changes every match.

Big hats
Theres a limit for hat's size: 32x32 pixels. I don't like limits, so I added a way to use bigger hats (up to 64x64). To point out that the hat is big, set 1-st metapixel (it's nessesary, because otherwise all particles, stones and capes would be considered as big hats).
Example:













ExtraHat
Contains vanilla additional hat information (cape, stone, particles, etc.). Extra hat will be applied to each frame of the hat element. If you want it to also be animated (to have animated particles probably, cause cloack can't be animated), define it's frame size and the size of the area where sprites are contained, as usual. Then your can put as many extra hats as you want. They will be applied to each frame in order you placed them, from right to left and from bottom to top (so, frame 1 will get the first extra fat, frame 2 will get second, and so one). If you didn't placed enough extra hats, it will just loop through all of the extra hats, until hat frames are over.
Example:




Creating a hat pack
If you want to create a hat pack as a mod, follow these steps:
  • Prepare a client mod template
  • Create a folder in the content folder of your mod and put all the hats here
  • Open your mod's code in any code editor (I assume you are familiar with coding)
  • Add a reference to the Hats++ mod (the .dll is located in the folder of the mod in steamapps\workshop\content\312530 folder)
  • Override OnPreInitialize method and add a path to your hats folder using AddHatPath method
Code example:
using static HatsPlusPlus.HatsUtils; //mod code... protected override void OnPreInitialize() { AddHatPath<MyMod>("myHats"); base.OnPreInitialize(); }
19 Comments
Molotov 18 Mar, 2024 @ 2:23pm 
Hey Polans, I have my doubts about the guide and I would love for you to answer some questions about this guide, if it's not too much trouble, I already sent you a request. ✌
MatsonWatson 27 Feb, 2022 @ 2:36am 
Hmm not sure if I understand... I sent you friend request if you care to help me a bit with more details^^
What I'm trying to achieve is some floating elements in front of animated hat. This, of course, needs cape to be in foreground compared to the animated hat. Is this even possible?
Last resort would of course be to animate the floating elements WITHIN the hat but this takes considerably more effort.
Polanas  [author] 26 Feb, 2022 @ 5:06am 
1. Yes, it's possible. You should keep that "space" where your hat's frames go empty.
2. Nah, depth is kinda tricky to sych + it's expensive
MatsonWatson 26 Feb, 2022 @ 2:16am 
EDIT: Is it possible to have cape (vanilla hat) and an animated hat at the same time? When I add extrahat.png all of its content is rendered on top of hat.png. Maybe I'm missing some metapixel I should be using?
Alternatively/additionally: Is pet or wings possible to have in the foreground?
Polanas  [author] 14 Jan, 2022 @ 6:19pm 
dms?
coolhandluke 14 Jan, 2022 @ 2:47pm 
I still don't understand
Polanas  [author] 14 Jan, 2022 @ 2:44pm 
I mean the part of the extra hat (basically vanilla hat) where hat is located. It should be empty.
coolhandluke 14 Jan, 2022 @ 1:45pm 
Wdym
Polanas  [author] 14 Jan, 2022 @ 1:18pm 
Make sure that hat data is empty in your extra hat ((0,0)-(64,32))
coolhandluke 14 Jan, 2022 @ 1:08pm 
I added an extrahat to my hat folder and it breaks the hats preview