How to actually use Cocoon.io

[semk]

I'm trying to make my game for several months now and I've just become very frustrated with the level of difficulty it takes to port an HTML/JS game to mobile (iOS and Android).

I was using phonegap which was a bit hard to figure out but eventually pretty straight forward but the problem was performance, I can't stand the jank I have on my game which isn't even very complex.

So I saw a few threads of people recommending cocoonjs which is now cocoon.io and it's not so straight forward as they claim it is.

First off I have no idea how to actually build my game in cacoon.io even though it provides you a "web 2 app" button, I hosted my game on my website and I can hit it on my browser just fine and play it, but the build on cocoon doesn't show anything. I can't figure out how to use any of it, it just gives me zip files with nothing but barebones files when I click "compile". 

Does anyone actually use this? How do you get it to work?

[NasimiAsl]

hi

i make a project in Webgl and Babylon js

create account upload my source with index.htm after that i chose Canvas+ in setting and  publish 

and in last step publish for Developer and download automatic .apk and other file for app store (apple store)

[semk]

thanks a lot man! I was able to figure some of this out on my own, and i'm going for iOS firstly so i had to figure out how to do the provisional distribution and stuff to get it to run on my device, yikes so complicated...

right now I can't seem to get my game to run on canvas+ it's just a black screen. 

I'm using ivank.js which is webgl and canvas so i'm pretty sure it should be supported, 

on webview+ the game looks distorted and some elements are missing/glitched

on webview it works fine but with the same performance of phonegap which isn't very nice because i see frequent stuttering and jankyness  

any advise on what i'm doing wrong with canvas+ ?

[BobF]

You might want to check out NativeScript. I haven't used it yet, but it's the solution I plan to check out first once I'm ready to go mobile.

[semk]

On 5/12/2016 at 4:36 PM, BobF said:

You might want to check out NativeScript. I haven't used it yet, but it's the solution I plan to check out first once I'm ready to go mobile.

after messing around with it for the past few days, NativeScript does not look it it supports webgl/canvas elements yet, looks like some work is being put into it but nothing substantial yet https://github.com/NativeScript/nativescript-canvas

I've yet to receive any feedback from cocoon.io support either, there doesn't seem to be a way to turn my game into an app... i guess i have to learn swift from the ground up, this is highly disappointing 

[BobF]

21 hours ago, semk said:

NativeScript does not look it it supports webgl/canvas elements yet

Rats. NativeScript looks like a nice technology, but you're right, it doesn't appear to support WebGL.I might have realized that if I had looked at their app showcase... they're all non-game apps. Sigh.

[none-9999]

cocoonJS does not accept degraded, maybe you can check that, app development also has a console that will tell you if there are other errors (gradient not shown)

[semk]

On 5/17/2016 at 3:22 PM, BobF said:

Rats. NativeScript looks like a nice technology, but you're right, it doesn't appear to support WebGL.I might have realized that if I had looked at their app showcase... they're all non-game apps. Sigh.

this gives me another idea though, i had another prototype made with DOM elements... but it also suffered performance issues once i phonegapped it, maybe nativescript will speed that version up, fingerscrossed 

I'm not sure what the deal with nativescript is, it seem like they want you to reprogram your app using their api, but they also provide a 'wkwebview' plugin straight for cordova, and there is another one from cordova devs themselves, which is supposed to enhance the performance, but for me it doesn't seem to work (neither one) either no performance gain or doesn't load, and the plugins require differnet versions of the cordova ios platform so it was a pain to test

actually now i'm stringing together my DOM prototype, restructuring it as cocoon suggests and pushing that to their system and it's producing me an xcarchive that so far has the best performance, this might be what i stick with overall since it's also the quickest path to a pushable app to the app store, looks like cocoon will pull through but not with canvas+  still wish i could get this to work with my webgl version...

[OkijinGames]

I have been using Cocoon for 3 years now and is probably the best runtime for pushing HTML5 projects on the App Stores. What error do you get in the console if at all (remember that you should create the canvas element dynamically etc..)?

 

