Overlay 📍

Put an image (or images), static or animated, on top of the screen. A use case for this, for instance, would be a HUD.

• Style: How the image should be overlayed.
  • Image: A single image (static or animated).
  • Collage: Displaying multiple images on the screen in different patterns.

Because the settings and how they function differ between Image and Collage, I'll separate the two below.

Image

• Shape: How the image's aspect ratio is projected onto the screen.
  • Cutoff: Cut off extra pixels and only show the image in its original aspect ratio.
  • Tile and Scroll: Repeat the image if it is too small to fit the screen and optionally scroll the repeated tiles.
  • Stretch to Fit: Stretch the image to fit the screen's aspect ratio. Warning: might make it look wonky or squished!
  • Clamp: Stretch the edge of the image's last pixel. Probably don't want this one.
• Mode: Controls whether the image is static or animated.
  • Still: A single image.
  • Animated: A spritesheet representing an animated image. You can use June's built-in GIF2Spritesheet tool or an online GIF to spritesheet converter (or just make a spritesheet yourself).
• Overlay Image: The image or spritesheet to overlay.
• Scroll X, Scroll Y: If you are using the Tile and Scroll mode, this controls scrolling the images across the screen horizontally and vertically respectively.
• GIF Settings: If you are using the Animated mode, you will see a lot of options here as well. You can safely ignore this if you are using the Static mode - they won't even appear.
  • GIF Columns: How many columns the spritesheet has.
  • GIF Rows: How many rows the spritesheet has.
  • GIF Frames: How many frames in total the spritesheet has. It may be Columns * Rows, but it also may not be if there are empty frames at the end. This is so that those are not displayed in the process.
  • GIF Speed: If you want the GIF to automatically play, define the speed here. If you want to manually animate it, set it to 0.
  • GIF Scrub: Manually animate the spritesheet. If you are having the GIF play on its own, keep this at 0.
• Opacity: How visible the image is. 0 = invisible, 1 = fully visible.
• Alpha: For images that native transparency doesn't work well for. If your image looks fine transparency-wise, just leave this at 0.
• Colour: Tint the image by multiplying a colour over it.
• Angle: Rotate the image. Warning: If your Shader Options 🥺 -> Shader Target is set to VRChat, the image may be squished in rotation to keep aspect ratio in VR functional - please see the size controls below for manual adjustment, or change the Shader Target to remedy this.
• Size X, Size Y: Control the height and width of the overlay.
• Pos X, Pos Y: Control the horizontal and vertical position of the overlay.
• Effects: Apply additional effects to the overlayed image only.
  • Distortion Power, Speed: Distort the overlayed image.
  • Transition X, Y: Smoothly reveal/hide the overlayed image.
  • Glitch Power: Apply a blocky glitch to the overlayed image.
  • Rainbow Opacity: Apply a rainbow overlay to the image. For more information on rainbow settings, please see Recurring Settings ♻️ -> Rainbow.
• Out of Bounds: Only apply the image if the screen is out of bounds. Please see Rendering 🛸 -> Off-Screen Pixels to learn more about how this works.

Collage

The collage mode allows you to use a spritesheet to overlay multiple static images on the screen at once. Collage shares some of the settings from Image - if an option is not listed here, please refer to the above and assume it does the same.

• Mode: Modes are different for collage, as it instead controls how the collage is spread out across the screen.
  • Tile: Tile the image across the screen - this is the most simple form of collage.
  • Random: Randomly place the images across the screen.
  • Zoom: Zoom layers of images forwards.
  • Cover: Cover the whole screen like a stickerbomb.
• GIF Settings: Instead of using the spritesheet settings for animating the images, you can use the GIF Settings here to determine how your overlay image will be broken up into smaller images for your collage. However, the same principles as he GIF Settings above apply here.
  • GIF Columns: How many columns of individual images the collage image (a single image) has.
  • GIF Rows: How many rows of individual images the collage image (a single image) has.
• Collage Images: How many images the collage should show across the screen.
• Collage Seed: The seed used for random determination.

Furthermore, there are some settings that are unique to the collage mode you choose.

• Collage Chance: The chance of images appearing. A higher value = more images will be shown.
• Collage Layers: How many layers of images will be shown. A layer can be thought of as a "depth" (or Z position) of the image - the more layers, the more images with various sizes and positions will be shown.
• College Timer, Minimum Size, and Maximum Size: When using Zoom, this controls the speed of the zoom, the starting (minimum) size of the images, and the maximum size of the images respectively.
• Collage Disperse: When using Cover, this controls how much the images are spread out across the screen. A higher value means more spread out.