Sprite Editor

Sprite Editor

The Sprite Editor, also known as Spriteward, is a tool created by Big Bad Waffle (the developer of Isleward) to assist players, developers, and modders in creating images (also called assets or sprites) that work well in the game.

While the Sprite Editor works well for prototyping images and making quick edits, it can be tedious to test the created images in the Isleward server, since there is no way to download a created image.

The Sprite Editor can be accessed [spriteward.herokuapp.com/spriteEditor here], but the source code is currently not public.

User Interface

The user interface (or "UI") of the Sprite Editor is simple to start using. It consists of the canvas, the palette, the tool selection area, and the preview area. Additionally, the save and load menus can be used for saving your work, viewing the work of others, and remixing your past work and the work of other users.

Canvas

On the left side of the screen, there is a canvas or drawing area. Hovering over the canvas will cover the currently selected pixel with the currently selected color. Clicking with the left mouse button will change a pixel to the selected color. Clicking with the right mouse button will select the color that is being hovered over (commonly called the "eyedropper" or "color picker" tool in other image editing software). The canvas is where all the editing happens when using the Sprite Editor.

Color Palette

The color palette is how you select colors to draw with. It can be found at the top right of the Sprite Editor. Left-clicking on a color in the palette will select that color. The currently selected color will have a white outline/border around it. Scrolling up and down with a mouse wheel (or scrolling up and down on a trackpad, if your trackpad is capable of doing that) will also scroll through color choices. When using the Sprite Editor, the colors in the color palette are the only ones you are allowed to use. There is currently no way to change the palette when using the editor.

Tool Selection

The tool selection area, located below the color palette, allows the user to select different tools to use when creating their sprite. Currently, three tools are available, as well as an undo button, save and load buttons, and an option to change the canvas size. The user can select a tool by clicking on its button in the tool selection area. More information on the different tools available in the Sprite Editor is detailed in the "Tools" section below on this article.

Besides the four tools (three canvas tools and the undo button), there are the save and load buttons. When pressing the save or load button, a new menu appears, which is explained in the "Load Menu" and "Save Menu" sections below.

Preview

TBA

Load Menu

TBA

Save Menu

TBA

Tools

There are four tools available in the Sprite Editor - draw, fill, erase, and undo.

The 'draw' tool is selected by default. In other programs, this may be referred to as the "pencil" tool. This tool allows the user to draw a single pixel at a time, using the color selected from the color palette.

The 'fill' tool can be used for filling large areas with the same color. When selected, and used on a location, it performs a four-directional flood fill on the canvas, meaning that it will cover other pixels that are the same color as the start position. It is four-directional, meaning that pixels connected by the same color only diagonally will not be filled.

The 'erase' tool is similar to the 'draw' tool, except instead of setting pixels to the selected color in the color palette, it erases them, making them transparent. Pixels appear the same color as the background when they are erased.

The 'undo' tool reverses the previous action. It does not reverse changes in canvas size or previous uses of the undo button.

Controls

Besides the obvious controls, there are other hotkeys available for faster and more efficient sprite creation.

D to select the 'draw' tool

F to select the 'fill' tool

E to select the 'erase' tool

Control + Z for Undo

L to open the load menu

S to open the save menu

Left Mouse Button on a color on the color palette to select it

Left Mouse Button on a canvas pixel to color it with the selected palette color, or to use the fill and erase tools

Right Mouse Button on a canvas pixel to select that color

Mouse Wheel Up or Mouse Wheel Down to scroll through colors in the color palette.