「ヴァンサバ風」の超チュートリアル Vol.1

2023年10月3日火曜日

GDevelop Tutorial

X f B! P L

はじめに

今回はトップダウン(見下ろし型)のローグライト風ゲームの制作過程をご紹介します。
本記事はGDevelopの基本的な機能の使用方法をある程度ご存知の方を対象としています。

●GDevelopが初めての方は、下記の記事からご覧ください。

知識ゼロからの超チュートリアル Vol.1

知識ゼロからの超チュートリアル Vol.1

はじめに こちらはインストールしたてほやほやの右も左もわからない方向けの記事になります。 ゲーム制作の基本を押さえつつも作業工数をできる限り抑えてゲームを1本完成させましょう。

知識ゼロからの超チュートリアル Vol.2

知識ゼロからの超チュートリアル Vol.2

はじめに 前回、Vol.1では操作可能なプレイヤーキャラクターと、足場となるプラットフォームを作成しました。 今回は、ゲーム性を加えるためのゴール、敵キャラクター、ゲームクリア、ゲーム失敗の要素を追加していきます。

知識ゼロからの超チュートリアル Vol.3

知識ゼロからの超チュートリアル Vol.3

はじめに 今回も引き続き、これまで制作してきたプラットフォーマーアクションに手を加えていきます。 チュートリアルで使用したプロジェクトファイルを記事の最後にご用意しております。 イベントの中身を確認してテストプレイも可能ですので、ぜひダウンロードし...

●ゲーム制作自体が初めての方は下記の記事からご覧ください。

必ず押さえておきたい基本中の基本

必ず押さえておきたい基本中の基本

  はじめに GDevelopをご使用いただく上で避けては通れない、ゲーム開発の前提となる基本中の基本を本記事で予め押さえていきましょう。 こちらの基本は他のゲームエンジンでも共通する部分が多いので覚えておいて損はありません😉 なお、当記...

ステップ1: Vampire Survivorsとは?

「Vampire Survivors」はSteamでヒット後、数多くのインスパイアゲームがモバイルでリリースされました。
中には、インスパイアを超えてほぼクローンのようなものまで多く出回りました。

Steam:Vampire Survivors

Steam:Vampire Survivors

何千もの恐ろしい夜の化け物を退治して、夜明けまで生き延びよう! 『Vampire Survivors』は、ローグライト要素を持つゴシックホラーカジュアルゲーム。プレイヤーの選択次第で、迫りくる数百のモンスターを素早く撃破できます。

過去にArchero(日本名はアーチャー伝説)がGoogle Play ベスト オブ 2019のインディーゲーム部門賞を獲得後に、大量のArcheroインスパイアゲームがストアに公開されました。

面白いことに、Archeroの開発元であるHabbyが、後にVampire Survivorsのインスパイアゲームである「Survivor.io(日本名はダダサバイバー)」をリリースしています。

それくらい多くの人を惹きつけるヴァンサバですが、サバイバー系ゲームの仕様はとてもシンプルです。

  • トップダウン(見下ろし型)
  • 自動攻撃
  • ランダムマップ生成
  • レベルアップによるプレイヤー強化
  • チェスト(ボックス)から武器(またはスキル)を選択
  • 武器(またはスキル)をグレードアップする
  • 設定された時間を最後まで生き残る
これらの要素がヴァンサバインスパイアゲームに共通しています。

本家はローグライトを謳っていますが、ローグライクに該当する部分はランダムマップ生成と死亡時にレベルや獲得武器など強化要素をロストする部分くらいでしょうか。
ローグライクとローグライトの違いはなんなのか?Steam上でValveが自ら説明 - AUTOMATON

ローグライクとローグライトの違いはなんなのか?Steam上でValveが自ら説明 - AUTOMATON

Valveは4月29日、ローグライクゲームやローグライトゲームについて説明をおこなった。聞き馴染みのあるジャンルであるが、どのような違いがあるのか。

ランダムマップといえど、入り組んだ迷路を生成するわけではなく、無限スクロールする平面マップなのでビジュアル面での効果はあれどゲーム性にはさほど影響しません。
なので、そこはあまり深く考えなくても問題ないでしょう。
ですので、今回はチュートリアル内でランダムマップの実装を予定していません。
(ご要望が多ければ検討します)

ヴァンサバの最大の魅力は、多彩な攻撃パターンがある武器を、限られた装備枠にどう選択するかを考える「ビルド」の要素でしょう。

アクション面ではそこまで高いプレイヤースキルを求められませんが、ビルドを誤ると大量に押し寄せる敵を捌けなくなってすぐに手詰まりになってしまいます。

ヴァンサバはカジュアルゲームの部類に当てはまりますが、ビルドの奥深さが多くのプレイヤーを惹きつけています。

つぎのステップで作業に取り掛かりますが、その前にひとつ…。

