How To Make Live Wallpapers With GameMaker

Gurpreet Singh Matharoo
  • Updated
Follow

This guide will take you through creating your own live wallpapers with GameMaker. You can also follow the video version.

Live Wallpapers are supported on Windows and GX.games.

Basic Setup

You will need this to get started:

  1. Download and install the latest GameMaker build.
  2. (For Windows) Download and install the latest Live Wallpaper Companion app.
  3. You can download the sample project that contains wallpaper functionality.

Live Wallpaper Companion App

This is a helper app used to run your wallpapers on Windows.

Install Opera GX and search "Live Wallpapers" in the Settings, or enter opera://settings/live_wallpapers in your address bar.

Install the Live Wallpaper helper.

install_helper.jpg

Create Project

Open GameMaker, click on New, and choose the Live Wallpaper project type.

Either select Blank Live Wallpaper, or choose any of the given templates to modify.

Blank Live Wallpaper contains a basic template for you to create a wallpaper with.

Template Contents

The obj_camera object contains three scaling modes you can choose from:

  1. NO_SCALE: The wallpaper only shows as much as the display allows.
  2. SCALE: The wallpaper is shown completely, with it scaling to the display.
  3. STRETCH: Same as before, but the aspect ratio is not maintained.

You can change the mode used in the Create event of the camera object, by changing the value of the scale_mode variable.

Overview

The wallpaper (i.e. the GameMaker runner) interacts with the companion app or Opera GX to (1) send and (2) receive settings:

  1. On launch, it sends the wallpaper’s settings configuration to the app, so the app can display the settings with their default values.
  2. Whenever a setting is changed in the app, the runner (wallpaper) is notified via an event. This event contains the updated values of the settings.

On launch, call the wallpaper_set_config() function to send your settings configuration to the companion app.

Use the Wallpaper Config Event in an object and write code to listen to settings updates and update your wallpaper properties accordingly.

Mouse input is disabled by default for live wallpapers. Call wallpaper_set_subscriptions(["desktop_mouse"]) to subscribe to enable mouse input, and optionally subscribe to various system metrics.

Read more about LW features and restrictions in the manual.

Running A Live Wallpaper

On the GX.games target

You can quickly test your wallpaper on the GX.games target:

  1. Set GX.games as the platform: 
  2. Run the project.
  3. Click the Toggle configurator option at the bottom of the page: 
  4. You can now modify your wallpaper configuration: 

On the Windows target

Here’s how you can run a Live Wallpaper on Windows:

  1. Start the companion app if it's not running already.
  2. In GameMaker, run your project once using the Windows/Test target, and close it.
  3. In the companion app menu (click its icon in the system tray), under Wallpapers, choose your wallpaper's project:
  4. To display the wallpaper's config and make changes to it, select Active wallpaper: <wallpaper_name> -> Configure parameters.

How to Publish a Live Wallpaper

In GameMaker, select the GX.games target and click on Icon_Compile.png Create Executable.

When asked, choose "Upload as Live Wallpaper Mod".

Once it is uploaded, your wallpaper mod will be editable on GX Dev, where you can provide all necessary details and publish it.

Important: Users who install your Live Wallpaper through Opera GX automatically get it on Windows, as long as they have the Companion app installed.

wallpaper_set_config(settings_array)

This function sends the settings for your wallpaper to the companion app. It takes an array containing your options/sections, where each option/section is a struct.

Here is an example:

var _config = 
[
    {
        type: "section",
        name: "animation",
        label: "Animation",
        children:
        [
            {
                type: "range",
                name: "speed",
                label: "Rotation speed",
                value: 50,
                min: 0,
                max: 200,
                step: 25
            },
            {
                type: "boolean",
                name: "clockwiseRotation",
                label: "Clockwise rotation",
                value: false
            },
            {
                type: "boolean",
                name: "pause",
                label: "Pause animation",
                value: true
            }
        ]
    },
    {
        type: "section",
        name: "colours",
        label: "Colours",
        children:
        [
           {
                type: "colour",
                name: "blendColor",
                label: "Blend colour",
                value: c_white
            },
            {
                type: "range",
                name: "blendAlpha",
                label: "Blend alpha",
                value: 100
            }
        ]
    }
];

wallpaper_set_config(_config);

This produces the following in the companion app: 

Wallpaper Config Event

This event runs whenever a setting for the wallpaper is changed in the companion app.

You get the updated wallpaper settings in the wallpaper_config variable.

This variable is a struct containing your sections. Each section is a struct containing the options within that section.

To access an option from this struct, you would use this syntax:

wallpaper_config.section_name.option_name

Or, when using nested sections: 

wallpaper_config.section1_name.section2_name.option_name

Here is an example using the same settings as defined in the previous section: 

var _new_colour = wallpaper_config.colours.blendColor;
obj_clock.colour = _new_colour;

Resolution Management

It’s recommended to make sure your wallpaper adapts to the resolution of the screen. Having a fixed size is not recommended, as it will not look good on most displays.

Anything you draw in code should use percentages of the display size. For example, instead of drawing something at strictly 640px because your default width is 1280px, draw it at 0.5 times the display width. This will ensure that the item is centered no matter the size of the display.

// Not recommended
var _align = draw_get_halign();
draw_set_halign(fa_center);
draw_text(640, 360, "Wallpaper Text");
draw_set_halign(_align);

// Recommended
var _w = display_get_width();
var _h = display_get_height();
var _align = draw_get_halign();
draw_set_halign(fa_center);
draw_text(_w/2, _h/2, "Wallpaper Text");
draw_set_halign(_align);

Make use of the Live Wallpaper template which already has basic resolution management options. Read below for tips when making your own project.

Instead of using a fixed room size, you can change it depending on the result of display_get_width() and display_get_height().

A cleaner way to get a dynamic view without modifying the room size is to use cameras. Ensure your camera changes its size to match the size of the display, using the aforementioned functions. If you use the Live Wallpaper Template project, it will take care of this for you.

System Metrics

You can get system metrics while running your Live Wallpapers to adapt your visual quality or display system information. Read this tutorial to get started.

 

Related articles