01 pixi.js入门

写在前面：写该笔记时pixi.js版本为V7.2.4

1. 安装

npm install pixi.js

　　或者

<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.js"></script>

　　又或者

<script src="https://unpkg.com/pixi.js@7.x/dist/pixi.min.js"></script>

2. 创建pixi程序

使用npm方式时，注意没有默认导出，正确导出的方法是

import * as PIXI from 'pixi.js';

　　若是使用cdn，则默认导出的对象为PIXI

2.1创建应用程序

let app = new PIXI.Application({
  width: 1000,
  height: 1000,
  backgroundAlpha: 1,    //  背景透明度（背景默认为黑色不透明），0为完全透明，1为不透明
  resolution: window.devicePixelRatio || 1,    // 设备像素比
  hello: true,  //在控制台中输出当前渲染器的版本和类型信息

});

　　更多参数请查阅官方文档

2.2 将应用程序视图插入到指定的dom中

$('body').append(app.view);

　　至此，页面中将会显示宽高为1000px的黑色区域

3  创建各种图形

// 创建一个矩形
const graphics1 = new PIXI.Graphics();
graphics1.beginFill('red', 0.1)    // 填充的颜色和透明度
graphics1.drawRect(100, 100, 200, 100);   //  绘制的坐标点和矩形的宽高
graphics1.endFill();    // 结束填充
app.stage.addChild(graphics1);  // 将该矩形添加到根节点中

　　更多的图形绘制请参考官方文档

 4  绘制文字

const text1 = new PIXI.Text("hello world", {
  fontSize: 100,
  fill: 'red',
  align: 'center',
});
text1.x = 10;  
text1.y = 100;

text1.anchor.set(0.5);

app.stage.addChild(text1)

　　

5  图片资源加载及绘制

// 加载单个图片
PIXI.Assets.add('z15', '/z15.png');
PIXI.Assets.add('z16', '/z16.png');
PIXI.Assets.add('z17', '/z17.png');

let assets1 = PIXI.Assets.load(['z15','z16','z17'])
assets1.then((textures) => {
  let z15 = new PIXI.Sprite(textures.z15);
  let z16 = new PIXI.Sprite(textures.z16);
  z16.x = 375;
  z16.anchor.set(0.5,0);
  app.stage.addChild(z15)
  app.stage.addChild(z16)
});


// 同时加载多个图片
PIXI.Assets.addBundle('scene1', {
  z18: '/z18.png',
  z19: '/z19.png',
  z20: '/z20.png',
});
let assets2 = PIXI.Assets.loadBundle('scene1', process => {
  console.log("scene1加载进度：" + process);
});

assets2.then((textures) => {
  let z18 = new PIXI.Sprite(textures.z18);
  let z19 = new PIXI.Sprite(textures.z19);
  let z20 = new PIXI.Sprite(textures.z20);

  z20.x = securityZone._width / 2;;
  z20.y = securityZone._height / 2;;
  z20.anchor.set(0.5)
  app.stage.addChild(z20)
});

　6.添加点击事件

z8.eventMode = 'static';
z8.on('click', (event) => {
  alert("你好")
});

 

持续更新中。。。。。。