Cocoon.io - Canvas+ - Scale issue

Hi, I am getting scale issue on my tablet after compiling my game on cocoon.io using Canvas+ Webview engine. I’m currently running the game on Samsung Galaxy Note PRO 12.2. See image below. Has anyone encountered the same issue and able to fix it? Any help will be appreciated.

Have you tried enabling ‘Device Pixel Ratio’ in the Project Settings?

No, I will try and get back to you shortly. Thanks.

Okay enabling ‘Device Pixel Ratio’ solved the fullscreen issue. But now I have two more.

  1. The frame rate is gone down. Thus, game is really slow.
  2. Overlaid canvas shapes aren’t visible.

See image for expected result.

So the performance problem is because you are, presumably, using the Canvas mode of Cocoon. This is the mode which doesn’t contain a web browser and can only handle a single canvas element. You won’t see other DOM elements. Instead, Canvas mode will just translate WebGL calls through to OpenGL ES calls. I believe it’s supposed to be more memory efficient and perhaps even faster than running Cocoon in a WebView mode.

So, if you want to do DOM stuff as well, you need to run Cocoon in WebView mode. I suspect the only way you’d be able to run your game at native device resolution (by selecting Device Pixel Ratio) would be to render your environment as unlit/lightmapped. Currently, I’m betting you’re doing per-pixel lighting on just about every pixel onscreen. That’s going to be slow on mobile hardware.

To summarise: Run cocoon in WebView mode with Device Pixel Ratio disabled. That should remedy the problems you describe.

You are right, but I thought canvas+ would do better. I tried with Webview+ and it works fine except for the resolution, the final resolution looks a bit blurry. See image below taken on my tablet.

.

Do you know why this is happening? Gameplay runs smooth and works fine though.

I guess I will stick to Webview+ for now.

I guess it’s more blurry than Canvas+ because your rendering at quarter device resolution but with anti-aliasing enabled (which is the default for WebGL). I’m not sure what can be done apart from rendering at full device resolution (enabling Device Pixel Ratio) but, as you saw, that can kill framerate since you’re shading 4x pixels.

Do I really need to render my environment as unlit/lightmapped to get good performance? And what do you mean by unlit? (To remove all light object in the scene?)

If so I only have one directional light at the moment or maybe the right question to ask is what steps should I take to get the best performance?

On relatively underpowered mobile hardware, if you want to target resolution >1080p, yes, I’m afraid so.

I just realised we never documented light masking in PlayCanvas. So I just committed this:

Essentially, doing the following disables lighting on a mesh instance:

meshInstance.mask = 0;

Say you have a character on a terrain. You will probably want to lightmap the static terrain geometry and dynamically light the character. So you’d set the terrain’s mesh instance masks to 0 and leave the character’s set to the default of 1.

We’ll add the ability to set this masking up in the Editor at some point. :smile: For now, you need to do it in script.

Does that make sense?

Yes, all make sense. :smile: I will give it a try and get back to you. Thanks.

Hi Will,

Do have a sample code I can use? I mean using meshInstance.

Sorry, sample code to do what exactly?

How to set mask on meshInstance.
I’m aware of this.entity.model.model.meshInstances; but not meshInstance.mask = 0;

Do you mean to set meshInstance.mask in meshInstances on an Entity?

Can I access meshInstance.mask from an Entity?

meshInstance are inside of model’s meshInstances field. @will just made it look short to give an idea.
It is accessed from entity.model.model.meshInstances.

Thanks Max. Got it. :smile:

It would be nice to have an option for this in the Editor. :smile:

Yep. There is a ticket for that feature :smile: There are few fixes to be made to make it work better in runtime though.

Sweet, I look forward to it. :smile:

Hello, this is Iker, from Ludei/Cocoon.

Canvas+ is a performant canvas implementation. As @will correctly stated, it does not provide DOM support, so if you want to use DOM for those overlay HUD elements it won’t show them. Maybe you could render them using WebGL? I am not sure how to do it in PlayCanvas though. Canvas+ is usually more performant than WebView+ although WebView+, being a full fetched browser based on Chromium and WKWebView, it will render those DOM/DIV elements.

Happy to help make you game run on Canvas+ if I can. Maybe, if performance increases, it might be worth the change of those HUD elements.

Regards,
Iker.

hi, where is the ‘Device Pixel Ratio’ in the Project Settings location?? I can’t find it anywhere

thanks

In the Editor Settings panel. Click the Cog icon in the bottom left corner.

http://developer.playcanvas.com/en/user-manual/designer/settings/