Jump to content

CanvasRenderer bug or something very similar


Recommended Posts

Hi and hello there fellas, I'd like to request your help in solving a strange Canvas bug.

First of all I'd like to state that I've already released an Android/iOS game using Pixi.js (and Cocoon.js) so I do have some experience in Pixi.js stuff and I'm at least not a complete rookie.

I've just recently updated my current work-in-progress project from Pixi 2.x to 3.x, which took a few hours because like half the api was deprecated. But thankfully those guys at Pixi made a deprecation.js file which made the changes a lot easier. After updating all parts of my project I have come to a state where it works just like it used to - well, in WebGLRenderer at least.

As soon as I switch to CanvasRenderer (which is a must for me because of performance reasons) all hell breaks loose and images just disposition themselves randomly without any consistency or reason.

I'm attaching 2 images, one from a WebGLRenderer and one from a CanvasRenderer standpoint. (It is important to note that this project worked flawlessly in both renderers back in 2.x.)



So basically, what happens is... I have no idea. What is happening?
In the webgl screenshot you can see that the images are positioned correctly. But in the canvas one, Some of the images are not displayed in the correct position even though their position.x/y or scale.x/y or whatever attributes have obviously not changed at all. Which makes this even more inconsistent is that I have at least 4-5 screens in my game (each being a different DisplayObjectContainer, now Container) and each screen's container seems to render a different amount of images correctly and/or wrong.

I've looked all over my assets' attributes to see what changed but considering that the WebGLRenderer works perfectly and both renderers also worked perfectly in Pixi 2.x I can only assume that there is something wrong with the new CanvasRenderer.

Can anyone with some insight on this or someone famous(!) like Xerver or GoodBoyDigital help me out with this? [:)]
I'd be really grateful!

Link to comment
Share on other sites


After messing around with properties, reading pixi(.dev).js source and reorganizing my project I could narrow down the problem a little bit more:
This "dispositioning" only happens if I am using Spritesheets. If I just simply throw around all the images as individual files, everything works fine.


My spritesheets were packed with TexturePacker (as a command line batch) into .png files (with a max size of 1024*512 per image, so large number of assets go into multiple png and descriptor files).
I've used .json as their descriptor and have rotation allowed in the settings.
It's might worth to note that back in Pixi 2.x TexturePacker rotation wasn't supported (it was stated by some Pixi official) and that's one of the reasons I've upgraded to 3.x.


Anyway, considering the game still works properly in WebGLRenderer without a pixel of error I can only think of the CanvasRenderer doing something wrong!


I'll try to upload a test case (with both renderer types) to show the exact problem.

Link to comment
Share on other sites

Update 2:


I managed to create a test case where things are clearly visible. At first I was unable to recreate the bug, but then modifying the spritesheet json (and probably setting rotated: true and rotating an image frame) made it appear.
So coming from a JS dev perspective... my blind guess is that there is a minor error in the CanvasRenderer code and when it finds the rotated flag as "true" it does the actual rotation but breaks other things (maybe sets or resets some inner properties it shouldn't or someone made a typo there).

Anyway, here is the test case (a zip with 2 projects as folders):

(The grey "Download This File" button is the real one!)

Link to comment
Share on other sites

Hi xerver and thanks for helping out!

I tried the fix but it made no difference whatsoever.
I have to note though that I do not modify/use the "resolution" property on any of my Sprites/Containers neither in the real or the test projects I've uploaded.

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.

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.


  • Recently Browsing   0 members

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