![見出し画像](https://assets.st-note.com/production/uploads/images/112634706/rectangle_large_type_2_9d2e3ea23eb477875dcfceaf61301aa8.jpeg?width=1200)
GODOT Game engineでゲームを作ってみよう!
どうも僕です。
以前から、ゲームエンジンに興味があり、
軽量かつ完全フリーなものはないかと探してました。
UnityやUnrealEngineなどのメジャーもありますが、
「GODOT」は軽量かつ完全フリー*です。
*寄付はできる!
マイナーではありますが、
ダウンロードしてZIP解凍すればすぐ始められるので
ゲームエンジンの入門としては最適なんじゃないかと思います。
ダウンロードしよう!
上記URLのDownload Latestボタンよりダウンロードページに行きます。
以下のボタンをクリックしてダウンロードしよう。
![](https://assets.st-note.com/img/1691275496458-G4MN9XSi4J.png)
寄付してね!って出ると同時にダウンロード始まる。
![](https://assets.st-note.com/img/1691275811906-rwrIzClYhZ.png)
解凍しよう。
![](https://assets.st-note.com/img/1691275858426-Yx1Pqj2Hc3.png)
フォルダを適当な場所に移し、好みのフォルダ名にしよう。
(別に移動しなくてもいいし、フォルダ名を変更しなくてもいい)
![](https://assets.st-note.com/img/1691275976672-LECcvXMIhn.png)
始めよう!
「Godot_vX.X.X-stable_win64.exe」をダブルクリックで起動しよう!
![](https://assets.st-note.com/img/1691276013493-Cz8n0QcPF0.png)
プロジェクトが無いよって、サンプルいる?出るけど、キャンセルで。
(サンプルを理解するのにも時間かかるのでwww)
![](https://assets.st-note.com/img/1691276377573-TaCl45j4To.png)
新規プロジェクトを作ろう。
![](https://assets.st-note.com/img/1691276391583-cScu8k5a0q.png)
適当なプロジェクト名にして、
![](https://assets.st-note.com/img/1691276599086-obFMno1mZb.png)
フォルダ作成を押す。
![](https://assets.st-note.com/img/1691276613239-itnjNKJASc.png)
バージョン管理メタデータはNoneにして作成して編集を押す。
![](https://assets.st-note.com/img/1691276665786-SNb6aTxG0C.png)
準備よし!
![](https://assets.st-note.com/img/1691276710148-7yK75kbvRL.png?width=1200)
2Dシーンにキャラを置いてみよう!
プレイヤーシーンの追加
「シーン」タブの「その他のノード」をクリックして
プレイヤーシーンを追加しよう。
(もしくは「シーン」メニューの「新規シーン」からのその他のノード)
![](https://assets.st-note.com/img/1691309589139-0EIJIAF3Ue.png)
「Area2D」を選択して「作成」をクリックしよう。
*「検索:」の欄に「Area」って打てば絞られるよ
![](https://assets.st-note.com/img/1691309782673-78vIs9EoUT.png)
![](https://assets.st-note.com/img/1691309883690-pZNBjgc0F9.png)
追加したシーンを右クリックして、
子ノードとしてAnimatedSprite2Dを追加しよう。
![](https://assets.st-note.com/img/1691310017873-3qloMahVZr.png)
すでに「検索:」で絞られているなら、Animatedって書き換えて
AnimatedSprite2Dを選択して作成しよう。
![](https://assets.st-note.com/img/1691310146348-5Zj6qrA7fK.png)
![](https://assets.st-note.com/img/1691310211096-hHQf1Z5xac.png)
まずスプライトにキャラの画像を選択しよう。
右側にAnimatedSprite2Dのインスペクター欄から
Animationの左の>をクリックして展開しよう。
![](https://assets.st-note.com/img/1691310386756-a6YNekqY3U.png)
Sprite Framesの<空>をクリックし、新規 SpriteFramesを選択する。
![](https://assets.st-note.com/img/1691310545853-XOlgWKTqNz.png)
右側の「SpriteFrames」をクリックすると
![](https://assets.st-note.com/img/1691311074844-MPp506iBIE.png)
中央下にアニメーション、アニメーションフレームが出てくる
![](https://assets.st-note.com/img/1691311100067-XnMXHZsKsK.png?width=1200)
以下から素材をいただきました。
上記のサイトのURLが書いてあるけど、
面倒ならばここをクリックしてDLしてくれ。
![](https://assets.st-note.com/img/1691828030646-JWG5fezwQG.png)
ダウンロードしたら解凍して、
![](https://assets.st-note.com/img/1691828064699-loViE7EQQn.png)
画像が入ったpngファルダをplayerってフォルダ名にする。
![](https://assets.st-note.com/img/1691828310676-LMH727UZLK.png)
ドキュメントの中に、プロジェクトのフォルダがあるはずなので、
上記のplayerフォルダを格納する。
![](https://assets.st-note.com/img/1691327909555-GTLCtrO5qL.png)
左下のres://に先ほど格納したフォルダが見えていればOK。
![](https://assets.st-note.com/img/1691328121671-3nneww0vlP.png)
中央下にアニメーション、アニメーションフレームにて、
アニメーションのdefaultを名前を変えて「up」にしよう。
![](https://assets.st-note.com/img/1691328231749-ynWOZBvtx5.png)
左下のres://のplayerフォルダからpng画像を
アニメーションフレームにドラッグアンドドロップ。
![](https://assets.st-note.com/img/1691328289933-xz3PgMcKv9.png?width=1200)
![](https://assets.st-note.com/img/1691328297324-Blu0mHWH0W.png?width=1200)
以下の順になるように並び変えよう*。
*back_00.pngはもう一度ドラッグアンドドロップで追加ね
back_00.png ⇒ back_01.png ⇒ back_00.png ⇒ back_02.png
![](https://assets.st-note.com/img/1691328463821-SnKiQzZGxK.png?width=1200)
アニメーションで+アイコンからアニメーションを追加して
「down」「left」「right」も追加しよう。
![](https://assets.st-note.com/img/1691328487232-PK8FwMcy44.png)
![](https://assets.st-note.com/img/1691328565338-cvXrLebJ17.png)
「down」「left」「right」も同じ要領でpngをアニメーションフレームに並べよう。
*パターンは _00 ⇒ _01 ⇒ _00 ⇒ _02 で歩いて見えるよ
![](https://assets.st-note.com/img/1691328770995-IPSGjugqai.png?width=1200)
アニメーションフレームの▶を押すとアニメーションするよ。
・・・いただいた画像が小さいので、主人公ちっさ!ってなる。
![](https://assets.st-note.com/img/1691830645034-DSkBEjIcA5.png)
そこで、右側AnimatedSprite2Dのインスペクター欄から
Transformの左の>をクリックして展開しよう。
Scaleのxとyを4にして4倍のサイズにしよう。
![](https://assets.st-note.com/img/1691830542070-C6QG7Xc8L3.png)
大きくなったね!
![](https://assets.st-note.com/img/1691829143198-L2eLCPQGmi.png)
念のため、ここでCtrlとSキーでシーンを保存しよう。
+アイコンを押して、Area2Dの子ノードをさらに追加しよう。
シーン「Area2D」をクリックして
![](https://assets.st-note.com/img/1691329183897-szvaqEuFoS.png)
+アイコンをクリックする。
当たり判定となる、「CollisionShape2D」を選択し、作成する。
![](https://assets.st-note.com/img/1691329072646-RFPy6FgXEZ.png)
Area2Dの子ノードとしてもう一つ追加された。
![](https://assets.st-note.com/img/1691329386963-2slpqYKmbG.png)
追加したら、右上のインスペクターを見るとShapeが<空>なので
<空>をクリック
![](https://assets.st-note.com/img/1691515813098-uPcQB8FiZG.png)
キャラに合わせてCapsuleShape2Dを選択すると
![](https://assets.st-note.com/img/1691515868410-j6KGI1Xjle.png)
キャラに当たり判定の枠(さっきの選んだカプセルの形)が出てくるので大きさを調整して・・・
![](https://assets.st-note.com/img/1691830764642-VnPDyicZOo.png)
こんな感じかな。
![](https://assets.st-note.com/img/1691830776302-qjKfW0mDjo.png)
保存しておこう。(キーCtrl+Sね!)
んで、シーン(左上)のタブの工程はこうなればOK
![](https://assets.st-note.com/img/1691516122436-q2XOXuPMdq.png)
プレイヤーのプログラミング
スクリプトを書いてゆこう。
シーンのArea2Dを選択して、
![](https://assets.st-note.com/img/1691516492079-MfodcrvAw1.png)
スクリプト+アイコンをクリックする。
![](https://assets.st-note.com/img/1691516599859-4Pp6yVCyZr.png)
そのまま、作成ボタンをぽちー。
![](https://assets.st-note.com/img/1691516641362-KfObXafhfC.png)
以下のように書きなおす。
extends Area2D
@export var speed = 400 # How fast the player will move (pixels/sec).
var screen_size # Size of the game window.
# Called when the node enters the scene tree for the first time.
func _ready():
screen_size = get_viewport_rect().size
# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
pass
![](https://assets.st-note.com/img/1691517085630-CpKhKOP6qv.png?width=1200)
キャラを動かすために、キーボードを割り当てる。
メニューのプロジェクト⇒プロジェクト設定をクリックしよう。
![](https://assets.st-note.com/img/1691517155651-i3nfWaCYLg.png)
"move_right"って入力して追加ボタンぽちー
![](https://assets.st-note.com/img/1691517249345-SEOJo7nK9Q.png?width=1200)
+をクリックしよう。
![](https://assets.st-note.com/img/1691517315180-zmulZR0rPb.png?width=1200)
「キーボードのキー」の>をクリックして、rightを選択しよう。
![](https://assets.st-note.com/img/1691517399713-8Iadg6MRBS.png)
![](https://assets.st-note.com/img/1691517460529-uiYVVOEtoC.png)
そしたらOKボタンね。"move_right"に右キーが割り当てられたね。
![](https://assets.st-note.com/img/1691517573109-T0H4dbLsEo.png)
上下左キーも割り当てよう。
move_up:上キー
move_down:下キー
move_left:左キー
![](https://assets.st-note.com/img/1691517759350-UQxOgj8gSW.png)
最後に閉じるボタンぽちー
あと、保存しておこう。
スクリプトにキャラ移動とアニメーション変化ロジックを足そう。
(func _process(delta):の下を書き換えよう)
# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
var velocity = Vector2.ZERO # The player's movement vector.
if Input.is_action_pressed("move_right"):
velocity.x += 1
if Input.is_action_pressed("move_left"):
velocity.x -= 1
if Input.is_action_pressed("move_down"):
velocity.y += 1
if Input.is_action_pressed("move_up"):
velocity.y -= 1
if velocity.y < 0:
$AnimatedSprite2D.animation = "up"
elif velocity.y > 0:
$AnimatedSprite2D.animation = "down"
elif velocity.x > 0:
$AnimatedSprite2D.animation = "right"
elif velocity.x < 0:
$AnimatedSprite2D.animation = "left"
if velocity.length() > 0:
velocity = velocity.normalized() * speed
$AnimatedSprite2D.play()
else:
$AnimatedSprite2D.stop()
position += velocity * delta
position = position.clamp(Vector2.ZERO, screen_size)
![](https://assets.st-note.com/img/1691830113942-VBCS2r0WUC.png?width=1200)
ゲーム開始直後は、主人公キャラを非表示とするhide()を追加。
(func _ready():の下にhide()を追加しよう)
func _ready():
hide()
screen_size = get_viewport_rect().size
![](https://assets.st-note.com/img/1692011941739-zBdzdUTIRg.png)
さらに衝突時用に発信される独自のhitシグナルを宣言。
(extends Area2Dの下に以下を追加しよう)
extends Area2D
signal hit
![](https://assets.st-note.com/img/1692011990338-MrkAHtzjYl.png)
左側のシーンでArea2Dを選択し、
![](https://assets.st-note.com/img/1697372318464-Na02JOTEi3.png)
右側のインスペクターの横の「ノード」タブをクリックする。
![](https://assets.st-note.com/img/1692011681783-RA1kKQOJJ8.png)
「ノード」タブの「シグナル」の中の
Area2D配下にあるbody_entered(body: Node2D)を右クリして
「接続」を選択する。
*オーバーラップ検出(キャラ同士の重なりを検出)した時のシグナル
![](https://assets.st-note.com/img/1692011785294-8YmYDluDmq.png)
接続をぽちー。
![](https://assets.st-note.com/img/1692011816915-q76JMZAWhr.png)
"area_2d.gd"スクリプトに以下のfuncが現れる。
![](https://assets.st-note.com/img/1692011842631-6LroJ4qCZE.png)
その"func _on_body_entered(body):"の中を以下の通りに書き換える。
func _on_body_entered(body):
hide() # Player disappears after being hit.
hit.emit()
# Must be deferred as we can't change physics properties on a physics callback.
$CollisionShape2D.set_deferred("disabled", true)
![](https://assets.st-note.com/img/1692012044381-SvjcTs7jk6.png?width=1200)
最後にstartメソッドを作成する。
func start(pos):
position = pos
show()
$CollisionShape2D.disabled = false
![](https://assets.st-note.com/img/1692012172297-erfzaiheAc.png)
"area_2d.gd"スクリプト全体としては以下の感じです。
![](https://assets.st-note.com/img/1692012763078-6CpthExl2o.png?width=1200)
一旦、func _ready():のhide()をコメントアウト"#"して
キャラの動きを確認してみよう。
![](https://assets.st-note.com/img/1692012412123-qLMNZXOGlK.png)
右上に再生アイコンがあるからクリック。
![](https://assets.st-note.com/img/1697334623572-VeTkWwUzd7.png)
初めて動かすときに、メインシーンが定義されていないと出るので
「現在のものを選択」をぽちー。
![](https://assets.st-note.com/img/1691518916081-X0kySm4pZ9.png)
キーボートの上下左右キーを押すとキャラがうごく!
これだけでも嬉しい!
最後にfunc _ready():のhide()をコメントアウトを外しておこうね。
![](https://assets.st-note.com/img/1692012510744-vD3KaF4yWK.png)
今回は以上です。
では、また!
<補足>
次回は敵キャラを発生させてます!
よかったら次回も見てください。