Custom Controls - OneJS

Documentation Wiki Asset Store

Docs Wiki VanillaBox Store

Use the /collab command on Discord to gain access to the OneJS private repo. The repo offers early access to the latest features and fixes that may not yet be available on the Asset Store. An early preview of OneJS V2 is available on branch onejs-v2. It brings major performance improvements, zero-allocation interop, and a new esbuild workflow.

VERSION

Doc Menu

Custom Controls

OneJS comes with a couple custom controls by default. More will come in the future.

GradientRect

You can see the use of GradientRect in the Fortnite UI demo. They were used for the health and shield bars. General usage is like this:

import { render, h } from "preact"
import { parseColor as c } from "onejs/utils/color-parser"

const App = () => {
    return <div>
        <gradientrect colors={[c("#02BC23"), c("#48E025")]} style={{ width: 100, height: 100 }} />
        <gradientrect colors={[c("red"), c("#00A0E6"), c("#00A0E6"), c("red")]} style={{ width: 100, height: 100 }} />
    </div>
}

render(<App />, document.body)

Refer to the GradientRect C# code for more info.

Flipbook

Flipbook was used in the Overwatch UI demo for the lightning animation. Example Usage:

import { render, h } from "preact"
import { ImageLoader } from "OneJS/Utils"

const lightningTexture = ImageLoader.Load(__dirname + "/resources/lightning.png")

const App = () => {
    return <div>
        <flipbook src={lightningTexture} num-per-row={8} count={32} interval={0.025} random-rotation={true} style={{ width: 100, height: 100 }} />
    </div>
}

render(<App />, document.body)

Refer to the Flipbook C# code for more info.