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.