ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 バーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)を表示してみる

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 ハロー。さて、”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をバーチャルパッド(十字方向キーパッド)で動かしてみる”の記事では「バーチャルパッド(十字方向キーパッド)」を表示したので、次は、バーチャルボタンを表示してみよう。

 私はスーパーファミコン世代なので、ボタンと言えば、「Aボタン/Bボタン/Xボタン/Yボタン」である。今回は、

    ○X
  ○Y  ○A
    ○B

 のようにバーチャルボタンを表示してみたいと思う。

■バーチャルボタンの画像が必要

 enchant.jsのサンプルには「バーチャルボタン画像」は存在しないので、「バーチャルボタン画像」は自作する必要がある。「バーチャルボタン画像」を自作できない人は、私が用意した以下を用いてほしい。

button

 で、この画像を以下に格納しよう。

「任意」フォルダ
 ┗index.html
 ┗「js」フォルダ
   ┗main.js
   ┗「lib」フォルダ
     ┗enchant.js
     ┗ui.enchant.js
     ┗pad.png
     ┗apad.png
     ┗icon0.png
     ┗font0.png
 ┗「img」フォルダ
   ┗xxx.png
   ┗button.png    ⇒バーチャルボタン画像

 これで準備はOK!

■バーチャルボタンを表示する

 ではバーチャルボタンを表示しよう。コードは以下だ。似たボタンを4つも作成するのは面倒なので、クラス化しているぞ。

[html firstline=”1″ highlight=”6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,24,30,43,44,45,46,47″ title=”main.js”]
enchant();

var SCREEN_WIDTH = 480; // ゲーム画面の幅.
var SCREEN_HEIGHT = 640; // ゲーム画面の高さ.

// バーチャルボタンを作成するクラス.
var Button = enchant.Class.create( enchant.Sprite, {
// コンストラクタ.
initialize: function( x, y, mode ) {
// 継承元をコール.
enchant.Sprite.call( this, 50, 50 );
// バーチャルボタン画像を設定.
this.image = game.assets[ ‘./img/button.png’ ];
this.x = x; // X座標.
this.y = y; // Y座標.
this.buttonMode = mode; // ボタンモード.
// ゲームのシーンにバーチャルボタンを追加.
game.rootScene.addChild( this );
}
});

window.onload = function() {
// 表示領域を設定(幅と高さ).
game = new Game( SCREEN_WIDTH, SCREEN_HEIGHT );

// frames(フレーム)per(毎)second(秒)、ゲーム進行スピードを設定.
game.fps = 24;

// pre(前)-load(読み込み)、ゲームで使用する素材を予め読込.
game.preload( ‘./img/xxx.png’, ‘./img/button.png’ );

// メイン処理を実行.
game.onload = function() {
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#80f0b8’;

// バーチャルパッド(十字方向キーパッド)を生成.
var pad = new Pad();
pad.moveTo( 10, SCREEN_HEIGHT – 125 );
// ゲームのシーンにバーチャルパッド(十字方向キーパッド)を追加.
game.rootScene.addChild( pad );

// ゲームのシーンにバーチャルボタン(A/B/X/Y)を追加.
btna = new Button( SCREEN_WIDTH – 60, SCREEN_HEIGHT – 100, ‘a’ );
btnb = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 60, ‘b’ );
btnx = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 140, ‘x’ );
btny = new Button( SCREEN_WIDTH – 140, SCREEN_HEIGHT – 100, ‘y’ );

// キャラを配置、幅と高さを設定.
var chara = new Sprite( 96, 64 );
// 予め読込した画像を設定.
chara.image = game.assets[ ‘./img/xxx.png’ ];
// ゲームのシーンにキャラを追加.
game.rootScene.addChild( chara );
[/html]

 「game.preload」でバーチャルボタン画像(button.png)を新たに読み込み、Buttonクラスで4つのボタン(A/B/X/Y)を生成する。表示する為、XY座標を指定するが、上記は好みの操作感で設定してほしい。バーチャルパッド(十字方向キーパッド)も含めて、以下の位置に私は配置した。

enchant21

 Buttonクラスの中で「game」を使用しているので、24行目の宣言では忘れずにグローバル変数へ変えておこう、ローカル変数のままだと何も表示されない。「var game」となっていたので「game」に変えた。

■バーチャルボタンで操作してみる

 表示しただけなので、バーチャルボタンを押下しても操作はされない。当然だ。では、操作を実装してみよう。押下が確認できれば良いから、

  A: 右移動
  B: 下移動
  X: 上移動
  Y: 左移動

 として、キャラが動くかどうか、確認してみよう。

[html firstline=”59″ highlight=”81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100″ title=”main.js”]
// キャラをキー入力で動かす.
chara.onenterframe = function() {
// 右キー押下中.
if ( game.input.right ) {
// X方向に1px移動.
this.x += 1;
}
// 左キー押下中.
if ( game.input.left ) {
// X方向に-1px移動.
this.x -= 1;
}
// 上キー押下中.
if ( game.input.up ) {
// Y方向に-1px移動.
this.y -= 1;
}
// 下キー押下中.
if ( game.input.down ) {
// Y方向に1px移動.
this.y += 1;
}
// Aボタン押下中.
if ( game.input.a ) {
// X方向に1px移動.
this.x += 1;
}
// Yボタン押下中.
if ( game.input.y ) {
// X方向に-1px移動.
this.x -= 1;
}
// Xボタン押下中.
if ( game.input.x ) {
// Y方向に-1px移動.
this.y -= 1;
}
// Bボタン押下中.
if ( game.input.b ) {
// Y方向に1px移動.
this.y += 1;
}
}
}

