<h1 id="%E6%A6%82%E8%A6%81" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<p data-line="1" class="code-line">この記事は、Godot Engineでフラッピーバードを作成するチュートリアルとなります。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/ebp6q79hc7t6geipzxcwt702fxho" class="md-img" loading="lazy"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="5" class="code-line">2025.9.11 追記：Godot4.xに対応した記事をアップロードしました</p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__28c60c2095bd3" src="https://embed.zenn.studio/card#zenn-embedded__28c60c2095bd3" data-content="https%3A%2F%2F2dgames.jp%2Fentry%2F2025%2F09%2F11%2F120000" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
</div></aside>
<p data-line="9" class="code-line">もし Godot Engineに慣れていない場合は、以下のクリックゲームの方がシンプルでわかりやすいのでおすすめです。</p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1762d0a0c6928" src="https://embed.zenn.studio/card#zenn-embedded__1762d0a0c6928" data-content="https%3A%2F%2F2dgames.jp%2Fentry%2Fgodot4-clickgame-tutorial%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<p data-line="11" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/r8on24f76w0sgz7s9u7kwri7esjk" class="md-img" loading="lazy"></p>
<h1 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" data-line="13" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> プロジェクトの作成</h1>
<p data-line="14" class="code-line">まずはプロジェクトを作成します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/2e4wtntd8jmyslz894ak00sr0jo8" class="md-img" loading="lazy"><br>
ここでは「FlappyBird」という名前にしました。</p>
<h1 id="main%E3%82%B7%E3%83%BC%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90" data-line="18" class="code-line">
<a class="header-anchor-link" href="#main%E3%82%B7%E3%83%BC%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> Mainシーンの作成</h1>
<p data-line="19" class="code-line">まずはゲームのメインとなるシーンを作成します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/eano3o9u9fccxs8yi1w6su11tl9d" class="md-img" loading="lazy"><br>
「2Dシーン」クリックします。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/y9oe44kn1jis3ytnfdxskceeuga8" class="md-img" loading="lazy"><br>
2Dシーンが作成されるので、ノード名を「Main」に変更して <code>Ctrl+S</code> (<code>Cmd+S</code>) でシーンを保存します (そのまま "Main.tscn" として保存)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/einnubp28lma0lt8jkuu2axpka3l" class="md-img" loading="lazy"></p>
<p data-line="26" class="code-line">保存したら、<code>F5</code> (<code>Cmd+B</code>) または右上の「▶」をクリックしてゲームを実行します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/kyvnjjz66z7ocqmlvibft6gllort" class="md-img" loading="lazy"></p>
<p data-line="29" class="code-line">メインシーンが設定されていないの確認ダイアログが表示されます。「選択」をクリックします。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/vmg87r1qn3wafx3j7nroebk4oxmn" class="md-img" loading="lazy"></p>
<p data-line="32" class="code-line">メインシーンに "Main.tscn" を選んで、「開く」をクリックします<br>
<img src="https://storage.googleapis.com/zenn-user-upload/dyml1kfw7qbpe2fgx27qedrgt4fi" class="md-img" loading="lazy"></p>
<p data-line="35" class="code-line">するとゲームが実行できます。（何も表示されていないウィンドウが表示されます）<br>
<img src="https://storage.googleapis.com/zenn-user-upload/qccn16aowolakrdaeu1psgbaoa9d" class="md-img" loading="lazy"></p>
<h2 id="%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B" data-line="38" class="code-line">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B" aria-hidden="true"></a> 背景画像を配置する</h2>
<p data-line="39" class="code-line">以下の画像を "bg_back.png" として保存します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/1pt1043td81gd7w5g4q1ml0f7mk8" class="md-img" loading="lazy"><br>
そしてプロジェクトにドラッグ＆ドロップで追加します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/59mds7qvohmhak84nyil3hetg3ig" class="md-img" loading="lazy"></p>
<p data-line="44" class="code-line">プロジェクトに追加した "bg_back.png" をキャンバスにドラッグ＆ドロップします。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/w4lz6sj0y34ujpoibuz6fi2lfkju" class="md-img" loading="lazy"></p>
<p data-line="47" class="code-line">"bg_back" がスプライトとして、Mainシーンに追加されました。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/9zu8qlnqioealchhhddvu1c1lf4j" class="md-img" loading="lazy"></p>
<h3 id="sprite%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%92%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B" data-line="50" class="code-line">
<a class="header-anchor-link" href="#sprite%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%92%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B" aria-hidden="true"></a> Spriteの位置を調整する</h3>
<p data-line="51" class="code-line">キャンバスで位置を調整しても良いですが、インスペクタから行うと、細かい調整が可能となります。<br>
まずは、"bg_back" ノードを選択します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/t2hy9ap3pb8h1ap8nhi6n0zkwvj5" class="md-img" loading="lazy"><br>
そしてインスペクタから、<code>Node2D &gt; Transform &gt; Position</code> のところにある「回転アイコン」をクリックします。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/540jgzw17dcr7vzfyopaguxt9blo" class="md-img" loading="lazy"></p>
<p data-line="57" class="code-line">すると位置は (0, 0) となるのですが、左上の位置をはみ出してしまっています。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/sao8xw8s3sirpybmq22a1r4pbjv4" class="md-img" loading="lazy"></p>
<p data-line="60" class="code-line">実行するとわかるのですが、背景が意図した位置に表示されていません。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/tp2ihftq0ulfledgzuhmmng79qb6" class="md-img" loading="lazy"></p>
<p data-line="63" class="code-line">これは <code>Sprite</code>の基準座標のデフォルト値が「中央」となっているためで、<code>Offset &gt; Centered</code> のチェックを外すと、左上基準の座標となります。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/n2x8s2pget7py4p1e85d26kkrbmw" class="md-img" loading="lazy"></p>
<p data-line="66" class="code-line">これで位置を調整できたのですが、実行するとウィンドウサイズと背景画像のサイズが合っていません。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/xilbm4pzs1lkiag7n9dl3700rw45" class="md-img" loading="lazy"></p>
<h3 id="%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E8%AA%BF%E6%95%B4" data-line="69" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E8%AA%BF%E6%95%B4" aria-hidden="true"></a> ウィンドウサイズの調整</h3>
<p data-line="70" class="code-line">ウィンドウサイズを変更するには、メニューから<code>プロジェクト &gt; プロジェクト設定</code> を選びます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/twllkhduncdk0pdhtvzae27pkgzr" class="md-img" loading="lazy"></p>
<p data-line="73" class="code-line">するとプロジェクト設定が表示されるので、「一般」タブから <code>Display &gt; Window</code> を選び、<code>Size</code> の値を Widthを「800」 Heightを「480」に変更します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/2ydfkwy1ky7lwlojr2kuuklp48dc" class="md-img" loading="lazy"></p>
<p data-line="76" class="code-line">実行すると背景画像がぴったり収まりました。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/gjc6jxp88bi98yvahcno2gi7ajur" class="md-img" loading="lazy"></p>
<h1 id="%E6%AC%A1%E5%9B%9E" data-line="79" class="code-line">
<a class="header-anchor-link" href="#%E6%AC%A1%E5%9B%9E" aria-hidden="true"></a> 次回</h1>
<p data-line="80" class="code-line">第二回に続きます<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6fc7b64d0adf" src="https://embed.zenn.studio/card#zenn-embedded__6fc7b64d0adf" data-content="https%3A%2F%2Fzenn.dev%2Fsyun77%2Farticles%2Fdcae7c4083985e" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/syun77/articles/dcae7c4083985e" style="display:none" target="_blank">https://zenn.dev/syun77/articles/dcae7c4083985e</a></p>


【Godot Engine】フラッピーバードを作るチュートリアル (Part.1)

Discussion