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.

Steps

1. Create a new Git branch. Start by switching to your main branch and pulling the latest changes. Then, create a new branch for this task:

   git switch main
   git pull
   git switch -c intro-outro-art

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

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

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

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

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

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

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

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

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

11. Commit and push your changes. Stage both updated scenes and commit:

    git add .
    git commit -m "Add background image to intro and outro scenes"
    git push --set-upstream origin intro-outro-art

12. Create a pull request. Visit your GitHub repo and click Compare & pull request. Add a short description and click Create pull request.

✅ Done! Your intro and outro scenes now reflect your custom artwork and are ready for review.

Video

video tutorial coming soon