Summary

This wiki explains how to download and use the SFMB SpriteEditor program, and how to work with sprite resources (.png & .sprite files)

SFMB SpriteEditor

What is it?

Some people think that the SFMB SpriteEditor is a sprite creator program, like Aseprite, but that’s not the case. The purpose of the SFMB SpriteEditor is to configure compatible spritesheets (e.g., Item.png) and sprites (e.g., LayerOverworld.png). These configurations are saved into a .sprite file with the same name as the spritesheet (e.g., Item.png -> Item.sprite). But what does “configure” actually mean, you may ask.

A spritesheet consists of multiple sprites. These sprites can appear in different positions on the sheet, with different sizes. The main goal of this sprite editor is to set these up.

  • img
  • img

In addition, here you can also configure things like:

  • How much the subject should be offset on the X and Y axis compared to its original origin.
  • Where the helmets (Buzzy, Spiny, Pumpkin and Santa) of the player should be placed for each sprite frame, and in what direction and angle they should face.
    • All helmet types share the same values (position, direction, angle)
  • Where the propellers should be positioned and whether they appear in front of the player, behind, or not at all.
  • Where the wing(s) of enemies should be placed.
  • Speed, frame count, and loop type of custom-made or predefined animations.

There are also cases where an image doesn’t contain a spritesheet but only a single sprite, like unanimated background layers (e.g., SMB LayerOverworld.png).

And of course, there are exceptions when it’s not possible to create a .sprite file for a spritesheet or a sprite, since its configuration is hardcoded in the game itself (e.g., TileOverworld).

Download & Setup

Where

  • For beta testers: pinned messages in the #resource-sprite text channel.
  • For DEMO users: pinned in the #demo-game-themes forum channel.

How

  1. Download the latest version.
  2. Move it into your Mario Multiverse folder next to Mario.exe.
  3. Open it there.
  4. Make sure to check for updates by pressing the Check update button on the Options etc. tab.
    • img
  5. Open a .sprite file.
    • You can use the open button inside the SpriteEditor program. - img
    • Or you can associate .sprite files with SpriteEditor and open them directly.
      Show how
      1. img
      2. img
      3. img
    • You can also click on the program icon to open recently used sprites.
  6. It's also possible to create a .sprite file from a .png with the new button, but sometimes it's easier to just copy-paste an existing one.
  7. If done right, you should see the spritesheet or sprite displayed.
    • img

Setup layout

  • You can rearrange the panes (sub-windows) by grabbing the top of its border and dragging it.
  • While dragging, small arrow icons will appear. If you drag one pane into it, it will attach to the edge of that another pane.
  • gif1

Panes

There are several docking panes (sub-windows) in SpriteEditor.

Preview pane

  • Here you can see the animations and sprites with the set offset.
  • The intersection of the two lines is the origin of the current subject.
    • img

Properties pane

  • This is where the properties of Sprite Frames or Animations appear when you click on them.

Sprite frames pane

  • If you click on one, it will appear in the Preview window with the set properties, and its properties will appear in the Properties window.
  • Here you can set the area where the sprite is, but this happens automatically when you double-click on it.
    • gif2
  • You can also set the offset here, but this is easier with the small arrow icons in the Home tab. With the offset you can shift the sprite from the center of the origin on the X and Y axes.

    • gif3

      Show common origins
      • Center Bottom:
        • Players
        • Enemies
        • Background Objects
        • Items
        • So most things that interact with the ground
      • Left Top (x:0; y:0):
        • Background Layers
        • Fonts
        • So most UI-related resources

Animations pane

  • If you click on one

    • img
    • the animation will appear in the Preview pane.
      • Animation
    • and its properties will appear in the Properties pane.
      • FirstFrame -> Set which frame to start from.
      • FrameCount -> How many of the following sprite frames it should use.
      • Delay -> Delay between frames.
        • -1 means to use the default.
        • 1 means next sprite every frame (for 60fps animation)
        • 2 means next sprite every 2nd frame (for 30fps animation)
        • …
      • LoopType -> Whether it should loop or play once.
  • You can also create your own animations, but the names of animations are defined in the game.
    • Some by the ThemeSettings
      • e.g. Background Objects, Background Layers
    • And some by internal game code
      • e.g. Players, Enemies
      • You can read the list on this page: [[sfmb_sprite_named_animation]]{Named animation definition}
  • Sometimes you only create an "animation" to reference a sprite (from a spritesheet) in the ThemeSettings editor. That means you don't create a real animation with frames, you just name a sprite to reference it later.
    • e.g. Background Objects.
  • Some spritesheets don't support animations at all. Those use predefined sprite frame indexes for specific sprites.
    • e.g. Enemy.sprite or Helmet.sprite.
      • For example, in the Helmet.sprite file, the sprite frame with index 7 is always the front-facing spiny helmet sprite no matter what.
    • You can read the full list on this page: [[sfmb_sprite_index]]{Sprite indexes}

Hotkeys

  • Double-click: Auto select area and offset of sprite
  • CTRL + Scroll wheel: Zoom
  • W, A, D, X keys: Move offset

