Jump to content

Cocoonjs + Pixi js; Canvas looks "Glitchy"; Canvas+ & Webview


Recommended Posts

Hi all,


I'm trying to get a project working in Cocoonjs with Pixi. At first I was under the impression that I could just take my code and place it in a Canvas+ and be good to go. I'm now realizing, to utilize my UI I will need access to the full DOM features, so I also need to use a Webview. Now I am trying to use both and am refactoring my code (side question: Does Ludei claim you can use the same code because it works if you only use a Webview? Do they expect that you can use the same code if you need to use both a Canvas+ and Webview? I don't see how they could since you have to write custom code to make Webview and Canvas+ interact). 


So here's the problem; I finally got all errors and warnings out of the code after doing a bit of refactoring. I've separated all to most of the PIXI/rendering specific code from the jQuery and DOM related code. I load the Webview, the app connects to my game server as expected but the canvas looks glitchy. By that, I mean it looks like what would accompany static on a TV, but less exaggerated. It will be mostly black with glitchy, patterned grey pixels interspersed. Every once in a while it will jump to having more grey static and then go back to more black. I can provide code or screenshots if needed. I am using Pixi v3 (I think v3.0.6). I am also using pixi-spine (unsure of the version). Autodetect renderer seems to be using Canvas renderer. Has anyone experienced (and fixed) this kind of thing?

Link to comment
Share on other sites

I think I figured this one out on my own. It seemed like a combination of things, here is what I fixed to get it working:


a.) I wasn't calling loader.load().... Duh


b.) I'm now using window.requestAnimationFrame() instead of requestAnimationFrame


c.) I segmented out the code further and removed more instances of jQuery being called from Canvas+ and references to undefined global variables


d.) Removed a couple sprites that exceeded max texture bounds; errors for this did not appear until resolving the issues above


In conclusion, it seemed like my Containers were getting initialized but not drawn too and code was stopping abruptly so something about that was causing a "static-y" look.


I foresee getting much headache in trying to get Canvas+ and Webview to play nicely, mainly in getting information from Canvas+ to Webview. For example, if I render a Sprite in Canvas+, the reference (and click handler) now live in that environment and I'm unsure of how to make the Canvas+ handler trigger an event in Webview. 

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...