I managed to inject Cocoon Canvas+ in Phonegap and got super performance. [Workaround while we wait for Cocoon.io to fix their issues]


#1

Cocoon has many problems lately and I was not able to compile at all with it or my app was crashing.

I tried to compile with PhoneGap but my performance was worse. I was looking for Cocoon alternative as many people in the forum lately.

So today I found out that you can just use the Cocoon plugin in Phonegap and enjoy Canvas+.

This is the plugin: https://www.npmjs.com/package/cocoon-plugin-canvasplus-common

You have to follow the instructions and include the two js files manualy:

	<script src="cordova.js"></script>
	<script src="lib/cocoon.js"></script> 
	<script src="lib/cocoon_canvasplus.js"></script>

Then render the canvas from JS as you usually do in Cocoon. I don’t know if this messes with plugins like ads/social, etc… I am not using any of those.

For me what was not working initially was the app pause/resume mode, but I replaced those lines with the PhoneGap code and it worked.
Replace:

			Cocoon.App.on('activated', function() {
			if (ig.game) {
				if (ig.music.volume > 0) {
					ig.music.play();
				}
				ig.system.startRunLoop();
			}
		});
		Cocoon.App.on('suspending', function() {
			if (ig.game) {
				if (ig.music.volume > 0) {
					ig.music.pause();
				}
				ig.system.stopRunLoop();
			}
		});

with:

			document.addEventListener("resume", function() {
			if (ig.game) {
				if (ig.music.volume > 0) {
					ig.music.play();
				}
				ig.system.startRunLoop();
			}
		}, false);
		
	document.addEventListener("pause", function() {
			if (ig.game) {
				if (ig.music.volume > 0) {
					ig.music.pause();
				}
				ig.system.stopRunLoop();
			}
		}, false);

I also replaced the Cocoon URL open with the common Cordova call.

I replaced:

Cocoon.App.openURL(url);

with
cordova.InAppBrowser.open(url, '_system');

Now I have canvas plus and my performase is better than in PhoneGap but my app also doesn’t crash and compiles without problems.

Hope this helps someone.


Android Awaiting
#2

I think it is not include all libraries. (For Android). They private I think.

com.ludei.canvasplus.android@2.6.0
com.ludei.defaultres.android@1.0.1

I tried it, I have this problem. Scale issue
I mean I see only orange area in my phone. I need see blue area.
image


#3

could you help to describe it step by step with more details?


#4

Could you please share your config.xml file here that is used for phonegap build.


#5

I am on a travel today and I will post it tomorrow.


#6

I’m using github as my repo https://github.com/arcadesindo/cocoontest, don’t know if this wrong or not, because after compiling and install it to my phone, just blackscreen appear. Could you check this please @phpshindaroff ?

also this is my Installed plugins


#7

@arcadesind I am almost sure the problem comes from the adsmob plugin.

For everyone trying to get this work I recommend that you start with the most simple stuff: just try to integrate Cocoon Canvas plus and remove all plugins and their try to add them later. I am also quite sure that the Cocoons’ plugins will not work because they themselves are the reason why I Cocoon.io has problems right now. So in my opinion you should get working the canvas plus engine and compile using Cordova code and phonegap and then add on Cordoba plugins instead of the Cocoon’s plugins.

So this is what I did. I took my entire cocoon code which was working in the past when being compiled on Cocoon.io and I added the Canvas plus engine by editing my index.html and config.xml.

This is my config.xml file:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.app"
    versionCode = "125"
    version     = "1.2.5" >

<!-- versionCode is optional and Android only -->

  <name>App</name>
<preference name="phonegap-version" value="cli-7.0.1" />
	<description>App description.</description>
	<author email="contact@app.com" href="https://app.com/">App Developer</author>
	<preference name="KeepRunning" value="true"/>
	<content src="index.html"/>
	<preference name="Orientation" value="portrait"/>
<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
	<preference name="Fullscreen" value="true"/>
		<plugin name="cordova-plugin-whitelist" spec="~1.3.3"/>
	<icon src="icon.png" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
	<platform name="android">
		<allow-intent href="market:*"/>
		<preference name="enabled" value="true"/>
		<preference name="android-minSdkVersion"        value="21" />          
        <preference name="android-targetSdkVersion"    value="26" />
		<icon src="icon.png" height="1024"  width="1024" />
		
	</platform>
