Godotのビジュアル・スクリプトを使ってNoCodeでゲーム作りの基礎

Godotはオープンソースのゲームエンジンです。とりあえず最初の準備だけして動かしてみるだけならUnityやUnreal Engineと比べても最速だと思います。

Godotにはビジュアルスクリプトというものがあり、プログラムを書かなくてもビジュアルで処理を書くことができるエディタが備わっています。ちょっと触ってみたためせっかくですのでチュートリアル的に書き残しておきたいと思います。

今回はスプライトという画像オブジェクトを動かす基礎的な部分を解説します。Godot3.2で進めていきます。

プロジェクトを作成

まずは起動したらプロジェクト一覧が開きます。新規プロジェクトボタンをクリックしてプロジェクトを作成していきます。

フォルダはどこでも構いませんので、空のフォルダを作成して選択します。

作成すると3Dのからのシーンが表示されます。今回は2Dで試すため2Dシーンを選択します。

一度Ctrl+Sを実行、もしくはシーンメニューから「シーンを保存」を実行して保存しておきましょう。名前は何でも大丈夫です。

こんな感じで2Dのシーンが表示されていればOKです。Node2Dはシーンの一番上の現在は空のオブジェクトです。クリックしてTestScene等、わかりやすい名前に変えてもOKです。

ひとまずこれでプロジェクトの新規作成と準備が完了です。

スプライトを配置する

ゲーム画面に画像を表示するためにはスプライトというものを使用します。シーンのノード一覧のプラスボタンからも作成できますが、今回はすでにプロジェクト内にあるGodotのアイコンを使います。アイコンを画面にドラッグして配置するとスプライトが出来上がります。

シーンのノード一覧でも表示されています。

スプライトを動かす

それでは先程追加したスプライトを動かしていきます。

スプライトの座標

どうやって動かすかというと、スプライトは横軸X、縦軸Yという座標上に配置されています。

具体的には、スプライトを選択するとインスペクタにスプライトの詳細情報が表示されます。ここのTransformを選択して開くと、Positionに値が入っているのがわかります。これが現在配置されている座標です。

試しにこれを直接変更するとスプライトの位置が変わります。これをビジュアルスクリプトを使って変化させることで動かすようにします。

スクリプトを追加

スプライトを動かすためには、スプライトに紐づくビジュアルスクリプトを作成します。先程のインスペクトの一番下に、Scriptという設定欄がありますのでこちらで新規スクリプトを追加します。

とりあえず今回はすべてデフォルトのままでOKですが、ビジュアルスクリプトを使うため言語だけVisualScriptにしておきます。

作成を実行すると次のようなビジュアルスクリプトの編集画面が開きます。ここに色々と処理を書いていきます。

動かす処理を書いていく

今回はスプライトをずっと右移動させるスクリプトを書いていきます。「ずっと動かす」という処理は、 _process という関数で行うことができます。まずはこれを配置します。これは元々Godotで定義されているメソッドですので、左下のメンバーという欄の関数という行のプラスボタンの左に変なマークがありますので、これをクリックします。

これです。

ここにProcess(float)という項目がありますので、これを選択して実行します。

エディタ上に配置されました。これでまだ何もしませんがずっと処理を繰り返すProcessを定義することができました。

実際に何をやるかは、この右矢印につなげて指示していきます。先程話したように、今回はpositionを変更していきます。_processが呼ばれるごとにX座標をプラス１していく処理を書いていきます。

positionを変更するためには、Set positionを呼び出します。エディタ上で右クリックすると命令一覧が出てきます。これでpositionで絞り込むと「Positionを設定」という項目が見つかりますので、これを選択して確定します。

エディタ上に表示されました。処理を実行させるため、_processの矢印とSet positionの矢印をつなげておきます。これで毎フレームSet positionが実行されることになります。

しかし、まだ何をSetするのかが決まっていません。右移動させるためには何をセットさせればよいかというと、「現在のpositionにXを１足したもの」です。まずは先程と同じ操作で「Positionを取得」を配置します。

ちなみに、これの紫の丸マーク同士をつなげて実行してみることも可能です。ただ、取得した値をセットしているだけですのでエラーにはなりませんが進みもしません。これに１を足していきましょう。足すためには Math Add を選択します。これは単なる数学のプラスです。

今回は右クリックで作成するのではなく、Get positionの紫マークからドラッグして何もないところで離すと命令の選択ボックスが現れますのでそちらから選択してください。そうしないと型がずれてうまく行かない場合があります。

同じ紫のマークになって繋がっていればOKです。左の２つのマークから受け取った値をプラスし、右のマークから出すという仕組みです。

