Main Site

Image

Object Preview
Featured Artwork Panel
Image Object Preview
Gamer Edition Object
Custom CSS in Developer Edition

The Image object displays a static image anywhere inside your Custom Launcher. It is ideal for artwork, logos, banners, game covers, decorative panels, character renders, promotional callouts, and any other visual element that helps shape the look of your launcher.

Although the Image object is not clickable by default, it plays an important supporting role throughout a Custom Game Launcher. It can be swapped dynamically, shown and hidden as part of page logic, layered behind interface elements, or used as a visual state indicator when paired with buttons, labels, sliders, progress bars, and launcher-wide events.

Pro Tip

The Image object is available in Gamer Edition. Custom CSS support for the Image object is available in Developer Edition through the Custom CSS editor.

Image Overview

The Image object is a clean way to place artwork directly into your launcher layout. It is perfect when you need visual presentation without built-in click behaviour. In many launcher designs, images act as the backbone of the interface by framing sections, branding content, displaying screenshots, or reacting to logic through actions.

Typical Uses

  • ❖ Showing game logos and launcher branding
  • ❖ Displaying box art, key art, and screenshots
  • ❖ Creating visual panels behind text and buttons
  • ❖ Swapping artwork to match user selections or pages
  • ❖ Showing status art such as online, offline, featured, or sale graphics
  • ❖ Building decorative overlays for themed launcher pages

Default Settings

When added to your page, the Image object starts as a simple rectangular image area with a placeholder source.

Property Default Value
Dimensions Width: 200, Height: 150
Source URL https://yourwebsite.com/images/mctile.jpg
Opacity 1
Hide at Start False
Layer 1

Properties

The Image object keeps its property set focused and practical. You define the image source, then control how it appears in the launcher using the common object settings.

Image

  • Image URL: Set a direct link to the image you want to display, or choose one from the Asset Library.

Common Settings

  • Object Name: The unique name used when targeting this Image object from events and actions.
  • X Position and Y Position: Controls where the image sits on the page.
  • Width and Height: Defines the display size of the image area in your launcher.
  • Layer: Controls whether the image sits behind or in front of other objects.
  • Opacity: Makes the image more subtle or more prominent without replacing the file itself.
  • Hide at Start: Starts the image hidden so it can be revealed later through logic.
  • Cache Bust: Useful when you need to force a fresh asset load instead of using a cached version.
  • Custom CSS: Available in Developer Edition for advanced styling on the rendered image container.

Image Events

The Image object currently does not include any dedicated object events. This is intentional because the object is designed as a visual element rather than an interactive control.

That does not make it passive. In practice, Image objects are often driven by global events such as launcher start, by button events such as onClick, or by other object events such as list selection changes and slider value changes. Those events can then target the Image object using actions.

Pro Tip

Think of the Image object as a visual destination for your logic. Other events can tell it when to appear, disappear, move, resize, or swap to a different source image.

How Images Fit Into Event Logic

  • On Launcher Start: Reveal a splash image, featured banner, or seasonal promo.
  • Button onClick: Swap a screenshot or show extra artwork in a preview panel.
  • List Box onSelectionChange: Change artwork to match the selected item.
  • Toggle or Checkbox events: Show different visual states such as enabled and disabled graphics.

All Possible Actions for the Image Object

The Image object can be targeted by one dedicated image-specific action, plus several common object actions that are useful across launcher layouts.

Action How it works
Change Image Replaces the current source with a new image URL. This is the dedicated Image object action.
Show Objects Makes a hidden Image object visible at the moment you need it.
Hide Objects Hides the Image object without removing it from the page.
Move Object Repositions the image dynamically to create layout transitions or state changes.
Resize Object Changes the display size of the image area at runtime.
Set Object Layer Moves the image forward or backward in the visual stack so it can sit behind panels or above them.
Destroy Object Permanently removes the Image object from the page at runtime.

Building Logic with the Image Object

The Image object becomes powerful when it is used as the visual output of your launcher logic. It works especially well with buttons, labels, list boxes, hero sections, and launcher start events.

