WEBGL DEMOS ARRIVE TO GOOGLE PLAY STORE

Last month Ludei announced we are enabling WebGL for native apps for the first time on mobile devices. If you missed the premier of our WebGL demos at GDC, we now have a WebGL demo app available in Google Play. The app features several innovative and interactive demos showcasing the Ludei platform.

While there is currently no Android or iOS default browser (webview) that supports WebGL, our technology provides the simplest and only solution for deploying WebGL games to both iOS and Android devices. In order to run a webgl game without the Ludei platform, one would need the latest Android device with the latest Chrome or Firefox browser installed, but there is currently no option to deploy a WebGL game to an App store on an Android or iOS device. Ludei has developed a WebGL implementation that does not require code modifications and runs in all iOS and Android devices from iOS 4.3 and above and Android 2.3 and above. Thanks to Ludei, native WebGL games and applications can be deployed for both iOS and Android while accessing native features for monetization (ads and in-app payments), push notifications, social network integration, multiplayer support, etc. Ludei’s WebGL support will be available in the upcoming weeks using Ludei’s CocoonJS launcher and Cloud Compiler. To sign up for more information on WebGL support, visit 3d.ludei.com

Check out these WebGL demos for both iOS and Android:

Individual demos:

View a comparison of WebGL running on the Ludei platform versus Chrome and Firefox:

LUDEI KICKS OFF GDC WEEK 2013

