Chapter Complete Screen - EverestAPI/Resources GitHub Wiki

Table of Contents

Chapter Complete Screen

This page details how to customize the chapter complete screen for your map.

You will need to create a meta.yaml file for your map before starting (see Map Metadata).

Endscreen

The image that is displayed on the chapter complete screen is generally referred to as an "endscreen". Endscreens are made up of layers that are drawn in sequence to create a single image. The endscreen canvas is 1920x1080, but your images can be any size and can be scaled, shifted, etc. as needed.

To configure an endscreen, add a CompleteScreen section to the meta.yaml file for the map. Here's an example of a very basic endscreen using a static image:

CompleteScreen:
    Atlas: "Endscreens/yourname/campaignname" # required
    Layers:
      - Type: "layer"                         # default: "layer"
        Images: [ "00" ]                      # default: [ ]
  • Atlas - the directory from which the endscreen will be loaded, relative to the Atlases folder.
    • In the above example, the game will look for Mods/yourmodname/Graphics/Atlases/Endscreens/yournickname/campaignname/00.png.
    • It is recommended to use this yourname/campaignname pattern to avoid asset path conflicts (replacing yourname with your actual username, etc).
    • All images in the atlas folder are loaded at once, so don't include any unnecessary files.
  • Layers->Type - the layer type. Use "layer" for image layers and "ui" for the title layer.
  • Layers->Images - the list of images.

The following sections show examples of different features and options for endscreens and image layers.

Vanilla endscreens use a scrolling effect when the complete screen first loads. The effect is most obvious in the 7A intro screen, but can be seen in every chapter complete screen as well. This example starts below the endscreen and then scrolls up until it reaches the center of it:

CompleteScreen:
    Atlas: "Endscreens/yourname/campaignname"
    Start: [ 0.0, 800.0 ]  # default: [ 0.0, 0.0 ]
    Center: [ 0.0, 0.0 ]   # default: [ 0.0, 0.0 ]
    Layers:
      - Type: "layer"
        Images: [ "00" ]
  • Start - the starting position of the screen in pixels.
  • Center - the ending position of the screen in pixels.
  • All fields with an x and y component can be set either as [ x, y ] or [ x = y ]
    • e.g. Start: [ 100.0 ] is the same as Start: [ 100.0, 100.0 ]

Including multiple images in a layer will automatically make the layer an animation:

CompleteScreen:
    Atlas: "Endscreens/yourname/campaignname"
    Layers:
      - Type: "layer"
        Images: [ "00", "01", "02", "02", "", "", "03" ]
        FrameRate: 4  # default: 6
        Loop: false   # default: true
  • Layers->FrameRate - the rate of the animation in frames-per-second.
  • Layers->Loop - whether or not to loop the animation after it finishes (requires Everest version 3473 or newer).
    • If false, stops on the last frame.
  • You can use "" to represent a blank image if you want to draw nothing during that frame.

You can also add parallax, scrolling, scaling, transparency, and offsets to layers:

CompleteScreen:
    Atlas: "Endscreens/yourname/campaignname"
    Offset: [ -100.0, 0.0 ]     # default: [ 0.0, 0.0 ]
    Layers:
      - Type: "layer"
        Images: [ "00" ]
        Position: [ 0.0, 50.0 ] # default: [ 0.0, 0.0 ]
        Scroll: [ 0.15 ]        # default: [ 0.0, 0.0 ]
        Scale: 2                # default: 1.0
      - Type: "layer"
        Images: [ "01" ]
        Speed: [ 100.0, 0.0 ]   # default: [ 0.0, 0.0 ]
        Alpha: 0.8              # default: 1.0
  • Offset - applies an offset to the position of every image layer (requires Everest 3466 or newer).
  • Layers->Position - the position of the layer relative to the complete screen position.
  • Layers->Scroll - the parallax of the layer. Should be between 0 and 1.
    • The parallax applies to the initial screen scroll as well as scrolling from player movement afterwards.
    • You may have to adjust the resolution of images to prevent scrolling past their edges.
    • This field has x and y components, but most of the time both are set to be equal for a smoother scroll.
  • Layers->Scale - the scale of the layer.
  • Layers->Alpha - the transparency of the layer, where 0 is invisible and 1 is opaque.
  • Layers->Speed - the speed to move the layer, in pixels-per-second.
    • Example: the 7A complete screen uses a speed of [ -50.0, 0.0 ] for the cloud at the bottom.

Title

You can make custom title text appear on the Chapter Complete screen without editing the image by using the Title key:

CompleteScreen:
    Title:
        ASide: "AREACOMPLETE_NORMAL" # A-side complete ("Chapter Complete")
        BSide: "AREACOMPLETE_BSIDE" # B-side complete ("B-Side Complete")
        CSide: "AREACOMPLETE_CSIDE" # C-side complete ("C-Side Complete")
        FullClear: "AREACOMPLETE_NORMAL_FULLCLEAR" # A-side full clear ("Chapter Clear")
    Layers:
      - Type: "ui" # don't forget to add this line for your text to appear

The above example uses the default values, which are the same dialog keys used for the vanilla titles. The title displayed will be selected based on the clear type. You can customize the title by adding new dialog keys. If you omit a value, the vanilla default will be used.

Here is an example that displays "D-Side Complete" on the Chapter 2 endscreen after completing the A-Side of the map:

image

And here are the corresponding meta.yaml and English.txt entries:

CompleteScreen:
    Atlas: 'OldSite'
    Start: [0.0, 1050.0]
    Center: [0.0, 250.0]
    Offset: [-108.0, 0.0]
    Title:
        ASide: 'WEGFan_CompleteScreenTest_Endscreen_A_Side'
    Layers:
      # Image layers drawn below the title
      - Type: 'ui'
      # Image layers drawn above the title

WEGFan_CompleteScreenTest_Endscreen_A_Side= D-Side Complete

Music

You can make custom music play on the Chapter Complete screen using the MusicBySide key:

CompleteScreen:
    MusicBySide:
      - event:/music/menu/complete_area # A-side
      - event:/music/menu/complete_bside # B-side
      - event:/music/menu/complete_bside # C-side

The above example uses the default values, which are the same music events used in vanilla. You only need to include as many events as you have sides. If you omit a value, the vanilla default will be used.

If you want your endscreen to use the same music as the 7A endscreen, use event:/music/menu/complete_summit.

If you want a custom event to play, import your music in FMOD. The music will start playing as soon as the "snow falling" animation starts. When the chapter complete screen appears, the end audio param will be set to 1. You can use this to make your music synchronize with the endscreen.

Using Vanilla Endscreens

  1. If you want to use the same endscreen as a vanilla chapter, you can just copy the CompleteScreen section from the corresponding chapter in the Vanilla Metadata. No need to make a new atlas folder or copy the images.
  2. If you want to use the vanilla endscreen images to create a new endscreen, you can get the layers from the Graphics Dump :link: and then follow the normal steps for making a custom endscreen.
  3. If you want to globally replace vanilla endscreens from your mod, you won't be able to use meta.yaml files. Make a copy of Content/Graphics/CompleteScreens.xml and adjust the settings based on your edited images. It has some differences in syntax, but the fields and their usage are the same. Follow the instructions on the texture pack page to make sure the files are overridden correctly.

Note that the endscreen images in the Graphics Dump have padding added to them, so if you want to use them with the vanilla metadata settings you may have to manually adjust offsets and positions.