FusionUIPack

Fusion 0.3 ベースの再利用可能な Roblox UI ライブラリ。

特徴

• Atom / Widget の2層構造 — 小さな部品 (Components) と組み合わせ済みの画面部品 (Widgets)
• テーマ統一 — 色・フォント・サイズは Theme 定数経由、ハードコード禁止
• リアクティブ — Props は Fusion.UsedAs<T> で定数と Value/Computed の両方を受け取る
• ガンパッド対応 — UserInputService:GetImageForKeyCode() で Xbox / PlayStation 自動切り替え
• Fusion 同梱 — 利用側で Fusion を別途 wally install 不要。FusionUIPack.Fusion から取得可能
• Strict モード — 全ファイル --!strict、selene / stylua で品質チェック済み

依存

開発時のみ: UILabs 2.4.2（Story確認用）

インストール

利用側プロジェクトの wally.toml:

[dependencies]
FusionUIPack = "hakochanjp/fusion-ui-pack@0.4.0"

そして wally install で Packages/FusionUIPack が生成される。Fusion 本体を別途追加する必要はない（FusionUIPack が再エクスポートする）。

使い方

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Packages = ReplicatedStorage:WaitForChild("Packages")

local FusionUIPack = require(Packages.FusionUIPack)
local Fusion = FusionUIPack.Fusion

local scoped = Fusion.scoped

-- Widget 呼び出し例
local scope = scoped(Fusion, {
    RPGProximityPrompt = FusionUIPack.Widgets.ProximityPrompts.RPG,
})

local prompt = scope:RPGProximityPrompt({
    EquipmentName = "伝説の剣",
    KeyCode = Enum.KeyCode.E,
    InputType = Enum.ProximityPromptInputType.Keyboard,
    HoldDuration = 1,
    HoldProgress = 0,
    Show = true,
    Stats = {
        Attack = 150,
        Defense = 80,
        CriticalRate = 25,
        CriticalDamage = 150,
        GuardRate = 15,
        GuardPierceRate = 20,
        GuardEffect = 25,
    },
})

公開API

ライブラリのトップレベル FusionUIPack は以下のフィールドを持つ:

FusionUIPack.Theme

FusionUIPack.Theme.Color.Accent       -- アクセントカラー
FusionUIPack.Theme.Color.Background   -- 背景色
FusionUIPack.Theme.Color.TextPrimary  -- 主要テキスト色
FusionUIPack.Theme.Font.Default       -- 既定フォント
FusionUIPack.Theme.CornerRadius       -- 既定の角丸

FusionUIPack.Components — Atom 層

FusionUIPack.Widgets.ProximityPrompts — Widget 層

型インポート

local FusionUIPack = require(Packages.FusionUIPack)

type KeyCodeIconProps = FusionUIPack.KeyCodeIconProps
type LinearProgressBarProps = FusionUIPack.LinearProgressBarProps
type CircleProgressBarProps = FusionUIPack.CircleProgressBarProps
type DefaultProximityPromptProps = FusionUIPack.DefaultProximityPromptProps
type RPGProximityPromptProps = FusionUIPack.RPGProximityPromptProps
type RPGEquipmentStats = FusionUIPack.RPGEquipmentStats

ディレクトリ構成

fusion-ui-pack/
├── src/
│   ├── init.luau              # 公開API集約
│   ├── Shared/
│   │   ├── Constants/Theme.luau
│   │   ├── Types/UITypes.luau
│   │   ├── Fusion.luau        # Fusion再エクスポート（型伝播）
│   │   └── Require.luau       # パッケージ解決ヘルパー
│   └── Client/UI/
│       ├── Components/        # Atom層
│       └── Widgets/           # Widget層
│           └── ProximityPrompts/
├── stories/                   # UI Labs ストーリー（配布物からは除外）
├── default.project.json       # ライブラリビルド用（rojo build）
├── dev.project.json           # 開発用DataModel（rojo serve）
└── wally.toml

開発

# 依存インストール
wally install

# UI Labs 開発環境を起動
rojo serve dev.project.json

# ライブラリを .rbxm にビルド
rojo build default.project.json -o fusion-ui-pack.rbxm

# 品質チェック
stylua src stories
selene src stories

Story の追加

stories/ 配下に <Name>.story.luau を作成し、公開API経由で対象コンポーネントを require する:

local FusionUIPack = require(ReplicatedStorage:WaitForChild("FusionUIPack"))
local MyComponent = FusionUIPack.Components.MyComponent
-- or
local MyWidget = FusionUIPack.Widgets.MyCategory.MyWidget

ライセンス

MIT License © 2026 hakochanjp