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

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

hello pixi.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はtrueに設定しておく。
http://www.html5gamedevs.com/topic/17141-saving-pixi-to-image-using-todataurl-get-black-rectangle/