モバイルゲーム：サークルジャンプ on Godot 4 レシピ

プロジェクトの設定

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

この記事は Godot 3から Godot 4 へ内容の書き換え中です。 Godot4では存在しない変数、関数が含まれている場合があります。もしその場合はリポジトリのIssuesまでご報告ください。

どこから始めればよいでしょうか？ゲームの種類やアイデアの具体性によって、答えは大きく異なります。この場合、事前にプロトタイプを作成し、さらにアイデアを固めておいたため、若干有利でした。とはいえ、当初の構想からは多少逸脱してしまいましたし、この連載も同様になるかもしれません。結果は時が経ってみないと分かりません。

大きなプロジェクトの場合、まず設計書から始めるのが一般的です。これは、簡単なメモ1枚程度のものから、ゲーム世界・ストーリー・メカニクスの詳細を網羅した500ページに及ぶ大作まで様々です。ここではそこまで複雑なものは必要ありませんので、まずは大まかな企画内容をご説明します。

ゲームプラン

このゲームでは、プレイヤーは「キャラクター」を操作し、円形のフィールドから別の円形へジャンプしていきます。ジャンプはクリックまたはタップで開始され、次のサークルに着地できなければゲームオーバーとなります。スコアは生存時間に応じて加算され、難易度は徐々に上昇していきます - 移動するサークルや、サイズが小さくなるサークル、さらには消滅するサークルが登場するためです。コンセプトは、スピード感あふれる短時間で遊べる、「もっと上を目指せ」という感覚を刺激するゲームプレイです。可能な限り、アートスタイルはシンプルでクリーンなデザインを維持し、視覚効果やオーディオエフェクトを駆使して魅力を高めていきます。

メモ

まずはGLES3を使用して開始します。これがどのような影響を及ぼすかはまだ明確ではありません。モバイルテストフェーズに移行した時点で、GLES2への移行が必要かどうかを検討します。

また、このプロジェクトを GitHubでフォローすることもできます。

はじめに

まず、プロジェクト設定から始めてください。画面サイズと動作仕様を定義が必要です。モバイルゲームとして開発するので、縦向き表示が必須となり、さまざまな端末の画面解像度に対応できるようが必要です。スマートフォンには数多くの画面解像度が存在するためです。

プロジェクト設定を開き、［表示／ウィンドウ］セクションに移動します。画面サイズを (480, 854) に、［携帯端末／向き］を「縦」に、［伸縮／モード］を「2D」に、そして［伸縮／アスペクト比］を「維持」にそれぞれ設定してください。

次に、［入力デバイス／ポインティング］セクションで「マウスからタッチ操作をエミュレート」を有効にしてください。これにより、画面のタッチイベントのみを使用してコードを入力できる上に、PCプラットフォームではマウスを使ったプレイも可能になります。

プロジェクト管理体制

整理整頓のため、ゲームオブジェクト用のフォルダ（objects）とUI専用フォルダ（gui）を作成します。画像や音声などのゲームアセットはassetsフォルダに格納してください。開始時点で使用するアセットはこちらからダウンロードできます。

メモ

プロジェクトファイルをこちらからダウンロードしてください: circle_jump_assets.zip

フォルダ構造とアセットの準備が整ったら、いよいよコーディング開始です！

ゲームオブジェクト

作成するゲームオブジェクトは2つあります。プレイヤー（「ジャンパー」）と円形オブジェクトです。

ジャンパー（Jumper）

移動と衝突判定には、Area2Dを使用することにします。公平を期すために言えば、ここではCharacterBody2Dを使用しても問題ありませんし、同様に機能します。ただし、このゲームでは厳密な衝突検出は必要なく、ジャンパーが円に接触したかどうかだけを把握できれば十分です。以下のノードを追加しましょう：

Area2D (“Jumper”)
- Sprite
- CollisionPolygon2D
- VisibilityNotifier2D

