2D WebGL renderer Pixi.js v4 入门【第三回】

正在召唤神秘力量

导航

2D WebGL renderer Pixi.js v4 入门【第三回】

作者：广树·时间：2018-08-31 12:14:43·分类：JavaScript/jQuery/Vue

前情回顾

上回链接：《2D WebGL renderer Pixi.js v4 入门【第二回】》

介绍完了精灵制作的其中两种方法。

剩下介绍完第三种方法吧。

三种方法：

1.使用图像（一个一个读取进去）

2.将项目内用到的所有图片（sub-image）全部集合成一张大图片（tileset）使用。（就是将大量小图合成一张）

3.通过JSON（texture atlas）指定大图（tileset）中各自图像的位置和大小。

3.通过JSON（texture atlas）指定大图（tileset）中各自图像的位置和大小。全篇

JSON文件例子

{"frames": {

"blob.png":
{
    "frame": {"x":35,"y":515,"w":32,"h":24},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":32,"h":24},
    "sourceSize": {"w":32,"h":24},
    "pivot": {"x":0.5,"y":0.5}
},
"door.png":
{
    "frame": {"x":1,"y":515,"w":32,"h":32},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
    "sourceSize": {"w":32,"h":32},
    "pivot": {"x":0.5,"y":0.5}
},
"dungeon.png":
{
    "frame": {"x":1,"y":1,"w":512,"h":512},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":512,"h":512},
    "sourceSize": {"w":512,"h":512},
    "pivot": {"x":0.5,"y":0.5}
},
"explorer.png":
{
    "frame": {"x":69,"y":515,"w":21,"h":32},
    "rotated": true,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":21,"h":32},
    "sourceSize": {"w":21,"h":32},
    "pivot": {"x":0.5,"y":0.5}
},
"treasure.png":
{
    "frame": {"x":103,"y":515,"w":28,"h":24},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":28,"h":24},
    "sourceSize": {"w":28,"h":24},
    "pivot": {"x":0.5,"y":0.5}
}},
"meta": {
    "app": "http://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "treasureHunter.png",
    "format": "RGBA8888",
    "size": {"w":514,"h":548},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:3c5094e02c8477b61f5692e6cac9d0f1:3923663e59fb40b578d66a492a2cda2d:9995f8b4db1ac3cb75651b1542df8ee2$"
}
}

loader读取的图像更换为JSON

loader
  .add("images/treasureHunter.json")
  .load(setup);

通过JSON来访问图像并制作成精灵（图片和JSON记得放在同一目录）。

var sprite = new Sprite(
  resources["images/treasureHunter.json"].textures["frameId.png"]
);

但是将源文件一一从JSON中呼唤出来也挺麻烦的，所以直接给JSON呼出起个别名的话会比较方便。

于是代码换成下面这样。

var id = PIXI.loader.resources["images/treasureHunter.json"].textures; 

// 输入JSON内的其他图片，可以制作其他精灵。
let sprite = new Sprite(id["frameId.png"]);

于是以上是对精灵置入的一些说明。

接下来将挑战下精灵的移动。

尝试移动精灵（动画）

在loader完后执行的setup，所以动画就直接放入setup function中好了。

//别名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;

//基础代码
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//读取文件的路径设置与读取后执行的函数
loader
  .add([
    "images/cat.png"
  ])
  .load(setup);

var cat;

function setup() {
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  stage.addChild(cat);
 
  //执行动画函数
  gameLoop();
}

function gameLoop(){

  //此函数一秒内执行60次，循环。
  requestAnimationFrame(gameLoop);

  //猫娘会向右1px慢慢移动
  cat.x += 1;

  renderer.render(stage);
}

<点击查看运行效果>

上面的代码执行后，猫娘会向右通过一次，因为没有设定界限，所以即使超过canvas的画面，也会不断向右移动。我想，只要写上console.log()就会懂的。

改变方向和速度吧

调整下刚才的代码。

//别名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;

//基础代码
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//读取文件的路径设置与读取后执行的函数
loader
  .add([
    "images/cat.png"
  ])
  .load(setup);

var cat;

function setup() {
  cat = new Sprite(resources["images/cat.png"].texture);

  // 初始化
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);
 
  gameLoop();
}

function gameLoop(){

  requestAnimationFrame(gameLoop);

  // 每次向右3px，向下2px
  cat.vx = 3;
  cat.vy = 2;

  cat.x += cat.vx;
  cat.y += cat.vy;

  renderer.render(stage);
}

<点击查看运行效果>

追加状态

为了方便更新游戏的状态，将之前的代码换了个写法。

var cat, state;

function setup() {
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);

  // 游戏开始
  state = play;
 
  gameLoop();
}

function gameLoop(){
  requestAnimationFrame(gameLoop);

  // 游戏状态更新
  state();

  renderer.render(stage);
}

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

键盘控制

javascript对应的键盘ASCII码可以在如下网站检索。

http://keycode.info/

游戏中常有的上下左右的ASCII码大概是这样的。

←37↑38→39↓40

这样就能用键盘操作了

//别名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;

//基础代码
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//读取文件的路径设置与读取后执行的函数
loader
  .add([
    "images/cat.png"
  ])
  .load(setup);

var cat;

function setup() {

  // 初始化设定
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96;
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);

  // 按键码
  var left = keyboard(37),
      up = keyboard(38),
      right = keyboard(39),
      down = keyboard(40);

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

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

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

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

  state = play;

  gameLoop();
}

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

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

function keyboard(keyCode) {
    var key = {};
    key.code = keyCode;
    key.isDown = false;
    key.isUp = true;
    key.press = undefined;
    key.release = undefined;
    //The `downHandler`,把 keydown 事件绑定到 press 方法中
    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`，把 keyup 事件绑定到 release 方法中
    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;
}

<查看运行效果>

那么这回就到这里

本回的代码：进入git

本文翻译自：2D WebGL renderer Pixi.js v4【連載第三回】
翻译者：广树
转载请注明出处！

《2D WebGL renderer Pixi.js v4 入门【第四回】》

#pixi.js

侧边栏