スマホ用ブラウザゲームで使えるバーチャルパッドの作り方

2021年1月17日

ブラウザで遊べるゲームを作りたいけれどスマホでバーチャルパッドぐりぐりしながらボタン連打するようなゲームって作れるの？ってか見たことないけどあるの？

って思ってる方けっこういるんじゃないですか？(いや、たぶんあんまりいないだろうな。。)

そんなわけで私が苦労して編み出したスマホブラウザゲーム用バーチャルパッドの作り方を解説したいと思います。

私の作ったコントローラーはこんな感じになってます。スマホの向きが横でも縦でも対応できるようになってます。縦ならゲームボーイ、横ならDSみたいな感じで遊べます。ただ、ここまでやろうと思うとけっこう面倒ですけど(^^;)ちなみにゲームはこちらで遊べます　▷▷　走れ！ギャボリン！改。

で、たぶんjavascriptでゲーム作るならpixi.js以外でもなんでもいけると思います。

ゲームで使うcanvasを使わない

私はもともとpixi.jsでどうにか作ろうとしてたんですがそれが上手くいきませんでした。一応マルチタッチのやり方を調べてandroidではできたんですがそのやり方がiPhoneでは動かず(マルチタッチ用のプロパティがiPhoneには無いっぽい)、pixi.jsで作ることを断念しました。

ちなみにpixi.jsでのマルチタッチの記事はこちら　▷▷　pixi.jsでマルチタッチ時のそれぞれの位置の取得について

で、どうしようかと考えてcanvas外で別に作る方法をとることにしました(RPGアツマールみたいなやつ)。この方法はHTMLのDOM要素でコントローラーを作成してjavascriptでタッチイベントを使って操作します。

div要素でコントローラーを作る

コントローラーの下地を作ってそこにボタンを追加する感じでOKです。DIV要素で背景色と境界線をつければボタンぽくなります。

ゲームボーイ風につくるなら幅はcanvasの幅(スタイルの方ね)に合わせます。スマホで全画面表示なら画面の幅サイズでOKです。

あと、スマホ以外では表示しないようにしておくと便利です。

javasciprtで作る例としてはこんな感じです。これはコントローラーの下地です。あ、htmlで先に要素作ってCSSで書いてもいいと思います。

const board = document.createElement('div');
board.style.position = "relative";
board.style.margin = "0 auto";
board.style.zIndex = "100";
board.style.pointerEvents = "none";
document.body.appendChild(board);

pointerEvents = “none”はタッチイベントを発生させなくしてます。下地は触れても何も起こらない存在だし、ゲーム画面の上に表示するようにした場合はこいつが邪魔して下のゲーム画面にタッチできなくなってしまうので無効化しておきます。

各ボタンはこんな感じ。

const btn = document.createElement('div');
btn.style.position = "absolute";
btn.style.pointerEvents = "auto";
btn.style.width = "100px"; 
btn.style.height = "100px";
btn.style.border = "solid 2px white";
btn.style.backgroundColor = "rgba(50, 50, 50, 0.3)";
board.appendChild(btn);
btn.addEventListener("touchstart", (e) => {
  e.preventDefault();
  //タッチ時の処理を書く
});

ボタンの大きさは好きなように変えてください。配置位置はabsoluteになってるのでtop・bottom・left・rightで好きな位置におけます。

細かいことはCSSの知識が必要になってくるので面倒だけど調べながらやってください。私のように縦横対応なんてしたらさらにクソ面倒になります(^^;)

タッチイベントではpreventDefault()を入れておくとスクロールとかの余計な処理を止めることができます。