Redesign placeholder tilemap for intro & outro

[jgbourque]

Why this task matters

The visual layout of your intro and outro scenes sets the stage for your game. Making small edits to the tile map helps you personalize your StoryQuest and connect it to the theme, tone, or mood of your narrative.

Steps

1. Create a new Git branch. Open Git Bash and navigate to your project folder. Before creating a new branch, switch back to the main branch and pull the latest changes from your team's GitHub repository. This makes sure that the new branch you are about to create will have the latest updates from your team's StoryQuest.

   git switch main
   git pull

   Now, create a new branch for your tile map changes:

   git switch -c intro-outro-tilemap

   Choose a branch name that reflects what you're doing, like intro-outro-tilemap or add-custom-path. This keeps your work organized.

2. Open your StoryQuest intro scene in Godot. In the FileSystem panel, navigate to res://scenes/quests/story_quests/stella/0_stella_intro/ and double-click the stella_intro.tscn file to open it. (Remember we are using stella in our example; you will use your StoryQuest name!)

3. Explore the tilemap layers. In the Scene panel (top left), locate the node named TileMapLayers. Expand it to view the individual tilemap layers inside, such as Ground, Path, or Details.

4. Add a new tilemap layer. Click on the TileMapLayers node to select it. Then click the + icon to add a new child node. Start typing TileMap, and select the regular TileMapLayer option from the list. Click Create.

5. Name your new layer. Right-click your new TileMap and choose Rename. Give it a clear name that reflects what it will contain, like Cliffs or Decorations.

6. Assign a tileset to the layer. With your new tilemap selected, go to the Inspector panel. Look for the Tile Set property, which may say "[empty]". Click the dropdown arrow → Quick Load → select tile_set.tres. This links the tilemap to the game's master tileset.

7. Choose a tile and paint. After the tileset loads, a tile palette will appear at the bottom of the editor. Choose a tile (like a stone edge or patch of grass), select the Paintbrush tool, and start placing tiles in the viewport.

8. Use the Terrain tool for smarter painting. Some tiles (like cliffs or paths) support auto-connected edges. Click the Terrains tab in the tile palette and select a terrain type (like "stone" or "sand"). Then paint in the viewport. Godot will auto-connect the edges for a cleaner look. This is useful for quickly creating natural-looking borders and connected paths.

9. Use the Eraser tool to fix mistakes. Select the Eraser icon from the tilemap tools bar to remove any tiles you've painted by mistake. This lets you clean up areas without starting over.

10. Repeat for your outro scene. Now go to your outro folder (e.g., stella_outro/) and repeat the same steps to adjust its tilemap. Keeping some visual consistency between intro and outro helps unify your story's setting.

11. Save both scenes. From the top menu, click Scene → Save All Scenes.

12. Stage and commit your changes. In Git Bash, here is an example of how this flow will generally look:

    git status
    git add scenes/quests/story_quests/stella/0_stella_intro
    git add scenes/quests/story_quests/stella/stella_outro
    git commit -m "Customize tilemaps for intro and outro scenes"
    git push --set-upstream origin intro-outro-tilemap

    Replace stella with your actual StoryQuest name and adjust the message as needed.
    You only need to use --set-upstream the first time you push a new branch to GitHub.

13. Submit a pull request. Go to GitHub, open your fork, and click Compare & pull request. Describe what changes you are making, then click Create pull request.

✅ Done! You've personalized your intro and outro scenes using tilemaps. This sets the stage for your story and gives your game a visual identity.

Video