シーンを res://objects/ に保存し、円の画像ファイル（res://assets/images/jumper.png）をスプライトの Texture にドラッグします。すべてのゲーム画像は初期設定では白色になっていますので、後で動的に色付けする際に作業がしやすくなります。

アートワークが上向きに描かれているため、Sprite2Dの［回転］プロパティを90に設定してください。

CollisionPolygon2D を選択し、ジャンパーの三角形形状をカバーするように3点を追加してください。

では、ボディ部分にスクリプトを追加し、その動作をコーディングしていきます。

まず、シグナルと変数について：

extends Area2D

var velocity = Vector2(100, 0) # start value for testing
var jump_speed = 1000
var target = null # if we're on a circle

次に、画面タッチを検知し、円形オブジェクト上にいる場合はジャンプ処理を実行します。

サークルをスポーンさせる

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

前回のパートでは、ゲームの中核をなすジャンパーオブジェクトとサークルオブジェクトを作成しました。次に、プレイヤーがミスするまで連続して出現するサークルの進行システムを追加する必要があります。

メインシーンの拡張

メイン・ノードにさらにノードを追加してください。

Marker2D (“StartPosition”)

このゲームの開始位置をマークします。画面中央下部付近に置いてください。
カメラ 2D

カメラはプレイヤーの動きに合わせて追従します。

カメラの設定も行います。 オフセット を (0, -200) に設定してください。これにより、前方の世界をより広く確認できるようになります。また、カレントモードは「オン」に設定してください。

メインシーンのスクリプト化

手動で作成したジャンパーと円のインスタンスを削除します。今後はコード内で追加するようにします。

以下をJumper.gdに追加してください。

signal captured

ジャンパーが円に接触した時に、このシグナルを発生させます。

func _on_Jumper_area_entered(area):
 target = area
 velocity = Vector2.ZERO
 emit_signal("captured", area)

また、円の init() 関数を修正して、位置も受け取れるようにしてください。

func init(_position, _radius=radius):
 position = _position

それでは、Main シーンにスクリプトを追加してください。

extends Node

var Circle = preload("res://objects/Circle.tscn")
var Jumper = preload("res://objects/Jumper.tscn")

var player

需要が発生した際にインスタンス化できるよう、両方のオブジェクトに対する参照が必要となります。

func _ready():
 randomize()
 new_game()

これは一時的なものです。後で新規ゲーム機能を呼び出すスタートボタンを備えたUIを実装する予定です。

func new_game():
 $Camera2D.position = $StartPosition.position
 player = Jumper.instantiate()
 player.position = $StartPosition.position
 add_child(player)
 player.connect("captured", self, "_on_Jumper_captured")
 spawn_circle($StartPosition.position)

new_game()関数は、プレイヤーと円を開始位置にスポーンさせ、カメラを設定することでゲームを初期化します。

限定サークル

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

最初の2部で基本ゲームプレイは完成しました。ここからは、サークルに様々なモードを追加していきます。

サークルモードについて

最終的には様々なモードを実装する予定ですが、まずは「制限モード」から始めてください。このモードでは、円は特定回数の周回後に消滅します。まず、残りの周回数を表示する Label ノードを追加してください。テキストフィールドに数値（例：1）を入力して、表示方法を確認してみてください。

[カスタムフォント] セクションで、新しい DynamicFont を追加し、アセットフォルダから フォントデータ を読み込み、 サイズ を 64 に設定します。ラベルの位置を中央配置するには、「レイアウト」メニューから「中央揃え」を選択します。

以下の新しい変数を Circle.gd ファイルの先頭に追加してください。

enum MODES {STATIC, LIMITED}

var mode = MODES.STATIC
var num_orbits = 3 # Number of orbits until the circle disappears
var current_orbits = 0 # Number of orbits the jumper has completed
var orbit_start = null # Where the orbits started

次に、モードを設定する方法が必要です。

