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逐渐移动到舞台的右边。




这真的是所有的东西！只是改变任何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);
}

当你运行这个代码，猫会向下移动到右边一个像素每帧：




如果你想让猫在不同的方向移动怎么办？要使猫移动到左边，给它一个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使用键盘的箭头键。运行它，并使用左，上，下，右箭头键移动猫在舞台附近。




下面是执行所有这些的代码：

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
}