PIXI 移動 Sprite-PIXI文檔翻譯(4)

你現在知道如何顯示精靈，但是你怎麼讓他們移動？這很容易：使用創建循環函數requestAnimationFrame。這被稱爲遊戲循環。你放在遊戲循環中的任何代碼將每秒更新60次。這裏有一些代碼，你可以寫使catsprite以每幀1像素的速率移動。

function gameLoop() {

  //Loop this function at 60 frames per second
  requestAnimationFrame(gameLoop);

  //Move the cat 1 pixel to the right each frame
  cat.x += 1;

  //Render the stage to see the animation
  renderer.render(stage);
}

//Start the game loop
gameLoop();

如果你運行這段代碼，你會看到sprite逐漸移動到舞臺的右邊。


[img]http://dl2.iteye.com/upload/attachment/0123/3409/898d9b61-bd95-3f5a-a37d-3880b0e68f49.png[/img]

這真的是所有的東西！只是改變任何sprite屬性在循環內的小增量，他們將動畫隨着時間的推移。如果你想讓sprite在相反的方向（向左）動畫，只是給它一個負值，像-1。你會在movingSprites.html文件中找到這個代碼- 這裏是完整的代碼：

//Aliases
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    Sprite = PIXI.Sprite;

//Create a Pixi stage and renderer 
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//Load an image and the run the `setup` function
loader
  .add("images/cat.png")
  .load(setup);

//Define any variables that are used in more than one function
var cat;

function setup() {

  //Create the `cat` sprite 
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  stage.addChild(cat);

  //Start the game loop
  gameLoop();
}

function gameLoop(){

  //Loop this function 60 times per second
  requestAnimationFrame(gameLoop);

  //Move the cat 1 pixel per frame
  cat.x += 1;

  //Render the stage
  renderer.render(stage);
}

（請注意，cat變量需要在setup和gameLoop函數之外定義 ， 以便您可以在其中訪問它）。

你可以動畫的精靈的規模，旋轉或大小 - 無論什麼！你會看到更多的例子，如何使前面的子畫面動畫。

2、使用速度屬性
爲了給你更多的靈活性，它是一個好主意，以控制sprite的移動速度使用兩個速度屬性：vx和vy。vx 用於設置x軸（水平）上sprite的速度和方向。vy用於在y軸（垂直）上設置精靈的速度和方向。而不是直接更改精靈x和y值，首先更新速度變量，然後將這些速度值分配給精靈。這是一個額外的模塊化，你需要互動遊戲動畫。

第一步是在你的sprite上創建vx和vy屬性，並給它們一個初始值。

cat.vx = 0;
cat.vy = 0;

設置vx和vy爲0，意味着精靈不動。

接下來，在遊戲循環中，更新vx和vy你想要精靈移動的速度。然後將這些值分配給精靈x和y屬性。這裏是如何使用這種技術，使貓精靈向下移動和右一個像素每幀：

function setup() {

  //Create the `cat` sprite 
  cat = new Sprite(resources["images/cat.png"].texture);
  stage.addChild(cat);

  //Initialize the cat's velocity variables
  cat.vx = 0;
  cat.vy = 0;

  //Start the game loop
  gameLoop();
}

function gameLoop(){

  //Loop this function 60 times per second
  requestAnimationFrame(gameLoop);

  //Update the cat's velocity
  cat.vx = 1;
  cat.vy = 1;

  //Apply the velocity values to the cat's 
  //position to make it move
  cat.x += cat.vx;
  cat.y += cat.vy;

  //Render the stage
  renderer.render(stage);
}

當你運行這個代碼，貓會向下移動到右邊一個像素每幀：


[img]http://dl2.iteye.com/upload/attachment/0123/3411/18a582ed-dca8-38ca-9f5e-ed73c706101f.png[/img]

如果你想讓貓在不同的方向移動怎麼辦？要使貓移動到左邊，給它一個vx值-1。要使它向上移動，給貓一個vy值-1。爲了使貓移動速度更快，給它更大的vx和vy值，比如3，5，-2，或 -4。

你會看到，如何模塊化的精靈的速度vx和 vy速度屬性有助於鍵盤和鼠標指針控制系統的遊戲，以及使它更容易實現物理。

