导航

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

侧边栏
最新评论
广树
2024-12-12 13:22
@HelloGakki:没有突破性的玩法导致玩家有些疲劳了吧。Nexon内部现在也很混乱,近些年太多谜之操作。除了这次要求全球的冒险岛R区的普区化,还有为了强推新版的跑跑卡丁车强行把有盈利的旧版跑跑卡丁车关了,现在因为没得到玩家认可又缩小了新版跑跑卡丁车的服务范围。
HelloGakki
2024-12-12 13:16
@广树:确实!现在各种活动换皮,感觉流失了好多玩家了
广树
2024-12-12 13:12
@HelloGakki:是的呀,我是在菈菈的版本入坑的日服R区,菈菈太可爱了!
HelloGakki
2024-12-12 13:09
大佬玩的是拉拉呀
广树
2024-12-12 09:09
@zephyr:本来是不符合要求的,但是想了想还是加上了,希望未来能多多交流👏
正在攻略

logo_kai.jpg


PSN奖杯卡

PSN奖杯卡

赞助商广告

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

donate.png

1210 x 50(蓝底).png

cloudcone