Custom Controls - OneJS

Documentation Wiki Asset Store

Docs Wiki Store

Use /collab in Discord for private repo access to early features and fixes not yet available on the Asset Store. OneJS V2 is in preview on branch onejs-v2: better performance, zero-allocation interop, and new esbuild workflow. A portion of the v2.0 doc is currently available, but it is still a work in progress.

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:

TSX

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:

TSX

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.