前回、知識ゼロからの超チュートリアルでは、記事を一段落書いたあとで、実際に記事通りに制作していました。
ただ、それではかなり手間と時間がかかるので、先にゲームのほうからある程度作り、その後に記事を書きます。
なので、前回と違ってまだ解説していない部分もスクショに写りますがご容赦ください。

ステップ2: プレイヤー操作

今回はモバイル向けポートレイト(縦向き)のゲームとして制作を進めていきます。
カジュアルゲームは手軽にプレイできるように「ポートレイトの片手操作」が最も向いていると考えます。

まず最初はプレイヤーキャラクターから作成していきます。

スプライトオブジェクトを新規追加します。

つぎに、プレイヤーを操作するMultiTouch Joystickを追加します。

次に、地面を表現するタイルスプライトを追加します。

プレイヤー、ジョイスティック、地面のタイルをシーンに配置します。
プレイヤーが地面より手前にくるようにZオーダーを調整します。

今度はイベントエディタを開いて最初のイベントを追加していきます。

まず、新規イベントにシーンが始まったの条件を追加します。
このイベントのアクションはふたつ。

1つ目は
ジョイスティックのX座標に「ウィンドウの幅/2」を、Y座標に「ウィンドウの高さの-200」をそれぞれ代入します。
これはジョイスティックの位置がプレイ端末のアスペクト比によってレイアウトが崩れるを防止するため、ウィンドウサイズを基準にして座標を指定しています。

2つ目は
プレイヤーのオブジェクト変数"MoveSpeed"に「150」を代入します。
これは、後述するプレイヤー操作に関するイベントでプレイヤーの移動速度を指定するための値です。

つぎは、プレイヤーをジョイスティックで操作するためのイベントを追加します。
条件は「ジョイスティック」の「Stick pressed」を選択します。

アクションは「プレイヤー」の「オブジェクトを移動する(角度)」
値はそれぞれ下記のとおり数式エディタから入力します。

角度の値は「Stick Angle(コントローラーID,コントローラーの種類)」
SpriteMultitouchJoystick::StickAngle(1, "Primary")

速度の値は「Stick Force(コントローラーID,コントローラーの種類)*プレイヤーの変数"MoveSpeed"」
SpriteMultitouchJoystick::StickForce(1, "Primary")*Player.Variable(MoveSpeed)

これはどういったイベントかというと
「ジョイスティックが押されている間、プレイヤーをジョイスティックの角度に、ジョイスティックの傾き具合×オブジェクト変数"MoveSpeed"の速度で移動させる」
といったものです。

つぎに、タッチのX座標の位置によってプレイヤーを水平に反転させます。

タッチの座標の取得方法については下記記事をご覧ください。
TIPS: マルチタッチを理解する

TIPS: マルチタッチを理解する

  マルチタッチとは スマホなどのタッチパネルを一本指でタッチする場合はシングルタッチ、それ以上のタッチで操作する場合はマルチタッチとなります。 スマホゲームでは多くのゲームがマルチタッチを採用していますので、GDevelopのマルチタッチの仕様をしっかりと理解しておきましょう。

では実際にプレビューで確認してみましょう。

ステップ3: 無限スクロール

今のままではプレイヤーが画面外に出ると見えなくなるので、カメラが常にプレイヤーを追従するようにします。

このゲームに必須の要素のひとつとして「無限スクロール」があります。
1方向に移動し続けても終わりなく延々と進み続けるというものです。
一見すると果てしなく広がるようなマップですが、実際には無限回廊のように同じ場所を何度も回っています。

これを再現するには2つの要素が不可欠です。
まず1つ目は、ある程度風景が変わることです。
ずっと同じ風景だとどれくらい移動しているのかわかりにくいので、地面のパターンをいくつか用意します。

2つ目は、座標を戻すための目に見えない境界線の設定です。
この境界線を超えると逆側に座標が増減します。
増減する座標を判定するために、上下左右にそれぞれ目に見えない境界線を設定します。

まず、地面を表現するタイルスプライトのパターンを増やします。
最低でも4パターンが必要ですので、最初の1パターン以外にグラフィックの異なる3パターンを追加してください。

配置にはすこしコツが必要です。
タイルを4×4のパターンに分けます。
ひとつのパターンにつき、サイズは1024×1024になります。

最初にパターン1のタイルをX座標:-2048、Y座標:-2048に設置します。
そこを起点にパターンを1、2、1、2といった感じで繰り返し、その下の段は3、4、3、4とパターンを繰り返します。

タイルの配置が完了したらイベントエディタを開いて無限スクロールを実装するためのイベントを追加していきます。

無限スクロールに必要なイベントは4つですが、同じようなイベントなのでひとつを作成したらコピペで編集します。

まず、1つ目。
プレイヤーのX座標が「-1024」以下なら、プレイヤーのX座標に「2048」を加算するイベントを追加しします。

これをコピぺして以下に書き換えます。

プレイヤーのX座標が「1024」以上なら、プレイヤーのX座標に「2048」を減算するイベントを追加。

