pixi.dom.sprite's Introduction

PIXI.DOM.Sprite

PIXI.DOM v.0.1.0

PIXI.DOM is a pixi.js plugin, created to allow you to render DOM elements on top of your pixi stage. In later versions, this plugin might get a few sub plugins to actually let you render DOM elements on canvas.

How to use:

just include this file after your pixi.js

<script src="pixi.dom.js"></script>```

2. set up the plugin (make sure to call PIXI.DOM.Setup after you have attached the view to your page)

```var stage = new PIXI.Stage(...);
var renderer = PIXI.autoDetectrenderer(...);
document.body.appendChild(renderer.view);
PIXI.DOM.Setup( renderer, true );```

3. create elements

```var input = new PIXI.DOM.Sprite( '<input type="text" placeholder="enter message" />', { x: 10, y: 10 } );
stage.addChild(input);```

```var iframe = new PIXI.DOM.Sprite( '<iframe>', { src: "http://www.pixijs.com" } );
iframe.position.x = 100;
iframe.position.y = 100;
stage.addChild(iframe);```

```var textarea = new PIXI.DOM.Sprite( document.getElementById('#mytextarea') );
stage.addChild( textarea );```

4. destroying elements

```input.destroy(); input = null;```
```iframe.destroy(); iframe = null;```
```textarea.destroy(); textarea = null;```

Recommend Projects