【Roblox】FusionのHydrationモジュールを触ってみる Fusion編 #5

はじめに

FusionのHydrationモジュールを触ってみたので共有したいと思います。

Fusionの導入方法

https://zenn.dev/landel_tech/articles/b4d2df33bb7480

公式Reference

https://elttob.uk/Fusion/0.2/tutorials/instances/hydration/

Hydrationで何ができる？

RobloxUIオブジェクトをFusionUIに変換する機能のような感じです。

実装

UIの配置

ボタンを押したらUIの数字が増えるものとボタンを押したらFrameが表示非表示になるものを作成します。

コード

TextLabelをFusionオブジェクト化

local countValue = Value(0)

Hydrate(gui.CountFrame.CountText) {
	Text = countValue,
	TextColor3 = Color3.new(0.333333, 1, 0),
	Visible = true
}

FrameをFusionオブジェクト化

local toggleValue = Value(false)

Hydrate(gui.ToggleFrame) {
	Visible = toggleValue,
	BackgroundColor3 = Color3.new(1, 0.666667, 0),
	LayoutOrder = 0
}

このようにHydrate関数の引数に指定のUIオブジェクトを入れることでFusionオブジェクトに変換できます。上記のコードのようにUI指定のプロパティをHydrate関数に続きてスコープの中に書き込むことで新しく値を代入できます。

プロパティにFusion State Objects を入れることでその値が変わると自動で設定されてあるプロパティが更新されます。

ボタンのイベント購読をFusionオブジェクト内に書く

local OnEvent = Fusion.OnEvent

Hydrate(gui.CountButton) {
	[OnEvent("Activated")] = function(_, numClicks)
		countValue:set(countValue:get() + 1)
	end,
}

以上のようにプロパティを書く部分でどのイベントをとるのか指定してその中に処理を書きこむことができます。

実際に動かしてみる

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Fusion = require(ReplicatedStorage.Fusion)

local Hydrate = Fusion.Hydrate
local Value = Fusion.Value
local OnEvent = Fusion.OnEvent

local player = Players.LocalPlayer
local gui = player:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local countValue = Value(0)
local toggleValue = Value(false)

Hydrate(gui.CountFrame.CountText) {
	Text = countValue
}

Hydrate(gui.CountButton) {
	[OnEvent("Activated")] = function(_, numClicks)
		countValue:set(countValue:get() + 1)
	end,
}

Hydrate(gui.ToggleFrame) {
	Visible = toggleValue
}

Hydrate(gui.ToggleButton) {
	[OnEvent("Activated")] = function(_, numClicks)
		toggleValue:set(not toggleValue:get())
	end,
}

実行

https://youtu.be/a2bSD-sR2pM