[semk]

On 5/19/2016 at 7:08 AM, OkijinGames said:

I have been using Cocoon for 3 years now and is probably the best runtime for pushing HTML5 projects on the App Stores. What error do you get in the console if at all (remember that you should create the canvas element dynamically etc..)?

 

Thanks man, with your experience i hope we can fix my issues  

Here's how I load my file and my canvas is created dynamically anyway for the framework that i use:

       

Quote

<script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript">
            document.addEventListener('deviceready', function(){
                var canvas, canvasContext2D, s, ss;
                // Create a canvas and draw something in it.
                canvas = document.createElement("canvas");
                canvas.setAttribute('id','c');
                canvasContext2D = canvas.getContext("webgl");
                document.body.appendChild(canvas);
                s=document.getElementsByTagName('script')[0];
                ss=document.createElement('script');
                ss.type='text/javascript';
                ss.async=true;
                ss.src= "wrapped.js";
                s.parentNode.insertBefore(ss,s);
            }, false);
        </script>

"wrapped.js" is everything for my app, matter.js + ivank.js + myapp 

and this is the error i see (error.png attached), it says range size exceeded on 'timer' but I don't have a 'timer' anywhere in wrapped.js at all. 

[none-9999]

Hello, you need not be dynamically created the canvas object. Look like I do

 

'use_strict';

if(window.cordova){
        document.addEventListener("deviceready",Init, false);

}else{

document.addEventListener("load",Init, false);

}



function init(){
    
            
        scaleX=(ancho/window.innerWidth);
        scaleY=(alto/window.innerHeight);
        
        canvas=document.getElementById('canvas');
        ctx=canvas.getContext('2d',{antialias:false});
        canvas.width=ancho;
        canvas.height=alto;


        //frontal layer
        canvas.style.position='absolute';
        canvas.style.backgroundColor='transparent';
        canvas.style.top='0';
        canvas.style.left='0';
        canvas.style.width='100%';
        canvas.style.height='100%';
        canvas.style.zIndex="10";
        
    //background layer
    canvas2=document.getElementById('esce');ctx2=canvas2.getContext('2d',{antialias:false});
    canvas2.width=ancho;
    canvas2.height=alto;
    
    
   
        canvas2.style.position='absolute';
        canvas2.style.backgroundColor='#000';
        canvas2.style.top='0';
        canvas2.style.left='0';
        canvas2.style.width='100%';
        canvas2.style.height='100%';
        canvas2.style.zIndex="0";
        
        enableInputs();
       
        toLoop();


    }

 

[semk]

Actually I've shelved the webgl project for now and am trying to get my famous.js version running instead.

 

Things work great until I try to test the Game Center integration,

I can get it to login but when I try to showLeaderboards or submitScore, the game freezes. I've validated that my Cocoon.GameCenter.Interface exists and isLoggedIn but still freeze after trying and getting no where, i started to integrate the admob plugin and again, same thing, when i call createInterstitial the game just freezes, and this is all through the dev app compilation with both plugins (cocoon social game center and cocoon ad mob)  

got the ads working or at least a banner ad on the top/bottom, the interstitial fails but i think that's because the app isn't live, can anyone confirm?

what about the GameCenter freezing? anyone ever encounter this before? is it because my leaderboard isn't live yet? I've set it up in iTunes connect but it says "not live" under status.

both ads working now 

ok, so looks like there is a type in the integration docs, there is no command called "showLeaderboards" , its "showLeaderboard" ... 

so i got leaderboard working now, but scores aren't populating, submitScore is called and doesn't freeze now but still no scores in the actual leaderboard when i call it to show

 

[Ajillity]

Semk,

Could you please post some of the code that's worked for you re: the canvas; showleaderboard; submitscore, etc.

I'm just getting started in Cocoon and having all of the same problems that you reported last month.  All examples are appreciated.  

Thanks so very much,

..Aji

[Ajillity]

Here's the basics of Cocoon that I have figured out and may be helpful to other people.

