04_WAND_GRAPHICS - NoitaModSDK/NoitaWandTemplate GitHub Wiki

4. Wand Graphics

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.

The Wand Graphics File (custom_wand_gfx.xml)

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>

Key Concepts

Sprite Dimensions

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.

Offset

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.

Creating an Animated Wand (Advanced)

To create an animated wand:

  1. Create a single PNG file (e.g., "animated_wand.png") that contains all frames of your animation side by side.

  2. Each frame should be the same size (e.g., 16x16 pixels).

  3. 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]
    
  4. Increase frame_count to the number of frames in your animation.

  5. Adjust frames_per_row if your sprite sheet has multiple rows.

  6. 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>

Creating Your Wand Sprite

  1. Create your wand image in a graphics editor (e.g., Aseprite). Keep in mind the dimensions you set in the XML file!
  2. If creating an animated wand, arrange the frames horizontally in your image file.
  3. Save the image as a PNG file in your mod's wand folder.

Important Considerations

  • The pos_x and pos_y attributes in RectAnimation 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).

Relationship with Entity XML

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.

⚠️ **GitHub.com Fallback** ⚠️