3、遊戲狀態

作爲一種風格，並幫助模塊化你的代碼，我建議結構化你的遊戲循環，如下：

//Set the game's current state to `play`:
var state = play;

function gameLoop() {

  //Loop this function at 60 frames per second
  requestAnimationFrame(gameLoop);

  //Update the current game state:
  state();

  //Render the stage to see the animation
  renderer.render(stage);
}

function play() {

  //Move the cat 1 pixel to the right each frame
  cat.x += 1;
}

你可以看到，gameLoop調用state每秒60次的函數。什麼是state功能？已分配到 play。這意味着play函數中的所有代碼也將以每秒60次的速度運行。

下面是來自上一個示例的代碼如何重新分解到這個新模型：

//Define any variables that are used in more than one function
var cat, state;

function setup() {

  //Create the `cat` sprite 
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);

  //Set the game state
  state = play;

  //Start the game loop
  gameLoop();
}

function gameLoop(){

  //Loop this function 60 times per second
  requestAnimationFrame(gameLoop);

  //Update the current game state:
  state();

  //Render the stage
  renderer.render(stage);
}

function play() {

  //Move the cat 1 pixel to the right each frame
  cat.vx = 1
  cat.x += cat.vx;
}

4、鍵盤運動

只需多一點工作，你可以構建一個簡單的系統來使用鍵盤控制精靈。爲了簡化你的代碼，我建議你使用這個自定義函數keyboard，監聽和捕獲鍵盤事件。

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;
}

該keyboard功能易於使用。創建一個新的鍵盤對象，像這樣：

var keyObject = keyboard(asciiKeyCodeNumber);

它的一個參數是您想要監聽的keyboad鍵的ASCII碼代碼。 這裏是一個ASCII鍵盤代碼數字的列表。

然後給鍵盤對象賦值press和release方法如下：

keyObject.press = function() {
  //key object pressed
};
keyObject.release = function() {
  //key object released
};

鍵盤對象也有isDown和isUp布爾屬性，您可以使用它來檢查每個鍵的狀態。

看看 keyboardMovement.html文件examples夾中的文件，看看如何使用這個keyboard函數來控制sprite使用鍵盤的箭頭鍵。運行它，並使用左，上，下，右箭頭鍵移動貓在舞臺附近。


[img]http://dl2.iteye.com/upload/attachment/0123/3413/40f9f22c-3c2b-3deb-9ec4-42e5259cf7e2.png[/img]

下面是執行所有這些的代碼：

function setup() {

  //Create the `cat` sprite
  cat = new Sprite("images/cat.png");
  cat.y = 96;
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);

  //Capture the keyboard arrow keys
  var left = keyboard(37),
      up = keyboard(38),
      right = keyboard(39),
      down = keyboard(40);

  //Left arrow key `press` method
  left.press = function() {

    //Change the cat's velocity when the key is pressed
    cat.vx = -5;
    cat.vy = 0;
  };

  //Left arrow key `release` method
  left.release = function() {

    //If the left arrow has been released, and the right arrow isn't down,
    //and the cat isn't moving vertically:
    //Stop the cat
    if (!right.isDown && cat.vy === 0) {
      cat.vx = 0;
    }
  };

  //Up
  up.press = function() {
    cat.vy = -5;
    cat.vx = 0;
  };
  up.release = function() {
    if (!down.isDown && cat.vx === 0) {
      cat.vy = 0;
    }
  };

  //Right
  right.press = function() {
    cat.vx = 5;
    cat.vy = 0;
  };
  right.release = function() {
    if (!left.isDown && cat.vy === 0) {
      cat.vx = 0;
    }
  };

  //Down
  down.press = function() {
    cat.vy = 5;
    cat.vx = 0;
  };
  down.release = function() {
    if (!up.isDown && cat.vx === 0) {
      cat.vy = 0;
    }
  };

  //Set the game state
  state = play;

  //Start the game loop
  gameLoop();
}

function gameLoop() {
  requestAnimationFrame(gameLoop);
  state();
  renderer.render(stage);
}

function play() {

  //Use the cat's velocity to make it move
  cat.x += cat.vx;
  cat.y += cat.vy
}