同様にY座標も増減させます。

それでは、プレビューで確認してみましょう。

ステップ4: 敵キャラクターの追加

スプライトオブジェクトを新規追加して敵キャラクターを用意します。

シーンに配置したらイベントエディターでプレイヤーを追わせるイベントを追加します。

敵キャラクターを無条件でプレイヤーの座標へ50の速度で移動させます。

今の状態だと、プレイヤーが境界線でスクロールした途端に敵キャラクターが消えます。
実際には敵キャラクターの前から消えたのはプレイヤー側のほうですが、プレイヤーの座標変更時に敵キャラクターも同様に座標変更をします。

つぎに、スプライトオブジェクトで敵キャラクターをスポーンさせるスポナーを4種類追加して、シーンに設置します。

プレイヤーの座標を基準に、スポナーの座標を常に変更するイベントを追加します。
それぞれ、プレイヤーの左上、左下、右上、右下で画面外まで出るように座標を変更します。

つぎに、敵キャラクターのスポーンに使うシーンタイマーをシーン開始時にスタートさせます。
そのタイマーが7秒ごとに、4つのスポナーから敵キャラクターをスポーンさせ、スケールを4に変更し、タイマーをリセットします。


敵キャラを生成する位置を、乱数を使ってランダムに変更すると、ゲーム性に深みが生まれます。


それではリプレイで確認してみましょう。

ステップ5: 基本的な攻撃

常に追ってくる敵キャラを攻撃によって撃破するイベントを追加します。
攻撃方法はさまざまなバリエーションを用意する必要がありますが、最初はもっともオーソドックスな単発攻撃から作成します。

この武器はVampire Survivorsでいうところの「マジックワンド」、ダダサバイバーでいうところの「クナイ」に近い攻撃手段で、もっとも近い敵を自動的に攻撃します。

まず、武器となるスプライトオブジェクトを追加します。
この武器のビヘイビアには「画面外で破棄」を追加します。
以後、本記事ではこの武器をクナイと呼びます。

続いてプレイヤーにFire Bulletのビヘイビアを追加します。
ビヘイビアの設定が終わったらイベントエディタに移って、クナイによる攻撃をイベントで実装します。

新規イベントを追加し、条件を「プレイヤーの座標から最も近い敵キャラを選択する」という設定にします。

アクションでは、Fire Bulletを使ってクナイを敵キャラに向かって放ちます。
直後にクナイのスケールを変更して角度を調整します。

角度を45度ほど加算しているのは、アセットで使用した画像が斜め45度に傾いているので、発射時に真横になるように角度を調整しています。
使用する画像が最初から右を向いている場合は角度の調整は必要ありません。
スケールの変更も使用する画像が拡大する必要がないサイズであれば不要です。

次は、クナイが敵に命中したときのイベントを追加します。
後に敵のヘルスをビヘイビアで設定しますが、今回は1撃で倒します。

新規イベントに「敵はクナイと衝突している」という条件を追加します。
アクションで、エネミーとクナイを削除します。


クナイ衝突時にパーティクルエミッターなどでエフェクトを発生させるとビジュアルが映えますが、それも次回に持ち越します。

おわりに

今回はここまでです。
ステップ5までの過程を収めたプロジェクトファイルを配布しますので、ダウンロードして中身をご確認ください。

次回以降は、プレイヤーループ時にクナイもループさせる、プレイヤーと敵のヘルスの実装、攻撃ヒット時のエフェクト追加、経験値とレベルアップの実装、武器パターンの追加、敵パターンの追加、タイマーによるウェーブ変更などを予定しています。

このつづきをお読みになられたい場合は、下にございます5段階評価で「高評価」をお願いします🙇

その他、ご要望やご意見などがございましたらコメント欄からおねがいします。

最後までお読み頂きありがとうございました。


最後までお読みいただきありがとうございました😆
もしよろしければ下記のボタンから応援よろしくお願いします🙇



こちらの記事はいかがでしたか?
ぜひご評価をおねがいします🙏

プロフィール


My name is Cratier.
I'm an indie game developer.


Read more...

このブログを検索

Translate

UPDATE

最新コメント

人気の投稿

アーカイブ

リンク元ランキング

カテゴリー

アンケート



Q.クレイティアのGD覚書でお気に入りのコンテンツはどれですか?

チュートリアル
TIPS
RTA Develop
雑記
That's談
その他


Q.あなたのGDvelop使用歴はどれくらいですか?

1ヶ月未満
半年未満
1年未満
1年以上
2年以上
3年以上
4年以上
5年以上

オープンチャット

LINEアカウント

ご連絡フォーム、またはLINEから お問い合わせ、ご要望、ご指摘など、お気軽にご連絡くださいませ。

ご連絡

名前

メール *

メッセージ *

💗雑談CHAT💗
お気軽にお話しください🐹
同時接続人数:

もしよろしければ下記のボタンから応援よろしくお願いします🙇




QooQ