Skip to content

Using Fusion with Prism

This example shows how to use fusion states in components data.

Overview

Assuming the following code:

shared/world.luau
1
2
3
4
local packages = game.ReplicatedStorage.packages
local prism = require(packages.prism)

return prism.world.new()
shared/components.luau
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
local packages = game.ReplicatedStorage.packages
local shared = game.ReplicatedStorage.shared

local fusion = require(packages.fusion)
type value<T> = fusion.value<T>

local prism = require(packages.prism)
type entity<T> = prism.entity<T>

local world = require(shared.world)

return {
    health = world.spawn() :: entity<{
       max: number,
        current: value<number>
    }>
}

And then on your system:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
local packages = game.ReplicatedStorage.packages
local shared = game.ReplicatedStorage.shared

local fusion = require(packages.fusion)
local scoped = fusion.scoped
local peek = fusion.peek
local hydrate = fusion.Hydrate
local computed = fusion.Computed

local world = require(shared.world)
local components = require(shared.components)

local health_bar = Instance.new('Frame')
local blood_vignette = Instance.new('Frame')

world.query(client, health) (function(entity, clean)
    local health = world.get(entity, health)
    local current = health.current
    local max = health.max

    local scope = scoped()
    clean(scope)

    hydrate(scope, health_bar) {
        Size = computed(function(use)
            local percent = use(current) / max

            return UDim2.fromScale(percent, 1)
        end)
    }
end)