1. In Cocoon, start off by going thru the "Guided Creation" for Multiplayer Example, and choose Canvas.  This will set up the code for a little tic-tac-toe game.  Great, now look at your Project page.  Notice the 4 dark blue icons/circles for your project.  

1B. Click the hammer icon to Compile.  Notice that the ios and android circles on your project will say "waiting."  They are waiting for a chance to compile on the server, this could take 10 minutes or longer.  (The more you pay cocoon monthly, the faster your app will compile.)

1C. By the way, if you didn't want both an ios and android version of the project, you could fix that in the Settings (the 4th dark blue circle); just uncheck the one you don't want and click Save.

2. The next icon is the rocket.  This is a developer app that I don't think is specific to your project, I think it's generic.  You can compile that too.  It could take 10 minutes or longer.  This developer app is some kind of framework for testing your code on your testing phone.

2B . Put the developer app on your phone.  For iOS, download the developer app from Cocoon.  Just look at your project and notice that you can click on the blue apple circle with the orange dot.  This is the compiled version of the Developer App.  Download that.  When you unzip it, you'll have an .xcarchive ; just double click that.  It should launch XCode.  Select the xcarchive and choose Export on the far right.  Select the second choice (adhoc) and you may need to sign it from your Apple Developer account.  In the end you'll have one file with an extension of .ipa or .app (you may need to take it out of a folder.)

2C. Launch iTunes.  Plug in your testing iPhone.  In iTunes, click to see the contents of your iPhone, then click on Apps.  There is a 2-column view on the right side.  The first column is the list of Apps, you can drag and drop your Developer App (which has the .app extension) into the first column.  Tell it to load and sync.  You should see it appear on your phone.  (If you forgot to sign it, it may vanish.)  Once it loads on your phone, you'll see that it's just a generic testing tool, and you need to tell it where to find the source for your app.  If your app is an url, you are ready to proceed.  If not, keep reading.

3. Back to Cocoon.  Choose the 3rd dark blue icon to download your source files.  Unzip them.  You may need to create a new zip where the index.html file is at the root with the JS folders (etc) right next to it.  This is important: the zip file you downloaded from Cocoon may not work -- you may need to re-zip the contents again with a focus on the index.html and its siblings.  (Don't worry about the Read Me and other stuff, you don't need to include them in your new zip.)

3B.  Back to iTunes.  The Developer App should be loaded on your phone.  You'll see that this app is happily loaded in the first of the two iTunes columns I mentioned before.  In the second column, you'll see a bunch of screenshots.  Scroll to the bottom of the second column!  There, you'll see there is a place to upload files and associate them with apps on your testing phone.  Your goal is to associate the zip of your game with the Developer App.  Just take the new zip that you created in Step 3 and drop it into this File zone on iTunes, then click Sync.

4. Over to your testing phone.  Launch the Developer App if you haven't already done so.  At the bottom click Canvas, and it'll tell you to select a file.  At the far bottom, you'll see a tab for Documents. These are the local docs that you dropped into iTunes in Step 3B.  If you don't see your zip there, just wait a couple minutes.  Click your zip file.  You'll get a message that the Developer App is unwrapping the zip file.  Then you should see your app launch!  Congratulations!

(Suggestions for edits are welcome.)

PLEASE DO NOT REPOST THESE STEPS WITHOUT MY EXPLICIT PERMISSION. I am directly posting to HTML5GameDevs.com and do not want it copied around the web. (Just comment below to ask for permission.)  Thank you!

[jkohler]

my experience with cocoon.io was good, but i think they could help by fixing all the tiny problems. Learning curve is moderate to steep (personal opinion).. I feel the overall process is quite clunky and i'm kinda tied to this 'system' and it's APIs. 

having said that i do see some good games coming out via cocoon, so they're doing some things right! kudos

[MackeyK24]

Yo @NasimiAsl What does your index.html look like for loading your seen with Canvas+ ???

[NasimiAsl]

it is old post @MackeyK24 i don't  remember i just test some and i don't work with that tools now