Editor splash

How to use custom graphics

There usually comes a time when you find the need to replace the default images with your own custom graphics. This is possible without overwriting any of the default images. Custom graphics are a great way to make your game episode unique and colorful.

The process is quite simple, but for those of you who don't know how, here is an in depth look at using custom graphics with the editor.






Level and episode folders

When using custom graphics, it's not necessary to replace any global data, you simply have to put your graphics in the per level or per episode folder of your game. All level files of an episode are placed together in this one folder.

Level Custom Folders - are folders which have the same name as the level file. For example, the folder name for the level "Dracula.lvlx" would be "Dracula".



Placing custom graphic files with a bunch of level files together means they will be customized to all other levels in the episode, but when you put the graphics in the level custom folder, the graphics will be customized for that level only.

It's also possible to replace graphics in world maps. Accordingly, the same goes for creating a World Custom Folder, the folder which has the same name as the world map file. Note: If you're going to play your episode with the SMBX game engine, you shouldn't make a world custom folder, as SMBX does not support custom folders for world maps. Instead you'll have to place the graphics in the episode folder along with the world map files.


Customizing level graphics

Blocks. To replace the blocks, you'll need to create graphic files with names such as"block-*.ext". * standing for the ID of the block you are replacing, and "ext" is an image file extension. SMBX uses the GIF format without transparency. If you want to use transparency, you will have to create a transparency mask for your image. The mask image should have a name like "block-*m.ext". An example would be "block-23.gif" for the source image and "block-23m.gif" for the mask image, which defines the transparency pixels. (Read more about mask images). The filename of the target image file you're customizing, can be found in the global image directory of your config pack. Keep in mind that for SMBX you should use the GIF format for mask images.

The blocks have three types of graphics:

- Static

- Animated

- Sizable


   -Static blocks have one static frame. You can use images with any sizes, but you have to use the same format which your game confiig uses for levels and episodes.


Example of a static image


   -Animated blocks have a vertical frameset image. Each frame must have same height and your image must have same frame number as the original block


Frameset for 4 frames and animation




   -Sizable blocks are one image divided into 9 pieces which are called "Corners", "Sides" and "Center". Sizable blocks can also have any size along with being resized. Sizable blocks are displayed under most of the BGO's.

    Note: If you're customizing a block for SMBX, the image should have an image size of 96x96 pixels.


Resizable block and its source sprite


Return to top


Background objects are the simple scenery of levels. Sceneries have only two types which are, static and animated. BGO images are similar to Blocks, but have one difference: If you're going to use your episode with SMBX, the images must have the exact same size as the original sprite. The image filenames of BGO's usually are something like "background-*.ext".


Static picture


Sprite for 4 frames and animated picture



Being careful when using BGOs: the BGOs are shared by the Z-position: background-2 Z-level, which is the lowest Z-level, these BGOs are displayed under sizable blocks. Background-1 Z-level is displayed over sizable blocks, but under playable characters, NPCs, and blocks. The foregound level is a displaying over anything, but under blocks and BGO's which the "foreground-2" Z-level. Note related to SMBX: In SMBX the BGOs define their Z-position by an array data position. I.e. each BGO has its own sorting priority which defines the BGO's Z-position.


Return to top


Non-Playable Characters have their own graphic standards. You would have to use custom graphics with the same size and animation frames as the original sprite to replace them. If you want to use custom frame numbers, custom sizes, you can define all those ( graphical settings) in the special config file called NPC.txt (read more). The image filenames of NPC's usually is a "npc-*.ext".

NPCs have multiple graphics types:

- Statical, you can use one image with one frame for an item.


- Animated simple, these have animated frames like blocks or BGO.



- Animated with left-right defined direction. Allows defining images for the NPC's left and right direction.



- Animated with left-right-upper directions defined, allows defining images for left and right NPC's directions, along with left and right directions for upper state.



- Animated with rotation. Allows you to define the NPC's frames with round rotation (the NPC should be able to adhease to the celling and walls).



