PIXI学习笔记

PIXI.Appcation

创建一个PIXI应用实例

renderer 渲染器

• width
• height
• backgroundColor (hex16进制颜色)
• resize (function) 重置画布大小
• autoResize
• view canvas标签
  • style

let app = new Application({
  width: 256, // 默认: 800
  height: 256, // 默认: 800                   
  antialias: true, // 抗锯齿，默认: false
  transparent: false, // 设置透明度
  resolution: 1 // 设置分辨率，一般1
});

// 改变背景色
app.renderer.backgroundColor = 0x061639;

// 重置画布大小
app.renderer.autoResize = true;
app.renderer.resize(512, 512);

// 全屏画布
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);

document.body.appendChild(app.view);

ticker 定时器

• add
• addOnce
• destroy
• remove
• start
• stop
• update

app.ticker.add(animate);
function animate(){
	sprite.rotation += 0.1;
}

stage 舞台

• addChild 添加子元素

PIXI.loader

add

添加文件

• name (string): 加载源文件的别名,如果没设置，url就会被放在这.
• url (string): 源文件的地址，是加载器 baseUrl的相对地址.
• options (object literal): 加载设置.
• options.crossOrigin (Boolean): 源文件请求跨域不？默认是自动设定的。
• options.loadType: 源文件是怎么加载进来的？默认是Resource.LOAD_TYPE.XHR。 options.xhrType: 用XHR的时候该怎么处理数据？ 默认是Resource.XHR_RESPONSE_TYPE.DEFAULT。
• callbackFunction: 当这个特定的资源加载完后，这个函数将会被执行。

传入对象

.add({
  name: 'key3',
  url: 'http://...'
  onComplete: function () {}
})

传入数组

.add([
  {name: 'key4', url: 'http://...', onComplete: function () {} },
  {url: 'http://...', onComplete: function () {} },
]);

progress

加载进程

resources

文件资源信息

• url (string) 文件地址
• error (string) 错误日志
• data (buffer) 二进制文件数据

loader
  .add([
    "images/game-ddz.png",
    "images/dog2.jpg",
  ])
  .on("progress", loadProgressHandler)
  .load(setup);

// 监视加载进程
function loadProgressHandler(loader, resource) {
  // 当前在加载的文件
  console.log("loading: " + resource.url);
  // 已经加载的进程
  console.log("progress: " + loader.progress + "%");

  // 打印错误
  console.log("error: " + resource.error);

  // 打印文件原始二进制数据
  console.log("error: " + resource.data);

}

// 加载完毕callback
function setup() {
  console.log('loader finish');
  let ddz = new Sprite(
    resources["images/game-ddz.png"].texture
  );
  let dog = new Sprite(
    resources["images/dog2.jpg"].texture
  );
  app.stage.addChild(dog);
  app.stage.addChild(ddz);
}

PIXI.Texture

• from

const texture = PIXI.Texture.from('sprite.png');

• fromBuffer

PIXI.Sprite

创造精灵 let sprite = new Sprite(resources["images/game-ddz.png"].texture);

• anchor 锚点 sprite.anchor.set(0.5,0.5); 百分比，相对单位
• position sprite.position.set(x,y); 像素
• pivot 原点 sprite.pivot.set(x,y); 像素
• buttonMode(bool) 按钮
• tint(string) 着色
• width
• height
• texture
• ratation(number) 旋转
• alpha(float) 透明度

PIXI.Point

new PIXI.Point(x, y);

PIXI.Container

const container = new PIXI.Container();
app.stage.addChild(container);
container.addChild(sprite);

PIXI.Rectangle

创建矩形 let rectangle = new PIXI.Rectangle(x, y, width, height);