Ludei is starting GDC Week with breakthrough news! 3D support has arrived to the Ludei Platform, allowing your 3D HTML5 games to deliver to virtually any mobile device. For the first time ever, WebGL rendering is available for iOS and Android devices. Starting this Wednesday, stop by our GDC booth (#1031) to see the debut of this technology! Sign up now at http://3d.ludei.com/ to be the first to try the software and get updates.

In addition to this exclusive 3D demo, our GDC booth will also feature:

·   HTML5 cross-platform game publishing and blazing performance acceleration demos

·   Ludei’s HTML5 March Madness Basketball Shootout–featuring an old-school arcade and awesome prizes to the highest scorer of each day!

·   A special session “HTML5 Cross-Platform Game Development: The Future is Today” on Thursday March, 28th

Make sure to stop by, meet the Ludei team and get the latest exciting news in HTML5 game development from your friends at Ludei. Hope to see you there and bring your A-game!

Ludei Opens the Door for Developers to Publish 3D HTML5 Games to Virtually Any Mobile Device

Web 3D game developers gain access to the Apple and Android markets for first time; technology demos this week at GDC 

San Francisco – March 25, 2013 – Ludei, the only HTML5 platform that brings native performance and features to mobile game developers, today announced it is adding 3D support to its game development platform, finally making it possible for developers to deliver WebGL 3D games to virtually any mobile device.

“We’ve already made HTML5 cross-platform 2D game development a reality,” said Ludei CEO Eneko Knorr. “Now we are unlocking the door for the thousands of Web game developers who want to publish great 3D games on mobile and reach consumers through the most popular app stores. Our 3D rendering allows today’s most popular mobile devices to run a 3D HTML5 game with the same great user experience and performance that native gamers are used to.”

Ludei will support 3D game development via the open WebGL standard. WebGL is the browser equivalent of OpenGL, the industry standard for deploying powerful 3D animated games. The addition of 3D rendering on the Ludei platform means for the first time, WebGL runs on every iOS and Android device, so developers don’t have to worry about which devices currently have built-in 3D support to handle their complex, HTML5 mobile animated games. Now 3D game developers, including those that historically publish console and PC games, can use Ludei’s technology to deliver their 3D titles cross-platform to Google Play, Apple App Store and more.

Ludei will demo its 3D rendering technology at the Game Developers Conference (GDC Booth #1031) in San Francisco this week. Developers can sign up now at http://3d.ludei.com/ to be first to try the software and get updates.

The Ludei GDC booth will feature:

  • Exclusive demo of Ludei Platform 3D HTML5 mobile game support
  • Ludei HTML5 cross-platform game publishing and  performance acceleration demo
  • Live HTML5 March Madness basketball shootout—old-school arcade-style, with a big prize for each day’s high score

Developers using Ludei’s technology will be able to quickly build, accelerate, drive revenue, test and deploy their 2D and now 3D HTML5 projects to both native and Web app stores. Supported destinations currently include the Apple App Store, Google Play and the Amazon, NOOK®, Chrome and FirefoxOS markets, as well as Pokki and Intel AppUp.

About Ludei

Based in San Francisco, Calif., Ludei is a game technology company that provides developers with all the ingredients they need to quickly and easily develop, optimize and distribute HTML5-based games. Ludei’s HTML5 platform currently powers more than 200 iOS and Android game titles. The company’s own popular mobile games including iBasket, Sumon and Slide Soccer have been downloaded more than 20 million times worldwide. To learn more about Ludei’s platform, please visit: www.ludei.com.

 

Managing fonts in CocoonJS 1.3

Lot’s a developers are contacting us to ask about font support and management in CocoonJS. We definitively need to improve our font support but until we fix it, let us comment on how fonts are handled so anyone can use them right now and do not face any more problems:

  1. Fonts can be either stored in the root folder of your project or inside a folder called “fonts”.
  2. The font file name and the font reference name inside the application/game code MUST be exactly the same. We know this is not a usual thing to do when handling fonts but it is how CocoonJS works at the moment. Sorry about that.
  3. In the current version of CocoonJS (1.3), fonts are not loaded when accessing the game using a remote URL. We need to fix this for sure, but fonts are loaded either if a zip file with the project inside is accessed using a remote URL (http://YOU_SERVER_ADDRESS/YOUR_GAME_FOLDER/YOUR_GAME.ZIP) or when a the same zip file is loaded to the device and run from the application list inside the CocoonJS Launcher App. To learn how to upload zip files to the launcher, please read this tutorial.

If you understand and follow these simple rules, you can master font management inside CocoonJS! Good news is that whenever we are able to improve font management inside CocoonJS, your project will still work if you follow these rules and it will definitively work in any browser too. Once again, sorry for the inconveniences. We are trying to improve our platform with every release update but there are still things missing or that need to be fixed.

Happy HTML5 game development!

CocoonJS Release (2012/11/20)

The most awaited CocoonJS update has finally arrived! We have been working really hard the last couple of months to improve our platform. This new release comes with many new features, bug corrections and improvements. We know it has taken really long to get the new version out, but we really hope it will be worth it. Let’s give a quick review to all the new cool stuff inside the new version of CocoonJS by Ludei!

  • CocoonJS extensions
    • In-app purchase test bed
    • Easier to use and improved WebView integration
    • Application “quit” control
    • “screencanvas”, a new way to improve performance (even more!)
    • Opening URLs using the system web browser
    • Text and message dialogs
  • DeviceMotion and DeviceOrientation APIs
  • Vibration and GPS APIs
  • The HTML5 path API (an industry 1st)
  • Box2D native binding (beta)
  • Improved rendering system
  • Support for more ad networks
  • iOS6 and iPhone5 support

CocoonJS extensions

CocoonJS includes an extension mechanism to provide native features missing in the HTML5 standard. Although the extension mechanism has been present from the first release of CocoonJS, in this new version, along with new features, new more developer-friendly APIs have been introduced. Most extensions (except from the social network extension) are backward compatible, meaning that if you were using the window.ext.IDTK_XXX mechanism your code should still work. Anyway, we HIGHLY recommend you to use the new extension mechanism, that is easier to use and has full documentation and support from our side. All it takes is for you to include the necessary JS files at the beginning of your HTML file depending on what features you want to use and what environment you are using: CocoonJS and/or the WebView. One of the coolest features of these new extension APIs is that they handle all the cross-platform management. Forget about having to see if the extension is present or not. The JS code will do that for you and it will make your code compatible in a desktop web browser, in CocoonJS or in the WebView feature. All the demos have been rewritten to use the new extension APIs so you will still be able to learn much from both the demos and the documentation we provide. Although we will update our wiki with full documentation and tutorials, let’s review some new features in the CocoonJS extensions:

In-app purchase test bed

The latest version of the CocoonJS launcher app offers the possibility of testing our extension APIs for IAPs. Although this feature has been available in previous versions of CocoonJS, it has not been published because there is not an easy way of allowing developers to test IAPs in the launcher app. This new version of the CocoonJS Launcher App enables a mock-like environment so any developer can test the IAPs extension APIs and then, whoever has premium access capabilities, can configure them for real in our cloud compilation system, that also provides a complete set of tools to track and check the purchases made inside the apps, and start making money ;).

Easier to use and improved WebView integration

The new CocoonJS extension APIs provide a much easier and better way of handling the web view feature inside CocoonJS. Now you are able to load as many URLs or local files to the WebView and all the way around, from the web view to CocoonJS. Sending messages from one environment to the other has never been easier and now these can also be asynchronous. Any window.console object output in the web view will be shown in the CocoonJS debugging console automatically making the debugging of web view content much much easier. Long story short, the WebView support has been dramatically improved.

Application “quit” control

In Android (not in iOS) the back button can be used to destroy the activity. Now, there is a way to control this behavior from JavaScript. The default behavior has changed and now, if the developer does not specify anything, CocoonJS will prompt a dialog and pause the application to let the user decide if the app should be destroyed or not. Moreover, the developer now has the possibility of specifying that he/she wants to take control of the app finalization. The process is as easy as specifying a function that will return a boolean by calling CocoonJS.App.setAppShouldFinishCallback(FUNCTION_THAT_RETURNS_A_BOOLEAN). If the function returns true, it means the app should finish and if it returns false, it means it should not finish and that the developer takes control of the finalization. Whenever a developer wants to finish the application, there is a function called CocoonJS.App.forceToFinish. This feature is specially useful in Android (in iOS for example none of the functions will work).

“screencanvas”, a new way to improve performance (even more!)

Ludei has been providing the best performance for HTML5 gaming that is in the market and in the pursue of this goal we have been improving the rendering mechanism day after day. In this new release, we have found a major improvement that requires not much effort from the developer perspective. Most canvas based games create and use what could be called a “main” canvas where everything else (images, primitives, other canvases, etc) are drawn. If your app uses this “main canvas” idea, you can benefit from this feature. The only thing that you need to do is to call the new function CocoonJS.App.createScreenCanvas to create this “main canvas” and you are good to go. Specially in android and in some specific devices, you will see a minimum of a 2x performance boost by doing so. Check-out all the CocoonJS demos in the new CoconJS Launhcer App and see it for yourself!

Opening URLs using the system web browser

This has been a very frequent request among the developers using CocoonJS. By calling the function CocoonJS.App.openURL(URL) you can call the system browser to open a URL. It can be very useful to provide access to your app users to the rating of your app, to open your website URL, etc. Anyway, as many of you know, CocoonJS provides a WebView control that can be displayed over (or even alone) our OpenGL rendering surface. We also recommend to use this feature so you don’t have to switch between apps (your game and the web browser). Check the CocoonJS.App.loadInTheWebView and the CocoonJS.App.loadInCocoonJS functions to take control over this features.

Text and message dialogs

Text dialogs already existed in the previous versions but the mechanism has been extended and made easier. In this version message dialogs have been also added and regular web browser support has been included.

 

DeviceMotion and DeviceOrientation APIs

This feature has been long awaited by the CocoonJS developer community. Finally, CocoonJS supports both accelerometer and gyroscope events providing the W3C specification APIs. Not a lot of both desktop and mobile browsers support these APIs.

Vibration and GPS APIs

They have been added in the previous version of CocoonJS but now they have been improved and new demos are provided so developer can learn from them.

The HTML5 path API (an industry 1st)

This is a really interesting new feature CocoonJS supports now. The W3C canvas API offers the option of creating complex paths, thus, rendering vector graphics, with all the advantages that this means (less memory footprint, transformation capabilities, faster rendering, etc). CocoonJS is one of the first HTML5 rendering virtual machine that supports the path API. Check out our new demo to see some pretty amazing results!

Box2D native binding (beta)

Box2D is a widely used 2D physics engine. There are multiple ports to multiple platforms and languages. There is a port to javascript but due to it’s demanding mathematical calculations and poor memory management, the performance it provides for environments other than desktop web browsers is not acceptable. CocoonJS has included a native binding to solve these problems. This feature is still in beta and not all the Box2D APIs have been implemented, so it is to fully compatible with the Box2DWeb version, but we are getting there. Check out the performance you get both in iOS and Android by executing out new cool demo!

Improved rendering system

Our openGL ES expert developer has rewritten our native binding completely and now we have a more stable and reliable and full HTML5 compatible rendering system. We are still trying to push the envelope and will try to solve any graphical glitches that can appear from now on but this version is definitively the most advanced HTML5 rendering system in CocoonJS ever!

Support for more ad networks

New ad networks have been integrated to the ad extension.

iOS6 and iPhone5 support

The new iPhone5 and the new iOS operating system have led to some internal modifications and the need of some changes in the cloud compilation system configuration.

Well, that is a full list of features! As you can see, there are a lot of new things CocoonJS can do now and many highly requested features and bugs have been included and solved. We are still working hard to try to provide you with the best HTML5 gaming experience on mobile devices, so stay tuned for the next releases!

Keep creating amazing games and let CocoonJS to power them! 😉

Ludei presents CocoonJS at Seattle’s 4th JS meetup

Ludei was proud to be invited to give a talk about CocoonJS at the Seattle’s 4th game dev js meetup organized by MassivelyFun with the collaboration of Double Down Interactive. It was a great opportunity to finally meet with the people from Massively Fun, share some exciting news and ideas in addition to showing CocoonJS to all the developers that showed up. We had the chance to show some live demos and the performance comparison between the mobile web browser and CocoonJS. The vibe was really great and we really hope a lot of developers will give a look at CocoonJS as a great opportunity to develop HTML5 and JavaScript based products that also run in mobile with high performance results and monetization channels. It was great to have the chance to talk to people directly, get to know their needs and worries and try to encourage them to check CocoonJS out. We have to deeply thank Massively Fun for their great work on pushing the HTML5 and JavaScript community forward in the Seattle area and beyond ;).

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!

Installing the CocoonJS Launcher on IOS

Update: CocoonJS Launcher is available on the App Store. Download now!

While we’re still working to get Apple to approve the CocoonJS Launcher for the AppStore, we have decided to make it available as an xcarchive (Xcode Archive format) so it can be installed easily on any IOS device just by following some easy steps.

So what do you have to do to get an installable IPA archive and run the CocoonJS Launcher on your iOS device.

System configuration needs

As you’re going to create an IPA file from a given xcarchive file, there are some configuration needs to be fulfilled before starting the process:

  1. You need a mac computer. We’re talking about modifying an xcode related project, setting up some plist (even though is a plain XML file) properties, using developer provisioning profiles, etc. These steps require a mac computer.
  2. XCode installed. The Property List viewer, the organizer, etc are tools needed to create an IPA from an xcarchive file. If you don’t have it installed already, the easiest/recommended way is to download it from the MacOSX AppStore.
  3. An Apple developer account. You need your own developer account with apple so you can get the certificates needed to modify the xcarchive and transform it into an IPA file.

Get the xcarchive

First of all you have to download the CocoonJS Launcher App for iOS:

CocoonJS Launcher for iOS

Download and decompress it. You should get a file named “CocoonJSLauncer_DD_MM_YYHH.MM_ios.xcarchive”.

Modify the Bundle Id inside the xcarchive

Next we have to modify the Bundle Id inside the xcarchive as the Bundle Id has to be unique for each CocoonJS Launcher IPA generated by an Apple developer.
To modify the xcarchive Bundle Id:

  • Right click on the xcarchive and select Show package contents.

  • A new Finder window will appear showing the xcarchive contents. Double-click on the Info.plist file.

  • Modify the CFBundleIdentifier property and change the com.ideateca.jscocoon Bundle  Id with your own Bundle Id. The recommended practice is to use a reverse-domain name style string using your company’s name (ie. com.mycompany.apps.cocoonjslauncher) so it does not collide with any other Bundle Id already existing in the AppStore. Save and close the file.

  • Back in the xcarchive package contents Finder window, open the Products/Applications folder. Open the CocoonJSLauncher_ios package right-clicking on it and select “Show Package Contents”. That will show all the files inside the package in a Finder window. Edit the Info.plist file and replace the Bundle Identifier property with your Bundle Id (the same one as in the previous Info.plist) and save the document.

Add your Device Id to the registered devices in your Provisioning Portal (if you haven’t already done it)

Open to the IOS Provisioning portal at https://developer.apple.com. Go to the Devices section and click on Add Devices. You will see the following form:

Fill the form with your device information and submit it. In case you’re not sure of which Device ID corresponds to your device, open the iTunes program, select the device and go to the Summary tab. Click on the Serial Number field and the UDID (Unique Device IDentifier) will appear. Copy that UDID to the Device ID field in the form.

Create a new AppId

Go to the App IDs section in the provisioning portal and add a New App ID.

  • Description: You can put any name you want to identify the app in the Provisioning Portal, ie. CocoonJS Launcher.
  • Bundle Seed ID: Choose any of the generated codes in the drop-down menu.
  • Bundle Identifier (App ID Suffix): You should put the same Bundle Id that you put in the Info.plist files in the previous step.

Create an AdHoc distribution provisioning profile

Go to the Provisioning section in the provisioning portal. In the Distribution tab click on New Profile. A form should appear to create iOS distribution provisioning profile.

You should choose Ad Hoc as the Distribution Method.

  • Profile Name: Put any name to identify the Provisioning Profile.
  • App ID: Select the App ID you have just created.
  • Devices: Select all the devices where you want the IPA to be installable.

Once you’re done, submit the form and you will be right back to the Distribution tab of the Provisioning section. The Provisioning Profile we’ve just created should appear in the list as Active and an enabled Download button should appear on the right. If the Download button is disabled just reload the page and it should appear as enabled. Click on it to download the Ad-Hoc provisioning profile. Once it has been downloaded, double-click on it to install.

Create an IPA from the xcarchive

To create an IPA just double click on the xcarchive file. An Organizer window should appear showing the Xcarchive properties as shown below.

Please, check that in the Identifier field your Bundle Id appears.

Select the CocoonJSLauncher_ios Xcarchive and click on Distribute. To generate the IPA you have to select Save for Enterprise or Ad-Hoc deployment and click on Next. In the drop-down menu, choose the corresponding code signing identity for your Bundle Id. The code signing identity must be a Development code signing identity for iOS Development.

Click on Next. Then, just save the IPA in your preferred location.

Install the IPA in the device

To install the IPA on your device first open the iTunes application and drag and drop the IPA to your iTunes library. Once it is copied connect your device and go to the applications tab.

The CocoonJS Launcher App should appear as available for synchronization. Enable the Sync Apps option in case you have it disabled and click on Apply. That should make the app to be synchronized. Now just go to the device and click on it to launch the app.

And that’s all!.

FAQ

    1. I tried to install my IPA in another device but an strage error appears.

That can be because of several reasons:

      • Your device has a non supported iOS version. The launcher requires iOS 4.3 or above to run.
      • The device has not been added to the authorized devices in the Ad-Hoc provisioning profile. To solve this you will have edit the Ad-Hoc distribution provisioning profile in the Provisioning Portal, download it again and generate another IPA following the steps above again.
      • You haven’t chosen a development code signing identity when signing de IPA.
    1. How can I use the new feature of the iOS CocoonJS Launcher App to try my games?

The iOS version of the CocoonJS Launcher App includes a new feature that is not available in the Android version. Using iTunes you can upload as many .zip files as you want to the launcher so you can have them with you at all times. To learn how to use this feature, please read our blog post