Adding Stylegrounds - EverestAPI/Resources GitHub Wiki

What are Stylegrounds?

Stylegrounds are backgrounds and effects you can add to your map. This tutorial explains the entire Stylegrounds menu in Lönn and how you are able to add your own backgrounds to your mod.

Table Of Contents

Click to expand Table of Contents

The Stylegrounds menu

The stylegrounds menu is initially empty, and stylegrounds must be added using the New button for the remaining buttons in the styleground window to function. This button will add the type of styleground picked from the dropdown to the button's left. If the dropdown is set to Based on Current, the selected styleground will be effectively duplicated.

Most settings in a styleground will reset to their default values on pressing New, and should thus be set after adding the styleground. To register changes to a styleground, press the Update button. If you don't do this, the changes will be lost if you close the styleground window or select a different styleground.

Stylegrounds can be deleted with the Remove button, and using the Move Up and Move Down will change which stylegrounds render above others.

Note

Stylegrounds appear bottom to top from the window - so if you want one in front of another, move it lower down the menu.

How to add custom stylegrounds

To add a custom parallax image, you must first have a proper mod structure, you can find the tutorial for that here.

The file structure should look like this:

Mods
↳ [your mod]
  ↳ Graphics
    ↳ Atlases
      ↳ Gameplay
        ↳ bgs
          ↳ [unique folder name]
            ↳ yourstyleground.png

Once you have done this, you will be able to type that file path (starting at bgs/...) without the .png part into the Texture parameter of a parallax styleground.

Parallax stylegrounds

The most common styleground type is the Parallax, which is a single image that can be given the appearance of depth. Due to this, we will cover this styleground type in depth, and the rest separately.

The Parallax styleground's many options may be overwhelming at first, but most are quite simple; there's just a lot of them. Below is an image of what they look like, followed by explanations of each of the parameters in order. Loenn Parallax Styleground Menu

Texture

In this parameter, you pick the actual image file that the parallax will use. Typically, you should only use background textures from the vanilla game (bgs/[number]/) or ones you've inserted into your own mod, as using backgrounds from other mods will add unnecessary dependencies. There also four other backgrounds that you can freely use which are not in the bgs/ folder at all: purplesunset, darkswamp, mist and northernlights.

Lönn does not at the time of this writing contain a dropdown for Parallax texture selection. Instead, the entire file path (starting at bgs/... ) must be typed in manually.

In the meantime, however, you can copy and paste vanilla styleground paths from the reference found here.

Note

Because the styleground path is rooted to the Graphics/Atlases/Gameplay folder, it is technically possible to set this parameter to textures outside the bgs/ folder, including decals, player sprites or frames from entities. However, in most cases this is not particularly useful.

Only

This and the following parameter are where you pick the rooms your background will appear in. The internal room names that appear on the left in the main Lönn window should be used, separated by commas but not spaces if you want multiple (for example, a1,b1,b2). The * can be used as a character stand-in, allowing you to include multiple rooms at once (for example, a-* will count every room that begins with a-).

Exclude

This follows the same format as the Only parameter, but it force-excludes rooms rather than including them. Anything placed in this parameter will have priority over commands from the Only parameter.

Tag

This parameter is often used by code mods which apply code effects to specific stylegrounds. If you put blackhole in the Tag section of a styleground (parallax or otherwise), that styleground will appear in the background whenever the player touches a Moon Glitch Background Trigger.

Flag & Not Flag

If you use the Flag Trigger, you can make this background appear using that trigger instead of always being visible in its rooms. You can put literally anything you want in there, but should be unique within your map; if something else in the map uses the same flag, it may interfere with this.

You can use the Flag Trigger and the flag you set in the Not Flag section to make the background disappear.

Leave these sections empty if you do not plan on using Flags.

Tip

To make stylegrounds react to core mode changes, Celeste makes use of the cold flag.

If you want to make a styleground appear in Cold mode, put cold in the Flag parameter.
If you want it to appear in Hot mode, put cold in the Not Flag parameter instead.

Blend Mode

This decides in what way your background will blend with the other effects and backgrounds. additive will add the colors of the image to any images below it, creating a strange ghostly overlay unless the image behind it is black. alphablend will instead attempt to blend the layer colors together. This is the option that is typically used.

Colour

Here you pick what color to tint your background image, in hexadecimal. Typically you won't want to change this from FFFFFF, as lower values will subtract color from the image.

Alpha

How transparent the image is, with 1 being opaque, and 0 completely invisible. Unless you want a translucent background image, set this to 1.

Fade In Checkbox

If ticked, the background will go from being transparent to the Alpha you set when you enter or leave the room it's in.

Move to Back/Foreground

The Move to foreground/background button controls which layer the styleground is displayed on. If it is on the foreground, it will appear in front of the gameplay layer. If it is in the background, it appears behind your map. So, foreground stylegrounds should only be used for things like overlays which do not obstruct the gameplay, such as mist. In Lönn, stylegrounds on the foreground are denoted by a checkmark next to their name in the list.

