Scrolling Game Development Kit UI Help Up to Edit Tilesets Dialog

The Full Screen Tileset Editor

The general sequence for editing a tileset is:

Listed below are each of the components on the tile editor screen described in detail. Click on the image above to jump to the help for a particular item.

Tile Grid

This displays a magnified view of the tile currently being edited. Clicking or dragging on this area or the smaller version (the tile at the right) has the same effect. It activates the currently selected tool at the position under the mouse pointer.

Currently Loaded Tile Preview

This is the unmagnified view of the graphic currently being edited. It is not automatically linked to any slot in the tileset (you must use Store to save it into the tileset and Get to load from the tileset)

Rotation Indicator

Clicking on the rotation buttons changes this value. The value displayed indicates the number of degrees of rotation that will be used when pasting the clip using the Paste+ tool. A positive value is counter-clockwise rotation while a negative value is clockwise.

Copied Clip

This displays the current contents of the tile editor "Clipboard". This is not the system clipboard and the contents of this clip are lost when the tileset editor is closed. This image is set when the Copy tool is used, and used by the Paste and Paste+ tools.

X Flip

Flip the copied clip horizontally. It can only operate on the copied clip, not directly on the tile currently being edited.

Y Flip

Flip the copied clip vertically. It can only operate on the copied clip, not directly on the tile currently being edited.

Grid Coordinate Display

This displays the current pixel coordinates under the mouse (if the mouse is over the grid or the tile). The coordinate represents and x,y offset from the top left corner of the tile being edited. The top left corner is 0,0.

Select First Tile

Changes the currently selected tile (in the tileset window) to the first tile in the tileset. It is only selected, not loaded.

Select Previous Tile

Changes the currently selected tile (in the tileset window) to the previous tile. It is only selected, not loaded.

Select Next Tile

Changes the currently selected tile (in the tileset window) to the next tile. It is only selected, not loaded.

Select Last Tile

Changes the currently selected tile (in the tileset window) to the last tile in the tileset. It is only selected, not loaded.

Get Selected Tile

Loads the currently selected tile in the tileset window into the editor as the tile currently being edited. The grid displays a magnified view of the tile.

Store To Selected Tile

Stores the tile from the tile currently being edited into the current slot in the tileset.

Toggle Grid Lines

Turn on or off the white lines separating the magnified pixels in the grid.

R--

Subtract twenty from the red value of the currently selected primary color in the color palette.

G--

Subtract twenty from the green value of the currently selected primary color in the color palette.

B--

Subtract twenty from the blue value of the currently selected primary color in the color palette.

R-

Subtract one from the red value of the currently selected primary color in the color palette.

G-

Subtract one from the green value of the currently selected primary color in the color palette.

B-

Subtract one from the blue value of the currently selected primary color in the color palette.

R+

Add one to the red value of the currently selected primary color in the color palette.

G+

Add one to the green value of the currently selected primary color in the color palette.

B+

Add one to the blue value of the currently selected primary color in the color palette.

R++

Add twenty to the red value of the currently selected primary color in the color palette.

G++

Add twenty to the green value of the currently selected primary color in the color palette.

B++

Add twenty to the blue value of the currently selected primary color in the color palette.

Gradient

Creates a smooth gradient of colors in the color palette. The gradient extends from the selected primary color to the selected secondary color using the current colors in those slots as endpoints for the gradient. (If using a 16-bit display, you should probably click "Make 16-bit" again after doing this.)

Reset

Resets the palette to the initial set of colors. (If using a 16-bit display, you may want to click "Make 16-bit" again after doing this.)

Make 16-bit

If the video mode (color depth) chosen for the full screen display (on the Edit Tilesets dialog) was 16-bit, you should probably click this button before drawing graphics for tiles. In 16-bit color mode, if a particular palette entry (each of which are defined with 24-bit precision) does not exactly match a 16-bit color, a drawing operation may cause dithered colors to be drawn into the tile to approximate the selected 24-bit color. This makes the Flood Fill tool ineffective. So in order to prevent dithering, this "Make 16-bit" button is provided to force all the colors in the palette to 16-bit colors so that they are not dithered when used on a 16-bit-color display. If you realized you had a problem too late, you may be interested in the Color Change tool.

Primary Color

