Jump to content

My pixi.js based project and experiences


Kalith
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...