0 Favourites

CocoonJS Screencanvas

  • I modded a Clyde export to enable the new CocoonJS Screencanvas feature and... OMG!!!! THE GAME LITERALLY FLIES!

    FULL 60FPS on a samsung galaxy S advance, 25FPS on my old and crappy Galaxy Ace...

    Now, thats what I call native like performance! :D

    When C2 will officially support it I think there will not be anymore people swearing about mobile performance in this forum :-)

    Edit: there are some minor visual glitches, but... performance is really awesome. Thanks Ludei, thanks Scirra... Future of C2 games on mobile is brighter than ever.

  • Great! i hope that we can use it soon, right now, android performance is the only thing that i dont like :D

  • Just tried it on a Samsung Galaxy Tab 7. Again 60FPS... I'm really impressed (despite inverted accelerometer controls on android honeycomb, but I think ludei is aware of it)

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • I modded a Clyde export to enable the new CocoonJS Screencanvas feature

    Knifegrinder that sounds great! Could you link us to a tutorial on how to do this, or at least share the steps needed to get it working?

  • This is an empirical way to activate screencanvas. As C2 doesn't offically supports it, this may lead to unexpected results... Anyway if you want to try, follow these steps.

    Export to cocoonjs without minifying your script.

    Open in your zip folder the file C2runtime.js

    Find the following snippet of code:

    window["createCocoonJSRuntime"] = function ()

    {

              window["c2cocoonjs"] = true;

              var Canvas = document.createElement("canvas");

              document.body.appendChild(canvas);

              canvas.width = window.innerWidth;

              canvas.height = window.innerHeight;

              var rt = new Runtime(Canvas);

              window["c2runtime"] = rt;

              window.addEventListener("orientationchange", function () {

                  ?window["c2runtime"]["setSize"](window.innerWidth, window.innerHeight);

              });

              return rt;

         };

    Delete it and replace with this

    window["createCocoonJSRuntime"] = function ()

         {

              window["c2cocoonjs"] = true;

              var screenCanvas = document.createElement("screencanvas");

              var rt = new Runtime(screenCanvas);

              window["c2runtime"] = rt;

              window.addEventListener("orientationchange", function () {

                  ?window["c2runtime"]["setSize"](window.innerWidth, window.innerHeight);

              });

              return rt;

         };

    edited><editID>Knifegrinder</editID><editDate>2013-01-04 01:53:51</editDate></edited>

  • I modded a Clyde export to enable the new CocoonJS Screencanvas feature and... OMG!!!! THE GAME LITERALLY FLIES!

    FULL 60FPS on a samsung galaxy S advance, 25FPS on my old and crappy Galaxy Ace...

    Now, thats what I call native like performance! :D

    When C2 will officially support it I think there will not be anymore people swearing about mobile performance in this forum :-)

    Edit: there are some minor visual glitches, but... performance is really awesome. Thanks Ludei, thanks Scirra... Future of C2 games on mobile is brighter than ever.

    Sounds good news, would you explain about minor visual glitches?

  • Sounds good news, would you explain about minor visual glitches?

    I have some problems with large black tiledbackgrouds used as faders, when you exit a layout they seem to disappear just a few frames before the rest of layout breaking the fading out effect. Anyway this is really a minor issue since this is not happening with stretched sprites.

  • This is an empirical way to activate screencanvas. As C2 doesn't offically supports it, this may lead to unexpected results... Anyway if you want to try, follow these steps.

    Export to cocoonjs without minifying your script.

    Open in your zip folder the file C2runtime.js

    Find the following snippet of code:

    > window["createCocoonJSRuntime"] = function ()

    > {

    >           window["c2cocoonjs"] = true;

    >           var Canvas = document.createElement("canvas");

    >           document.body.appendChild(canvas);

    >           canvas.width = window.innerWidth;

    >           canvas.height = window.innerHeight;

    >           var rt = new Runtime(Canvas);

    >           window["c2runtime"] = rt;

    >           window.addEventListener("orientationchange", function () {

    >               ?window["c2runtime"]["setSize"](window.innerWidth, window.innerHeight);

    >           });

    >           return rt;

    >      };

    >

    Delete it and replace with this

    > window["createCocoonJSRuntime"] = function ()

    >      {

    >           window["c2cocoonjs"] = true;

    >           var screenCanvas = document.createElement("screencanvas");

    >           var rt = new Runtime(screenCanvas);

    >           window["c2runtime"] = rt;

    >           window.addEventListener("orientationchange", function () {

    >               ?window["c2runtime"]["setSize"](window.innerWidth, window.innerHeight);

    >           });

    >           return rt;

    >      };

    > /QUOTE]

    Thank you for the concise instructions! You should post this as a tutorial so more users could use this as reference.

  • Thanks for sharing your method with us Knifegrinder <img src="smileys/smiley1.gif" border="0" align="middle" />

    I just tested it with a endless runner platform game that I have been working on, and unfortunately with a older Samsung Galaxy S running 2.3 OS I am still getting only 6 fps. But on newer high end devises like my Nexus 7 my frame rate went up dramatically from 35 to 43 fps to a steady 61 fps. I guess with certain type games we will just have to abandon low end devises.

    I usually use a 32 x 32 px solid black sprite image as a fader, and use events and actions to get a fading effect. But I am also getting strange glitches with it like sometimes it will flicker during fading or freeze on 100% faded leaving the screen black.

    Anyways thanks again for sharing.

  • Well I was going to get around to trying it and posting the results. But most of my day was polishing up my game. You MR have saved me substantial amount of effort. I wasn't sure if I would have to change every check for createElement("canvas") to..... but since you already nailed it right on.

    Go man, go :) i'm hoping to see this in C2 soon. Also Ludie has mentioned that it's still in beta. So who knows. We may see more improvements.

  • I just tested it with a endless runner platform game that I have been working on, and unfortunately with a older Samsung Galaxy S running 2.3 OS I am still getting only 6 fps.

    Only 6FPS? What's your app native resolution? I noticed that in old devices when you use a resolution that is more than half of the GL_MAX_TEXTURE_SIZE parameter (2048 for Galaxy S) there's a huge framedrop.

    It might be a coincidence because I don't know how CocoonJS works behind the scenes, and I really don't know how OpenGl works on mobile (neither on desktops <img src="smileys/smiley4.gif" border="0" align="middle" /> ), but try to lower your resolution and make sure that your textures size are equal or less than 1024px, this maked a huge difference for me with older devices.

    Anyway, welcome to the android fragmentation hell...

  • >

    >

    > Sounds good news, would you explain about minor visual glitches?

    I have some problems with large black tiledbackgrouds used as faders, when you exit a layout they seem to disappear just a few frames before the rest of layout breaking the fading out effect. Anyway this is really a minor issue since this is not happening with stretched sprites.

    Theres allot more to screencanvas, it is amazing but theres tons of bugs with it

    Modern GPUs use double buffering for rendering, which basically means it draws to one buffer on the background while it's displaying the other one, and on the next frame they switch roles.

    Screencanvas uses those buffers as the canvas element itself, so as not to use more memory or performance, but the problem comes on the switch phase: if you draw something just one frame, only one of the buffers will have that image, so when it starts switching back and forth you'll get a very epileptic flickering. On iOS we've found a solution, but that doesn't work on Android, unfortunately.

    thats the main one. Gameplay as well there are some major hiccups caused by the tag on apple and on android it causes better fps but the smoothness is not as good thats my experience so far with it is that it raises fps but risks of major bugs to occur

  • Thanks for the clear explanation... This makes sense, I'll try to force redraw of flickering elements every two ticks and see if this helps.

  • Knifegrinder

    In theory you should be able to draw it just 2 times to fill both the back and the front buffer with the image and then stop drawing some devices like the Nexus7 use triple-buffering, so you might have to render things 3 times to fill all buffers there

    no need to draw every 2 ticks

    yea that response is from an email from ludei when i bumped into a device that had the issue.

    the problem wont occur during gameplay but will happen on a layout that is only drawing an image once adding a sine behavior or bullet to a motionless layout will fix the bug.

    an on start of layout event would also fix it no need to add anything for the level gameplay just if its a layout that is drawing all images once

  • Ludei suggested we use screencanvas a while ago and in my testing it only got a few frames per second extra on modern devices (I think I tested a Samsung Galaxy S3). However it sounds like it's a much bigger gain on old devices. Ludei did say there were bugs they're still trying to fix with it though, so on that basis I decided not to support it in the last stable release. I might experimentally turn it on for the next beta release and see how it goes.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)