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
- Source
Methods
(static) tweak(path, optionsopt)
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
| Name | Type | Attributes | Description |
|---|---|---|---|
path | string | Name of a global, or a dotted path to a field on one or on the object option | |
options | TweakOptions | <optional> |
- Source
tweak('jumpSpeed', {min: 0, max: 1});
tweak('skyColor');
tweak('player.size', {label: 'Player Size'});
tweak('speed', {object: settings}); // settings.speed, in an ES module(static) tweakButton(label, callback)
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
| Name | Type | Description |
|---|---|---|
label | string | |
callback | function |
- Source
tweakButton('Restart', restartLevel);(static) tweakDivider(labelopt)
Add a divider to the tweakables panel, with a label for the tweaks after it
- Does nothing in release builds
| Name | Type | Attributes | Description |
|---|---|---|---|
label | string | <optional> |
- Source
(static) tweakEngineDefaults()
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
- Source
Type Definitions
TweakOptions
Options for a tweak
- Object
| Name | Type | Attributes | Description |
|---|---|---|---|
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 |
- Source