func set_mode(_mode):
 mode = _mode
 match mode:
 MODES.STATIC:
 $Label.hide()
 MODES.LIMITED:
 current_orbits = num_orbits
 $Label.text = str(orbits_left)
 $Label.show()

現在はこれら2つのモードが定義されていますが、後でさらに追加される予定です。

メニュー

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

基本ゲームプレイが完成したので、次はUIの実装に取り掛かります。タイトル画面、設定画面、そしてゲームオーバー時用のメニュー画面が必要になります。

メニュー画面

3つの画面は共通のレイアウトと一部機能を共有するため、まずは全てがこのシーンを継承できる基本シーンから始めてください。新しいシーンでは、まず CanvasLayer を作成し、名前を BaseScreen とします。作成したこのシーンは「UI」フォルダに保存してください。

CanvasLayer (“BaseScreen”)
- MarginContainer
  - VBoxContainer
    - Label
    - HBoxContainer (“Buttons”)
- Tween

MarginContainer「マージンコンテナ」を使用すると、UI要素が画面端に近づきすぎるのを防止できます。4つの Custom Constants プロパティをすべて20に設定してください。

次に使用するのはメイン要素を整理するためのVBoxContainerです。このコンテナの［カスタム定数／間隔］設定を150に設定してください。

Labelノードは画面のタイトルを表示します。［テキスト］フィールドに「タイトル」と入力し、円と同じフォントリソースを読み込みます。

最後に、「ボタン」という名前の HBoxContainer を追加してください。このコンテナには、後でスクリーンに追加するボタンが格納されます。その間隔を 75 に設定します。次にノードを複製して、もう1列分のボタンを作成します。

スクリーンは画面外に表示開始されるので、ルートノードの オフセット値 を (500, 0) に設定してください。その後、シーンにスクリプトを追加してください。

extends CanvasLayer

@onready var tween = $Tween

func appear():
 tween.interpolate_property(self, "offset:x", 500, 0,
 0.5, Tween.TRANS_BACK, Tween.EASE_IN_OUT)
 tween.start()

func disappear():
 tween.interpolate_property(self, "offset:x", 0, 500,
 0.4, Tween.TRANS_BACK, Tween.EASE_IN_OUT)
 tween.start()

このスクリプトでは、画面の表示／非表示を切り替えるためのアニメーション設定します。

これで3つの継承されたシーンを作成できます。それぞれについて：ルートノードに名前を付け、ラベルテキストを変更し、「Buttons」コンテナにTextureButtonを追加してください。各ボタンのノーマルテクスチャには、アセットフォルダ内の画像を使いましょう。各ボタンにはその機能に応じた名前を付けてください（例：「再生」「設定」など）。そしてこれらをすべてグループ「buttons」に追加してください。

以下は、指定されたボタン名を使用した3つのシーンの外観例です。

スコアとHUD

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

最終部分では、ゲームの開始と設定するためのメニュー形式のUIを実装しました。また、スコアなどのゲーム内情報を表示するためのUIも必要です。

HUDシーン

HUDとして使用するCanvasLayerをルートとする新しいシーンを追加してください。以下の2つの子要素を持たせます。「ScoreBox」という名前のMarginContainerと、「メッセージ」という名前のLabelです。

Scene treeは以下のようになっている必要があります。

以下の設定を行ってください。

ScoreBox のレイアウトを「下部ワイド」に設定
すべてのカスタム定数値を20に設定
HBoxContainer 子要素を追加し、その下に2つの Labelノードを配置
2番目のラベルに「スコア」という名前を付け、 Text プロパティに 100 を入力
HBoxContainer の Alignment を「End」に設定

同じDynamicFontリソースを両方のラベルに追加しますが、最初のラベルでは「ユニークにする」を選択し、そのサイズを 32 に設定します。_Text_プロパティには「スコア」と入力してください。その Size Flags/Vertical で「塗りつぶし」を設定します。レイアウトは以下のようになります。

