LoginSignup
0
0

More than 5 years have passed since last update.

enchant.jsとtmlib.jsを使ったゲーム作成フレームワーク「enforce」チュートリアル(19)バーチャルゲームパッド

Last updated at Posted at 2015-02-14

ここでは、「game01」というディレクトリ内で作業しているという前提で説明しています。

2015.02.21 バーチャルゲームパッドの仕様を変更しました。

バーチャルゲームパッドを表示する

PADAXES」や「PADBUTTONS」を使用するとキーボードとゲームパッドでの操作が可能になりますが、スマホなどではどちらも接続することが難しいので、キャラクタを操作するゲームなどが作りにくくなっています。
そこで、オンスクリーンに方向指示と最大8つのボタンを表示出来るようにしました。

※1 2015.2.15以前にclone/pullしたフレームワークにはバーチャルゲームパッドは入っていません。

方向指示はそのまま「PADAXES[0]」に、8つのボタンは「PADBUTTONS[0][0〜7]」にそのまま対応してるので、パソコンのキーボードやジョイパッドで操作出来るように作ったものが、そのままバーチャルゲームパッドで操作出来るようになります。
表示させる方法は、ゲームソースのどこでもいいので、

    createVirtualGamepad()

と記述するだけで画面の左下にバーチャルゲームパッドが表示されます。
ひとつ注意する点は、このバーチャルゲームパッドは重なり順ではどのスプライトよりも最上位に表示されるということです。
この方向指示をクリック(タップ)した結果は、「PADAXES[0]」にそのまま反映されます。
表示には下記のオプションがあります。

パラーメーター名 意味 デフォルト値
scale サイズ 1.0
x 表示x座標 ※2
y 表示y座標 ※2
buttonscale ボタンのサイズ 1.0
coord ボタンの座標 []

※2 画面の左下に表示される座標に設定されます。

方向指示のサイズは「100x100」に対して何倍なのかを指定します。
x座標、y座標は省略すると画面の左下に表示されます。
ボタンのサイズは「64x64」に対して何倍なのかを指定します。
ボタンの座標は、ボタンの数だけ指定します(最大8個)。

例)

  createVirtualGamepad
    scale: 3
    x: 50
    y: 50
    buttonscale: 3
    coord: [
      undefined
      [SCREEN_WIDTH - (64 * 2 * 3) / 2, SCREEN_HEIGHT - (64 * 3) / 2]
      [SCREEN_WIDTH - (64 * 1 * 3) / 2, SCREEN_HEIGHT - (64 * 3) / 2]
    ]

上記の例は、「コントローラー部を3倍の大きさ、(x, y)=(50, 50)の位置に表示し、ボタンのサイズも3倍でボタン番号2と3を表示しろ」ということになります。
ボタンの数は、パラメーター「coord」に設定されている有効な座標の数だけになります。
上記の例では、ボタン番号1の座標設定が「undefined」となっています。
ですので、ボタン1は表示しません。
ボタン番号2と3の座標値が入っていますので、画面にはボタンが2つ表示され、それぞれボタン2とボタン3になります。
ボタンの座標の計算式で、3倍しているのはボタンのサイズが3倍なので、拡大したサイズで位置を計算しているためです。
最後に2で割っているのは、座標指示は画像の中心だからです。
ボタン番号はそのまま、PADBUTTONS[n][0]〜[n][7]に対応します。

バーチャルゲームパッドの表示制御

画面に表示したゲームパッドの表示制御は「dispVirtualGamepad(bool)」という関数で行います。

  dispVirtualGamepad(false)

で、非表示にすることが出来ます。

  dispVirtualGamepad(true)

で、表示させることが出来ます。

チュートリアル(18) <--- ⬛︎


enforceチュートリアル一覧

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0