Click or drag to resize
Real-time Lighting Effects Tutorial

Create a project with real-time lighting effects.

This topic contains the following sections.

This tutorial will cover the basic steps for generating a project that includes real-time lighting effects including normal maps, lights and light walls. This requires Scrolling Game Development Kit 2.3.0 or later, and was originally written targeting version 2.3.0. The tutorial assumes you are starting with a new project created by selecting "New Project" > "Default SGDK2 Project" from the File menu.

This tutorial is designed to force you through all the pieces involved in lighting. There is a lighting template project in the new project menu (File > New Project > Lighting Patterns) that will give a good starting point for creating a project with lighting effects without having to follow these steps. That template also provides a good range of normal maps that can be used to demonstrate and develop other normal maps not easily created from scratch.

Drawing Some Basic Graphics

These steps will walk through the process of drawing some very simple graphics to use in the project.

Demo Cells
Graphics as they will appear when this section is done
  1. Right-click "Graphic Sheets" and select "New".
  2. Enter the name "Demo" into the (Name) property, and click "Add".
  3. Open the graphic sheet for editing by double-clicking the new "Edit Images" node in the project tree.
  4. Left-click on the flood fill tool (bucket), and click in the editing area to fill the whole tile with black.
  5. Click "Store to Selected Cell(s)" to save the graphic.
  6. Select the next blank cell in the Cell Manager pane, and click "Load Selected Cell(s)" to edit a fresh, blank graphic.
  7. Click on the color green, and click in the editing area to make the whole graphic green.
  8. Click "Store to Selected Cell(s)" to save the green graphic next to the black one.
  9. Select the next blank cell in the Cell Manager pane, and click "Load Selected Cell(s)" to edit a fresh, blank graphic.
  10. Click red to select red as the solid color, and click on the ellipse tool to select it.
  11. Drag from the upper left corner of the editing area to the lower right corner to make a solid red circle.
  12. Click "Store to Selected Cell(s)" to save the red circle next to the green block.
  13. Close the graphics editor.
Drawing A Normal Map

These steps will walk through the process of drawing a normal map for the very simple graphics.

