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

Git Setup

1. Update your local repository. 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

2. Create a new Git branch
   Now, create a new branch for your tile map changes:

   git switch -c new-branch-name

   In general, choose a branch name that reflects what you're doing, like intro-outro-tilemap or add-custom-path. This keeps your work organized. Click here for a more detailed guide and more information on updating your local repository and creating a branch.

---

3. 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!)

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

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

---

Save To Git and GitHub

13. 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/yourStoryQuest/
    git commit -m "Add your message here - explain to your team what you changed"
    git push --set-upstream origin your-branch-name

• Make sure the file path shows your actual story quest name, write your own descriptive commit message, and use your actual branch name.
• You can use git add to add more than one file simply by putting a space between file paths you paste in.
• You only need to use --set-upstream the first time you push a new branch to GitHub.
  Click here for a more detailed guide and more information on saving and pushing your changes to GitHub.

14. Submit a pull request. Go to GitHub and navigate to your fork of the repository. GitHub should show you a banner suggesting you open a pull request from your new branch.

• Click Compare & pull request
• The option for the base repository will appear by default like this base repository: endlessm/threadbare, you need to change it to your repository. In the example image, that would be Game-Lab-4-0-UTP-Group-9-Team-06
  
• It should look like this after the change:
  
  Click here for a more detailed guide and more information on creating a pull request to your team's forked repo.
• write a clear title and description, then click Create pull request.

Note: Pull requests are better with a peer review! Click here to learn more. If you are working alone, you can merge your own pull request after submitting it.

✅ 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

---

Have a different tile set you'd like to use? Want to design your own tiles from scratch?

Check out the guide linked below for a full video walk through of designing your own tilesets with their own aesthetic and how to integrate it into your StoryQuest.

Creating and Implementing Basic 2D Tilesets in Godot

Video