This tutorial covers creating a new epilogue and putting together a few scenes.

Creation

Open your character and go to the Epilogue tab. If this is your character's first ending, everything will be disabled except for the Add New button.
  1. Click Add New. You are taken to the General tab which contains several optional fields for configuring how and when your epilogue appears.
  2. Change the Title to "Tutorial". This is the name of the ending as it will appear in game.
  3. Make sure Player Gender is "any". This controls which gender the human player must be using in order for the epilogue to be available.
  4. Click ... beside the Gallery Image and pick any image from your character's folder. This is the picture that will appear in the gallery in game, found under the Trophy button where unlocked endings can be viewed again. Only images from your character's folder can be used in the Gallery.
  5. You can leave all the other fields blank. These control extra conditions that are necessary for the ending to be available. You can hover over the ? icons to see more details about what each field means.
  6. By leaving everything else blank and using "any" for the Player Gender, the only requirement for unlocking the ending will be to win the game against this character.

First Scene And Background

So far we've set up when an ending appears, but the bulk of the work in making an epilogue is on the Scenes tab. Scenes are like scenes in a movie containing a camera and actors (sprites) that follow the director's directions (actions).
  1. Go to the Scenes tab. You are greeted with an empty screen split into three parts. The upper left is the Scene view containing all scenes. Immediately below the scenes list is the Actions list showing all actions in the currently selected scene. Next to that is the Property Table where you can edit whatever scene or object is currently selected. The right side is the canvas which contains a preview of the current scene and lets you directly interact with sprites on the screen.
  2. Click the + in the upper left to add a new scene. Epilogues are split into self-contained scenes. Anything created in one scene will be cleared before moving to the next scene when viewing the ending.
  3. Scene: (: 100,100) appears in the Scene view, and the canvas turns gray with a lighter gray square inside it. This is gray because we haven't specified a background image yet.
  4. In the Property Table, change the Name from "New Scene" to "Scene 1".
  5. In the Property Table, click ... next to Background, and choose ep_bg_summon.png from Florina's folder.
  6. The background appears in the canvas and the preview zooms out to display it all.
  7. Hold the right mouse button and drag around the preview to pan it. You'll see some L corners surrounding the background image.
  8. The gray box with the L corners is known as the camera viewport. In other words, the "camera" when playing the ending will only see what's inside that box. We'll cover this more in the next tutorial.
    Adding a background will automatically adjust the camera viewport's Width and Height to fit the background.

Sprites

It's not a very exciting ending without some characters. To add these, we need to add a sprite to the scene.
  1. In the timeline's toolbar, click the Add Sprite button.
  2. A file selection popup appears to pick the image for that sprite. Go to Florina's folder and choose 0-calm.png.
  3. Compared to the background, she's huge, but that's okay for now. Florina's epilogue assets are very small in size because she was already bumping up against character file size limits before her ending was made. Nowadays, epilogue assets do not count against a character's file size limits, so don't feel the need to restrict yourself like this.

Speech Bubbles

We now have an actor in the scene, so let's make her talk.
  1. Click the Add Speech Bubble button directly next to the Add Sprite button.
  2. A bubble saying "New Text" appears in the top left corner. Pan the canvas (right-click and drag) if it's not visible.
  3. Click the bubble and drag it somewhere to the right of Florina.
  4. Position the mouse to the left of the speech bubble just outside of its border. A transparent arrow appears. Click this to make the bubble arrow face left towards Florina to make it look like she's talking. Alternatively, in the Property Table you can set the arrow position manually.
  5. Drag the right end of the bubble to make it wider, or in the Property Table, set the bubble's width to around 25%.
  6. In the Property Table, change the "Text" field to say, "Congratulations! You've unlocked my ending."
  7. At this point, the screen should look like this:

Actions

