有了舞台，那么人物也要出场啦！

任何你想要在渲染器中可见的东西都必须添加到一个特殊的 Pixi 对象中，这个对象叫做stage（舞台）。就是上面的 app.stage 可以打印出来看看。

stage（舞台）是 Pixi 的Container（容器）对象。你可以把一个Container（容器）想象成一种空盒子，它会把你放进去的东西组合在一起并储存起来。stage（舞台）对象是场景中所有可见事物的根容器。你在stage（舞台）里放的任何东西都会在 canvas 画面上渲染出来。现在stage（舞台）是空的，但很快我们就会开始把东西放进去。

而舞台之上的表演者，也就是人物被称之为 sprite（精灵）。这一种的特殊图像对象。您可以控制它们的位置、大小和其他属性。

创建方法有三种：

• 通过单个图像文件。

• 通过雪碧图。

• 通过纹理贴图。

本人有一篇文章中也有提及纹理贴图怎么制作：纹理打包器 TexturePacker

这里因为我困了，就简要写一发一下代码了。

这是由我之前通过 TexturePacker 生成的纹理贴图集，baokemeng1.json。

生成的 json 主要说明了是由三张图片构成的，具体素材我扔到网盘了，有兴趣可以下载一下：https://pan.baidu.com/s/1A-BsG_5hqCXhgKXnJ-lM2w

提取码：gjhi

json 中说明了位置信息，也是之后使用时判断和裁剪人物与场景的判断依据

"anim.png":
{
	"frame": {"x":212,"y":1,"w":50,"h":88},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":0,"y":2,"w":50,"h":88},
	"sourceSize": {"w":50,"h":90}
},
"changjing.png":
{
	"frame": {"x":1,"y":1,"w":209,"h":214},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":209,"h":214},
	"sourceSize": {"w":209,"h":214}
},
"damu2.png":
{
	"frame": {"x":212,"y":91,"w":56,"h":87},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":0,"y":0,"w":56,"h":87},
	"sourceSize": {"w":60,"h":90}
}},

废话不多说，赶紧看看效果吧

就决定是你了，代码兽，赶紧上吧

<template>
    <div id="pixi4"></div>
</template>

<script>
import * as pixi from 'pixi.js'

function keyboard(value) {
  let key = {};
  key.value = value;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = event => {
    if (event.key === key.value) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
      event.preventDefault();
    }
  };

  //The `upHandler`
  key.upHandler = event => {
    if (event.key === key.value) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
      event.preventDefault();
    }
  };

  //Attach event listeners
  const downListener = key.downHandler.bind(key);
  const upListener = key.upHandler.bind(key);
  
  window.addEventListener(
    "keydown", downListener, false
  );
  window.addEventListener(
    "keyup", upListener, false
  );
  
  // Detach event listeners
  key.unsubscribe = () => {
    window.removeEventListener("keydown", downListener);
    window.removeEventListener("keyup", upListener);
  };
  
  return key;
}

export default {
    name: "pixi4",
    components: {},
    props: {},
    data() {
        return {
            loader: null
        };
    },
    created() {},
    mounted() {
        this.initState();
    },
    watch: {},
    computed: {},
    methods: {
        initState() {
            this.loader = new pixi.Loader();
            let Rectangle = pixi.Rectangle; 
            //Create a Pixi Application   创建一个pixi应用
            let app = new pixi.Application({
                width: window.innerWidth,         // default: 800 宽度
                height: window.innerHeight,        // default: 600 高度
                antialias: true,    // default: false 反锯齿
                // transparent: true, // default: false 透明度
                resolution: 1 ,      // default: 1 分辨率
                backgroundAlpha: 0   // 设置背景颜色透明度   0是透明
            });

            document.getElementById('pixi4').appendChild(app.view)
            app.renderer.view.style.display = "block";
            app.renderer.autoResize = true;  
            window.onresize = function () {
                app.renderer.resize(window.innerWidth, window.innerHeight);
            }
            // 加载纹理贴图，创造精灵，并将精灵添加到stage舞台上
            let src2 = "./img/baokemeng1.json";
            this.loader.add([{name:'huo',url: src}, {name:'damu',url: src2}]).load(()=>{
                let textures = this.loader.resources.damu.textures; 
                // 场景           
                let changjingsprite = this.setTexture(textures["changjing.png"])
                app.stage.addChild(changjingsprite);
                // 裁剪人物
                let rectangle = new Rectangle(229, 1, 16.7, 22);
                let texture = textures["anim.png"];
                texture.frame = rectangle;
                let damu = this.setTexture(texture)
                app.stage.addChild(damu);
                // 场景大小和位置
                changjingsprite.scale.set(2, 2);
                changjingsprite.x = 100
                // 大木在场景大小、位置
                damu.width = 33;
                damu.height = 44;
                damu.x = 220;
                damu.y = 180;
                damu.vx = 0;
                damu.vy = 0;
                
                // 大木移动
                app.ticker.add(()=> this.gameLoop(damu));
                this.keyMove(damu);
            })
            
            // 监听src加载事件
            this.loader.onProgress.add((loader, resource) => {
                // console.log("当前进度：", loader.progress, "%"); 
                // console.log(resource.url)
            });
            this.loader.onError.add(() => {
                console.log("载入图片或json失败了")
            });
    
        },
        keyMove(person) {
            let left = keyboard('a'), up = keyboard('w'), right = keyboard('d'), down = keyboard('s');
            left.press = () => {
                person.vx = -1;
                person.vy = 0;
            };
            left.release = () => {
                person.vx = 0;
                person.vy = 0;
            };
            right.press = () => {
                person.vx = 1;
                person.vy = 0;
            };
            right.release = () => {
                person.vx = 0;
                person.vy = 0;
            };
            up.press = () => {
                person.vx = 0;
                person.vy = -2;
            };
            up.release = () => {
                person.vx = 0;
                person.vy = 0;
            };
            down.press = () => {
                person.vx = 0;
                person.vy = 2;
            };
            down.release = () => {
                person.vx = 0;
                person.vy = 0;
            };
        },
        gameLoop(person){
            //Move the cat 1 pixel 
            person.x += person.vx;
            person.y += person.vy;
        },
        setTexture (texture) {
            // console.log(texture)
            let sprite = new pixi.Sprite(texture);
            return sprite;
        },
    },
};
</script>
<style scoped>
</style>

效果：

呼，结束了！

哈哈哈，终于完成了 pixi.js 学习记录第一篇