本記事は、VR法人HIKKYのorganization下のQiita/Zenn両方に投稿しております。

本記事に掲載されている情報はVketCloudSDK12.3.4のものです。
バージョンにより見た目や表示情報が変化する場合がございます。

VketCloudにおける2Dアクションゲームの作り方について一例を紹介したいと思います。

現在のVketCloud SDKでは3Dアバターの移動は移動とジャンプしかできず任意のアクションをさせることが難しいです。
そこで思いついたのが2Dゲームにして左右移動＋ジャンプのみにすれば下入力をアクションボタンとして使えるのでは？というところからスタートしました。

本ゲームでは[A][D]キーを左右移動、[W]キーをジャンプ、[S]キーを攻撃に割り当てています。

本作はすべてHeliScriptで開発しています。
本記事を参考にするにあたりHeliScriptおよび基本的なゲームプログラミングの知識が必要です。

キー入力判定方法

2Dアクションゲームを作るにあたってのポイントはどうやってキー入力判定を取得するかです。
現在のSDK（12.3.4）ではキー入力を直接取得することはできません。
そこで思いついたのは『3Dアバターの移動量を元にキー入力があったと判定する』ことです。

上記画像はUnityのシーンビューですが、2Dマップの下に広大な3Dアバターが移動する床があります。
2Dゲームでプレイヤーを操作している裏で3Dアバターはこのマップを延々と移動し続けているわけです。

具体的なキー入力の判定方法についてですが、

現在のX座標 > 前のフレームのX座標

というような条件となっており、条件が成立していれば右に入力があった、と判定しています。

キー入力さえ取得できてしまえばあとは自由です。
キー入力判定を元にプレイヤーのHEOオブジェクトを移動させる、という処理で2Dプレイヤーを移動させています。

自由の代償にプレイヤーの挙動はすべて自前で実装する必要があるので地味に大変ですが。

初期の想定ではWASDのほかにスペースキーも判定に使用したかったのですが、カメラ内に3Dアバターが映っていないとき3Dアバターはジャンプしない、というエンジン側の仕様によりスペースキーの入力判定が取得できず断念しました。

2Dプレイヤーの当たり判定

特に苦労するのが2Dプレイヤーのマップとの当たり判定でしょうか。
3Dアバターの移動であればVketCloud側がすべて計算してくれます。
しかし自由を求めた代償によりその機能を使うことはできずすべて自分で実装するしかありません。

本ゲームではすべての当たり判定はシンプルに矩形によって行っています。
進んだ先に矩形あれば進まない、というごくごくシンプルなものです。
具体的なコードと考え方については下記の記事を参照するとよいかと思います。

地形との当たり判定だけではなく、プレイヤーと敵、プレイヤーの攻撃と敵などすべての当たり判定を同様に行っています。

2Dマップ

2Dマップは図のようにUnity上ですべて配置しています。
敵の配置なども視覚的にわかりやすようにざっと並べています。
赤枠は当たり判定用の自作コライダです。

このマップを2Dプレイヤーの移動に合わせてカメラも移動させて画面スクロールしているように見せています。

2Dキャラのアニメーション

2Dキャラのアニメーションはスプライトシートを作り、一定時間ごとにUVのオフセット位置をずらすことでスプライトアニメーションをさせています。※GIFアニメと同じです

１モーションごとにHEOオブジェクトを作りSetShowで切り替えを行っています。

まとめ

以上が2Dアクションゲームの作り方の一例となります。

2Dゲームはアクションボタンを設けることができるため非常に自由度が高いものが作れるようになります。
その反面、自作で補わなければならないことも多いので結構大変です。

しかし可能性は無限大なのでぜひ参考に2Dゲームを作ってみてもらえたらうれしいです。

Vket Cloudについて

ブラウザからアクセスできる“Webメタバース”を作成するサービスです。 Vket Cloudで制作された空間は、アプリレスでWebブラウザから簡単にアクセスできるため、プラットフォームの制限の中で限られたユーザーにだけでなく、インターネットに存在するすべてのユーザーに対してオープンなコンテンツ・サービスを届けることが可能です。