The epilogue system will play to the end of the current action's timeline and then pause. To display a new speech bubble when the user clicks to advance in the game, we need to make a new action.
  1. Click the + besides "Actions" in the middle of the left side of the screen to add a new action.
  2. The old speech bubble disappears, and in the actions list, the first action has become "Congratulations! You've..."
  3. Add a new speech bubble using the same button as described in the last section.
  4. Position and size this bubble like before.
  5. Give it a left arrow.
  6. Set the text to "Now play again at a harder difficulty!"

Scene Playback

You can preview a single action from the editor. This lets you get a quick idea of how the scene will look, but you should always test your endings in the game before submitting.
  1. Click the "Play Scene" button above the preview canvas.
  2. The Scene View and Property Table disappear and the canvas takes up the entire screen.
  3. This will be more obvious in later tutorials, but playback mode zooms to fit the viewport on screen and blacks out everything outside the camera viewport. This simulates what it will actually look like in the game.
  4. Nothing interesting happens because this action has no animation.
  5. Click the Stop button to leave playback mode.

Multiple Scenes

Endings normally consist of more than one scene, which gives the opportunity to switch backgrounds and sprites.
  1. Click the + to add a new scene. The canvas goes black again because the scene is empty.
  2. Name the scene "Blue" down in the Property Table. This doesn't do anything but make it easier to differentiate scenes in the Scene View. Notice that the second scene now says "Blue"
  3. This time, instead of a background image, we'll use a background color. Click the large blank button next to "Background Color" in the Property Table to bring up a color picker. Choose Blue. The whole canvas turns blue.
  4. In the Property Table, set the Width to 800 and the Height to 600. This resizes the viewport so it's consistent with the previous scene.
  5. Click the Recenter button to get the camera viewport fully into view.
  6. Time to add a sprite. We'll copy the one from the previous scene. In the Scene list, select the original scene, then select "calm" in the timeline and press the Copy button (or Ctrl+C).
  7. Select the Blue in the Scene list, then click the empty space beneath Camera in the timeline and press the Paste button (or Ctrl+V). Florina gets pasted back into this scene positioned just like she was in the previous one.
  8. It's boring to use the same image though, so change her image to 0-embarrassed.png. Click the ... next to Source in the Property Table.
  9. Add a new speech bubble with the text, "But you won't really make me go through that all again, will you?" and position it like before.

Scene Transitions

By default, moving one from scene to another will be an immediate cut. We can make it more interesting using scene transitions.
  1. Click the first scene in the Scene list and press the Add Transition button near the Add and Remove Scene buttons.
  2. This inserts a transition between the two scenes. The canvas previews is replaced with a big gray box fading between the words "Previous" and "Next."
  3. The editor is not capable of displaying actual scenes in its transitions, so it uses "Previous" and "Next" placeholders.
  4. The Property Table contains the various properties for the transition. Choose "wipe-right" from the Effect dropdown.
  5. The preview updates immediately with the new transition.
  6. With the Blue scene selected, add another transition. It's possible to transition from a black screen at the beginning and end of the epilogue.
  7. Change this transition's effect to fade.
  8. Set the Back Color of the transition to black. This controls the fade color.
  9. Change the time to 3 seconds.
  10. In the preview, you'll see that it fades out and back in on the next scene, but since there is no next scene, in game it'll just be black.
  11. Save the character. Our epilogue is complete and ready to test in game.

Testing

The editor is good for rapid testing, but it's still important to test the ending in the actual game. You can either play through a game with your character to test it, or cheat.
  1. Go to the Character Editor's Tools menu and choose Configure Game...
  2. Check "Unlock Epilogues"
  3. Open the offline version of the game in your browser by opening index.html from the folder where you downloaded the SPNATI repository.
  4. In the game, click the trophy to bring up the Gallery, and then find your character's ending. The image should match what you chose for the Gallery Image.
  5. After clicking through the first scene, it'll wipe to the blue scene, and then fade to black after clicking through that one.
  6. Congratulations! You've completed the basics for Scenes, Sprites, and Speech Bubbles.

Next - Animation

The next tutorial will add some animation to the ending to make it more lively.