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


###初めての電卓作成

まずはGodotを開いてみます。
![スクリーンショット 2021-11-19 1.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/005e6308-a019-6c0f-ee9b-5872b0ad0769.png)


右の「新規プロジェクト」をクリック
![スクリーンショット 2021-11-19 1.06.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/f37603fd-a81a-405f-7498-c3697c50c11e.png)

「フォルダーを作成」から適当な名前（とりあえず電卓で）をつけて「OK」を押す。
![スクリーンショット 2021-11-19 1.07.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/92f784df-807c-f3ec-7d26-bb339024f0ee.png)

すると作成可能になるので「作成して編集」をクリック
![スクリーンショット 2021-11-19 1.07.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/4c012bd6-d6f2-8473-a9eb-9a98c95328e6.png)


するとこういう画面になるので、「ルートノードを生成」から「2Dシーン」をクリック
![スクリーンショット 2021-11-19 1.11.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/407cf9c2-58cd-d552-a799-eccf97a3ddd9.png)
ここから電卓を作成していきます。

まずは左上のシーンカテゴリの下にある「＋」ボタンをクリックします。
![スクリーンショット 2021-11-19 1.11.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/27b34ddb-6ada-c891-6446-7714b46cfc2b.png)

そこから「Node2D」を選択
![スクリーンショット 2021-11-21 16.09.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/7cdd122c-202f-c68e-aac0-dd38e19752b6.png)
すると「Node2D」の下に「Node2D」が新たに作成されました。
![スクリーンショット 2021-11-21 16.10.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/0f228784-3fc6-8dda-919a-53c40daa9a9a.png)
ここから更に、下の階層のNode2Dから「＋」ボタンを押して、今度は「Button」を選択（上の検索欄から「button」と打つとすぐ出ます）。
![スクリーンショット 2021-11-21 16.10.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/73832fa0-9ffc-5860-5770-d39f9babd517.png)
Node2D
L「Node2D」
　L「Button」

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

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

そして画面右の「インスペクター」から「Text」に「1」を半角で入力してみます。
![スクリーンショット 2021-11-21 16.11.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/852f0231-28c1-b6b4-3e36-8a77bbd627c1.png)
電卓ということで、まずはこのボタンを押したときに「1」が出力できるようにしましょう。

まずは”2段目”のNodeをクリックして、次に赤丸で示したボタンをクリック
![スクリーンショット 2021-11-21 16.11.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/70ce36ad-5067-7877-29d1-6ec5a0aad724.png)
すると↓のような画面が出るので、名前はわかりやすく（ここではButton）付けて「作成」をクリック。
![スクリーンショット 2021-11-21 16.12.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/da7c0021-7fe3-e522-2ca3-0c9d6245d548.png)
すると今度はプログラムを編集する画面が出てきました。

ここにボタンの値を出力するプログラムを書いていきます。
![スクリーンショット 2021-11-21 16.12.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/4730b01a-7262-1bca-230b-cde4b7ee0ef8.png)
まず、シーンから「Button」を選択。

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

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

![スクリーンショット 2021-11-21 16.16.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/e23630d8-c17c-b12a-8a50-d39b536d5420.png)

すると↓の画面が出ますが、そのまま「接続」をクリック。
![スクリーンショット 2021-11-21 16.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/297601cf-0372-c68a-2cd4-acdfb6092e93.png)
こうすることで、新たにプログラムが追加されました。
![スクリーンショット 2021-11-21 16.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/46728954-ad08-d5c6-50f3-82154c4051c5.png)
ここには、ボタンがクリックされたときに実行してほしい内容を書き込みます。

最下行を

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

```gd:button.gd
func _on_Button_button_down():
	print($Button.text)
```
と書き換えます。

![スクリーンショット 2021-11-21 16.16.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/9b53f749-6427-87e4-5e39-71215a019ce1.png)
では一旦実行してみましょう。実行は右上の「再生」ボタンで行えますが、今のままでは「メインシーン」というものが存在しないので実行できません。
![スクリーンショット 2021-11-21 16.17.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/34b8d0a2-a9fd-f081-7be9-fb70266995b2.png)
そこで一旦戻って、左上のシーンタブから「シーンを保存」をクリックします。
![スクリーンショット 2021-11-21 16.18.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/b9d3599e-cc2c-e846-8676-a394f2cf6f66.png)
そしてシーン名を適当に付けて（ここではmainに変更）、「保存」をクリック。
![スクリーンショット 2021-11-21 16.19.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/6c6fa5a4-4f3e-5f66-d946-1d171564044d.png)
すると今まで作っていたものを保存したシーンファイル（赤でかこまれたファイル）が生成されました。
![スクリーンショット 2021-11-21 16.19.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/0b7cc343-86a1-ffa4-8dd4-461f52429eb3.png)
そして、もう一度「再生ボタン」を押して「現在のものを選択」を押せば実行画面が立ち上がります。
![スクリーンショット 2021-11-21 16.20.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/8fea5386-92a5-d2b4-3659-e41f514429f8.png)
そして、1ボタンをクリックすると出力画面に１が出力されるようになりました。
![スクリーンショット 2021-11-21 16.20.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309073/d44dc3be-60f1-7a11-5072-c03014a9d4b3.png)
次回は「0〜9」,「+-×÷」,「=」といったボタンを実装したり、実際に計算できるところまで解説してみようと思います。

[【１から】Godot Engineで簡易電卓を作る Part2](https://qiita.com/t170317/items/24a4024c212406423d1c)