Using Images with Other Objects

  • With Buttons: Clicking a button can swap promotional artwork, reveal a hidden panel image, or change a screenshot gallery image.
  • With Labels: Pair an Image object with a text label to create boxed feature cards, announcements, or highlighted news panels.
  • With List Boxes: Use list selection logic to update a preview image that matches the selected server, profile, or product.
  • With Global Events: Load featured artwork when the launcher opens, or rotate seasonal graphics depending on startup logic.

Example 1: Screenshot Preview Gallery

Use the Image object as a main preview panel that changes whenever the user clicks a thumbnail button.

  1. Add one large Image object to act as the featured screenshot.
  2. Add several small buttons or image buttons underneath it.
  3. For each button onClick event, use Change Image and point the target to your main Image object.
  4. Pass a different screenshot URL into each action so the large preview updates instantly.

Example 2: Hidden Promo Banner on Launcher Start

Reveal a promotional image only when the launcher opens, keeping your page clean until it is needed.

  1. Add an Image object for your sale banner or featured artwork.
  2. Enable Hide at Start in its properties.
  3. Under the page or launcher On Launcher Start logic, use Show Objects to reveal the image.
  4. Optionally combine that with Move Object or Set Object Layer so the banner appears in exactly the right visual position.

Custom CSS Example

The Image object supports Custom CSS in Developer Edition. This is perfect for adding presentation effects such as glow, soft borders, glass panels, image polish, and hover-driven visual energy without changing the geometry defined in the object settings.

Important Notice

When applying Custom CSS in Developer Edition, use !important for visual overrides. Avoid structural properties such as width, height, top, left, right, bottom, and position unless you fully understand the impact. For Image objects, target the rendered content directly with selectors like img, :hover, ::before, and ::after. Avoid selector patterns that rely on &, as they may not behave correctly in the real-time preview.

Custom CSS Live Preview
Custom CSS Image Preview

Pro Tip

This live preview shows a trading-card style holographic foil. A prismatic sheen sweeps only when hovered, with crisp borders and depth.

css

 /* Developer Edition Custom CSS Example for Image */
 /* No manual object scoping needed */
 overflow: hidden !important;
 border-radius: 12px !important;
 background: #0c0f14 !important;
 box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
 transition: filter .25s ease, box-shadow .25s ease !important;
 img {
 display: block !important;
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 filter: contrast(1.02) saturate(1.02) !important;
 transition: filter .25s ease, transform .25s ease !important;
 }
 ::after {
 content: "" !important;
 pointer-events: none !important;
 position: absolute !important;
 inset: -20% !important;
 background: conic-gradient(from 0deg, #5ef3ff, #a36bff, #ff6bd6, #ffd36b, #5ef3ff) !important;
 mix-blend-mode: soft-light !important;
 opacity: 0 !important;
 transform: rotate(-18deg) translateX(-12%) !important;
 transition: transform .6s ease, opacity .25s ease !important;
 filter: blur(8px) !important;
 }
 :hover::after {
 opacity: .75 !important;
 transform: rotate(12deg) translateX(12%) !important;
 }
 :hover {
 box-shadow: 0 16px 46px rgba(0,0,0,.35) !important;
 }
 :hover img {
 filter: contrast(1.08) saturate(1.08) brightness(1.06) !important;
 }

Best Practices

  • Use high-quality art: The Image object is often one of the most visible parts of a launcher page.
  • Name images clearly: Good object names make it much easier to target the right image in events and actions.
  • Pair visuals with logic: The object shines when it is tied to buttons, startup flows, and selection systems.
  • Use layering intentionally: Images work brilliantly behind text panels, promo cards, and glass-style UI blocks.
  • Keep Custom CSS visual: Focus on polish, glow, borders, and image treatment rather than geometry overrides.

Summary

The Image object is a foundational visual building block for any Custom Launcher. It may not be interactive on its own, but when paired with events, actions, and surrounding objects, it becomes a powerful way to present artwork, react to user choices, and shape the entire look of your Custom Game Launcher.