导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

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
侧边栏
最新评论
广树
2024-06-13
@老张博客:🤭没有被罚款喔,请大佬放心
老张博客
2024-06-13
翘班不怕被罚款呀
广树
2024-06-12
@YuanMoe:不,你已经没有沙发了
YuanMoe
2024-06-12
沙发
广树
2024-06-12
@mikusa:是的,整活类作品还是要靠动画这种形式。
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告