Help us understand the problem. What is going on with this article?

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

More than 3 years have 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/

sa-k0
たまになにかかきます
https://biwanoie.tokyo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away