Resource Loading

There are generally 2 ways of loading resources in OneJS. The normal way is to just use Unity’s Resources.Load() method which loads from Resources folders in your Unity Project.

The other way is to use the global resource object. This will load from your WorkingDir, so for Standalone Player, it will load from your {persistentDataPath} at runtime. This is useful for loading resources that are not in the build, such as for modding purposes.

Resources.Load()

Resources usage is straightforward. You can use it just like how you would do it in Unity/C#. Here are some examples:

audio.tsx


import { h, render } from "preact"
import { AudioClip, AudioSource, Resources } from "UnityEngine"
 
var clip = Resources.Load("Audio/magic_spell_incantat") as AudioClip
 
// `audioSource` is set up in the ScriptEngine.Globals list
declare const audioSource: AudioSource
 
const App = () => {
 
    function handleClick() {
        audioSource.PlayOneShot(clip) 
    }
 
    return <div>
        <button onClick={handleClick}>Click</button>
    </div>
}
 
render(<App />, document.body)

texture.tsx


import { useState } from "preact/hooks"
import { h, render } from "preact"
import { Resources, Texture2D } from "UnityEngine"
 
const book = Resources.Load("book", puer.$typeof(Texture2D)) as Texture2D
 
function App() {
    const [rotate, setRotate] = useState(0)
 
    function onClick() {
        setRotate(rotate + 45)
    }
 
    return <div class="w-full h-full flex-row justify-center items-center">
        <div class="w-[256px] h-[256px]" onClick={onClick} style={{
                backgroundImage: book,
                unitySliceBottom: 8,
                unitySliceLeft: 15,
                unitySliceRight: 20,
                unitySliceTop: 10,
                rotate: rotate,
                transitionProperty: "rotate",
                transitionDuration: "2s",
                transitionTimingFunction: "ease-in-out",
            }}></div>
    </div>
}
 
render(<App />, document.body)

`resource` object

Both images and fonts in your WorkingDir can be loaded at runtime. Use resource.loadImage() and resource.loadFont() to load images and fonts respectively. For example:

minimap.tsx


import { h, render } from "preact"
import { useEffect, useRef } from "preact/hooks"
import { Easing, Tween } from "@tweenjs/tween.js"
import { Length, Translate } from "UnityEngine/UIElements"
 
var mapImage = resource.loadImage("assets/@fortnite-sample/map.jpg")
var bgImage = resource.loadImage("assets/@fortnite-sample/screenie2.jpg")
 
let tween: any
 
const Minimap = () => {
    const mapRef = useRef<Element>();
 
    useEffect(() => {
        let pos = { x: 0, y: 0 }
        tween = new Tween(pos).to({ x: pos.x + 500, y: pos.y + 500 }, 10000)
            .easing(Easing.Quadratic.InOut).onUpdate(() => {
                mapRef.current!.style.translate = new Translate(new Length(pos.x), new Length(pos.y))
            }).repeat(Infinity).yoyo(true).start()
    }, [])
 
    return <div class="w-full h-full bg-orange-400 justify-center items-center bg-crop" style={{ backgroundImage: bgImage }}>
        <div class="relative w-[300px] h-[300px] scale-75 bg-beige overflow-hidden justify-center items-center">
            <div ref={mapRef} class="absolute -top-[820px] -left-[820px] w-[1400px] h-[1400px]" style={{ backgroundImage: mapImage }}></div>
            <div class="bg-white w-2 h-2 rounded-full"></div>
        </div>
    </div>
}
 
render(<Minimap />, document.body)
 
requestAnimationFrame(function animate(time) {
    tween?.update(time);
    requestAnimationFrame(animate);
})

Loading Resources in USS

If you don’t need to load resources at runtime, another good way of loading them is via USS using resource() and url() functions.

fortnite-sample.uss


.rpgawesome {
    -unity-font: resource("Fonts/rpgawesome.ttf");
}

(You can also try using -unity-font-definition if -unity-font doesn’t work.)

More Info: USS data types

Resources.Load()

resource object

Loading Resources in USS

`resource` object