This displays the RGB (red, green, blue) components for the currently selected "Primary Color" in the color palette. The "Primary Color" is selected by left-clicking on a color in the palette. The currently selected primary color is indicated by a white outline around that color. Only the currently selected primary color can be altered using the R--, G--, B-- (etc.) buttons.

Secondary Color

This displays the RGB (red, green, blue) components for the currently selected "Secondary Color" in the color palette. The "Secondary Color" is selected by right-clicking on a color in the palette. The currently selected secondary color is indicated by a gray outline around that color.

Color Palette

This is where you can select a primary color and secondary color as the current color to use for the various tools. The primary color is generally used by activating the tool with the left mouse button on the grid while the secondary color is used by activating the tool with the right mouse button. Some tools (such as horizontal gradient) make use of both colors.

Left 15 Degrees

This alters the current rotation setting by adding 15 degrees.

Left 1 Degree

This alters the current rotation setting by adding 1 degree.

Right 1 Degree

This alters the current rotation setting by subtracting 1 degree.

Right 15 Degrees

This alters the current rotation setting by subtracting 15 degrees.

Translucency

Click this to cycle through 10 transparency levels. A zero percent translucency setting will cause Paste+ to overlay the graphic opaquely (except for the background/transparent color if applicable). A one hundred percent translucency setting will cause Paste+ to overlay the graphic invisibly. A 50 percent translucency setting will cause pixels that would normally be opaque (non-background) to be averaged with pixels already in the image as they are overlaid. The translucency setting does not apply to the normal Paste tool.

Toggle Anti-Aliasing

This applies only to the Paste+ tool when pasting a rotated image. If anti-aliasing is on (the button reads "Turn AA Off") the rotated image will result from extra processing to better approximate colors based on how close the rotated pixels are to the actual pixels on the screen (rotation often results in pixels ending up at non-integral positions). The end result is something smoother than it would be if AA were turned off, but it can also be a bit more blurry.

Make 360°/10° Sprite

This is used to get around the tedium of creating the individual state frames for a 360-degree sprite. It automatically rotates the current image to 36 positions and stores them in the tileset consecutively. It effectively performs these steps automatically:

The Anti-Aliasing and Translucency settings affect the Paste+ step.

Undo

Most actions with a tool in the grid (or tile) can be un-done by clicking this button. Five states (total) are stored so you should be able to click undo four times to go back four steps. If you click undo a fifth time, the undo buffer wraps around to the latest state.

Redo

If you click undo and decide you wanted to keep that last action instead of undo it, click redo. (Actually this button simply goes through the undo buffer in the other direction.) If you click redo without clicking undo, it will wrap around the end of the undo buffer to the oldest stored state.

Clear

Clear the tile and grid to black.

Left Shift

Shift the graphic being edited one pixel to the left. Pixels in the rightmost column are not erased or replaced with anything; they continue to reflect the rightmost column of pixels that was there before.

Right Shift

Shift the graphic being edited one pixel to the right. Pixels in the leftmost column are not erased or replaced with anything; they continue to reflect the leftmost column of pixels that was there before.

Upward Shift

Shift the graphic being edited one pixel up. Pixels in the bottommost row are not erased or replaced with anything; they continue to reflect the bottommost row of pixels that was there before.

Downward Shift

Shift the graphic being edited one pixel down. Pixels in the topmost row are not erased or replaced with anything; they continue to reflect the topmost row of pixels that was there before.

Tileset Window

This window displays a portion of the tileset currently being edited. The currently selected tile is outlined with a dotted line and centered in the window. The currently selected tile is not directly linked to the grid or the tile currently being edited. What the currently selected tile does indicate is the slot into which the tile will be stored if you click the Store button. It also indicates which tile to load when you click the Get button. To change which tile is currently selected, you can use the First ("|<<"), Previous ("<"), Next (">") or Last (">>|") buttons, or you can simply click on the tile you want to select in the tileset window.

 

Tools

To use a tool (listed below), click the button associated with that tool if it's not already selected, then click or hold the mouse button (as appropriate for the tool) on the grid (or the tile) to activate it. Clicking the left mouse button generally activates the tool with the currently selected primary color, while clicking the right mouse button generally activates the tool with the currently selected secondary color.

Pixel

(Tool) Click the mouse button to draw a single pixel; drag to draw many pixels.

Pencil

