TypeScript pixi.js類代碼示例

import * as PIXI from 'pixi.js';

var renderer = PIXI.autoDetectRenderer(800, 600, {backgroundColor: 0x1099bb});
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('bunny.png');
var bunny = new PIXI.Sprite(texture);
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 400;
bunny.position.y = 300;
bunny.scale.x = 2;
bunny.scale.y = 2;
stage.addChild(bunny);
animate();

function animate() {
    requestAnimationFrame(animate);
    var bunny = stage.getChildAt(0);
    bunny.rotation += 0.01;
    renderer.render(stage);
}

"use strict";

import * as PIXI from 'pixi.js';
import { Observable } from 'rxjs/Observable';
import { greet } from './greet';

function hi(word:string = "TypeScript!!!!!!!!!!!!!!"):void {
  greet(word);
}
hi();

//const renderer:PIXI.WebGLRenderer | PIXI.CanvasRenderer = PIXI.autoDetectRenderer(800, 600, { transparent: true });
// const stage = new PIXI.Stage();
const stage = new PIXI.Container();
const renderer = PIXI.autoDetectRenderer(800, 600, { transparent: true });
document.body.appendChild(renderer.view);

const texture = PIXI.Texture.fromImage('bunny.png');
const bunny = new PIXI.Sprite(texture);
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

animate();
function animate() {
    requestAnimationFrame(animate);
    bunny.rotation += 0.1;

    constructor(private htmlContainer:HTMLElement){
        this.renderer = PIXI.autoDetectRenderer(htmlContainer.clientWidth, htmlContainer.clientHeight, {antialias:true});
        this.renderer.backgroundColor = 0xFF0000;
        htmlContainer.appendChild(this.renderer.view);

        //Hack: interaction data objects are reused making it difficult to store info on them
        //this is a hack to remove the "selection" property on every click so it can be used
        //by the rest of hte system to bubble what has been clicked in
        // let plugins = ((<any>this.renderer).plugins);
        // let interactionManager = (<InteractionManager>plugins.interaction);
        // let clearData = function(displayObject, eventString, eventData){
        //     debugger;
        //     delete (<any>interactionManager.eventData.data).selection;
        // }
        // this.interceptBefore(interactionManager, "onMouseUp",clearData)
        // this.interceptBefore(interactionManager, "onMouseDown",clearData)
        // interactionManager.setTargetElement(interactionManager.interactionDOMElement, interactionManager.resolution);


        this.container = new PIXI.Container();
        this.container.addChild(DebugDraw.Global)

        this.animate();

        window.addEventListener('resize', ()=>{
            if(htmlContainer.clientWidth != this.renderer.width
                || htmlContainer.clientHeight != this.renderer.height){
                this.renderer.resize(htmlContainer.clientWidth, htmlContainer.clientHeight);
                this.setScene(this.currentScene);

            }
        })
    }

	"addAtBack": false,
	"spawnType": "circle",
	"spawnCircle": {
		"x": 0,
		"y": 0,
		"r": 0
	}
};
const canvas = document.getElementById("stage") as HTMLCanvasElement;
// Basic PIXI Setup
const rendererOptions =
{
	view: canvas,
};
const stage = new pixi.Container(),
	renderer = pixi.autoDetectRenderer(canvas.width, canvas.height, rendererOptions);
let emitter:particles.Emitter = null,
	bg:pixi.Sprite = null;

// Calculate the current time
let elapsed = Date.now();

let updateId:number;
// Update function every frame
const update = function(){

	// Update the next frame
	updateId = requestAnimationFrame(update);

	const now = Date.now();
	if (emitter)