次にGetしたpositionに足すための１が必要になります。この１はただの数値ではなく、座標のXが１であることを表すものである必要があります。Godotでは2Dでの座標は Vector2 というクラスを用います。Vector2を新規作成するための Construct Vector 2XY という項目を選択して配置します。

今のところこんな感じになっています。配置すべき命令自体はこれで全てです。次の解説を見る前にちょっとどの様につなげればいいか想像してみてください。

取得したpositionとX=1のVector2を足して、それをSetする、という流れです。

答えは下記です。文字で書いたとおりそのままですね。

再生ボタンを実行してみましょう。最初だけどのシーンをデフォルトで実行するかを聞かれますので、現在編集しているNode2D.tscnを選択しておきます。名前を変えたり新たにシーンを作っている場合はそちらを適宜選択してください。

ふと思い出したのでGodotのVisual Scriptingやってみた。Unreal EngineのBlueprintみたいな感じ。ちなみにこれは配置したスプライトに毎フレームx=1のベクトルを足してるだけのスクリプト。需要あるのかなと思うけど英語だし日本のホビーでは厳しそうかな。 pic.twitter.com/xkcEgJLzCS

— だら🎄サービスづくりひたすら (@dala00) June 26, 2020

GDScriptの場合

ちなみにGDScriptを使った場合はこんな感じです。

extends Sprite


func _ready():
    pass # Replace with function body.


func _process(delta):
    set_position(Vector2(position.x + 1, position.y))

もうちょっと動きを加えてみる

右に一直線に動くスクリプトが作成できました。これを少し改造して上下にゆらゆら揺れながら動くようにしてみます。具体的にはこんな感じです。

さっきのにsinでふよふよを追加してみたけどやっぱちょっとめんどすぎる pic.twitter.com/ZdncBWWg0f

— だら🎄サービスづくりひたすら (@dala00) June 26, 2020

具体的にはどのようにするかというと、先程は(X, Y) = (1, 0)というベクトルを足しましたが、このYの値をゼロではなくsinを使った値を入れることで上下にゆらゆらさせてみます。

角度を定義する

sinで変動させるためには、sinにわたすための角度が必要となります。毎フレーム10度ずつ増やしていき、それのsinを足していくという形にしたいと思いますので、まずはこの角度を保持しておくための入れ物（変数）を作ります。

メンバー欄に変数を作成ボタンがありますのでそちらのプラスをクリックして変数を作成します。

作った変数を右クリックするとメニューが現れますので、「メンバーを編集」を選択します。そして下記のようにTypeとValueを設定します。Valueは単に0にするだけだとnullのままになってしまうため（Godot3.2.1現在）、一度1にしてから0に戻してください。

クリックで名前を変更できるためangleに変更しておきましょう。

角度を変動させる

さて、次はこれを毎フレーム10ずつ足していきます。これは先程のベクトルを足す処理と同じなので簡単です。変数を操作する処理を追加するためには、この変数欄をドラッグして配置すればOKです。そのままドロップするとGet angleになり、Ctrlキーを押しながらドロップするとSet angleになります。

これで先程と同様にして10を足す処理を入れましょう。こんな感じです。

プログラムには処理の順番がありますので、先程のSet positionに続くようにSet angleをつなげます。これで_processの呼び出しで各処理が実行されます。

さて、次はこのangleを実際に座標移動のために利用していきます。具体的にはangleを使って計算した値をSet positionするベクトルのY座標に入れます。

ちなみに掛け算はMath Multiplyです。intになっている場合があるためインスペクタでfloatに変更しておいてください。割り算はMath Devide、sinはSinです。

最終的にこんな感じになります。

要するに、下記のような計算です。sinによりプラスとマイナスが繰り返されるので上下にふらふらと揺れます。

vector.y = sin(angle * PI / 180)

ちなみに記事の最初の画像が全体図です。

GDScriptの場合

ちなみにGDScriptは下記になります。

extends Sprite

var angle = 0

func _ready():
    pass # Replace with function body.

func _process(delta):
    var add_y = sin(3.14 * angle / 180)
    set_position(Vector2(position.x + 1, position.y + add_y))
    angle += 10

プログラムが分かる場合はこちらのほうがやはり楽そうですね。

まとめ

ということでビジュアルスクリプトを使った場合の解説をしてみました。Unreal Engineも同じようなBlueprintというものがあります。決しておまけや子ども向けの機能だけとしてあるものではないというイメージです。プログラムにはどうしても抵抗がある場合はそちらで試してみましょう。

ちなみにHTML5ビルドもありますので簡単なものならすぐWebに公開できます。ちょっと重いですが。

https://dala00.github.io/godot-vstest-web/