Normal Cells
Graphics as they will appear when this section is done
  1. Right-click "Graphic Sheets" and select "New".
  2. Enter the name "Demo nm" into the (Name) property, and click "Add". (Normal maps must be named the same with space and "nm" added.)
  3. Open the graphic sheet for editing by double-clicking the new "Edit Images" node in the project tree.
  4. Select the color gradient tool.
  5. Change the "Green" and "Blue" value in the color selector from 0 to 127, leaving red at 0.
  6. Select the "Solids" color button, and change Red to 127, Green to 127, and Blue to 255.
  7. Turn off the Anti-aliasing tool button Anti Alias Tool (first button on top toolbar), and drag in the editor from coordinate 15,0 to 0,0.
  8. Select the Rectangular Selection tool and drag a selection rectangle from 16,0 to 32,32.
  9. Select the "Lines" color button, and change Red to 255, leaving Green at 127, and Blue at 127.
  10. Select the Gradient Fill tool, and drag in the editor from coordinate 16,0 to 32,0.
  11. Select the rectangle tool, turn on filling of solids, and turn off drawing of outlines.
  12. Draw a solid purplish regtangle from 9,0 to 23,32.
  13. Select the second cell (cell #1 corresponding with the position of the green block in the Demo sheet, not #0) in the Cell Manager pane, and click "Store to Selected Cell(s)" to save the graphic.
  14. Close the graphics editor.
Creating a Frameset

These steps will walk through creating a frameset from the graphics.

  1. Right-click "Framesets" and select "New".
  2. Enter the name "DemoFrames" into the Frameset Name field.
  3. Select "Demo" from the Graphic Sheet dropdown list.
  4. Drag the first 3 graphics into the frameset.
  5. Close the Frameset editor.
Creating a Tileset

These steps will walk through creating a tileset from the Demo Frameset.

  1. Right-click "Tilesets" and select "New".
  2. Enter the name "DemoTiles" into the Tileset Name field.
  3. Select "DemoFrames" from the Frameset dropdown list.
  4. Change the Tile Width and Tile Height to 32.
  5. Close the Tileset editor.
Creating a Sprite

These steps will walk through creating a light source sprite using a graphic from the Demo Frameset.

  1. Right-click "Sprite Definitions" open the "New" sub-menu, and select <Blank>.
  2. Enter the name "DemoSprite" into the Name field.
  3. Select "LightSpriteBase" from the "Base Class" field.
  4. Add a new state to the sprite (press Ctrl+A).
  5. Change the State Name field to "Main".
  6. Select "DemoFrames" from the Frameset dropdown list.
  7. Drag the red circle into the "Frames in Current State" panel.
  8. Click on the "Rules" tab.
  9. Add a new rule, and enter the Rule Name "Get player input".
  10. Select "MapPlayerToInputs" from the dropdown list of rule functions.
  11. Enter the PlayerNumber parameter as 1.
  12. Add another rule, and enter the Rule Name "Accelerate".
  13. Select "AccelerateByInputs" from the dropdown list of rule functions.
  14. Enter Acceleration as 10, Max as 5 and HorizontalOnly as false.
  15. Add another rule, and enter the Rule Name "React to solids".
  16. Select "ReactToSolid" from the dropdown list of rule functions. Note, the reason we want to react to solidity is because an error will occur if the light source is off the edge of the map, and ReactToSolidity also reacts to the edge of the map.
  17. Add another rule, and enter the Rule Name "Move".
  18. Select "MoveByVelocity" from the dropdown list of rule functions.
  19. Add another rule, and enter the Rule Name "Scroll".
  20. Select "ScrollSpriteIntoView" from the dropdown list of rule functions.
  21. Select "true" for the UseScrollMargins parameter.
  22. Add another rule, and enter the Rule Name "Limit framerate".
  23. Select "LimitFrameRate" from the dropdown list of rule functions.
  24. Enter the fps value as 60
  25. Close the Sprite Definition editor.
  26. Right-click on Sprite Categories in the project tree, and select "New".
  27. Enter "Light Sources" as the Name.
  28. Check the box for "DemoSprite".
  29. Close the sprite category editor.
  30. Reopen the editor for the "DemoSprite" sprite definition (double-click on it) and switch to the Rules tab.
  31. Add another rule, and enter the Rule Name "Apply lighting".
  32. Select "ApplyLights" from the dropdown list of rule functions.
  33. Select "ParentLayer.m_SpriteCategories.Light_Sources" as the value for the "sprites" parameter.
  34. Select "CurrentView" for the "view" paramterer.
  35. Close the Sprite Definition editor.
Defining Solid Tiles

These steps will walk through defining solid tiles. Solid tiles have special behavior when it comes to sprites based on LightSpriteBase. They will obstruct the light source casting 2-dimensional shadows on the side away from the light source.

  1. Expand "Tile Categories" in the project tree, right-click on "Solid" and select "New".
  2. Select "DemoTiles" as the Tileset, and click OK.
  3. Drag the red circle into the bottom pane.
  4. Close the tile category editor. Note, you can also go to the solidity editor and define new solidity with this category, but since the default project already has this, it's not necessary.
Creating a Map and Layer

These steps will walk through creating a map and layer where tiles and a sprite can be added to see the lighting effects of the sprite.

This section contains the following subsections.

Creating the Map

This section walks through creating the map

  1. Right-click "Maps" and select "New".
  2. Enter the name "Level 1" into the (Name) property.
  3. Enter the ScrollableSize as 1280, 1280.
  4. Click Add.
Creating the Layer

This section walks though creating a layer within the map.

  1. Right-click "Layers" and select "New".
  2. Enter the name "Main" into the (Name) property.
  3. Change Lighting to Normal.
  4. Change Tileset to DemoTiles.
  5. Change SizeInTiles to 40,40.
  6. Click Add.
Editing the Layer

This section walks through adding tiles and a sprite to the layer so that lighting effects will be visible.

  1. From the Tiles tab, select the green tile.
  2. Draw a bunch of green tiles anywhere in the map editing area.
  3. Select the red circle tile, and draw a couple red tiles in positions that can cast a shadow onto green tiles below them.
  4. Select the Sprites tab, and click "Add Sprites".
  5. Select "<All>" from the dropdown list.
  6. Select the red circle.
  7. For the Solidity property select the value "Standard".
  8. Scroll to the bottom of the sprite's parameter list, and enter the following parameters: LightAimY=1, LightApertureFocus=0.8, LightQuadraticFalloff=1, LightZ=1.
  9. Click in the map editor to add the sprite to the layer. Note, if you neglect to set all the correct property values on the sprite before placing it on the map, you can still switch to select mode, select the sprite on the map, and edit its properties.
Run a Test

These steps will walk through finalizing the project and observing the results.

  1. Right-click on the root node in the project tree, and select "Edit".
  2. Select "Level 1" as the value for the StartMap property.
  3. Run the project (Press F5).
  4. Observe how green tiles are illuminated depending on the position of the light, and how the red tiles block light completely.
See Also