見出し画像

第9章 シグナルを使おう

 今まで文字の出力のみを行っていたため、画像やボタンなどを組み合わせた勉強をしていませんでした。今回からはシグナルという機能を使いつつ、実際にゲーム画面を動かしていきます。

1.シグナルとは
2.ボタンノードでシグナルの設定方法
3.get_nodeでほかのノードの操作
4.画像を表示する
5.ボタンで画像の表示を操作する(get_node関数)

シグナルとは

 Godotにはシグナルという機能があります。シグナルとはノードが発生することができる信号です。ほかノードへ信号を送ることによって「ボタンが押された」時の信号や「タイマーが切れた」時の信号などを送ることができます。

画像1

 他のノードはこの信号を受け取ったときに、それに応じた処理を始めることができます。

 「ボタンを押されたときに数字をカウントする」「タイマーが0になったらゲームオーバーにする」などシグナルを使うことで複雑な処理が可能になります。


ボタンノードでシグナルの設定方法

前準備

 まずはNode2Dをルートノードとした2Dシーンを用意しましょう。

画像2

 そしたらNode2Dにスクリプトをアタッチします。(コメントは消しています)

画像3

 さらにNode2Dの子にButtonノードを追加してください。

画像4

画像5

 ボタンの大きさを変えてインスペクタでテキストを変えましょう。
見やすくするためなので、大きさもテキストも自由です。

画像6


シグナルの接続

 いよいよシグナルの接続です。今回行うことはNode2DにButtonノードのpressedシグナルをつなげることです。

 Buttonノードを選択した状態でインスペクタのタブからノードを選んでください。

画像7

 今現在、インスペクタに移っている一覧がButtonノードが発することができるシグナルです。

 pressedをダブルクリックしてください。

画像8

 次のウィンドウが出たら「接続」ボタンを押してください。

画像9

 そうすると、スクリプトの編集画面へ行き新たに「_on_Button_pressed()」という関数が追加されています。(画像の7行目)

画像10

 この「_on_Button_pressed()」はボタンが押されたときに実行される関数です。

 ここに以下のソースコードを入力してみましょう。

extends Node2D

func _ready():
	pass


func _on_Button_pressed():
	print("ボタンを押したよ")

 ではゲームを実行してみてください。ボタンを押してみると…

画像11

画像12

 「_on_Button_pressed()」が実行され、"ボタンを押したよ"と表示されました。もちろん一度だけでなく、何度でも実行できます。

画像13

 ノードを増やしても変わりません。

画像14

extends Node2D

func _ready():
	pass


func _on_Button_pressed():
	print("ボタン1を押したよ")


func _on_Button2_pressed():
	print("ボタン2を押したよ")


func _on_Button3_pressed():
	print("ボタン3を押したよ")

画像15



画像を表示する

 本来、ゲームを作るのであればprint関数だけでは足りないでしょう。文字だけのゲームもあるにはあるのですが、目標としては少々物足りないと感じますね。なので、まずは画像を表示されるプログラムを作っていきましょう。

 以下の画像を保存、または自分で好きな画像を用意してください。

ねむそう

この画像をプロジェクトにインポートしましょう。ファイルシステムドックへドラッグ、そしてドロップしてください。

画像19

 インポートができたら次のような表示が現れます。

画像20

 次はこの画像をゲーム画面に配置していきます。Node2Dをルートノードとするシーンを用意してください。

画像16

 Node2Dの子に「Sprite」ノードを追加してください。

画像17

 Spriteを選択した状態でインスペクタを見るとTexutreという項目があります。

画像21

 ここへファイルシステムドックにある「〇〇〇.png」を追加しましょう。(画像ではねむそう.pngを使っています)

画像22

画像23

 こうすることで画像の表示ができました。この状態でゲームを実行すると座標が左上にあるため、ビューポートにある画像を真ん中へ配置しましょう。

画像24

 この状態でゲームを実行すると画像が表示されます。

画像26

 このようにSpriteノードを扱えばゲーム画面に画像を出力することができます


ボタンで画像の表示を操作する(get_node関数)

 それでは最後にボタンで表示、非表示の設定をしてみます。その上で今回初めて必要になるものがスクリプト上でノードを操作するということです。ノードを操作するためには、まずノードを取得しなくてはなりません。

 ノードの取得をする関数はget_node関数です。(公式ドキュメント

get_node( <ノードへのパス> )

 スクリプトを書く前にNode2Dにスクリプトを追加して、Buttonノードを2つ追加しましょう。

画像26

 そうしたら「Button」ノードに名前を付けて、インスペクタからTextの変更、そして位置を調整していきましょう。ノードの名前はシーンドックにあるノードの名前をダブルクリックすると変更できます。

<ノードの名前の変更>

画像27

<Textの変更と位置の調整>

画像28

 それではスクリプトにButtonノードの「Visible」と「NotVisible」から「pressed」シグナルを繋いでいきましょう。

画像29

 ここでいよいよ「get_node」の登場です。

 「get_node」にはノードのパスを指定する必要があります。よく聞くファイルへのパスと非常によく似ていて、スクリプトをアタッチしている場所からのパスを指定します。

 今回はNode2Dの真下にSpriteがあるためノードへのパスは「"Sprite"」となります。(大文字小文字に注意してください)

get_node("Sprite")

 ここでさらに、Spriteが持つ機能「show()」と「hide()」を使用していきます。「show()」はSpriteを表示して、「hide()」はSpriteを非表示にします。

この二つはSpriteが持つ関数なので以下のように指定します。

get_node("Sprite").show()
get_node("Sprite").hide()

 これをそれぞれのボタンから受け取るシグナルに書き込んでいきます。

extends Node2D

func _ready():
	pass

func _on_Visible_pressed():
	get_node("Sprite").show()    # 画像を表示する


func _on_NotVisible_pressed():
	get_node("Sprite").hide()    # 画像を非表示にする

 これを実行すると以下のような操作ができます。

画像30

 シグナルは非常に使い勝手が良く、実際に筆者もガンガン使っています。Godotの優れている点なので皆さんもガンガン使っていきましょう。

 Spriteの表示非表示ができれば、立ち絵のグラフィックなどで「通常→ダメージ1→ダメージ2→戦闘不能」などの表現もできるようになります。それ以外にも公式ドキュメントを見ると、Spriteの位置を変えることも可能です。

 次回はSpriteと乱数を使ってサイコロを作っていきます。もしかしたら、あなたが初めて作るツールとなるかもしれませんね。



この記事が気に入ったらサポートをしてみませんか?