スマホ向けブラウザゲームでバーチャルパッドをぐりぐりして遊びべるゲームを作りたい！！！
という激レアな人向けにJavaScriptのスマホブラウザゲーム用バーチャルパッドのサンプルを公開します。
ゲーム部分はPixiJSで作っていますがバーチャルパッドの部分はHTMLとJavaScriptで作っているので他のライブラリでもほぼそのまま使えると思います。
サンプルのバーチャルパッドはスマホでしか表示されません。スマホで確認するか、デベロッパーツールでスマホ表示に切り替えて確認してください。
サンプルのバーチャルパッドは縦向きだとこんな感じで画面下に表示します。
画面を横に向けると左右にボタンが表示されます。
あと、このサンプルは一つ前のこちらの記事で紹介したサンプルに追加する形になっています。
HTMLタグでバーチャルパッドを作る
今回紹介するバーチャルパッドはHTMLで作ります。
ゲームはJavaScriptですがバーチャルパッドはHTMLタグです。
理由としてはJavaScriptではマルチタッチの処理が面倒だからです。
さらに私が使っているPixiJSではiPhoneがマルチタッチに対応してませんでした。
HTMLタグではマルチタッチについて特に何か記述しなくても対応しています。
調べてはいませんがPICO-8やゲームアツマールも同じような作り方だと思います。
cssファイルを作る
HTMLで作るのでデザインについてはcssを使います。
JavaScriptで変更する部分もありますが基本的な部分はcssファイル(style.css)に記述しておいてJavaScriptでidやクラス名を当てて適用させます。
cssがあまり良くわからない人もいるかもしれませんが慣れてください。
私も勉強したというよりはいじくりまわしながら調べて慣れただけって感じです。
バーチャルパッドのクラスを作る
サンプルではバーチャルパッド用のクラスVpadを作ります。
リサイズに対応する
Vpadクラスのコンストラクタには
window.addEventListener('resize', ()=>{this.resizePad();});
という部分があります。
これは画面のサイズが変わったとき、特にスマホで画面を縦にしたり横にしたりした場合に起こる「resize」というイベントです。
バーチャルパッドが縦画面と横画面でデザインが違うのでこのイベント時に作り変えるようになっています。
resizePadメソッド
ここでバーチャルパッドを作っています。
すでに作っていた場合は一度削除して作り直しています。
大雑把に説明するとHTMLタグのDIVを作成してそれにCSSを適用させてボタンを作っています。
ややこしいですがサンプルプログラムにコメントをたくさん入れているのでなんとなくわかると思います。
ActBtnクラス
Aボタン、Bボタン、スタートボタンはActBtnクラスというので作っています。
これはシンプルなHTMLのDIVタグです。
タッチイベントでキー入力の時に作ったinputManagerのキーのフラグに真偽値を入れます。
後はinputManagerで処理されます。
DirKeyクラスについて
Dirkeyクラスが十字キーのクラスです。
これもHTMLのDIVタグで作っていますが、見えている十字キーは張りぼてで、その下にあるDIVタグでタッチイベントを処理しています。
これもActBtnと同じようにイベントでフラグだけ操作して処理はinputManagerでしています。
十字キーの方向の判断について
十字キーの入力方向を判断するのはちょっとややこしいです。
まず、入力方向をグラフで考えます。
タッチした位置の座標が原点から見てどこにあるかで方向が出せます。
この時X、Yの絶対値で考えると上の図のようになります。
これでYの方が大きければ上、Xの方が大きければ右が入力されたと判断します(上の図で考えた場合)。
後は各座標の+-で上下左右を判断します。
これをもう一段細かく条件(Y < 2Xなど)を追加すると8方向にできます。
ただ、十字キーの入力で原点を固定していると操作しているときに指の位置がズレてうまく操作できないことが多いです。
そのためタッチした位置を原点としてそこから指を動かした長さで方向を出しています。
そして一定以上指を動かした場合は原点もズラすようにしています。
ただし、これには欠点があって最初に触れた場所が原点となるのでそこから指を動かさなければ方向を入力できないため「ちょんちょん」って感じの操作ができません。
そういう操作の場合は原点を固定しておくやり方が向いてます。
この辺はゲームによって変えると良いと思います。
スマホ時のみバーチャルパッドを表示
バーチャルパッドはPCで遊ぶ際にはまったく必要ないので、ゲームが何で表示されているか判断して必要なら表示するようにします。
InputManager(main.jsの195行目くらい)に条件が書かれています。
if (navigator.userAgent.match(/iPhone|iPad|Android/)) {
this.vpad = new Vpad(this.input);
}
正直、この辺は知識が無い＆Apple製品持ってないのでうまくいっているかどうかわかりません。
問題あったら教えてください(^^;)
まとめ
前回の記事で作ったキー入力のプログラムに追加する形なので処理自体は少なくできました。
ただ、CSSでデザインしたり、十字キーの入力をうまく作るのはなかなか難しいです。
cssではbackground-imageとか使うとボタンの背景画像とかも指定できるので自分好みにバリバリに作りたい人はやってみてください。