Godotでタイトル画面を作る方法


Godot Engine バージョン4.3

このチュートリアルでは、Godot 4.3を使用して、基本的なタイトル画面をゼロから作成する方法を学びます。背景画像、タイトルテキスト、ボタンを含むシンプルで機能的なタイトル画面を実装します。




ステップ1: 新しいシーンの作成

  1. Godot 4.3を起動し、プロジェクトを開きます。
  1. 画面の大きさが変わってもUIが崩れないように固定します。Project > General > Display > Windows > Modeをcanvas_itemsに変更します。

  1. 新しいシーンを作成し、CanvasLayerをルートノードとして設定します。シーン名を Title に変更します。


ステップ2: タイトルテキストと画像の追加

  1. CanvasLayerノードにLabelノードを追加します。
  1. Textプロパティにゲームタイトル（例: "ゴドチューを集めろ！"）を入力します。
  1. Fontプロパティを設定して、カスタムフォントを使用することで見栄えを良くします（DynamicFontなど）。
  1. レイアウトを中央に配置し、画面上部に適切な余白を残します。
  1. CanvasLayerノードにSprite2Dノードを追加して、Textureに好きな画像を設定します。今回はゴドチューをロゴのように配置します。




ステップ3: ボタンを追加

  1. CanvasLayerノードにVBoxContainerを追加します。これにより、ボタンを垂直に整列できます。
  1. VBoxContainer内に以下のボタンを追加します：
  • 遊ぶ！（ゲームを開始するボタン）
  • 終了（ゲームを終了するボタン）
  1. 各ボタンのTextプロパティを設定し、ボタンにラベルをつけます。
  1. VBoxContainerのTheme Overrides > Constants > Separationからボタンの間のスペースを調整できます。



ステップ4: ボタンのスクリプトを追加

Start Gameボタンを選択し、以下のスクリプトを追加します：
# ゲーム画面に遷移
func _on_start_btn_pressed():
    get_tree().change_scene("res://scenes/game.tscn")
Quitボタンに以下のスクリプトを追加します：
# ゲームを終了
func _on_quit_btn_pressed():
    get_tree().quit()


ステップ5: シーンをメインに設定

title.tscnを保存します。
プロジェクト設定（Project -> Project Settings）のMain Sceneを title.tscn に設定します。




ステップ6: 実行してテスト

プロジェクトを実行し、タイトル画面が正しく表示されることを確認します。
各ボタンが期待通りに動作するかテストしてください。



このチュートリアルを通じて、Godot 4.3で簡単なタイトル画面を作成する手順を学びました。これを基に、さらに詳細なアニメーションやエフェクトを追加することもできます！

ゴ

作成者

ゴドチュー

最終更新日: 2024/12/27 09:11

コメント