Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

Pixi.jsでキー入力を受け付ける

pixi.js

PIXIでキー入力を受け付ける方法です。

実際のところ

ベースは前回の記事。
新規実装分は基本的にLeriningPixiの内容に則ります。
が、キーアクションの指定部分は繰り返しが好みじゃなかったので、
厳密性を捨てて簡単に書いています。

function setup() {
   // 略

    cat = new Sprite(id["cat.png"])                                                  
    cat.x  = oneChip                                                                 
    cat.vx = 0                                                                       
    cat.vy = 0                                                                       
    stage.addChild(cat) 

    //キーボード                                                                     
    var left  = keyboard(37)                                                         
    var up    = keyboard(38)                                                         
    var right = keyboard(39)                                                         
    var down  = keyboard(40)                                                         
                                                                                     
    function move(vx, vy) {                                                          
        return function() {                                                          
            cat.vx = vx;                                                             
            cat.vy = vy;                                                             
        };                                                                           
    };                                                                               
                                                                                     
    function halt(){                                                                 
        return move(0,0);                                                            
    }

    right.press = move( 5, 0);                                                       
    left.press  = move(-5, 0);                                                       
    up.press    = move( 0,-5);                                                       
    down.press  = move( 0, 5);                                                       
                                                                                     
    right.release = halt();                                                          
    left.release  = halt();                                                          
    up.release    = halt();                                                          
    down.release  = halt();

    state = play                                                                     
                                                                                     
    //Start the game loop                                                            
    gameLoop()                                                                       
}

function gameLoop() {                                                                
    //1fps毎に呼び出し                                                               
    requestAnimationFrame(gameLoop)                                                  
    state();                                                                         
    //Render the stage                                                               
    renderer.render(stage)                                                           
}

function play() {                                                                    
    cat.x += cat.vx                                                                  
    cat.y += cat.vy                                                                  
}

keyの受付部分は、以下の通り。
完全にLerningPixiの写経です。
上記と同一のファイルにおいておいた方が良いでしょう。
ゲームエンジンを経由するなら、多分この辺りはやってくれるんじゃないかと思いますが。

function keyboard(keyCode) {                                                         
    var key     = {}                                                                 
    key.code    = keyCode                                                            
    key.isDown  = false                                                              
    key.isUp    = true                                                               
    key.press   = undefined                                                          
    key.release = undefined                                                          
    //The `downHandler`                                                              
    key.downHandler = function(event) {                                              
        if (event.keyCode === key.code) {                                            
            if (key.isUp && key.press) { key.press() }                               
            key.isDown = true 
            key.isUp = false                                                         
        }                                                                            
        event.preventDefault()                                                       
    }                                                                                
    //The `upHandler`                                                                
    key.upHandler = function(event) {                                                
        if (event.keyCode === key.code) {                                            
            if (key.isDown && key.release) { key.release() }                         
            key.isDown = false                                                       
            key.isUp = true                                                          
        }                                                                            
        event.preventDefault()                                                       
    }                                                                                
    //Attach event listeners                                                         
    window.addEventListener(                                                         
        "keydown", key.downHandler.bind(key), false
    )                                                                                
    window.addEventListener(                                                         
        "keyup", key.upHandler.bind(key), false                                      
    )                                                                                
    return key                                                                       
}                                                                                    
                                                                                     
var keyObject = keyboard(asciiKeyCodeNumber)

参考もと