<platform name="ios">
	<icon src="icon.png" height="1024"  width="1024" />
	<icon src="icon/ios/icon-40.png" height="40"  width="40" />
	<icon src="icon/ios/icon-57.png" height="57"  width="57" />
	<icon src="icon/ios/icon-72.png" height="72"  width="72" />
	<icon src="icon/ios/icon-76.png" height="76"  width="76" />
	<icon src="icon/ios/icon-120.png" height="120"  width="120" />
	<icon src="icon/ios/icon-152.png" height="152"  width="152" />


	<allow-intent href="itms:*"/>
	<allow-intent href="itms-apps:*"/>
	<preference name="enabled" value="true"/>
</platform>
  <!--splash src="splash.png" /--> <!-- add splash for ios, remove for android -->
  <access origin="*" />

<!--plugin name="cordova-plugin-splashscreen" spec="~5.0.2" /-->  <!-- add splash for ios, remove for android -->
<plugin name="cordova-plugin-network-information" spec="~2.0.1" />
<plugin name="cordova-plugin-inappbrowser" spec="~3.0.0" />
<!--plugin name="cordova-plugin-dialogs" spec="~2.0.1" /-->
<plugin name="https://github.com/Ermag/adialogs.git" spec="https://github.com/Ermag/adialogs.git" />
<plugin name="cordova-plugin-globalization" spec="~1.11.0"/>
<plugin name="onesignal-cordova-plugin" spec="~2.4.3"/>
<plugin name="cordova-plugin-vibration" spec="~3.1.0" />
<plugin name="cordova-plugin-device" spec="~2.0.2" />
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.4" />
<plugin name="cordova-plugin-hidden-statusbar-overlay" spec="~2.0.1" />
<plugin name="cocoon-plugin-canvasplus-common" spec="~1.2.0" /> 	  <!-- cocoon -->
<!--plugin name="cordova-plugin-crosswalk-webview" spec="~2.4.0" /--> <!-- croswallk --></widget>

This is the canvas plus pluggin which I’m adding to it:

	<plugin name="cocoon-plugin-canvasplus-common" spec="~1.2.0" /> 	  <!-- cocoon -->

And then you have to create these two JavaScript files, include them in your project and link to them from your index HTML file:

https://github.com/ludei/cocoon-common/blob/master/src/js/cocoon.js
https://github.com/CocoonIO/cocoon-canvasplus/blob/master/dist/js/cocoon_canvasplus.js

This is my index.html:

<!DOCTYPE HTML>
<html>
	<head>
		<!-- META -->
		<meta charset="utf-8" />
		<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, viewport-fit=cover" />
		<link rel="shortcut icon" href="img/favicon.png" />

	<!-- CSS -->
	<link href="css/main.css" rel="stylesheet" />

	<!-- JS -->
	<script>
		var wg = {}; // Our global game namespace
		wg.mediaPrefix = 'media/';
		var viewportScale = 1 / window.devicePixelRatio;
		document.getElementById("viewport").setAttribute("content","user-scalable=no, maximum-scale=2, minimum-scale=0.2, width=device-width, height=device-height, initial-scale="+viewportScale); 
	</script>
	<script src="cordova.js"></script>
	<script src="lib/cocoon.js"></script> <!-- Cocoon -->
	<script src="lib/cocoon_canvasplus.js"></script> <!-- Cocoon -->

	<script src="lib/loading-list.js?v=34"></script>
	<script src="lib/translations.js?v=34"></script>
	<script src="lib/objects.js?v=34"></script>
	<script src="lib/items.js?v=34"></script>
	<script src="lib/game.min.js?v=34"></script>
	<!--script src="lib/impact/impact.js?v=33"></script>
	<script src="lib/game/main.js?v=33"></script-->

	<title>App</title>
</head>
<body></body></html>

Then in order to confirm that the plugin is successful installed and you’re using indeed canvas plus instead of webview you can make a test with an alert on loading:

	window.onload = function() { 
		if (typeof Cocoon === 'object') { 
              alert("Loaded Canvas+ from Cocoon");
        }
    }

If the alert doesn’t show up then something is wrong and you have to check what’s going on. I have no idea what could be the problem in this case because for me it worked from the very first time.

Let me remind one more time: to increase your chance for success remove all of Cocoon plugins initially and try just this. After this if it work you can test your game and check its performance. I was definitely able to feel the increased performance. Then I started to check my game for bugs if something was not working because of the usage of Canvas+ without Cocoon.io.

As I said in my initial post I had to replace these lines:

Cocoon.App.on('activated', function() {
		if (ig.game) {
			if (ig.music.volume > 0) {
				ig.music.play();
			}
			ig.system.startRunLoop();
		}
	});
	Cocoon.App.on('suspending', function() {
		if (ig.game) {
			if (ig.music.volume > 0) {
				ig.music.pause();
			}
			ig.system.stopRunLoop();
		}
	});

with these lines:

