04_WAND_GRAPHICS - NoitaModSDK/NoitaWandTemplate GitHub Wiki
This chapter focuses on setting up the visual appearance of your custom wand. We'll cover how to create and configure the graphics file, and explain important concepts related to sprite dimensions and positioning.
This XML file defines how your wand's sprite should be displayed in the game. Here's a typical structure with explanations:
<Sprite filename="mods/your_mod_name/files/wands/custom_wand.png" >
<RectAnimation
name="default"
pos_x="0"
pos_y="0"
offset_x="3"
offset_y="4"
has_offset="1"
frame_count="1"
frame_width="14"
frame_height="8"
frame_wait="0.2"
frames_per_row="10"
loop="0" >
</RectAnimation>
</Sprite>
The frame_width
and frame_height
attributes define the size of each frame in your sprite sheet. In the example above, each frame is 14x8 pixels. This should match the actual dimensions of your wand image in the PNG file.
The offset_x
and offset_y
attributes determine the position of the sprite relative to the entity's center point. In the example, x=3 & y=4 for most wands in the game.
To create an animated wand:
-
Create a single PNG file (e.g., "animated_wand.png") that contains all frames of your animation side by side.
-
Each frame should be the same size (e.g., 16x16 pixels).
-
Arrange the frames horizontally in your image file.
For example, a 4-frame animation might look like this in your image file:
[Frame 1][Frame 2][Frame 3][Frame 4]
-
Increase
frame_count
to the number of frames in your animation. -
Adjust
frames_per_row
if your sprite sheet has multiple rows. -
Modify
frame_wait
to control animation speed (in seconds).
Here's an example of a 4-frame animated wand:
<Sprite
filename="mods/your_mod_name/files/wands/animated_wand.png"
offset_x="8"
offset_y="8" >
<RectAnimation
name="default"
pos_x="0"
pos_y="0"
frame_count="4"
frame_width="16"
frame_height="16"
frame_wait="0.15"
frames_per_row="4"
loop="1" >
</RectAnimation>
</Sprite>
- Create your wand image in a graphics editor (e.g., Aseprite). Keep in mind the dimensions you set in the XML file!
- If creating an animated wand, arrange the frames horizontally in your image file.
- Save the image as a PNG file in your mod's wand folder.
- The
pos_x
andpos_y
attributes inRectAnimation
define the starting position of the animation in your sprite sheet. Usually, these are set to 0. - The
loop
attribute determines if the animation should repeat (1) or play once (0).
Remember to reference this graphics file in your wand entity XML:
<AbilityComponent
sprite_file="mods/your_mod_name/files/wands/custom_wand_gfx.xml"
...>
</AbilityComponent>
In the next chapter, we'll explore how to add visual effects to your wand, enhancing its magical appearance.