(Tool) Drag the mouse to draw a continuous "scribble".

Line

(Tool) Drag from a starting point to an ending point to draw a straight line between the two.

Vertical Gradient

(Tool) Drag out a rectangle. The rectangle will be filled with horizontal lines forming a smooth vertical color gradient from the top of the rectangle to the bottom of the rectangle. Starting the drag using the left mouse button uses the primary color at the corner where the drag started and the secondary color at the corner where the drag ends. Starting the drag using the right mouse button uses the secondary color at the corner where the drag starts and the primary color at the corner where the drag ends.

Horizontal Gradient

(Tool) Drag out a rectangle. The rectangle will be filled with vertical lines forming a smooth horizontal color gradient from the left side of the rectangle to the right side of the rectangle. Starting the drag using the left mouse button uses the primary color at the corner where the drag started and the secondary color at the corner where the drag ends. Starting the drag using the right mouse button uses the secondary color at the corner where the drag starts and the primary color at the corner where the drag ends.

Empty Rectangle

(Tool) Drag from a starting point to an ending point to form a rectangle. The rectangle will be drawn without replacing anything inside it.

Solid Rectangle

(Tool) Drag from a starting point to an ending point to form a rectangle. The rectangle will be one solid color.

Flood Fill

(Tool) Click the mouse at any point to perform a standard flood fill starting at the point. The fill stops at any color that does not exactly match the starting point. If the fill does not go as far as expected, see help on Make 16-bit and Color Change.

Hollow Ellipse

(Tool) Click and drag out the boundaries for an ellipse. The ellipse will be drawn such that each edge of the rectangle formed by the drag limits the edge of the ellipse. Only the pixels on the edge of the ellipse are drawn.

Solid Ellipse

(Tool) Click and drag out the boundaries for an ellipse. The ellipse will be drawn such that each edge of the rectangle formed by the drag limits the edge of the ellipse. The ellipse will be one solid color, leaving only pixels outside the elliptical shape unchanged.

Color Pick

(Tool) This tool copies colors from the tile into the palette. Left clicking on a pixel copies the color into the currently selected primary color and right clicking copies the pixels color into the currently selected secondary color.

Toggle Right Button Pick

This option alters the functionality of the right mouse button. Instead of activating the current tool with the secondary color, it copies the color of the pixel under the mouse pointer into the currently selected primary color in the palette.

Copy

(Tool) Drag out a rectangle to copy the contents into the clip. (Some operations and tools operate only on the clip and not directly on the tile.)

Paste

(Tool) As you move the mouse over the grid the clip appears with the top left corner under the mouse pointer. This tool performs a simple paste with no features (and is very fast). When you click, the clip will be copied into the tile exactly as is. Use Paste+ to paste with transparency, translucency and other features.

Paste+

(Tool) This tool is required to take advantage of many of the features offered in the tileset editor. As you move the mouse over the grid, the clip is drawn onto the grid under the mouse pointer with many manipulations according to various settings. When you click, the clip is permanently overlaid onto the tile as it is currently displayed. The clip is centered around the mouse pointer. If the pixels at each of the 4 corners of the clip are exactly the same color, this color will be used as the background/transparent color during the paste operation. Transparent pixels are not drawn. The clip is drawn using the current rotation, translucency and anti-aliasing settings.

Smooth

(Tool) Drag out a rectangle. The pixels inside this rectangle are blended with the surrounding pixels to get a professional-looking smoothed/anti-aliased appearance. Do this multiple times to smooth further. Pixels are only blended with their immediate neighbors. Pixels around the edge of the rectangle are not blended with pixels outside the rectangle (they are blended with fewer neighbors). Multiple applications of this tool will allow the color of one pixel to affect the color of a pixel two or more pixels away. The first application affects its neighbor. The second application causes the affected neighbor to affect its neighbors, passing on some of that color.

Color Change

(Tool) Click once on any pixel. All pixels in the tile that are exactly the same color will be changed to the active color (primary color or secondary color). This can be handy if you tried to flood fill and realized you should have clicked the Make 16-bit button. Since dithering generally occurs only with a few (slightly) different colors, a few clicks with the color change tool should be able to change all the similar pixels to exactly the same color.

Close

When you're done editing tiles (and storing them into the tileset) click this button to close the full screen editor.