次に、Messageノードの処理に移ります。まずフォントを読み込み、 Text プロパティに「メッセージ」を設定します。こうすることで表示内容が確認できるようになります。さらに、フォントリソースで「ユニーク化」（Make Unique）を選択してください（この理由は次のセクションで説明します）。 Align と Valign は「中央」に設定し、 Clip Text は「オン」にしてください。レイアウトに関しては「ワイド・センタリング」を選択します。また、_Grow Direction/Vertical_を「両方」に設定します。

メッセージアニメーション

このゲーム中に表示されるメッセージです（レベルアップ時の通知やボーナス表示など）。アニメーション付きで表示させ、フェードアウト効果を加えたいと思います。シーンに AnimationPlayer を追加してください。

以下の2つのアニメーションを作成します。初期値を設定するものと、メッセージ表示をアニメーションさせるものです。まず最初のアニメーション「init」を追加し、「ページ読み込み時に自動再生」ボタンをクリックします。持続時間は0.1に設定してください。

時刻 0 に フォント/サイズ (64) のキーフレームを追加し、表示を「オフ」に設定するキーフレームも追加してください。

2番目のアニメーション「show_message」を追加してください。長さを 0.75 に、キーフレームの透明度設定を『オン』に設定してください。

サウンドとカラー設定

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

設定シングルトン

まず、スクリプトタブで［ファイル］→［新規スクリプト］を選択して新しいスクリプトを追加してください。スクリプト名は settings.gd とします。

このスクリプトでは、ゲームの設定パラメーターを配置します。

var enable_sound = true
var enable_music = true

var circles_per_level = 5

スクリプトを自動読み込みに登録するには、「プロジェクト設定」を開き、「自動読み込み」タブを選択してください。ロードしたいスクリプトのフォルダをクリックし、その後「追加」をクリックします。

サウンドの追加方法

サウンドを再生するために、複数のAudioStreamPlayerノードを異なるシーンに追加してください。

まず Main シーンに「Music」という名前を追加してください。Stream プロパティには res://assets/audio/Music_Light-Puzzles.ogg を使いましょう。
Screens シーンに新たに「Click(クリック)」という画面を追加してください。ボタンをタップした際にこの画面が表示されるようにします。アセットフォルダからmenu_click.wavを使用します。
Circleシーンに、名前を『Beep』としたオーディオプレイヤーを追加し、89.oggサウンドファイルを使用します。
最後にジャンパー部では、「ジャンプ」と「キャプチャー」の2種類の効果音が必要です。それぞれ70.oggと88.oggを使いましょう。

サウンドを再生するには、それぞれの play() メソッドを呼び出すだけです。Main.new_game() にこれを追加してください。

if settings.enable_music:
 $Music.play()

および Main._on_Jumper_died() 関数：

if settings.enable_music:
 $Music.stop()

Screens.gd ファイルの _on_button_pressed() 関数に以下を追加してください。

if settings.enable_sound:
 $Click.play()

円軌道において、限定された円（制限軌道）が1周完了した際にビープ音を再生したいです。これはcheck_orbits()関数内で実装します。

current_orbits -= 1
if settings.enable_sound:
 $Beep.play()

そして Jumper.gd に、次のようにサウンドを追加します:

動く円

Mon, 01 Jan 0001 00:00:00 +0000

バグ修正について

まず最初に取り組むべきは、メニューシステムの不具合修正です。「スタート」ボタンを押すと新しいゲームが開始されますが、画面が切り替わる途中で再びボタンを押せる状態になってしまいます。試しに「連打」してみてください。大変なことになりますよ！

この問題は、画面遷移中にボタンを無効化することで解決できます。すべてのボタンが「buttons」グループに属しているため、call_group() 関数を使えば簡単に実装できます。

以下に更新済みの BaseScreen.gd を示します。

extends CanvasLayer

@onready var tween = $Tween

