Skip to content

Designed for getting around edge bleeding issues in Phaser 3.

License

Notifications You must be signed in to change notification settings

lgibson02/FrameExtruder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frame Extruder

Designed for getting around edge bleeding issues found in the Phaser game engine when using spritesheets and tilesets. It works in the same way as the tile-extruder by @mikewesthad except it has a gui, does not have to be called from a terminal and doesn't require nodejs.

It is written in C# using Microsoft .NET 2.0 and has been designed and tested for use on Windows systems. However for use on other operating systems, my testing on a Debian system shows that using Mono seems to work quite nicely besides some minor control size issues that need to be fixed.

Here is a screenshot of the program running to show you how it looks.

Usage:

Usage is very simple, before selecting an image to use as a "frame sheet" (which is just my term to describe both tilesets and spritesheets), set the extrusion options to what you need them to be. Select the frame sheet by dragging an image file into the drag area or select manually.

A table of available extrusion options and their function:

Option Function
Frame Width/Height The dimensions for a single frame in the original frame sheet.
Margin Number of pixels between frames and the edge of the original frame sheet
Spacing Number of pixels between neighbouring tiles in original frame sheet.
Background Color Background color to use for extruded sheet, will show under spacing, margin and transparent pixels.
Save Copy Of Original Sheet Save a copy of the original unextruded frame sheet.

Extrusion In Phaser:

Because of the extrusion, the margin and spacing will need to be adjusted for everything to look right. If you had no margin and spacing before, margin will be 1px and spacing will be 2px.

// for tilesets...
const tileset = map.addTilesetImage("tileset", "tileset", 16, 16, 1, 2); // for an extruded 16x16 tileset
// for spritesheets
this.load.spritesheet("enemy", "enemy.png", {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2}); // for an extruded 16x16 spritesheet

Examples:

Tileset:

The results of extruding a single tileset using the default settings. Frame size 16x16 and no margin or spacing.

About

Designed for getting around edge bleeding issues in Phaser 3.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages