1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【1から】Godot Engineで簡易電卓を作る Part1

Last updated at Posted at 2021-11-21

初めての電卓作成

まずはGodotを開いてみます。
スクリーンショット 2021-11-19 1.05.23.png

右の「新規プロジェクト」をクリック
スクリーンショット 2021-11-19 1.06.37.png

「フォルダーを作成」から適当な名前(とりあえず電卓で)をつけて「OK」を押す。
スクリーンショット 2021-11-19 1.07.14.png

すると作成可能になるので「作成して編集」をクリック
スクリーンショット 2021-11-19 1.07.39.png

するとこういう画面になるので、「ルートノードを生成」から「2Dシーン」をクリック
スクリーンショット 2021-11-19 1.11.28.png
ここから電卓を作成していきます。

まずは左上のシーンカテゴリの下にある「+」ボタンをクリックします。
スクリーンショット 2021-11-19 1.11.47.png

そこから「Node2D」を選択
スクリーンショット 2021-11-21 16.09.58.png
すると「Node2D」の下に「Node2D」が新たに作成されました。
スクリーンショット 2021-11-21 16.10.06.png
ここから更に、下の階層のNode2Dから「+」ボタンを押して、今度は「Button」を選択(上の検索欄から「button」と打つとすぐ出ます)。
スクリーンショット 2021-11-21 16.10.15.png
Node2D
L「Node2D」
 L「Button」

といった構造になっていれば成功です。

画面に小さい箱が出るので拡大してみましょう。

そして画面右の「インスペクター」から「Text」に「1」を半角で入力してみます。
スクリーンショット 2021-11-21 16.11.18.png
電卓ということで、まずはこのボタンを押したときに「1」が出力できるようにしましょう。

まずは”2段目”のNodeをクリックして、次に赤丸で示したボタンをクリック
スクリーンショット 2021-11-21 16.11.39.png
すると↓のような画面が出るので、名前はわかりやすく(ここではButton)付けて「作成」をクリック。
スクリーンショット 2021-11-21 16.12.02.png
すると今度はプログラムを編集する画面が出てきました。

ここにボタンの値を出力するプログラムを書いていきます。
スクリーンショット 2021-11-21 16.12.10.png
まず、シーンから「Button」を選択。

次に画面右の「ノード」をクリック。

ズラーっと項目が並んでいますが、ここでは「button_down()」を選択します。

スクリーンショット 2021-11-21 16.16.01.png

すると↓の画面が出ますが、そのまま「接続」をクリック。
スクリーンショット 2021-11-21 16.16.13.png
こうすることで、新たにプログラムが追加されました。
スクリーンショット 2021-11-21 16.16.26.png
ここには、ボタンがクリックされたときに実行してほしい内容を書き込みます。

最下行を

button.gd
func _on_Button_button_down():
    pass # Replace with function body.

から

button.gd
func _on_Button_button_down():
	print($Button.text)

と書き換えます。

スクリーンショット 2021-11-21 16.16.57.png
では一旦実行してみましょう。実行は右上の「再生」ボタンで行えますが、今のままでは「メインシーン」というものが存在しないので実行できません。
スクリーンショット 2021-11-21 16.17.32.png
そこで一旦戻って、左上のシーンタブから「シーンを保存」をクリックします。
スクリーンショット 2021-11-21 16.18.59.png
そしてシーン名を適当に付けて(ここではmainに変更)、「保存」をクリック。
スクリーンショット 2021-11-21 16.19.20.png
すると今まで作っていたものを保存したシーンファイル(赤でかこまれたファイル)が生成されました。
スクリーンショット 2021-11-21 16.19.40.png
そして、もう一度「再生ボタン」を押して「現在のものを選択」を押せば実行画面が立ち上がります。
スクリーンショット 2021-11-21 16.20.28.png
そして、1ボタンをクリックすると出力画面に1が出力されるようになりました。
スクリーンショット 2021-11-21 16.20.46.png
次回は「0〜9」,「+-×÷」,「=」といったボタンを実装したり、実際に計算できるところまで解説してみようと思います。

【1から】Godot Engineで簡易電卓を作る Part2

1
3
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
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?