// ゲームをスタート.
game.start();
}
[/html]

 如何だろうか、上記だけでは操作ができなかったはずだ。

 4つのボタンに16行目で「this.buttonMode = mode;」このようにボタンモードを設定しているのだが、そもそも、「’a’」「’b’」「’x’」「’y’」という定義に「キー」は割当たっていない為、”キーイベントとして”発生してくれないのだ。

 では、そう、キーの割り当てをすれば良いのだ。PC上の何らかのキーに割当てよう。これはスマートフォンのみしかターゲットにしていなくても、必要なことだ。

[html firstline=”43″ highlight=”49,50,51,52,53″ title=”main.js”]
// ゲームのシーンにバーチャルボタン(A/B/X/Y)を追加.
btna = new Button( SCREEN_WIDTH – 60, SCREEN_HEIGHT – 100, ‘a’ );
btnb = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 60, ‘b’ );
btnx = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 140, ‘x’ );
btny = new Button( SCREEN_WIDTH – 140, SCREEN_HEIGHT – 100, ‘y’ );

// バーチャルボタンをキーに割当て.
game.keybind( 88, ‘a’ ); // ‘X’キーに割当て.
game.keybind( 90, ‘b’ ); // ‘Z’キーに割当て.
game.keybind( 83, ‘x’ ); // ‘S’キーに割当て.
game.keybind( 65, ‘y’ ); // ‘A’キーに割当て.

// キャラを配置、幅と高さを設定.
var chara = new Sprite( 96, 64 );
[/html]

 如何だろうか? これでバッチリ動いたはずだ。

 ところで「game.keybind」の第一引数だが、”キーのASCIIコード番号”となっている。PC上のキーにはそれぞれ固有の番号が割り当てられており、その番号を使って内部的にキーを認識している。主なキー番号を整理すると、以下のようになる。私が上記で割り当てた以外に設定したい人は、以下を参考にしてほしい。

A-Z 65-90
0-9 48-57
0-9(テンキー) 96-105
Tab 9
Enter 10
Delete 11
Shift 16
Ctrl 17
Alt 18
Space 32

 実は、以下のような書き方も可能だ。以下の方が直感的にも分かり易いかもしれない。この方法で実装する場合、文字列は”大文字”で記述しなければならないので要注意だ。

[html firstline=”46″ highlight=”50,51,52,53″ title=”main.js”]
btnx = new Button( SCREEN_WIDTH – 100, SCREEN_HEIGHT – 140, ‘x’ );
btny = new Button( SCREEN_WIDTH – 140, SCREEN_HEIGHT – 100, ‘y’ );

// バーチャルボタンをキーに割当て.
game.keybind( "X".charCodeAt( 0 ), ‘a’ ); // ‘X’キーに割当て.
game.keybind( "Z".charCodeAt( 0 ), ‘b’ ); // ‘Z’キーに割当て.
game.keybind( "S".charCodeAt( 0 ), ‘x’ ); // ‘S’キーに割当て.
game.keybind( "A".charCodeAt( 0 ), ‘y’ ); // ‘A’キーに割当て.

// キャラを配置、幅と高さを設定.
var chara = new Sprite( 96, 64 );
[/html]

(アシベズヘア@ashibehair_m

╋ 関連記事 ━━━

  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに戦闘用コマンド一覧(攻撃/特技/道具/防御/逃走)を表示する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに1体の敵キャラ(エネミー/モンスター)を配置する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 文字列に「8bitファミコン風のWEBフォント(漢字も使える!フリー!)」を採用する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスゲージ(HPゲージ)を表示する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスウィンドウ(状態表示枠)を表示する
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに切り替える
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をバーチャルパッド(十字方向キーパッド)で動かしてみる
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をキー入力で動かしてみる
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像を表示してみる
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 バーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)を表示してみる」への11件のフィードバック

    1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をバーチャルパッド(十字方向キーパッド)で動かしてみる

    2. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに切り替える

    3. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスウィンドウ(状態表示枠)を表示する

    4. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスゲージ(HPゲージ)を表示する

    5. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 文字列に「8bitファミコン風のWEBフォント」を採用する

    6. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに戦闘用コマンド一覧(攻撃/特技/道具/防御/逃走)を表示する

    7. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【検証篇】 バーチャルパッド(十字方向キーパッド)を表示してキーボード上でキー押下すると、そのキーを押下しっぱなし

    8. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに表示するメッセージを自動送りできるようにする

    9. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備

    10. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンの「攻撃」コマンドで複数の中なら一体の敵キャラを選択する(戦闘突入直

    11. ピンバック: materialize.jp » WebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)

    コメントを残す

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