Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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)