Store Page
Wallpaper Engine
All Discussions Screenshots Artwork Broadcasts Videos Workshop News Guides Reviews

Wallpaper Engine

Store Page
Wallpaper Engine > Guides > Biohazard's Guides
35 ratings
Advanced: Web FPS limit
By Biohazard
Follow this guide to learn how you can apply the FPS limit, that the user specified in their settings, to your own web wallpaper.
   
Award
Favorite
Favorited
Unfavorite
Created by
Biohazard
Offline
Category: Workshop
Languages: English
Posted
Updated
23 Oct, 2016 @ 11:09am
1 Feb, 2021 @ 3:02pm
3,793 Unique Visitors
39 Current Favorites
Guide Index
Overview
NEW DOCUMENTATION WEBSITE OUT 
Prerequisites 
Introduction 
Getting the FPS limit from the user 
Limiting the FPS of draw/update function 
Wallpaper Pause callback 
Attachments 
Comments
NEW DOCUMENTATION WEBSITE OUT
Please check out our new documentation website, the guides on Steam are old and deprecated!

https://docs.wallpaperengine.io
Prerequisites
This tutorial requires knowledge about HTML, JavaScript and JSON. If you have never made a web wallpaper before, check out the starter tutorial for web wallpapers here: http://gtm.steamproxy.vip/sharedfiles/filedetails/?id=770801435
Introduction
Follow this tutorial to learn how you can apply the FPS limit, that the user specified in their settings, to your own wallpaper. It will also show the ideal way of implementing a loop to draw/update your wallpaper so that the pause features of Wallpaper Engine can work properly.

Getting the FPS limit from the user
Firstly, we'll declare a global object in JavaScript that will hold our FPS limit. You can use anything you like here, just a simple var will do the job too. Initializing it with 0 will be understood as 'unrestricted FPS' later.

// Initial general data that may be changed by the user var generalData = { fps: 0 };

Now in order to listen to the FPS setting of the user, we create a new member of the global window object named 'wallpaperPropertyListener'. This name is predefined and needs to match.

window.wallpaperPropertyListener = { };

It will need at least one member, named 'applyGeneralProperties', which is a function that receives the users properties:

window.wallpaperPropertyListener = { applyGeneralProperties: function(properties) { } };

Now we can read the FPS property from properties.fps, but make sure to check that it's valid, as the function may be called when a partial property update happens (unrelated to FPS changes):

window.wallpaperPropertyListener = { applyGeneralProperties: function(properties) { if (properties.fps) { generalData.fps = properties.fps; } } };

Now we've got the FPS value ready and just need to apply it to our drawing/update function!
Limiting the FPS of draw/update function
The recommended way of drawing/updating is window.requestAnimationFrame. You can also implement this trick with setInterval, however for the best and most efficient behavior, you should use requestAnimationFrame. In order to limit the FPS, we have to handle the delta time passed between each call to the drawing function and keep track of the passed time, so we'll declare two utility vars:

var last = performance.now() / 1000; var fpsThreshold = 0;

Now we declare our update function and start it up as soon as the window is fully loaded:

function run() { // Keep animating window.requestAnimationFrame(run); // FPS limit is handled here // My dynamic wallpaper code goes here! } window.onload = function() { // Start the animation window.requestAnimationFrame(run); };

Limiting the FPS will now be done in our update function 'run':

function run() { // Keep animating window.requestAnimationFrame(run); // Figure out how much time passed since the last animation var now = performance.now() / 1000; var dt = Math.min(now - last, 1); last = now; // If there is an FPS limit, abort updating the animation if we reached the desired FPS if (generalData.fps > 0) { fpsThreshold += dt; if (fpsThreshold < 1.0 / generalData.fps) { return; } fpsThreshold -= 1.0 / generalData.fps; } // My wallpaper animation/drawing code goes here! }

After the FPS limit was handled, your wallpaper can draw with canvas2d, WebGL or anything you can come up with! The example attached below will simply move a square around to demonstrate the FPS behavior.
Wallpaper Pause callback
Implement this callback to manually pause audio, video or similar when the wallpaper is supposed to pause. If you are using setTimeout to update your wallpaper, you also need to interrupt it manually in this callback.

window.wallpaperPropertyListener = { setPaused: function(isPaused) { if (isPaused) { // Pause audio, video, rendering } else { // Resume audio, video, rendering } } };
Attachments
Demo wallpaper with FPS limit: http://www.mediafire .com/file/mj5jgwnfcufdhs7/web_fps.zip
Copy this folder into wallpaper_engine/projects/myprojects to use it. (REMOVE THE SPACE.)