func appear():
 get_tree().call_group("buttons", "set_disabled", false)
 tween.interpolate_property(self, "offset:x", 500, 0,
 0.5, Tween.TRANS_BACK, Tween.EASE_IN_OUT)
 tween.start()

func disappear():
 get_tree().call_group("buttons", "set_disabled", true)
 tween.interpolate_property(self, "offset:x", 0, 500,
 0.5, Tween.TRANS_BACK, Tween.EASE_IN_OUT)
 tween.start()

スコアとレベルについて

スコアが上がるにつれ、ゲームの難易度も適切に上昇させる必要があります。つまり、得点を獲得した際には一定の閾値（circles_per_level）に達したかどうかを確認する必要が生じます。また、ジャンプで円に乗る以外にも、得点を獲得する手段が存在するかもしれません。これを管理しやすくするため、メインスクリプト内でスコア変数にsetgetメソッドを定義します。

var score = 0 setget set_score
var level = 0

また、new_game()関数でそのメソッドを使用するよう更新してください。

func new_game():
 self.score = 0
 level = 1

同じように_on_Jumper_captured()内のスコア変更処理も修正し、HUD更新ロジックを新規メソッドset_score()に移動させます。

func _on_Jumper_captured(object):
 $Camera2D.position = object.position
 object.capture(player)
 call_deferred("spawn_circle")
 self.score += 1

func set_score(value):
 score = value
 $HUD.update_score(score)
 if score > 0 and score % settings.circles_per_level == 0:
 level += 1
 $HUD.show_message("Level %s" % str(level))

このゲームを試してみると、5ポイントに達した時点で画面に「レベル2」のメッセージが表示されるはずです。

移動する円

レベルアップに伴う難易度上昇の仕組みとして、サークルの動きを変化させる方法を採用します。既に静的タイプと限定的移動可能なタイプという複数のサークル種類が存在していますが、これらはいずれも動的な動きを可能にするべき機能を備えているため、新たなタイプを追加するわけではありません。むしろ、これは任意のサークルに付与できるプロパティとして実装されます。

シーンCircleを開き、Tweenノードを「MoveTween」という名前で追加してください。これをサークルスクリプトの先頭に追加してください。

モバイル広告

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

広告について

無料プレイ型モバイルゲームを開発する際、収益化手段としてアプリ内課金と広告の2つの選択肢があります。本記事では、モバイル広告プラットフォーム（AdMob）をゲームに統合する方法について解説します。

広告は必ずしも好まれるものではなく、その導入の有無は個々のゲーム開発者が判断すべき事項です。本チュートリアルではメリット・デメリットの検討には踏み込みません。ここでは「もし広告を実装したい」と考えている方向けに、その方法を丁寧に解説します。

AdMobの設定する

AdMobに移動してアカウントを作成してください。

アドモブマネージャーで新しいアプリを作成します - アプリは「サークルジャンプ」というタイトルです - そして「Android」プラットフォームを指定します（iOSについては後ほど説明します）。

「Circle Jump」アプリでは、「広告ユニット」を3種類作成が必要です。これらはゲーム内で表示可能な各種広告形式です。今回のチュートリアルでは、「バナー広告」と「インタースティシャル広告」が必要になります。各広告ユニットには「Ad Unit ID」という文字列が割り当てられます（これは後でゲーム内で使用します）。

Godotモジュールの使用について

Godot はデフォルトでは広告サービスをサポートしていないため、この機能を追加するにはエンジンモジュールまたはプラグインを使用が必要です。使用するモジュールはこちらから確認できます。 godot-admob。このページには、プラグインが提供するメソッドの一覧が記載されています。

カスタムエンジンモジュールを使用するには、エンジンの再コンパイルが必要です。モバイルプラットフォームの場合、デフォルトでダウンロードしたエクスポートテンプレートは本モジュールに対応した形でコンパイルされていないため、それらも再コンパイルが必要です。

