GTML - Godot マークアップ言語

Godot 4.x 用のアドオンで、HTML と CSS を使って UI を構築できます。ゲームメニュー、HUD、パネルを馴染みのあるウェブ技術で作成可能です。

特徴

20 種類以上の要素を持つ HTML ベースの UI 構造
80 以上のプロパティに対応した外部 CSS スタイリング
エディタ内でのライブリロード
Flexbox レイアウトシステム
SVG レンダリングサポート
シグナル付きフォーム要素
CSS トランジションと疑似クラス（:hover、:active、:focus）
グラデーション背景とカスタムフォント

クイックスタート

1. インストール

addons/gtml/ をプロジェクトにコピーし、プロジェクト設定 → プラグインで有効化してください。

2. ファイル作成

menu.html:


    My Game

menu.css:

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    background-color: #1a1a2e;
}
h1 {
    font-size: 32px;
    color: #ffffff;
}
button {
    padding: 12px 24px;
    background-color: #00d4ff;
    border-radius: 4px;
    color: #000000;
    transition: background-color 200ms ease;
}button:hover {
    background-color: #00a8cc;
}

3. GmlView ノードを追加

GmlView ノードを追加し、インスペクターで Html Path と Css Path を設定します。

4. シグナルを接続する

func _ready():
    $GmlView.button_clicked.connect(_on_button_clicked)func _on_button_clicked(method_name: String):
    match method_name:
        "on_play":
            get_tree().change_scene_to_file("res://game.tscn")
        "on_quit":
            get_tree().quit()

ドキュメンテーション

はじめに - インストールと基本的な使い方
HTML要素 - 対応タグと属性
CSSプロパティ - 完全なプロパティリファレンス
CSSセレクター - セレクターと疑似クラス
フォーム＆入力 - フォーム要素とイベント
SVGサポート - ベクターグラフィックス
レイアウト＆フレックスボックス - レイアウトシステム
トランジション - CSSトランジション
フォント＆タイポグラフィ - カスタムフォント
GTMLの拡張 - 新機能の追加
制限事項 - 既知の制限事項

サンプル

動作デモは addons/gtml/examples/ を参照してください:

basic - シンプルなメニュー
all_elements - すべてのHTML要素
css_features - CSSプロパティの紹介
flex_layout - フレックスボックスレイアウト
transitions - CSSトランジション

ライセンス

MITライセンス

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-23 ---

godot-plugins-gtml