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.