4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[ Godot 4 ] UI制作で困ったら見られるようなメモ

Last updated at Posted at 2024-05-25

はじめに

Godotとは

MITライセンスで開発されているオープンソースのクロスプラットフォーム用のゲーム開発エンジン。
この記事では基本的にGodot4.2.1を使用する。

UIとは

ユーザーインターフェースのこと。画面上に表示されるものは基本的にUI。この記事では2dのUIにフォーカスしていこうと思う。

知っておくと役に立つこと

screenの大きさを取得する関数

get_viewport_rect().size

用途

  • windowの大きさを取得する。画面の大きさにUIを合わせたいときに便利。

Nodeの名前を取得する関数

String(name)

用途

  • nodeの名前を取得する。nodeの種類ではない。
  • 一つのスクリプトで複数のノードを制御したい時などに便利。

Sutep Up !

  • String(name).to_lower()で大文字を含まない名前が取得できる。

何かのアクションを検知する方法 - シグナル

シグナルはボタンが押された sliderの値が変更されたなどのアクションを検知するのに使う。

  • 例(BuottonNodeの場合)
    image.png
  • 送信したいシグナルを選択し、送信先を選択することで使用できる。
  • 上から三番目のpressed()の下に. :: _on_pressed()とあるが、これはシグナルがほかのnodeに送られていることを示すもの。別の名前の場合もある。

本文の目次

  1. ラベル(Lavel)
  2. タブコンテナー(TabContainer)

本文

1.ラベル(Lavel)

image.png
文字列を表示させるノード
基本的にノードの名前をプレイ画面上に表示させる。変更したかったらtextプロパティを変更すればよい(なお、変更はscript上でも行うことができる)。

2.タブコンテナー(TabContainer)

image.png
このノードはこのノードの子ノードを整列させる機能がある。
特にBoxContainerはこのノードの頭にタブとして並ぶ。

  • BoxContainer
    NodeTree_BoxContainer.png
  • 例 ( VBoxContainer を使用)
    Ex_BoxContainer.png

ポイント

  • このノードが非表示になるとこのノードの子ノードも非表示になる
  • このノードの子ノードの大きさは基本的にこのノードの大きさに合うように調節される
  • タブごとに表示させる要素を変えたかったら要素をBoxContainerの子ノードとする
  • 大きさはsizeプロパティで調節できる
  • 大きさの調整はscriptからでもできる

最後に

まだ少ないが随時追加する。

関連記事

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?