- Animated with the special animation algorithm. The NPC has an algorithmic pre-defined frame sequence, this is not possible to redefine if you're going to use the NPC in SMBX.



(Read more about NPC customization)


Return to top


Playable Characters. These are a 10x10 matrix-sprite which has a size of 1000x1000 pixels and about 100 frames in total. Each frame of the playable character can have a maximum size of 100x100 pixels. When you're customizing a playable character, make sure that the frames are calibrated to the SAME physics config as the original frameset of the playable character. Note: It's not possible to edit collision (hit) boxes for the playable character's frames in SMBX, and thus you should make use of pre-defined collision box positions when drawing the sprite of your character.




Return to top


Backgrounds - Are the images which are displayed under all the items in a level. Backgrounds usually have image filenames like "background-2-*.ext".

Backgrounds have mainly two types of images: statical, and animated like BGOs. Although backgrounds also have their own displaying modes, which are single-row, double-row and tiled.


- single-row backgrounds have one row which repeats horizontally, but which does not repeat vertically.
Single-row backgrounds move vertically in proportion to the section's height.

The image height must be greater than 600 pixels (which is the default section height).


Screen only and real demo (horizontal)



Screen only and real demo (vertical)



- double-row backgrounds are composite backgrounds which use two images for each row.
The double-row backgrounds do not move vertically.
The summary height of both images must be greater than 600 pixels (which is the default section height).


Screen only and real demo


Editor related note: Single-row and Double-row backgrounds will only be displayed at the bottom or top (according to the attachment types that have these backgrounds) with only horizontal repeating. If you want to see your background in a tiled like way, when exporting the image check the "Tiled background" box. Additionally, in the INI configs there is an available flag called "tiled in the editor", which will cause your single-row background to be tiled-like, although only in the editor, as in the game your background will be displayed in it's original state.


Be careful when replacing single-row backgrounds as they repeat only horizontally, and in the editor you'll then only see the attached image. You can use background images in any size, but when you customize the animated background, its sprite must have the same number of frames as the original background. A background image must also have a height that is at least half the height of the screen (in SMBX the screen height is 600 pixels).




- Tiled backgrounds repeat in both directions, horizontally and vertically. The image can have any size.



Note: Some backgrounds have the magic effect, that divides the image into strips which move at different speeds.




Return to top


Customizing the world graphics

World graphics are usually placed together with the world map file, but you can place the images instead in the World Custom Directory (this is not supported by SMBX).


Tiles, Paths, Sceneries. These graphics are similar to the BGOs used in levels. The images have two types which are, static and animated. These image files also usually have names such as "tile-*.ext", "path-*.ext" and "scene-*.ext".


Levels. Level images have some minor differences in comparison to other images. They always attach to an item's bottom-center position, where they are used. The image files of levels are usually named something like "level-*.ext".



Return to top


Things to note when customizing

- When customizing an animated item, make sure that your sprite has the same number of frames as in the original image.

- Remember that if the size of a custom BGO is larger than the original image you are replacing, it will be cropped in SMBX. In other words, don't use custom images larger than the image you're replacing if you intend to use them in levels created for SMBX. This also applies to Tiles, Sceneries, Paths and Levels in the World map.

- When customizing a NPC, you'll have to create the image sprite with the same image size and number of frames as the original. If you're creating a custom image size, remember to create the npc-*.txt config file for defining the properties of your custom NPC.

- Remember to be careful with how you name your files under UNIX-like operating systems, an example would be "thecat" and "TheCat", remember that both are recognized as entirely different files.



Return to top


Graphic formats supported


The PGE supports the following graphic formats:

Format Description Notes
GIF CompuServe GIF, without transparency (using the masks)
GIF CompuServe GIF, with it's own transparency SMBX will fill the transparency with black
BMP Uncompressed image format (using the masks)
PNG Portable Network graphic, with alpha-channel transparency Not supported by SMBX






<< Back

Copyright © 2014-2017 Platformer Game Engine by Wohlstand project.