RPGの超チュートリアル Vol.1

2024年3月4日月曜日

GDevelop Tutorial

X f B! P L

はじめに

今回のシリーズは、RPGのなかでもトップダウンタイプ(見下ろし型)のチュートリアルとなります。

その第一弾となる本記事ではプレイヤーとパーティーの移動に関するイベントを解説していきます。

1.オブジェクトを用意する

まず、必要なオブジェクトを予め用意します。
スプライトオブジェクトを新規追加してプレイヤーキャラクターにします。
このプレイヤーキャラクターにはアセットを使います。

アセットストアを開き「Tiny Characters」を選択します。

この中から好きなキャラクターを選んで「Player1」と名付けます。
Player1にはTweenのビヘイビアを追加します。

おなじように、Player2、Player3、Player4を作成します。
Player2~4には経路探索のビヘイビアを追加します。
経路探索ビヘイビアのパラメーターは下記のように変更してください。
  • 加速度:100000
  • 最高速度:300
  • 仮想セルの幅:64
  • 仮想セルの高さ:64
  • 仮想グリッドのXオフセット:32
  • 仮想グリッドのYオフセット:32
  • オブジェクトを回転する:チェックを外す
  • 斜め移動を許可する:チェックを外す

つぎに、地面となるオブジェクトを「タイルスプライト」で追加し、名前を「Tile1」にします。
サイズは64×64にする必要があります。

おなじようにTile2、Tile3を追加します。
Tile2とTile3はプレイヤーが通行できない地形として使用します。
オブジェクトグループ「Wall」を作成して、Tile2とTile3を追加します。
今のところ、Tileにビヘイビアは必要ありません。

つぎは「Point」という名前のスプライトオブジェクトを追加します。
これは、Player1のあとをワンテンポ遅れて移動するパーティーの動きを実装するために必要になります。
Playerの座標を変数に格納し、それを呼び出して目的地の座標にしても構わないのですが、Pointを追うほうが視覚的に動きを理解できやすそうなのでこの方法にしました。

「Point」は「Point1」「Point2」「Point3」の3つを用意します。
Pointにビヘイビアは必要ありません。

最後は「Collision」という名前のスプライトオブジェクトを追加します。
これは、プレイヤーが障害物に接触しているときに、それ以上進めないようにするための衝突判定として使用します。
「Collision」は「CollisionTop」「CollisionBottom」「CollisionRight」「CollisionLeft」の4つを用意します。

今回、プレイヤーの移動にフォースやトップダウンビヘイビアは使用せず、Tweenによる座標変更を使うので、上下左右それぞれの衝突判定が必要になります。
それに使用するオブジェクト「Collision」は配布のプロジェクトファイルに含まれています。
このオブジェクトにビヘイビアは必要ありません。

スプライトオブジェクトのポイントはすべて中央にしておいてください。

2.オブジェクトをシーンに配置する

用意したオブジェクトをシーンに配置し、サイズやZオーダーを変更します。

まず、Playerをシーンに配置します。
Player1~4のサイズを64×68に変更します。

Tile1を配置して、画面サイズ全体に広げます。
ZオーダーはPlayerより下にします。

障害物となるTile2とTile3を適当に配置します。
Collisionも適当に配置します。

3.Collisionの設定

オブジェクトを配置しおわったらイベントを作成していきます。

まず、Collisionを非表示にし、座標をPlayer1を基準に変更します。
非表示にするイベントの条件は「シーンが始まった」
座標変更のイベントの条件は「無条件」です。


このイベントによって、Collisionは非表示になり、常にプレイヤーの上下左右に固定されます。

4.プレイヤーの移動

プレイヤーは、Upキーで上に移動、Downキーで下に移動、Leftキーで左に移動、Rightキーで右に移動します。

この時、移動にはTweenを使用します。
まず「Upキーを押している」という条件のを追加します。

サブイベントで「CollisionTopはWallに衝突している」の反転した条件を追加します。
これはつまり「CollisionTopはWallに衝突していない」という条件で、行き止まりでそれ以上移動させないようにするために必要です。

ワンポイントメモ

フォースによる移動やトップダウンビヘイビアの移動であれば「オブジェクトを分離する」を使用して「Player1をWallから遠ざける」というアクションを追加すれば障害物の突き抜けは防げます。
しかし、Tweenによる座標変更では突き抜けてしまうため、Collisionが障害物に触れているときはそもそもTweenを実行させないようにします。

このイベントに「Downキーを押している」「Leftキーを押している」「Rightキーを押している」の反転した条件を追加します。
これは、斜め移動を禁止するための条件です。

アクションを追加していきます。
まず、Player1のアニメーションを「Walking Up」に変更します。
つぎに、Player1のY座標をTweenさせます。
  • Tween識別子:"UpMove"
  • 目的Y座標:Player1.Y() - 64
  • イージング:liner
  • 期間:0.25

このアクションで、Upキーを押すとPlayer1は上を向いたアニメーションに変わり、64px上に移動します。

同様に「Downキーを押している」「Leftキーを押している」「Rightキーを押している」という条件で下、左、右への移動も追加します。

ここまでのイベントの上に親イベントを追加します。
親イベントの条件に以下を追加します。

 Player1 "UpMove" Tween は再生中 ではない(条件反転) 
 Player1 "DownMove" Tween は再生中 ではない(条件反転) 
 Player1 "LeftMove" Tween は再生中 ではない(条件反転) 
 Player1 "RightMove" Tween は再生中 ではない(条件反転) 

この親イベントによって、すべてのTweenの再生が終了するまでキーを押してもサブイベントは開始しなくなります。

5.パーティーの移動

こんどは、Playerの後ろをついていくパーティーの動作を作っていきます。
パーティーとなるオブジェクトには経路探索のビヘイビアを設定し、Player1の移動時に経路探索の目的となるオブジェクト「Point」を生成します。

①Player1のX座標とY座標にPoint1、Player2のX座標とY座標にPoint2、Player3のX座標とY座標にPoint3を生成し、それぞれを非表示にします。
表示したままなら、どういった原理なのかを確認しやすいです。

②Player2の目的地をPoint1、Player3の目的地をPoint2、Player4の目的地をPoint3に設定します。

③Player2が目的地に到達したらPoint1を破棄、Player3が目的地に到達したらPoint2を破棄、Player4が目的地に到達したらPoint3を破棄します。

6.パーティーのアニメーション変更

パーティーのアニメーションは、経路探索ビヘイビアの移動角度の値を元に変更します。

0ならWalking_Right
90ならWalking_Down
180ならWalking_Left
270ならWalking_Up


移動に関するイベントは以上となります。

7.オンラインデモ

こちらからオンラインデモをプレイできます。

8.プロジェクトファイル

ここまでのプロジェクトファイルを配布します。

おわりに

Vol.2以降で戦闘、経験値の獲得、レベルアップなどを解説していきます。
このつづきをお読みになられたい場合は、下にございます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