My pixi.js based project and experiences

[Kalith]

Hi, I'm Kalith and since I've created a project based on pixi.js, I thought it was about time to introduce myself and share my experiences. Especially because it's something a little bit different to your typical pixi projects.

I created wottactic.tk Is a collaborate tactical planner for world of tanks, world of warships and armored warfare. Technically it's a web whiteboard with a lot drawing options, with predefined maps/icons. At peak times it has roughly 1000 unique users in 200-300 rooms and is still growing.

 

First of all I really do like Pixi.js, I don't think I could have progressed so fast without it and the performance has been very good, making it a very smooth experience even compared to similar whiteboard applications.

 

Problems I've encountered:

 

Pixi.Graphic:

As you can imagine I used this quite extensively. Most of my vices will be centered around this one.

It would be nice to have built in support to draw a smooth curve through a set of points. I was able to work around it using this technique: https://www.particleincell.com/2012/bezier-splines/ and using bezier curves. But I think a built-in option to make a smooth path would be very helpful.

Another problem I frequently ran into was the following. In a lot of places I have a Pixi.Graphics object, I make a tiny update to it and render it (typically every time a use moves a mouse 1 pixel). Do that enough times and any browsers start experiencing freezes. The problem does not seem to occur when you drop the render calls. Even recreating the Graphics object from scratch every iteration seems to perform better than alternating between tiny updates and render calls. (see demo in next post)

Another thing I missed was a pixel color based hit detection. Sometimes drawing a polygon as hit area just doesn't cut it. An accurate polygon around curve that interpolates a few hundred points is not a good idea. I fixed it by using some code for PIXI.TransparencyHitArea I found, fixed it up a bit and it worked fine, but it would be nice if it was part of the core.

Lastly, is it possible to add some form of anti aliasing to Pixi.Graphics, it would make it look a little nicer.

 

PIXI.Text:

Honestly it just doesn't look great and scaling makes it worse. I know font sizing is a complex topic, it needs work imo.

 

[ivan.popelyshev]

Graphics stores all operations that you made. If you dump it into separate texture (there's method for that) or use clear() method, it will work fine.

[ivan.popelyshev]

That's how pixi works: all contents will be rendered EVERY FRAME. If you want to work with buffers and draw something that will be used later, use Texture and methods that are work with it, like

var tex = htaphics.generateTexture(renderer);

 

[Kalith]

I see I need to create a bit of a demo.

Demo1: http://wottactic.tk/demo.html

Open it in FF and just hold the left mouse button and start drawing. Eventually it will start freezing for +- 0.5s, visually you'll see a jump.

Demo2: http://wottactic.tk/demo2.html

Visually the same but no freezes. What i did is just every 50 frames, I create a new Pixi.Graphics obj, make the old one a child of it and start drawing on the new Object.

[fire7side]

The first demo didn't freeze for me and I kept drawing till it was totally full of scribbles.  Interesting project, though.  I think I'll write something for drawing polygons on sprites that need a smaller hit area with line graphics and have it dump the coordinates.  Pixi is really useful for so many applications.

[Kalith]

3 hours ago, ivan.popelyshev said:

That's how pixi works: all contents will be rendered EVERY FRAME. If you want to work with buffers and draw something that will be used later, use Texture and methods that are work with it, like

var tex = htaphics.generateTexture(renderer);

 

About generateTexture, when you create texture from a graphic object, assign it to a sprite and move that sprite to exactly overlay the original Graphic object, then it is not exactly the same, some filter gets applies in the process. Basically I do something like:

var texture = graphic.generateTexture();
var sprite = new PIXI.Sprite(texture);
var box = graphic.getBounds();
	
sprite.x = box.x;
sprite.y = box.y;

Then add the sprite and remove the Graphic Object.

See: http://wottactic.tk/wotplanner.html, and try to draw a line with the pencil. When you're done drawing that code above is exactly what I do and on screen you'll see the texture created from the Graphic object is not the same.

It's not actually a problem or anything, in fact the resulting texture does seem to have some blurring AA applied to it, which actually makes it appear smoother. But it is because of this I can not actually replace part of a drawn line with a texture.

 

[ivan.popelyshev]

Sorry, I forgot that I posted solution to this thing a while back: http://www.html5gamedevs.com/topic/20652-limit-to-number-of-circles/#comment-117413

That solution allows to embed "native" canvas2d which has better antialiasing than pixi graphics.

UPD. online WoT planner is a very good thing

[Kalith]

 

2 hours ago, ivan.popelyshev said:

Sorry, I forgot that I posted solution to this thing a while back: http://www.html5gamedevs.com/topic/20652-limit-to-number-of-circles/#comment-117413

That solution allows to embed "native" canvas2d which has better antialiasing than pixi graphics.

UPD. online WoT planner is a very good thing

Thank you for your suggestion. I did give it a bit of a try on that demo I made: http://wottactic.tk/demo3.html. Tbh, it's not even using pixi at all any more, it's just overlaying a canvas and it does feel and look better.

So should I just go ahead and change all drawing code with canvas overlays->sprites or will PIXI.Graphics get some anti-aliasing at some point ? canvas2d interface looks pretty much identical, but it would be quite a bit of code to rewrite and I'm sure it comes with it's own set of problems.

[ivan.popelyshev]

The easiest way for you is to implement functions that you use in your own interface that will be identical to PIXI.Graphics. 

PIXI is all about sprites and webgl acceleration for them, drawing and updating textures better with "native" interface.

For example,if you want to move Tank icons , its easier to do with pixi

[PixelPicoSean]

What's the problem with PIXI.Text? You can pass window.pixelDeviceRatio as the second parameter to let it display pretty well on Retina screens. I didn't see any bad looking issues with the native text drawing behavior.

[Kalith]

15 hours ago, PixelPicoSean said:

What's the problem with PIXI.Text? You can pass window.pixelDeviceRatio as the second parameter to let it display pretty well on Retina screens. I didn't see any bad looking issues with the native text drawing behavior.

 

Try to create some text on the website linked above, even when you create it, it doesn't look very sharp. Now try to adjust the size of the window a little bit and it gets blurry beyond all recognition.

This is what I think happens: Text gets created properly using a dedicated API as it should. But scaling is applied after it is created. What should happen when you resize some Pixi.Text object, is the font size should be adjusted and the the text re-rendered, this is clearly not happening.

Retina screens are actually pretty forgiving, they have a pretty high dpi, which makes them still sharp even when stretched a bit. And your app may use little to no scaling.

[Kalith]

56 minutes ago, Kalith said:

 

Try to create some text on the website linked above, even when you create it, it doesn't look very sharp. Now try to adjust the size of the window a little bit and it gets blurry beyond all recognition.

This is what I think happens: Text gets created properly using a dedicated API as it should. But scaling is applied after it is created. What should happen when you resize some Pixi.Text object, is the font size should be adjusted and the the text re-rendered, this is clearly not happening.

Retina screens are actually pretty forgiving, they have a pretty high dpi, which makes them still sharp even when stretched a bit. And your app may use little to no scaling.

Actually thinking about, it could just recreate the text objects myself when re sizing, so I implemented that. Still I feel it doesn't look quite right, but maybe, even an outlined font against a crowded background is never going to look good.