Create and replace art assets for intro and outro

[jgbourque]

Why this task matters

Adding custom artwork to the intro and outro scenes helps define your game's story and setting. The placeholder image provided in the template needs to be replaced with your own design that matches the world you're building.

---

Copyright: a very important thing to keep in mind while creating art for Threadbare
As you will read in the link provided at the end of this paragraph, Endless Access strongly prefers that assets in Threadbare are created by hand, without using generative AI (the goal is to teach fundamental creative skills: these are necessary to design high-quality art). Nonetheless, if you do want (or need) to use AI, you can do so by following the guidelines shown here: CONTRIBUTING: Document how to cite AI-generated images. Please, read carefully.

---

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 work:

   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. Find and download an image. Create your own image in PiskelApp, use a site that offers Creative Commons licensed images (such as Openclipart or search Google Images with the Tools > Usage Rights > Creative Commons filter turned on. Download your chosen image as a .png file.

4. Import the image into your project. Drag the downloaded image into the intro folder inside your quest folder in the FileSystem panel in Godot.

5. Delete the placeholder image. In the FileSystem, right-click the placeholder image and select Delete. In the dialog that pops up, click Remove to confirm. This deletes the old placeholder from the scene.

6. Find the image node in your intro scene. In the Godot FileSystem panel, go to your duplicated StoryQuest folder and open the intro.tscn scene. In the Scene panel, locate the node called IntroImage.

7. Assign the image file as a texture. With the Sprite2D node selected, go to the Inspector. Find the Texture property and click the folder icon. Use Quick Load to select your newly added image file, or drag the image from the FileSystem to that field.

8. Resize the image. Hold Shift while dragging one of the image's corners in the editor viewport to scale it proportionally so it fits the scene frame.

9. Preview the scene. Click the Play Scene button (clapboard icon in the top right) to make sure your image appears correctly in the intro. Make adjustments if necessary.

10. Repeat for the outro scene. Follow the same steps in your outro.tscn scene (e.g., scenes/quests/story_quests/stella/stella_outro/) to add your image there too. This time, you'll need to create a new Sprite2D for any art assets you would like to add. With the root node of your scene selected, click the + button and add a new Sprite2D node. Rename this node to something like BackgroundImage to help keep track of your additions.

11. Save your work. Go to Scene > Save for both scenes.

---

Save To Git and GitHub

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

13. Submit a pull request. Go to GitHub, navigate to your fork, and click Compare & pull request. Write a clear title and description indicating what you changed and why, then click Create pull request.
    Click here for a more detailed guide and more information on creating a pull request to your team's forked repo.

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! Your intro and outro scenes now reflect your custom artwork and are ready for review.

Video

video tutorial coming soon