SFMB - How to work with sprites
Summary
This wiki explains how to download and use the MM SpriteEditor program, and how to work with sprite resources (.png
& .sprite
files)
MM SpriteEditor
What is it?
Some people think that the MM SpriteEditor is a sprite creator program, like Aseprite, but that’s not the case. The purpose of the MM 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 the sprite editor is to set these up.
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
andSanta
) of the player should be placed for each sprite frame, and in what direction and angle they should face. - Where their 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
- Download the latest version.
- Move it into your
Mario Multiverse
folder next toMario.exe
. - Open it there.
- Make sure to check for updates by pressing the
Check update
button on theOptions etc.
tab. - Open a
.sprite
file.- You can use the open button inside the SpriteEditor program.
-
- Or you can associate
.sprite
files with SpriteEditor and open them directly.Show how
1.  2.  3.  - You can also click on the program icon to open recently used sprites.
- You can use the open button inside the SpriteEditor program.
-
- It's also possible to create a
.sprite
file from a.png
with thenew
button, but sometimes it's easier to just copy-paste an existing one. - If done right, you should see the spritesheet or sprite displayed.
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.
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.
Properties pane
- This is where the properties of
Sprite Frames
orAnimations
appear when you click on them.
Sprite frames pane
- If you click on one, it will appear in the
Preview
window with the set offset and area, and its properties will appear in theProperties
window. - Here you can set the area where the sprite is, but this happens automatically when you
double-click
on it. - 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.
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 resourcesAnimations pane
-
If you click on one
- the animation will appear in the
Preview
pane. - 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).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
- Some by the ThemeSettings
- 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
orHelmet.sprite
.- For example, in the
Helmet.sprite
file, thesprite frame
with index 7 is always the front-facing spiny helmet sprite no matter what.
- For example, in the
- You can read the full list on this page: [[sfmb_sprite_index]]{Sprite indexes}
- e.g.
Hotkeys
Double-click
: Auto select area and offset of spriteCTRL
+Scroll wheel
: ZoomW
,A
,D
,X
keys: Move offset
Workflows
- If you make changes to the
.png
files, make sure to pressReload Image
on theHome
tab in the SpriteEditor, so it displays the latest version of the spritesheet image. - If you are working with HD sprites (@2x), check the
Load HD Texture
checkbox on theOptions etc.
tab. - Regularly check for updates by pressing the
Check update
button on theOptions etc.
tab. - Don’t forget to save regularly!
Player sprites
- 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
andAnimation
, but also the helmet and propeller offsets. But before you do that, make sure that theHelmet
resource (.png
&.sprite
files) is already created and configured.
Helmets
- Click on the
Helmet
item and select aSprite frame
in theSprite frames
pane. If this doesn't make the helmet display in thePreview
pane, click on one of the arrows in theHome
tab.- You can change which helmet is displayed by changing the selected item in the
Helmet preview
.
- 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. - You can also change the angle of the helmet by adjusting the
FaceAngle
field in theProperties
pane.- e.g. when the player is looking up or ground pounding
- e.g. when the player is looking up or ground pounding
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.
Enemies
- By default enemies have one full enemy spritesheet, that contains all the enemy sprites.
- If you don't want to use the full enemy spritesheet, you can create individual spritesheets for each enemy, by naming the sprite
E_{EnemyName}
.- e.g.
E_FireBro
orE_Bowser
. - You can still keep the full enemy sprite sheet, because if there isn't an
E_{EnemyName}
override for an enemy, it will defualt back to the full enemy spritesheet.
- e.g.
- 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.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:Default
-> decided by the game.None
-> doesn’t display wings even if set.Single
-> only displaysWing1
.Double
-> displays one left and one right wing.Double2
-> displays two left wings.
Items
- By default items have one full item spritesheet, that contains all the item sprites.
- If you don't want to use the full item spritesheet, you can create individual spritesheets for each item, by naming the sprite
I_{ItemName}
.- e.g.
I_Coin
orE_FireFlower
. - You can still keep the full item sprite sheet, because if there isn't an
I_{ItemName}
override for an item, it will defualt back to the full item spritesheet.
- e.g.
Background layers
- Background layers must be named as the following:
Layer{DescriptiveName}
- e.g.
LayerOverworldHills
- e.g.
- Avoid using
FarBackground{something}.png
resources, it's obsolete! - You can set at what height the
Sprite frames
should display in-game by changing theirOffsetY
values- e.g. for clouds that appear and start repeating higher.
OffsetY
:0
means fixed to ground.
- You should always keep the
OffsetX
at0
- You can set the speed of the animation by adjusting the
Delay
in theProperties
pane.
Create new background layer
Static background layer
- Add one
Sprite frame
. - Click the
Full image
button on theHome
tab to automatically set the sprite area as the entire image and reset the offsets to zero.
Animated background layers
- Add a
Sprite frame
for each frame and adjust the area for each, while keepeing theOffsetX
at0
and setOffsetY
as needed. - Make sure all
Sprite Frames
have the same size (width and height). - Add an animation and name it the same as the file.
- e.g. File name:
LayerUnderground
, Aniamtion name:Underground
- e.g. File name:
- Set frame count of the
Animation
to the number ofSprite Frames
.
Modify existing background layer
Static background layer
- Select the first (and only)
Sprite Frame
. - Check and note the currently set
OffsetY
. - Click the
Full image
button on theHome
tab to automatically set the sprite area as the entire image and reset the offsets to zero. - Re-enter the old
OffsetY
.
Animated background layer
- Adjust the area of each
Sprite Frame
and adjustOffsetY
if needed. - Make sure all
Sprite Frames
have the same size (width and height). - Adjust frame count of the
Animation
if you changed the number ofSprite 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!