LittleJS 1.28.0

Tweakables

LittleJS Tweakables Plugin

  • Change values live from a panel while the game runs, for tuning without a reload
  • tweak('name') adds a global, or a field of an object with the object option, a number gets a slider when it has a range, a boolean a checkbox, a Color a color picker with an alpha slider, a Vector2 or Vector3 a number for each axis
  • tweakButton adds a button that calls a function, like one to restart the level
  • Press 9 while the debug overlay is open to show the panel, or set debugTweakables to show it from the start
  • Changes are saved and come back after a refresh, until the value in the code itself changes
  • Copy puts the changed values on the clipboard as lines of code, to paste over the values in the code
  • Debug builds only, the release build has none of this code, its functions are stubs that do nothing, so the code's values are used as they are

Functions

Typedefs

Functions

tweak(path, options)tweakables.js:57

Add a value to the tweakables panel, so it can be changed while the game runs

  • The path is the name of a global, or a dotted path to a field on one like 'player.speed'
  • Only globals of a script can be found by name, an ES module game passes the object its values are on
  • Its type comes from the value it has now: a number, boolean, Color, Vector2 or Vector3
  • Call it after the value is set, at the end of gameInit
  • Adding the same path again keeps its row and brings its tweaked value back, for an object made again; with the object option it is known by its label, so two objects with the same field need their own labels
  • Does nothing in release builds
path string

Name of a global, or a dotted path to a field on one or on the object option

options TweakOptions optional
tweak('jumpSpeed', {min: 0, max: 1});
tweak('skyColor');
tweak('player.size', {label: 'Player Size'});
tweak('speed', {object: settings}); // settings.speed, in an ES module
tweakButton(label, callback)tweakables.js:98

Add a button to the tweakables panel that calls a function, like one to restart the level

  • Adding the same label again replaces its function
  • Does nothing in release builds
label string
callback function
tweakButton('Restart', restartLevel);
tweakDivider(label)tweakables.js:117

Add a divider to the tweakables panel, with a label for the tweaks after it

  • Does nothing in release builds
label string optional
tweakEngineDefaults()tweakables.js:131

Add the engine settings a game most often tunes to the tweakables panel: gravity, timeScale, cameraScale and soundVolume, under an Engine divider

  • They are changed through their setters, so this works in the ES module build too
  • Does nothing in release builds

Typedefs

TweakOptions : Objecttweakables.js:32

Options for a tweak

min number optional

Lowest value on the slider, the slider shows when min and max are both set

max number optional

Highest value on the slider

step number optional

Step for the slider and number box, a thousandth of the range by default

label string optional

Name to show in place of the path, and the name it is saved by with an object

object Object optional

Object the path is a field of, in place of a global, for an ES module game