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

[Shadowstep33]

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?

[Shadowstep33]

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. 

[Shadowstep33]

Related to the whole "Dur, how do I send information to Webview from Canvas+?" 

 

Use Cocoon.WebView and not Cocoon.Webview....

[Shadowstep33]

Actually, nevermind about the prior post. WebView is correct vs. Webview, but it doesnt seem to have a .forward method

[Shadowstep33]

Use Cocoon.App.forward for both sending info to the WebView and to the Canvas+. Just depends on which environment you use the command from. 

[dearcj]

Hi

Is it glitchy on mobile or in browser? and if on mobile whats mobile are you using?