How to upload your games to the CocoonJS Launcher App for iOS using iTunes

Apart from trying the awesome demos we’ve provided with the CocoonJS Launcher, we bet you’re eager to try your own games and experience the CocoonJS wonders. So what do you have to do to launch your own developments in the CocoonJS Launcher for iOS?.

It’s simple, just follow these steps:

  • Connect your device to your computer.
  • Open iTunes and select your device.
  • On the right side select the Apps tab.

  • In the apps listing, select the CocoonJS Launcher app and scroll down to the File Sharing area.

  • Click on Add and select the zip files you want to copy from your hard drive. and they will be instantly transferred to your device. The zip files should contain all the JavaScript code and assets you use in the game so CocoonJS can execute it.

  • Click on Apply to synchronize your device.

After you have followed the steps above, the files your have copied should be in the CocoonJS Launcher application storage area in the device. So now you are ready to launch them in the CocoonJS Launcher.

  • Open the CocoonJS Launcher application in our device.
  • Click on the Test button.
  • In the file listing below the registration code form, you should see all the zip files you have copied to the device.

  • Now just select the zip file you want to launch and voilá!

Hope you enjoy using the CocoonJS Launcher for iOS!

8 Comments How to upload your games to the CocoonJS Launcher App for iOS using iTunes

  1. Pingback: Ludei » Installing the CocoonJS Launcher in IOS

  2. Pingback: Ludei y CocoonJS dan la vuelta al mundo estos días - Ideateca

  3. avatarMark

    CocoonJS launcher looks intriguing. Do you have a description somewhere about what the requirements are for packaging the app in the zip file? Any particular structure that needs to be followed?

    Reply
    1. Imanol MartínImanol Martín

      Hi Mark,

      In short, just put your .js and the assets in a zip, no particular structure. The best thing is to do is checking our demos to see how they are packaged, that will be of great help:
      http://cocoonjsservice.ludei.com/cocoonjslaunchersvr/demo-list/

      Download and open any of them and follow a similar structure in your development.

      For further information and some important tip&tricks, please refer to our previous blog posts:
      http://blog.ludei.com/cocoonjs-a-survival-guide/
      http://blog.ludei.com/cocoonjs-the-advanced-survival-guide/
      http://blog.ludei.com/the-cocoonjs-launcher-app-a-simple-tutorial/

      For a full set of supported features in CocoonJS see:
      http://wiki.ludei.com/cocoonjs:featurelist

      Let us know if you fond any problem.

      Regards.

      Reply
  4. avatarFulvio

    See, the problem is when you have an Impact game.

    I finally I got my ZIP file attaching to CocoonJS (I did this through File Sharing within iTunes).

    The problem is the index.html file for my IMPACT game.

    I am doing this at the moment and getting quite a few JS errors in the console (within CocoonJS). It’s loading fine within Firefox though.

    This is the following index.html for my Impact game:

    MyGame

    $(document).ready(function() {
    var canvas = document.createElement(‘canvas’);
    canvas.id = ‘canvas’;
    document.body.appendChild(canvas);
    });

    The errors I’m getting are as follows:

    JSUtilities Exception: TypeError: ‘undefined’ is not a function (evaluating ‘document.getElementsByTagName
    Exception evaluating JavaScript: ReferenceError: Can’t find variable: $
    Not implemented createElement: div

    Can you guys please provide a tutorial to get an IMPACT game up and running along with the index.html and any requried modifications to the main.js file itself? Thanks.

    Reply
    1. Imanol MartínImanol Martín

      Hi Fluvio,

      Sorry for the delay. Sure you already has solved it but in case you didn’t try this code in your index.html body:

      (function() {

      function start() {
      var canvas= document.createElement(“canvas”);
      canvas.style.cssText=”idtkscale:ScaleAspectFit;”;
      canvas.width= 960;
      canvas.height= 640;

      document.body.appendChild(canvas);

      var ctx= canvas.getContext(“2d”);
      ctx.fillStyle = “white”;
      ctx.fillRect(0,0,960,640);

      ctx.textAlign = “center”;
      ctx.fillStyle = “black”;
      ctx.font=”60px Arial”;
      ctx.fillText(“It works!”, canvas.width/2, canvas.height/2);
      }

      window.addEventListener(“load”,start,false);

      })();

      Reply
  5. avatarBrianV

    I’ve registered and added the code sent by email. I put the zipped project files on my ipad through itunes. I selected the project under the documents tab. The screen appears blank except for the fps counter. There were no errors listed. I tried the same method with your example code and got the same results.

    window.onload = function()
    {
    // Create a canvas and draw something in it.
    var canvas = document.createElement(“canvas”);
    canvas.width = 640;
    canvas.height = 480;
    var canvasContext2D = canvas.getContext(“2d”);
    canvasContext2D.fillStyle = “red”;
    canvasContext2D.fillRect(0, 0, canvas.width, canvas.height);
    document.body.appendChild(canvas);
    };

    Is there any other setup required?

    Reply
    1. Imanol MartínImanol Martín

      Hi Brian,

      The example code I’ve sent it’s working fine. But if you want to use it inside an html file you have to wrap it with the proper html, like:


      <html>
      <head>
      <title></title>
      </head>
      <body>
      <script type="text/javascript">
      (function() {

      function start() {
      var canvas= document.createElement("canvas");
      canvas.style.cssText="idtkscale:ScaleAspectFit;"; // CocoonJS extension
      canvas.width= 960;
      canvas.height= 640;

      document.body.appendChild(canvas);

      var ctx= canvas.getContext("2d");
      ctx.fillStyle = "white";
      ctx.fillRect(0,0,960,640);

      ctx.textAlign = "center";
      ctx.fillStyle = "black";
      ctx.font="60px Arial";
      ctx.fillText("It works!", canvas.width/2, canvas.height/2);
      }

      window.addEventListener("load",start,false);

      })();
      </script>
      </body>
      </html>

      If you prefer you can just create a bare .js file with just the js code. In both cases if you want to copy the file to the device, you have to first zip it.

      You can read our development guide for further information on this subject and check our demos for a good starting point:

      http://wiki.ludei.com/cocoonjs:devguide
      http://cocoonjsservice.ludei.com/cocoonjslaunchersvr/demo-list/

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *