Click or drag to resize
New Tile Tutorial

This page details some of the aspects of creating new tiles, and includes steps for:

  • Drawing new tile graphics
  • Defining frames offset from the default position
  • Defining tiles that overlap other tiles
  • Defining new tile solidity shapes

A single task has been selected to illustrate these steps. This tutorial will walk through defining 4 new tiles that represent the pieces of a sloped gangplank. Specifically, we will define 2 tiles that represent the left and right half of an inclined surface on which the player can walk (a slope of 1/2), and two more tiles to represent the same tiles flipped (a slope of -1/2). Furthermore, the shapes defined for these tiles will allow the player to jump upward through the tiles, but land down on a solid surface from above.

Drawing the graphics
  1. Begin with the sample project (select Scrolling Game Development Kit Sample Project from the "New Project" pop-up menu in the File menu).
  2. Expand the SHFL32x32 graphic sheet to make room for additional tiles.
    • In the project tree, select the SHFL32x32 node under the Graphic Sheets node.
    • Double-click the node or select Edit from the context menu or Properties from the View menu.
    • Update the "Rows" property to 17.
    • Click the Update button.
  3. Draw an image of an inclined ramp with a railing.
    • Select the "Edit Images" node under SHFL32x32
    • Double-click it or select Edit from the context menu or Properties from the View menu.
    • Scroll to the bottom of the Cell Manager pane and select the first cell in the last row (the first blank cell in the sheet).
    • Select "Line" from the Tools menu.
    • Drag a black line from 0,31 to 31,16 in the cell editor (see the title bar of the editor pane to track the coordinate of the mouse cursor). This will represent the dark underside of the ramp.
    • Select "Solid Gray" from the Backdrop popup menu in the Edit menu.
    • Select white as the line color from the color palette by left-clicking on the white square.
    • Drag a line from 0,30 to 31,15. This will represent the light top side of the ramp.
    • Select the medium gray color from the color palette (red, green and blue = 169).
    • Drag a line from 0,16 to 31,1. This will represent the handrail.
    • Drag a line from 15,8 to 15,22. This will represent handrail supports.
    • Click the "Store to Selected Cell(s)" button in the Cell Manager pane.
Defining Frames
  • Define 4 frames based on the new graphic.
    1. Edit the SHFLTiles Frameset.
    2. Select SHFL32x32 from the "Graphic Sheet" dropdown list.
    3. Select the image of the ramp at the end of the list of cells.
    4. Select "Add Selected Cells to Frameset" from the Frameset menu 4 times.
    5. Scroll to the end of the frames in the right-hand pane.
    6. Of the last 4 frames that were just added, select the second and third frames (hold the Ctrl key while clikcing on a frame to add it to the selection).
    7. Enter "-16" into the "dy" property for these frames. This will raise these frames vertically to represent the other half of the half-inclined ramp.
    8. Select the last frame (deselecting the others) and then Ctrl-select the next-to-last frame to select only the last 2 frames.
    9. In the Frameset menu, select Transform Selected Frames->Horizontal Flip->Accross Center
Defining Tiles

The new frames added to the frameset will automatically be included in the SHFLTileset tileset. Therefore it is not necessary to do anything additional to add these frames to the tileset. However, it is worth noting at this point that you can see the numeric indexes assigned to the new tiles by viewing SHFLTileset and selecting the frames in the "Available Frames" list. The first number in the status bar represents the numeric index of the frame in the frameset, and because this number does not appear in the dropdown list of "Mapped Tiles" above, this means that those frames will be available as-is in the map editor. The number will also represent the index of the tile in the tileset. You should also note that the width and height are 32x32. Because some of the new frames have been offset by -16, and because the height of the original graphics were 32x32, tht means that the tiles that are offset will overlap the tiles above them (some of the handrail can draw over the tile above it).

Define New Tile Shapes

Now we have to define new shapes for the new tiles because there are no pre-packaged shapes that allow a sprite to move freely through a sloped tile, but land on it as if it were solid from above. The new shapes will be:

  • UphillRightTopTileShape - Same as UphillRightTileShape, except the tile will behave like an empty tile when approached from the right side or below.
  • UphillLeftTopTileShape - Same as UphillLeftTileShape, except the tile will behave like an empty tile when approached from the right or below.
  • DownhillLeftTopTileShape - Same as DownhillLeftTileShape, except the tile will behave like an empty tile when approached from the left or below.
  • DownhillRightTopTileShape - Same as DownhillRightTileShape, except the tile will behave like an empty tile when approached from the left or below.

  1. Copy the existing implementations of the half-slope shapes.
    • Open TileShapes.cs from the SourceCode folder of the Project Tree.
    • Starting from shortly after line 500 should be the implementation of UphillRightTileShape. Select the entire implementation of this class and the 3 classes that follow, which define the half-slope shapes. Do not include TopSolidTileShape, which follows the next 3.
    • Press Ctrl-C to copy the code.
    • Press Ctrl-End to go to the end of the file.
    • Press Ctrl-V to paste the copied code.
  2. Rename the copies to represent the new tile shapes.
    • Find and replace all occurrences of RightTileShape and LeftTileShape After the end of the TopSolidTileShape class with RightTopTileShape and LeftTopTileShape respectively.
  3. Make the new shapes behave like the empty shape for the appropriate directions
    • Replace each occurrence of ": TileShape" after TopSolidTileShape with ": EmptyTileShape" (there should be 4).
    • Delete the GetBottomSolidPixel and GetRightSolidPixel functions from UphillRightTopTileShape (select the line with GetBottomSolidPixel in it and delete it and everything between the following set of curly braces. Repeat for GetRightSolidPixel). You can also delete the comments for these functions. Note that deleting these functions causes the UphillRightTopTileShape to inherit the behavior of the empty shape (base class) for sprites approaching the tile from below or to the right.
    • Delete the GetBottomSolidPixel and GetRightSolidPixel functions from UphillLeftTopTileShape.
    • Delete the GetBottomSolidPixel and GetLeftSolidPixel functions from DownhillLeftTopTileShape.
    • Delete the GetBottomSolidPixel and GetLeftSolidPixel functions from DownhillRightTopTileShape.
Define Solidity
  1. Create new tile categories for the 4 new tile shapes.
    • Select "Tile Categories" and select "New Object" from the file menu or toolbar.
    • Enter the name "UphillLeftTop" for the category name.
    • Select "SHFLTileset" in the Tileset dropdown list and click the Edit button.
    • Select the first of the 4 new tiles and select "Add to category" from the "Tiles" menu, or drag it into the lower pane.
    • Repeat the process to add a new "UphillRightTop" category
    • Add the second new tile to this category.
    • Repeat the process to add "DownhillLeftTop" and "DownhillRightTop", adding the third and fourth new tiles to those categories respectively.
  2. Associate the new categories with the respective shapes
    • Edit "Standard" from the Solidity folder in the project tree.
    • Add a new row to the grid to associate the "UphillLeftTop" category with "UphillLeftTopTileShape"
    • Add a new row to the grid to associate the "UphillRightTop" category with "UphillRightTopTileShape"
    • Add a new row to the grid to associate the "DownhillLeftTop" category with "DownhillLeftTopTileShape"
    • Add a new row to the grid to associate the "DownhillRightTop" category with "DownhillRightTopTileShape"
Test

At this point you should be able to go into the map editor, add some ramp tiles to the map, then play the project and see the new behavior in action. The player should be abel to jump upward through the new ramp tiles and land on them and walk up and down the ramps.