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

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

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

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

私の作ったコントローラーはこんな感じになってます。スマホの向きが横でも縦でも対応できるようになってます。縦ならゲームボーイ、横なら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()を入れておくとスクロールとかの余計な処理を止めることができます。

ブラウザのマルチタッチについて

基本的に要素が別であればマルチタッチを気にしなくても勝手に反応してくれます。Aボタン、Bボタンとあればそれぞれのタッチイベントを書くだけで勝手にマルチタッチになってくれます。問題は方向入力です。方向入力ではタッチの座標を取る必要があるのでちょっと扱いが変わってきます。

で、座標を取得できるタッチイベントのリストには以下の3種類があるようです。

  • touches: 現在画面上にあるすべての指のリスト
  • targetTouches: 現在の DOM 要素上にある指のリスト
  • changedTouches: 現在のイベントに関与している指のリスト

(https://www.html5rocks.com/ja/mobile/touch/から引用)

これは画面をタッチした指の数だけ押した順に配列になって入っています。で、この中でどれを使うかと言うとtargetTouchesを使います。方向キーの要素を触ってるタッチだけあればいいからです。このtargetTouches[0]のclientX、clientYで座標を取ります。

ただ、これだと方向キーを複数指でタッチした場合には当然おかしなことになるわけですが、まぁそんなのはそんな馬鹿なことをやった奴が悪いってことでスルーします(^^;)

で、あとはこの座標をうまく処理して方向入力を作るわけですがその辺は私の過去の記事(バーチャルキーパッドの作り方【enchant.js】)を参考にしてください(‘ω’)ノ

あとは自分でやってね

プログラムに関しては方向入力の所だけであとは楽勝だと思います。

たぶんプログラムよりCSSで納得できる配置にする方が時間かかると思います(^^;)

私のバーチャルパッド搭載ゲームを遊んでみてね!↓↓

同カテゴリー記事

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

新着記事

pixi.jsのspriteにはtintというプロパティがあります...

スマホ用ブラウザゲームでもバーチャルパッドで自由自在に操作したい!...

ブラウザゲームサイト用のwordpressテーマをBOOTHにて1...

レトロ風なゲームを作ろうと思った場合レトロ風な音楽も必要になります...

Typescriptでゲームパッドを使えるようにするやり方です。ブ...