メインコンテンツまでスキップ

Example 1 : 簡単なライブコーディングアプリ

簡単なライブコーディングアプリを作ってみましょう。

シーンを作成する​

まず、Conrol ノードのシーンを作成して、以下のようなツリーになるよう子ノードを追加します。

ノードツリー
Control
  └ HBoxContainer
      ├ ReDScribeEditor
      └ RichTextLabel

子ノードを追加するには、右クリックからメニューを表示して選択するか、Ctrl-A (macOS の場合は、Command-A) キーを押下して追加します。

子ノードを追加する

子ノードを追加したあとは、横幅を調整します。

  • HBoxContainer の アンカーのプリセット から "Rect全面" を選択
  • ReDScribeEditor の 水平方向への整列 から "拡大" にチェックを入れる
  • RichTextLabel の 水平方向への整列 から "拡大" にチェックを入れる

Full Rect

Horizontal Expand

ReDScribeEdtior と RichTextLabel で画面を2分割できたら、シーンを実行してみます。

画面左側のエディタ欄(ReDScribeEditor)で、文字を入力してみると、 おそらく入力された文字が小さく感じると思います。

これは、Godot が hiDPI に対応しているためです。

解消方法はいくつかありますが、プロジェクト設定を変更することで対応します。

プロジェクト設定を変更する​

プロジェクト → プロジェクト設定 を開き、"stretch" と入力して絞り込みます。

ストレッチ スケール の値を "2.0" に設定します。

Stretch Scale

再度シーンを実行してみます。先ほどより文字が大きく表示されるようになったと思います。

備考

GDScript で変更をすることもできます。その場合は、以下のように書きます。

func _ready() -> void:
	get_window().content_scale_factor = 2.0

プロジェクト全体でスケールの設定をしたくない場合は、上記のように個別に設定しましょう。 Example 2 も同じプロジェクトで作成する方は注意してください。

テーマを設定する​

テーマを設定して、フォントサイズやフォントを変更することもできます。

Control ノードのインスペクターで、Theme に新しいテーマを作成します。

作成したテーマをクリックすると、ウィンドウ下部の テーマ パネルが表示されると思います。

"＋" ボタンを押下して、テーマを適用したいノードを追加します。 上書きしたいプロパティを編集することでデフォルトのテーマから見た目を変更できます。

テーマを作成する

フォントサイズを変更する場合は、以下のようにします。

フォントサイズを変更する

フォントを適用する場合は、以下のようにします。

フォントを変更する

ReDScribeEditor ノード​

シーンを実行して、試しに Ruby のコードを書いてみましょう。

コードがシンタックスハイライトされていると思います。 これは、ReDScribeEditor というノードが Ruby のシンタックスを判断して色をつけているからです。

ReDScribeEdtior

括弧の自動ペア補完を行なうには、ReDScribeEditor のインスペクタから Auto Brace Completion を "On" にします。

ReDScribeEdtior

GDScript をアタッチする​

ここまでで、画面左側にエディタ欄(ReDScribeEditor)、画面右側にテキスト欄(RichTextLabel) を表示するシーンが作成できました。あと少しです。

ここからライブコーディングアプリにするため、GDScript を Control ノードにアタッチします。

そして、GDScript で固有名 %NodeName のノードに直接アクセスできるようにするため、固有名でアクセス を ReDScribeEditor と RichTextLabel に設定します。

ReDScribeEdtior

extends Control

@onready var res := ReDScribe.new()

func _ready() -> void:
	res.method_missing.connect(_method_missing)
	%ReDScribeEditor.grab_focus()
	perform()


func perform() -> void:
	%RichTextLabel.text = ''
	res.perform(%ReDScribeEditor.text)


func add_circle() -> void:
	%RichTextLabel.add_text('◯')


func add_square() -> void:
	%RichTextLabel.add_text('■')


func _method_missing(method_name: String, _args: Array) -> void:
	match method_name:
		'circle': add_circle()
		'square': add_square()
		_: pass

まだ、これだけではシーンを実行しても何も起きません。

text_changed シグナルを紐づける​

最後に、ReDScribeEditor の text_changed シグナルを受け取って、perform 関数を実行するようにします。

ReDScribeEdtior

func _on_re_d_scribe_editor_text_changed() -> void:
	perform()

完成​

以上で完成です。シーンを実行してみましょう。

circle, square と入力するたびに右側に図形が動的に表示されると思います。

ReDScribeEdtior

なんと、たった30行程度の GDScript で、簡単なライブコーディングアプリが作成できました！

我々は労せずパーサを手に入れたのです。

もし、GDScript 単体でこれを実現しようとすると、どうやって作ったらいいでしょうか？ レキサーを作って、パーサを書いて、AST から GDScript を実行するようにして、、、途方もない労力が必要になります。

面倒なパーサの処理を Ruby が担ってくれたことで、GDScript のコードは画面に何を表示するかというロジックに集中することができました。例えばこの先、add_circle や add_square 関数を 2D や 3D で表示するコードに変えるだけ、それも Godot が得意な領域のコードを変えるだけでいろいろな発展性があります。

ReDScribeEditor は、アドオン用に作成したノードですが、通常のシーンでも利用することも意識して作成しています。今回の例のような、ユーザがスクリプトを書いて動かす GUI アプリを作成する場合などに活用してもらえればと思います。