Workflows

  • If you make changes to the .png files, make sure to press Reload Image on the Home tab in the SpriteEditor, so it displays the latest version of the spritesheet image.
  • Regularly check for updates by pressing the Check update button on the Options etc. tab.
  • Don’t forget to save regularly!
  • If you wan't to extended animations by using named animations for specific enemies or items (like Bowser or Coin) from the combined big spritesheet resources that have all the enemies or items, which use predefined sprite frame indexes (like Enemy or Item)
    • you can create individual spritesheets resources for each of them, by creating an I_{ItemName} or E_{EnemyName} override.
      • e.g. I_Coin or E_Bowser.
    • You can still keep the full spritesheet with the predefined sprite frame indexes, because if there isn't an {X}_{Name} override for an item or enemy, it will defualt back to the full spritesheet.
    • You can read the list of named animations on this page: [[sfmb_sprite_named_animation]]{Named animation definition}
  • If you wan't to use HD (2x) sprites
    • Choose a render eninge in Mario Config that supports HD render.
    • Set the sprite load mode in Mario Config to HD first (recommended) or both.
    • Name your HD image files as {ImageFile}@2x.png.
    • Create a half resolution duplicate without the @2x part.
      • This will be used for calculations, and if HD sprites cannot be loaded.
      • Check the Load HD Texture checkbox in SpriteEditor on the Options etc. tab.
      • If you are ripping sprites, use this tool to automate some of the steps: Sprite rips to MM sprite resources

Players

  • For all possible animations, you can check existing player .sprite files.
  • When working with player sprites, you not only need to create and configure each Sprite frame and Animation, but also the helmet and propeller offsets. But before you do that, make sure that the Helmet resource (.png & .sprite files) is already created and configured.

Helmets

  • Click on the Helmet item and select a Sprite frame in the Sprite frames pane. If this doesn't make the helmet display in the Preview pane, click on one of the arrows in the Home tab.
    • img
    • img
    • You can change which helmet is displayed by changing the selected item in the Helmet preview.
      • img
  • To change the helmet offset, use the arrow icons on the Home tab.
  • You also need to define what direction the player is facing (if the head is visible) by selecting an item in Face direction for Helmet, so the correctly oriented helmet can be displayed.
    • img
  • You can also change the angle of the helmet by adjusting the FaceAngle field in the Properties pane.
    • e.g. when the player is looking up or ground pounding
      • img

Propeller

You only need to set this when configuring players with the propeller power-up.

  • Click the Propeller item to work with it.
  • It's basically the same as helmets, but without face directions.
  • You can change its Z-order (to be behind or in front of the player sprite) or hide it completely for specific situations.
    • img

Enemies

  • When working with enemies (either with the full enemies spritesheet or the individual enemy spritesheets), you need to configure their wing position(s) for each Sprite frame.
  • Click the desired Wing item to work with it.
    • img
    • Wing1 is the left wing (default), Wing2 is the right wing (can be set to display as a left wing) (optional).
    • You can set the offset of each wing separately.
  • The workflow is very similar to helmets, but with different options.
  • You can decide the Wing style of the sprite to display in-game:
    • img
    • Default -> decided by the game.
    • None -> doesn’t display wings even if set.
    • Single -> only displays Wing1.
    • Double -> displays one Wing1 and one Wing2.
    • Double2 -> displays two Wing1.

Background layers

  • Background layers must be named as the following: Layer{DescriptiveName}
    • e.g. LayerOverworldHills
  • Avoid using FarBackground{ThemeName}.png resources, it's obsolete!
  • You can set at what height the Sprite frames should display in-game by changing their OffsetY values
    • e.g. for clouds that appear and start repeating higher.
    • OffsetY: 0 means fixed to ground.
  • You should always keep the OffsetX at 0
    • img
  • You can set the speed of the animation by adjusting the Delay in the Properties pane.

Create new background layer

Static background layer

  1. Add one Sprite frame.
  2. Click the Full image button on the Home tab to automatically set the sprite area as the entire image and reset the offsets to zero.
    • img

Animated background layers

  1. Add a Sprite frame for each frame and adjust the area for each, while keepeing the OffsetX at 0 and set OffsetY as needed.
  2. Make sure all Sprite Frames have the same size (width and height).
  3. Add an animation and name it the same as the file.
    • e.g. File name: LayerUnderground, Aniamtion name: Underground
  4. Set frame count of the Animation to the number of Sprite Frames.
    • img

Modify existing background layer

Static background layer

  1. Select the first (and only) Sprite Frame.
  2. Check and note the currently set OffsetY.
  3. Click the Full image button on the Home tab to automatically set the sprite area as the entire image and reset the offsets to zero.
  4. Re-enter the old OffsetY.

Animated background layer

  1. Adjust the area of each Sprite Frame and adjust OffsetY if needed.
  2. Make sure all Sprite Frames have the same size (width and height).
  3. Adjust frame count of the Animation if you changed the number of Sprite Frames.

If you want to change how and what background layers appear in-game, please check this detailed tutorial: [[sfmb_tutorial_theme_settings]]{How to use ThemeSettings}.

Fin.

That’s not all, but other things might be easier to figure out if you experiment with them. That’s one of the best ways to learn!

If something is still not clear, DM me, the author (Marci599) on Discord and I will try to help!