エクスポートテンプレートのコンパイルは難しくありませんが、コンピュータ上にビルド環境を設定する必要があります。これには、Godotをビルドするために必要なプログラムやライブラリをダウンロードすることが含まれます。この概念に慣れておらず詳しく知りたい場合は、公式ドキュメントの [コンパイル] セクションを参照してください Compiling。

幸いなことに、カスタムエクスポートテンプレートの作成は既に完了しています。godot-custom-mobile-templates GitHubリポジトリに移動してください。「リリース」タブを開き、自分の使用しているGodotバージョンに対応したエクスポートテンプレートをダウンロードします。

警告

エクスポートテンプレートのバージョンは必ずGodotエディタのバージョンと一致している必要があります。カスタムビルド版のエディタを使用している場合は、同じコードブランチからテンプレートも構築が必要です。

テンプレートをコンピュータの任意の場所に解凍してください（Circle Jumpプロジェクトフォルダには入れないでください）。

エクスポートの設定

Godot エディターに戻って、エクスポート設定に変更を加える必要があります。まず、プロジェクト -> プロジェクト設定 を開き、「Android」セクションを見つけてください。モジュール プロパティには、コードで使用するモジュールをリストします。モジュール名は godot-admob ページに記載されています。“org/godotengine/godot/GodotAdMob”。使用するモジュールが複数ある場合は、カンマで区切ってください。

_プロジェクト設定 -> エクスポートメニューでは、ダウンロードしたカスタムテンプレートを使用するようにGodotに指示が必要です。これらは［カスタムパッケージ］セクションで設定します。フォルダアイコンをクリックして、テンプレートを解凍したディレクトリに移動してください。「デバッグ」と「リリース」両方のテンプレートを必ず追加してください。

コード例

現在ゲームを実行すると（Android端末上で）、指定したモジュールが読み込まれるようになります。これはエンジンのシングルトン経由でアクセスできます。settings.gdファイルを開いて、以下の内容を追加してください。

var admob = null
var real_ads = false
var banner_top = false
# Fill these from your AdMob account:
var ad_banner_id = ""
var ad_interstitial_id = ""
var enable_ads = true

これはモジュール用の設定変数です。real_ads を false に設定すると「テスト広告」モードになります。ゲームリリース準備が整うまでは、これを true に変更しないでください。banner_top は、バナー広告を画面上部に表示するか下部に表示するかを切り替えるトグルです。

設定を保存しよう

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

設定の保存について

ゲームに追加した3つの切り替え可能プロパティは正常に動作していますが、アプリケーションを終了すると設定が保存されません。次回起動時にも同じ設定値が保持されるよう、これらを設定が必要です。

まず、設定ファイル res://settings.gd で定義を行います。

var settings_file = "user://settings.save"

次に、保存したい3つのゲーム設定について、保存／読み込み機能を追加していきます。

func save_settings():
 var f = File.new()
 f.open(settings_file, File.WRITE)
 f.store_var(enable_sound)
 f.store_var(enable_music)
 f.store_var(enable_ads)
 f.close()

func load_settings():
 var f = File.new()
 if f.file_exists(settings_file):
 f.open(settings_file, File.READ)
 enable_sound = f.get_var()
 enable_music = f.get_var()
 self.enable_ads = f.get_var()
 f.close()

load_settings() を呼び出すタイミングを次のように変更してください。

set_enable_ads() の終了時に _ready() 内で呼び出す
save_settings() の終了時にも同じく _ready() 内で呼び出すさらに、Screens.gd ファイルでは、サウンド/音楽設定が変更された際に状態を保持する必要があるため、match 文内の各ケース部分に settings.save_settings() を追加が必要です。

別の課題として、ゲーム起動時に設定メニューのアイコンが保存ファイルから読み込んだ状態を反映しない問題があります。これはregister_buttons()関数で対処できます。すでにこの関数は全てのボタンをループ処理してシグナル接続を行っています。