useEventfulState() has landed! Check Here for more info.

New features and bug fixes will land in the private github repo before becoming available on the Asset Store. To request access to the repo, please send an email or pm Singtaa#4915 on Discord with your Github username and OneJS Order/INV number.

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.