Plugin: PIXI.DOMSprite

[Sebi]

Hey guys!

I had some spare time yesterday, so I have started working on a little plugin for pixi.

Maybe some of you might find this useful. Haha

 

PIXI.DOM.Sprite v.0.1.0

 

Description: 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:

 

1. just include this file after your pixi.js

 

<script src="pixi.js"></script><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 ); // renderer, isDomContainer, debugMode

 

3. create elements

 

var input = new PIXI.DOM.Sprite( '<input type="text" placeholder="enter message" />' );stage.addChild(input);var iframe = new PIXI.DOM.Sprite( '<iframe>', { src: "http://www.pixijs.com" } );iframe.position.x = 100;iframe.position.y = 100;displayObject.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;

How does it work?

 

For each DOM Element, there will be a PIXI.Sprite with a fake texture. Those PIXI.Sprites are skipping all draw calls and just exist to allow us to attach our DOM Elements to other display objects.

 

On each rendering session we traverse through the object tree of our DOM Sprites to find out if those are visible or not.

If the DOM Sprite is visible, we will take the Sprite's matrix and apply it to our DOM Element.

 

What can't we do?

 

Your DOM Sprites will always be on top of your regular Sprites. 

This will be worked on in later version.

 

Show don't tell? (The demo might lag a little because of the iframe moving around)

http://mokgames.com/pixi-experiments/pixi-dom.html

http://mokgames.com/pixi-experiments/pixi-dom.html?debug=1 (Debug Mode enabled)

http://mokgames.com/pixi-experiments/pixi-dom-2.html (name test, password test)

http://mokgames.com/pixi-experiments/pixi-dom-2.html?debug=1 (Debug Mode enabled)

 

Sidenote: 

 

This plugin is still experimental. I have not tested it on mobile and I should soon optimize the code.

Also I do know a few bugs already, however, I think it would still be benefitial to already post this and have people test it. Maybe you guys can give me some suggestions 

 

Github: https://github.com/SebastianNette/PIXI.DOM.Sprite

[Sebi]

I have added a second demo which further explains the whole purpose of this little plugin.

Username and password are both "test"

http://mokgames.com/pixi-experiments/pixi-dom-2.html (name test, password test)

http://mokgames.com/pixi-experiments/pixi-dom-2.html?debug=1 (Debug Mode enabled)

 

From the demo above:

 

Adding events and accessing the DOM Element

 

Adding events to an DOM.Sprite is dead simple. Just add them to the events property of your options.

Other than that, you can simply add eventhandlers as you need them by accessing the underlying domElement.

The DOM Element can be accessed via sprite.domElement. This gives you full control over the DOM.

 

var submit = new PIXI.DOM.Sprite( '<input type="button" value="log in" />', {   x: 250, y: 250,   events: {    click: function() {      if(username.domElement.value !== "test" || password.domElement.value !== "test") {        alert("login failed");      } else {        showScene( 'game' );      }    }  } } );scenes.login.addChild( submit );

Isn't it quite convenient to simply do something like this?

var header = new PIXI.DOM.Sprite( document.getElementById('game-ui-header') );scenes.game.addChild( header );...var wabbitTexture = new PIXI.Texture.fromImage("bunny.png");var bunny = new PIXI.Sprite(wabbitTexture);...scenes.game.addChild( bunny );

[alex_h]

This looks really useful, I'll give it a try next time I need to add an input field to a Pixi game - thanks!

[d13]

Thanks so much Sebastian, this is extremely helpful and useful!

I was thinking of doing something similar and now I don't have to

You basically re-created ReactJS using Pixi, which is freakin' amazing!

[Sebi]

Thanks so much Sebastian, this is extremely helpful and useful!

I was thinking of doing something similar and now I don't have to

You basically re-created ReactJS using Pixi, which is freakin' amazing!

Thank you

I should look up ReactJS. Never heard of them before, maybe I can get some ideas there.

I already discovered a few issues with my current script.

E.g. children are not sorted yet (need to set the zIndex/translateZ),

the anchor points (transform-origin) don't work properly yet,

tabIndex needs to be worked on to prevent the wrapper from scrolling (Maybe I should actually clip the elements instead of hiding them in the depths of the overflow ), etc.

Also the look up for invisible DOC could need some performance boost too. ( Even though I don't believe that the amount of DOM.Sprites on stage will ever be so significant huge that the performance drops )

That is why I posted this as version 0.1.

[Eugenius]

how interesting. nice work!

[Sebi]

Thanks.

I will work on this next week again. Already got some improvements in mind.

[vitusya]

This plugin is awesome! 

[Daevid66]

This is very usable. Thank you for posting!

 

It would of course be nice to see custom components made entirely in pixi, but it's a lot of work to make them accessable from mobile devices and fully customisable, so this is a nice approach for the more complex inputs.

 

/David

[hubert]

Hey!

 

So as I can see this input is a input created outside canvas and placed on top of it right?! Are there any plans to create a plugin without dome elements that are simulated on the canvas?!

 

https://play.google.com/store/apps/details?id=pl.com.wojciak.kontakt.new_words

 

http://www.sevenative.com

[Sebi]

Well, let's see.

 

The standard input element is pretty easy to create for canvas. Same applies to images (standard sprites), checkboxes (sprite or graphics object), radio buttons (sprite or graphics object) and select elements (preferable graphics object).

Then there are textareas which are pretty annoying to code if you want to allow text selection and also because of the scrollbar.

 

Then there are divs which are basically pixi graphics or sprites (or doc if the div is not styled at all).

 

Table's are rather annoying as well. And as soon as you want to mix text and images it will be a pain to code that for canvas.

 

All in all I believe it's not too complicated to get all kind of inputs working in pixi. Someone just have to do it.

[hubert]

Yeah,

 

I started to play around with it today and i have a working POC but with some bugs, and only input element. The thing is that I am completely allergic to dom in canvas games. Without using pixi there are many libraries doing something like that but in case of pixi everything has to use a normal dom input tag appended to the body element and that sometimes messes up my layout!

 

https://play.google.com/store/apps/details?id=pl.com.wojciak.kontakt.new_words&hl=en

http://www.sevenative.com

[Sebi]

I'm working on an input element too. It's almost finished and will support styling via css, js, text selection, copy/paste, bitmap fonts, event handler (keyup, keydown, submit, etc).
 
I'm curious how your solution will look like.
 
edit:
Took me 12 hours but I do have a fully working input (text/passwords/number) element now for PIXI.
 


Background color/gradients/images, box/inner shadow, padding, vertical align, border color/width/radius, font/color/stroke/strokethickness, placeholders are supported.

 

Input buttons should be fairly easy since those are basically the same as input text except that you cant select/write on those.

 

Select/Textarea will be a pain though.

Still have to fix some bugs.

[Sebi]

edit: I started a new topic for the canvas/webgl version.