Design and replace character(s) for intro & outro

[jgbourque]

Why this task matters

Your main character should reflect your StoryQuest’s tone and theme. Replacing the default placeholder character with your own sprite gives your game a personal identity and helps make the story feel your own.

Steps

1. Create your player character's sprite frames. Download the idle and walk png images. Edit them to reflect your player character. Watch this video to learn how to create character animations in PiskelApp. Save your sprite frames as stella_idle.png and stella_walk.png (e.g., to your Downloads folder on your device).

2. Create a new Git branch. Open Git Bash and make sure you're inside your project folder. Pull the latest changes from main first:

   git switch main
   git pull

   Then create a new branch:

   git switch -c intro-outro-character

   Choose a branch name like intro-outro-character or replace-player-sprite to reflect what you're doing.

3. Add your new character sprite images. From your file explorer (e.g., Downloads), drag your sprite images (e.g., stella_idle.png and stella_walk.png) into your quest’s components folder: res://scenes/quests/story_quests/stella/stella_components/

4. Open the player character’s resource file. In Godot, go to the FileSystem panel and open this path:
   res://scenes/quests/story_quests/stella/stella_components/stella_player.tres
   (Replace stella with your own StoryQuest name.) Double-click the .tres file to open it.

5. Replace the Idle animation. In the bottom panel of Godot, click the SpriteFrames tab. Make sure idle is selected from the dropdown list of animations. Click the waffle icon ("Add frames from sprite sheet") in the Animation panel. Choose your idle image file. Then set the horizontal and vertical frames to match the number of frames in each row and column of your sprite frame image (if you have 3 idle frames in one row, set horizontal to be 3 and vertical to be 1). Click on each frame in the order you want the animation to play them and then click Add Frames. Delete the placeholder idle frames if they’re still there.

6. Replace the Walk animation. In the same SpriteFrames panel, choose walk from the animation list. Use your walk sprite sheet and follow the same process as listed in step 4 to load and assign new frames.

7. Attach new sprite frame .tres files to character in each scene. In the Scene tree, click on the Character node. Now, in the Sprite Frame field in the Inspector, click on QuickLoad and search for your new sprite frame .tres files. Do this for both the intro and outro scenes.

8. Preview the animation speed. Click the Play ▶️ button beside the animation name to preview how it looks. If it’s moving too fast, adjust the frames per second in the FPS field. To adjust overall animation, edit the FPS field under "Animations:". To adjust individual frames, edit the Frame Duration field under "Animations Frames:". Tip: To select multiple frames, hold the CTRL key while selecting.

9. Turn on autoplay for idle. Make sure the idle animation is flagged to autoplay when the scene starts, using the autoplay icon (next to the delete icon).

10. Preview the scene. Click the Play Scene ▶️ button at the top to preview your character appearing in the intro or outro scene.

11. Stage and commit your changes. In Git Bash, run:

    git status
    git add .
    git commit -m "Replace placeholder character with custom sprite in intro and outro"
    git push --set-upstream origin intro-outro-character

    (Replace stella with your StoryQuest name in all folder paths.)

12. Submit a pull request. Go to your GitHub repo. Click Compare & pull request, describe what you changed, then click Create pull request.

✅ Done! Your intro and outro scenes now feature a unique main character that reflects your StoryQuest.

Video

video tutorial coming soon