Edited at

Pixi.jsわすれたときようまとめ

More than 1 year has passed since last update.

Pixi.jsをやっているときに調べたことなど。

環境

v4.5.0


hello pixi.js

http://pixijs.github.io/examples/#/basics/basic.js

とりあえずここからはじめた。


ベースクラス

ベースクラスをつくった。

諸事情によりTypeScript

よく使う関数とかはここにまとめておいて使うとべんりかなと思ったので。


PixiBase.ts

import * as PIXI from 'pixi.js';

export class PixiBase{
protected app: PIXI.Application;
protected loader: PIXI.loaders.Loader;
protected window: {w:number, h: number};

constructor(w: number, h: number, opt:PIXI.IApplicationOptions, parentId:string){
this.app = new PIXI.Application(w, h, opt);

const elem:HTMLElement = document.getElementById(parentId);
elem.appendChild(this.app.view);
console.log("base");

this.window = {w: w, h: h};

this.loader = new PIXI.loaders.Loader();

this.app.ticker.add(()=> {

this.animate();
});
}

protected setSpirte(sprite:PIXI.Sprite, x:number, y:number): void{
sprite.anchor.set(0.5);
sprite.x = x;
sprite.y = y;
this.app.stage.addChild(sprite);
}

protected animate():void{

}

}



shaderのuniformわたすやつ

基本これ

http://pixijs.github.io/examples/#/basics/custom-filter.js

onLoadedShaderのなかをこう。


test.ts

let uniforms = {

"time": {type: "f1", value: 0.0},
"resolution" : {type: "v2"}
}

this.filter = new PIXI.Filter(null, res.strip.data, uniforms);

this.text.filters = [this.filter];


新しく渡す時

this.text.filters[0].uniforms.time = this.time

こんなかんじで。

指定できるタイプ

https://github.com/pixijs/pixi.js/issues/2570

で書いてあった、

https://github.com/pixijs/pixi.js/blob/364c2457c6693d6e3ab68786539c53d566503e7b/src/core/renderers/webgl/shaders/Shader.js#L232-L463

見ればいけそうだけど、これいつのcommitなんだろう。。


texcoord問題

別記事にまとめた

http://qiita.com/sa-k0/items/015937db7c9dfb43465f


画像に保存したい時

pixiというよりはcanvasだけど

$('#result-canvas').on('click', ()=>{

var canvas:HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('canvas');

var img = new Image();
var type = 'image/png';
img.src = canvas.toDataURL(type);
img.onload = function(){
window.location.href = img.src;
};
});

PIXI独自の注意点としてoptionの

preserveDrawingBufferはtruenに設定しておく。

http://www.html5gamedevs.com/topic/17141-saving-pixi-to-image-using-todataurl-get-black-rectangle/