In order to get the best result on CocoonIO using Construct 2 as Framework you should use the recommended Project Settings.
Project Settings
Loader Layout
Always use a loader layout! This lowers the black screen gap on the first game start. So set this to On and setup your Loader Layout.
Pixel Rounding
Set this to “On”. This will reduce the CPU Usage needed for rendering positions. So if your object has the position 103.243, 123.232 it will be rounded to 103,123.
Window Size
To fit best on both, a mobile phone and a tablet, it’s recommended to use a 16:9 screen ratio (1280,720). But the latest tablets are using mostly 16:10 display ratios, so I personally recommend you a Window Size of 1280×800 px.
Configuration Settings
Fullscreen in Browser
Games made with CocoonIO do not support any Letterbox Scale methods. Only Scale Outer and Scale Inner are supported. I personally recommend you to use Scale Outer.
Fullscreen Scaling
Let this on High Quality (default value).
Use high DPI Displays
Let this on Yes! Mostly each new device has a high DPI Display (especially Apple devices).
Enable WebGL
Set this to On! Otherwise your game scaling will not work like it should. Moreover the overall performance is better then.
Physic Enginge
Use here the Box2D web engine.
Loader style
Do not use the new Construct 2 Splash. This will lead to a black screen and your game crashes right after start. Moreover do not use any loader style with a progressbar while using Canvas+. Due to the fact that Canavs+ do not support progress bars (DOM restrictions)
Optional
Following settings are optional, but recommended.
Preload Sounds
If you have a lot of sound files in your project, this option can cause a long gap (Black Screen) on start of the game. Just set this then to off and preload the sounds manually when they are needed.
Clear Background
If your game background is coverd by an object, like a background image, set this option to No.
Canvas Plugins
If you are using any of Ludei’s Cocoon Plugins, make sure that you add the condition “Is Canvas+” BEFORE you use any actions or conditions of those plugins.
Download
You find the Construct 2 templates attached to this post. Just click on the (+) below.
nice+
Thank you!