強火で進め

このブログではプログラム関連の記事を中心に書いてます。

enchant.js向けの全方向入力可能なバーチャルパッド


今回のサンプル1
今回のサンプル2
サンプルの全ファイル

enchant.js に付属しているサンプルのRPGではバーチャルパッドを使っていますがこのバーチャルパッドは上下左右のいずれかの一方向にしか入力出来ません。

以前書いた車のサンプルではスマートフォンでも遊べる様にバーチャルパッドを付けようかとしたのですがあのサンプルでは車は「(上 or 下)+(右 or 左)」の組みあせで曲がるというルールで有ったためこのバーチャルパッドでは操作出来ませんでした。

せっかく、スマートフォン対応の enchant.js なので斜め入力をするゲームもスマートフォン対応させたい所です。

という事で全方向に対応したバーチャルパッドを作成する事にしました。

そして、完成したのがこちらです。画面のどこでも良いのでタップして、そのままスライドさせるとその方向への入力となります。パッドを右上に入力すると車は右へ曲がりながら前進します。

しかし、実際に遊んでみるとあまり直感的では無く操作し辛い印象でした。キーボードだとこの操作性でもあまり苦にはならなかったのですがバーチャルパッドには向いてない様です。

どの様なタイプのゲームだと向いているか考えたところ全方向にそのまま移動させるのなら向いているだろうと思い、UFOを移動させるサンプルを作ってみました。それがこちらです。

こちらのタイプであれば操作性は問題無さそうです。まぁ、指の位置にキャラクターが来たら見えなくなるという問題点は有りますが…

全方向バーチャルパッドの使い方

このバーチャルパッドのソースや画像はご自身のゲームご自由に使って貰ってOKです。是非、ゲーム作りにお役立て下さい。

…と済ましてしまうと実際に自分プログラムに組み込もうとされる方は苦労すると思うので組み込み方について解説しておきます。

まずは必要なファイルは以下となります。

  • vpad.js
  • pad_center.png
  • pad_outer.png

こちらのzipファイルから該当するファイルを集めて下さい。

次に自分のプログラムに組み込む方法。

HTMLファイルではこの様に enchant.js の次、ゲームプログラムのJSファイル(ここでは game.js)の前に記述して下さい。

        <script type="text/javascript" src="enchant.js"></script> 
        <script type="text/javascript" src="vpad.js"></script> 
        <script type="text/javascript" src="game.js"></script> 

ゲームプログラムのJSファイルのpreloadの部分で他の画像ファイルと一緒に pad_center.png と pad_outer.png をプリロードして下さい。

    game.preload('bg.png', 'car.gif', 'cover3.gif', 'cover4.gif', 
        'pad_center.png', 'pad_outer.png');

実際にバーチャルパッドを組み込む記述はこの様になります。

        game.vPad = new VPad();
        game.rootScene.addChild(game.vPad);

パッドでの入力データは以下の2つのメソッドで取得できます。最初にタッチした位置からの移動量を返します。パッドの入力が無い場合はいずれも 0 を返します。

  • game.vPad.getPowerX()
  • game.vPad.getPowerY()

後、タッチイベント取得の為に画面最前面にスプライトを敷いています。そのスプライトのサイズは 320x320 になっています。

もし、別の画面サイズでゲームを作る場合は vpad.js の以下の部分の数値を変更して下さい。

        this.touchSprite = new enchant.Sprite(320, 320);

なお、画面最前面にスプライトを敷いている為、このスプライトが他のスプライトのタッチイベントを邪魔する場合が有りますので注意して下さい。

タッチイベントを取得したいスプライトなどはパッド生成後にシーンに追加するなどの調整を行って下さい。

パッドの画像についてはNodeBoxというツールで作成しました。念のためこちらのプログラムも書いておきますがほとんどの人には必要無いと思います。興味の有る人だけ見て下さい。
【 pad_center.png 作成用のプログラム】

size(70, 70)

from math import sin, cos, radians

background(0,0,0,0)

nostroke()
fill(0, 1, 0, 0.08)
oval(0, 0, WIDTH, HEIGHT)

【 pad_outer.png 作成用のプログラム】

size(86, 86)

from math import sin, cos, radians

background(0,0,0,0)

stroke(0, 1, 0, 0.08)
nofill()
max = 5
for i in range(max):
    strokewidth(max-i)
    oval(3, 3, WIDTH-6, HEIGHT-6)

関連情報

nakamura001 @ ウィキ - トップページ/JavaScriptゲーム/ライブラリ/enchant.js/サンプル
http://www32.atwiki.jp/nakamura001/pages/149.html