Adding Stylegrounds - EverestAPI/Resources GitHub Wiki
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.
Click to expand Table of Contents
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.
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.
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.
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.
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-
).
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.
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.
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.
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.
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.
How transparent the image is, with 1 being opaque, and 0 completely invisible. Unless you want a translucent background image, set this to 1.
If ticked, the background will go from being transparent to the Alpha you set when you enter or leave the room it's in.
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.
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.
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
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.
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.
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.
If ticked, these will flip the background image horizontally and vertically, respectively.
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.
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.
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.
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.
White particles from the screen wrap section at the end of Core.
Transparent red diamonds move down the screen.
Used in Reflection.
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.
A red particle effect used in the Mirror Temple's mirror section.
The aurora borealis seen in the very beginning of Reflection.
Takes up the whole screen.
Hollow cyan squares rise from the bottom of the screen.
As a scrapped concept for Farewell, this effect is unused in the base game.
Pink petals seen at the end of Reflection.
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).
The rain at the start of Farewell.
Exactly the same as MirrorFG but a pinkish red color.
White and blue particles fly across the screen.
Used in Forsaken City and Celestial Resort along with SnowBG.
Same as above, but using darker blue colors.
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.
The moving ribbon of stars used in the first part of farewell.
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 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.
Used to indicate wind in Golden Ridge. It is best practice to include either this effect or Stardust in any rooms with wind.