libro
www.tuyano.com
初心者のためのenchant.jsゲームプログラミング入門

スプライトを使いこなそう！ (4/5)

作成:2012-09-23 11:27
更新:2012-09-23 11:27

■AボタンとBボタン

ゲームでは、上下左右の移動の他に「ボタン」となるキーが必要です。いわゆる「A」ボタン、「B」ボタンというやつですね。

これらを使うには、ちょっとだけ仕掛けが必要になります。これらA/Bボタン用のキーは、標準では特に割り当てられてはいません。そこで、「最初にGameオブジェクトにA/Bボタンのキーをバインドする」「ENTER_FRAMEイベント時にA/Bボタンの状態を調べて必要な処理を実行する」という２つのコードが必要となります。

実際の例として、下に簡単なサンプルを挙げておきました。先ほどの上下左右でキャラクタを動かすサンプルを修正したものです。ここではAボタンにShiftキー、BボタンにCtrlキーをそれぞれ割り当てています。Shiftキーを押すと背景が真っ黒に、Ctrlキーを押すと真っ白に変わります。キーを離すと元に戻ります。

ここでは、Gameオブジェクトを作成した後、以下のようにしてA/Bボタンのキーをバインドしています。
game.keybind(16, "a");
game.keybind(17, "b");
Gameオブジェクトの「keybind」メソッドを呼び出していますね。これは第１引数にキーのASCIIコード番号を、第２引数に割り当てるボタン名をそれぞれ指定します。

第１引数がちょっとわかりにくいでしょう。これは、それぞれのキーに割り当てられているコード番号です。パソコンのキーには、それぞれ固有の番号が割り当てられており、その番号を使って内部的にキーを認識しています。主なキーの番号を整理すると以下のようになります。

●キーのASCIIコード番号
A～Z    65～90
0～9    48～57　または　96～105（テンキーの場合）
tab    9
enter    10
del    11
shift    16
ctrl    17
alt    18
space    32
ここでは16と17を指定していますね。これにより、ShiftキーとCtrlキーがA/Bボタンに割り当てられた、というわけです。これらのキーが押された時の処理は、ENTER_FRAMEイベントの関数で行なっています。スクリプトを見ると、
if (game.input.a){……
このようにしてAボタンの処理がされていることがわかるでしょう。「game.input.a」「game.input.b」といようにプロパティを指定し、その値がtrueかfalseかをチェックすることで、それぞれのボタンに割り当てているキーが押されているかどうかを知ることができるのです。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

enchant();

window.onload = function(){
    var game = new Game(400, 300);
    game.preload("character2.png");
    game.fps = 20;
    game.keybind(16, "a"); // ★
    game.keybind(17, "b"); // ★
    
    game.onload = function(){
        var char1 = new Sprite(100, 100);
        char1.image = game.assets["character2.png"];
        char1.x = 0;
        char1.y = 0;
        
        char1.addEventListener(enchant.Event.ENTER_FRAME, function(){
            this.frame = this.age % 2;
            if (game.input.up){ this.moveBy(0, -5); }
            if (game.input.down){ this.moveBy(0, 5); }
            if (game.input.left){ this.moveBy(-5, 0); }
            if (game.input.right){ this.moveBy(5, 0); }
             // ★A/Bボタンの処理
            if (game.input.a){
                game.rootScene.backgroundColor = "#000000";
            } else if (game.input.b){
                game.rootScene.backgroundColor = "#FFFFFF";
            } else {
                game.rootScene.backgroundColor = "#ffaaaa";
            }
        });
        game.rootScene.backgroundColor = "#ffaaaa";
        game.rootScene.addChild(char1);
    };

    game.start();
};
※関連コンテンツ

「初心者のためのenchant.jsゲームプログラミング入門」に戻る