In Ahorn (deprecated), this choice comes in the form of a checkbox.

Instant In and Out Checkboxes

If Instant In is ticked, the background will be loaded during the transition between two rooms.
If Instant Out is ticked, the background will disappear during the transition between two rooms.

X & Y

These parameters determine the starting position of the background image. X is horizontal, Y is vertical, positive values translate the image right/down, and negative values translate the image left/up.

To find the coordinates which will show a Styleground for any specific room, use the following formulas:

(room Y position + room height - 23) * 8 * your desired scroll Y for Y

(room X position + room width - 40) * 8 * your desired scroll X for X

Scroll X & Y

These parameters define the multiplier at which your background image scrolls relative to the screen. 0 locks it in place, and 1 causes it to scroll at the same rate as the gameplay layer, so you'll likely want something in between.

Speed X & Y

These parameters set the speed at which the background image will scroll on its own, in pixels per second. Again, positive values mean the image will scroll right/down, and negative values make it scroll left/up.

Loop X & Y

If Loop X is ticked, the background will loop horizontally. For example, if your parallax is a line of trees, ticking this will ensure the trees do not abruptly stop after it scrolls a short distance. If Loop Y is ticked, the background will loop vertically.

Flip X & Y Checkboxes

If ticked, these will flip the background image horizontally and vertically, respectively.

Effects

The remainder of the types of stylegrounds (typically grouped together under the term "Effects") either have few parameters or reuse those in the Parallax styleground. What follows is a short description of each effect, as well as each of its parameters if any. Many helper mods include customizable (or all new) styleground effects, but those will not be covered here.

The Name, Rooms, Exclude, Flag, Not Flag, Foreground, and Tag options are present on all effects, and behave precisely the same as the parameters of the same names in Parallax stylegrounds.

Effects Reference

Note

Some effects take up the entire screen, effectively neutralizing any stylegrounds behind them.

While effects generally do not have an option for alpha, they can still be made transparent: due to an oversight in the game's code, if an effect is directly in front of a Parallax styleground with its Blend Mode set to Additive, that effect will also recieve additive blending. This can be useful when dealing with effects that take up the entire screen.

Blackhole

The black hole in Farewell.
The Blackhole Strength Trigger is a companion trigger to this effect, changing all blackholes in the map to versions with pinker color and more particles. This is used in the Reconciliation checkpoint of Farewell.
This effect does move with wind, and thus indicate it, but it is generally best practice not to make this effect the only styleground indicating wind.
Takes up the whole screen.

BossStarfield

The background for the badeline bossfight in Reflection.
This effect's particles move horizontally across the screen if the room's width is less than or equal to its height; otherwise, the particles move primarily vertically.
Takes up the whole screen.

CoreStarsFG

White particles from the screen wrap section at the end of Core.

Godrays

Transparent red diamonds move down the screen.
Used in Reflection.

Heatwave

Provides dynamic particle and mist effects for both the Hot and Cold modes in Core.
The core mode metadata setting must be something other than None for this to show.

MirrorFG

A red particle effect used in the Mirror Temple's mirror section.

NorthernLights

The aurora borealis seen in the very beginning of Reflection.
Takes up the whole screen.

DreamStars

Hollow cyan squares rise from the bottom of the screen.
As a scrapped concept for Farewell, this effect is unused in the base game.

Petals

Pink petals seen at the end of Reflection.

Planets

The pink and green starfish in the background during the first few checkpoints of Farewell. The amount field starts out waaay too high for most rooms, resulting in overlapping starfish; Lower this down to at most single digits for most rooms.

Note

The size field shows only the options big or small; however, this can be replaced with any set of numbered stylegrounds from the root bgs/10/.
This means you can set size to things like blackhole/particles for the long pink particles from the blackhole effect, or Planets/small/Planets/big for actual planets (unused ingame).

Rain

The rain at the start of Farewell.

ReflectionFG

Exactly the same as MirrorFG but a pinkish red color.

SnowFG

White and blue particles fly across the screen.
Used in Forsaken City and Celestial Resort along with SnowBG.

SnowBG

Same as above, but using darker blue colors.

Stardust

Pink & green particles in farewell. This effect changes with the wind direction. It is best practice to include either this effect or Windsnow in any rooms with wind.

Starfield

The moving ribbon of stars used in the first part of farewell.

Stars

Star background in Old Site.
If the dreaming tag in map metadata is set to true, the stars will fall down the screen as in the majority of Old Site. Otherwise, the stars will be stationary as in the Awake checkpoint.
Takes up the whole screen.

Tentacles

Tentacles like those in Reflection.
Setting the side field to down or up will crash the game. This may be useful for emulating something like last screen of the Badeline bossfight in Reflection, where the tentacles move smoothly. However, this effect is not used in the base game - the entity with the same name is used instead.

Windsnow

Used to indicate wind in Golden Ridge. It is best practice to include either this effect or Stardust in any rooms with wind.

⚠️ **GitHub.com Fallback** ⚠️