document.addEventListener("resume", function() {
			if (ig.game) {
				if (ig.music.volume > 0) {
					ig.music.play();
				}
				ig.system.startRunLoop();
			}
		}, false);
		
	document.addEventListener("pause", function() {
			if (ig.game) {
				if (ig.music.volume > 0) {
					ig.music.pause();
				}
				ig.system.stopRunLoop();
			}
		}, false);

as well as:

Cocoon.App.openURL(url);

with:

cordova.InAppBrowser.open(url, '_system');

For me the logic is that you should forget about all Cocoon specific plugins and stuff except the way you render the canvas:

	        var canvas = document.createElement('canvas');
            canvas.screencanvas = true; 
			Cocoon.Utils.setWebGLEnabled(true);
			Cocoon.Utils.setNPOTEnabled(true);

And for everything else (adds, social, notification, etc…) you should use the basic Cordova plugins.

Please note that I did all of the above only for the Android version of my game. For iOS I used pure Cordova + WKWebView and I got performance which is better even than Cocoon.io. The only disadvantage of WKWebView is that it lags the first 2 seconds or so before it’s get properly loaded. For that for this reason I added 2 seconds timeout before my game starts loading/spawning sobjects and animations, and after those 2 seconds the performance was amazing.

In order to add WKWebView you need to do the following. Add these lines to your config.xml:

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
	<plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.4" />

And after this use pure common Cordoba code without any Cocoon stuff.

Well that’s it. I hope it will work for you and let’s hope that Cocoon team will soon fix their issues and we will be able to use Cocoon.io as before without such work arounds.

By the way a bit offtopic but my game is not working on Android below version 5. I think it never worked on it. I’m getting black screen after loading the app and I don’t know how to solve it. Even alerts on window.onload does not work. The black screen is there with Cocoon or without it and I have no idea how to solve this. I couldn’t get it running even the with crosswalk. Any idea how to solve this is highly appreciated.


#8

Wow, thank you so much for that :smiley:


#9

You are welcome but let’s first see if it works for you too. So far I still have’t helped anyone.


#10

is this process good for those who use construct 2?


#11

I don’t know. I use ImpactJS.


#12

Hi @phpshindaroff.

Are you certain you actually got Canvas+ working in your app? Are you certain of your performance gains?

I followed your instructions, and my app appears to be working fine, but I did not notice any performance gains.

Furthermore, the following test your provided does not actually indicate that Canvas+ is working. It merely indicates that some JavaScript was run that instantiated the Cocoon object (to what effect I’m not yet sure):

window.onload = function() { 
    if (typeof Cocoon === 'object') { 
          alert("Loaded Canvas+ from Cocoon");
    }
}

However, I tried to come up with a more convincing test, such as calling into the Canvas+ API directly:

// http://cocoonio.github.io/cocoon-canvasplus/dist/doc/js/Cocoon.Device.html
alert( JSON.stringify(Cocoon.Device.getDeviceInfo()) );

Within Cocoon, this alert provides a ton of information. However, in PhoneGap, it comes back with the message “undefined”. This seems to suggest the plugin may not actually be working?

Can anyone provide some additional evidence that this configuration is viable? I would love to get this working.

@phpshindaroff, are you doing these tests using the PhoneGap Developer App? Or are you making full-blown builds?

Edit: OK, I just did a test where I created a for-loop to draw enough times to bring the frame-rate below 60 FPS. My app nows run at a constant 42 FPS in the title screen. I then removed the Canvas+ plugin and played the app again. Once again it performed at a constant 42 FPS. So it really seems Canvas+ is not working for me…


#13

I didn’t measure FPS but I saw difference. Actually on Android <= 4.4 it was worse with Cocoon. I disabled those devices from minSdkVersion. As per higher Android version, it was definetely better with Cocoon. Sorry to hear it didn’t work for you.


#14

Hi phpshindaroff. I’m not sure why you’re seeing performance gains, but it doesn’t make sense. You’re including the cocoon-canvasplus-common plugin in your config.xml, which pulls that NPM project into your build. If you go look at that NPM project, it’s 100% JavaScript. Canvas+ is obviously more than mere JavaScript. Therefore, the proprietary Cocoon Android code (perhaps Java or C) is not in your build. The backbone of Canvas+ is not in your build. This is why you need Cocoon.io to build for you. They are the only ones who have the Canvas+ native source code. It’s not available to the public.


#15

I also don’t think it’s possible with just the js files…


#16

Hello,
I just want to ask how did you make screen scaling working?
I cannot fix it.
My app resolution is 1600Ă—900
On my fullhd mobile screen it’s too small.
Thanks for reply.