The new Cocoon is out!

The New Cocoon Is Out!

Cocoon.io is finally out for everyone! We have been working hard and thoroughly testing the new Cocoon in stealth mode for the last months in order to verify that the whole system worked as expected, to get the initial feedback from all the users that wanted to get a first hand experience on it and to improve as many features as possible. We are deeply thankful to all the beta testers that have been patient and really helpful to create the best Cocoon to date. Thank you!

Main advantages of the new Cocoon

Cocoon.io has been designed from the ground up to try to include many of the cool features users have been demanding for quite some time. Let’s review the main advantages and differences of Cocoon.io:

  • The main structural change is that Cocoon.io is completely based on Cordova. When Ludei started working on HTML5, Cordova wasn’t as widespread as it is today. It also was completely tied only to the system webview. Cocoon has always defined itself to try to overcome some of the original Cordova limitations but it was not built on top of it. Cordova is the de facto standard in the industry to setup HTML5 to native project compilations and we have decided to embrace it and contribute to the community with our approach in Cocoon.io. This new Cocoon mixes all the benefits that have made Cocoon great plus all the advantages of Cordova.
  • Select the best webview runtime for your needs: There are different needs when it comes to HTML5 games and apps, and the new Cocoon is designed to allow you to easily select between the best webview runtimes depending on your needs. We still provide our state of the art runtime called Canvas+ specifically built and well suited for games based on 2D and WebGL canvas. We also have our full DOM support using WebView+, an advanced webview based on Chrome for Android and Safari for iOS. Cocoon.io even allows to select the regular system WebView for those developers who still want to use it.
  • Redesigned UI/UX to simplify and improve the user experience. We really hope you like it. The user feedback has been very positive so far and we will continue to improve it in the future.
  • Easy Cordova plugin setup as Cordova has tons of plugins to select from. Cocoon’s new search engine plus easy to use UI will certainly help you navigate through this sometime tedious process. Of course, you can add your own plugins to your projects!
  • Github integration to tell Cocoon.io to compile your projects directly from the content of a git repository. A very convenient way to ease the process of developing, committing/pushing and compiling your apps.
  • Let Cocoon.io help you with the signing of your final native apps. Signing your final projects both on iOS and Android can be a bit tedious. If your provide your signing keys, Cocoon.io will be able to compile a final signed app ready to be uploaded to the stores.
  • Login with different types of accounts like Google or Facebook accounts for your convenience. Of course, you can still use your current Cocoon user and password or even create a new account.
  • Web2App: We are trying to redefine the ease of use to create native hybrid apps based on responsive websites. We will provide great plugins to create native apps based on a website in order to create a compelling native app with all the advantages of mobile applications regarding performance and user experience. Directly from your responsive website URL!

The New Cocoon Developer App

As a great tool to test and debug your apps before compiling the final products. A new cloud needs a new Developer App that we have published to the stores. The cloud compiler also allows you to easily build a developer app customised to the settings and plugins you have configured in your project.

appstore_button_google
apple-appstore

Migration From The Old Cloud Service

All the user accounts have been migrated to the new Cocoon so if you login to the cloud compiler using ludei.com, now you will be redirected to the new service login at cocoon.io. We are working to migrate your projects too but as the new Cocoon is a complete overhaul, this process will take some time. We will contact each and everyone of you when the projects are migrated. In the meantime, as we know many of you still have projects on the old service, we will provide a message with a link to the old cloud every time you login to Cocoon.io.

Screen Shot 2015-12-13 at 08.47.29

Message for users with projects in the old cloud service once logged into the new Cocoon

The old cloud won’t allow the creation of new projects but as your account has already been migrated, you will be able to create them in the new cloud.

It is also important to notice that as the new Cocoon is based on Cordova, all the extensions/plugins will also be bases on Cordova plugins. This change has plenty of advantages: from a much larger selection of services to open source options and the possibility to develop and add your own native access APIs whenever needed as opposed to the old cloud that was a closed environment. We are working to provide various plugins (like Atomic Plugins) maintained by us to ensure they work in perfect conjunction with our compilation service (we even use them in our apps/games!). Most of our old extensions from the old cloud won’t be available, and thus, for those services, some modifications might be needed in your application code. We will provide as much information as possible to try to ease this process as much as possible depending on the game engine or app framework you use.

The old cloud service will be discontinued by January 31st 2016. We would like to invite you to enter and start using the new cloud and please, do not  hesitate to check out and write on our Cocoon.io forum or contact us at support@cocoon.io if you are experiencing any kind of problem.

Construct 2

If you are a Construct 2 user and you are still using the old CocoonJS cloud, please bear in mind that when exporting for the new Cocoon cloud you have to take into account two main things:

  • Export for Cordova: As the new cloud is completely based on Cordova, you have to use the Cordova exporter in Construct 2. The old CocoonJS exported has been deprecated so you only need to use it if you are exporting for the old CocoonJS cloud.
  • Use the new Cocoon Construct 2 plugins: We have a new set of Construct 2 plugins for the new Cocoon cloud. You can grab it from here: https://github.com/CocoonIO/cocoon-plugins-c2

We are working in a Knowledge Center where you will find tutorials and video tutorials about how to export and configure the Construct 2 Cocoon plugins in the new cloud.

On behalf of the whole Ludei team behind this new Cocoon, we really hope you like it!

Introducing Atomic Plugins: open source plugins to rule them all

atomic

This is a day we’ve been looking forward to for the last few months. Today we are proud to introduce Atomic Plugins, a new paradigm for creating plugins that work across many platforms and with the same API in several programming languages.

Ludei has been providing great plugins for HTML5 developers for the last couple of years. Our first plugins were implemented in C++ and we exposed the API in JavaScript using a custom bridge. Some time ago we thought to migrate our plugins to cordova, the de-facto standard for accessing native APIs from JavaScript.

One thing we didn’t like about both approaches is that the plugins are tightly coupled with the underlying framework and cannot be used from anywhere else. What happens if a user wants to use an awesome Cordova or Cocoon plugin on other platforms like C++, Unity or pure iOS/Android apps? Simply he can’t because of the tight coupling with Cordova or Cocoon frameworks. We wanted to move plugin development to the next level, provide a universal solution for every developer/ecosystem and we have done it with Atomic Plugins.

Atomic Plugins provide an elegant and minimalist API and are designed with portability in mind from the beginning. Framework dependencies are avoided by design so the plugins can run on any platform and can be integrated with any app framework or game engine.

We have published our first plugins using the Atomic Plugins paradigm. These plugins can be used across many platforms using your favorite language (JavaScript, Objective-C, Java, C++).

  • In-App Purchase API: local and server-side receipt validation, secure consumable and non-consumable purchase tracking, local product cache, single API for different stores and more.
  • Ads API: flexible monetization solution, full support for banners and full screen ads (interstitials), single API for different Ad Providers and more.
  • More plugins and languages are coming soon

The best thing is that we have made the plugins totally open source and free to use. The plugins are already published to the Cordova Plugin Registry, CocoaPods, Maven Central and the source code is available on Github. You can contribute and help to create more awesome plugins.

With these plugins Ludei wants to contribute not only to the HTML5/Cordova plugin ecosystem but also provide plugins for pure iOS, Android and C++ developers. We know that a lot of companies dedicate full-time resources to integrating cross-platform monetization plugins like Ads or IAPs into their HTML5/Native game engine or app. We want to provide a universal solution for everyone with Atomic Plugins.

www.atomic-plugins.com

 

Build Phonegap/Cordova Apps using the WKWebview right now

We recently announced big news in our platform: the possibility to publish standalone apps powered with the iOS 8 new WKWebview. Today, we are glad to announce a new Cordova plugin for publishing Cordova/Phonegap powered with the WKWebView that you can use right in your terminal.

cordova

Webview+ for iOS (and Android!)

Our engineering team worked very hard to create the Webview+ for Android (more info on how to use it here), a uniform webview on any Android 4.x device based on all the power of Chromium. We are glad to announce the Webview+ for iOS, a plugin for cordova apps that provides a replacement for the UIWebView that includes the Nitro JS engine based on the WKWebView.

If you are a HTML5 app developer, you probably know that iOS HTML5 capabilities are still lagging far behind. The WKWebView solves most of the common problems of HTML5 on iOS and even increases the features that you can use.

WebView+

Create a Cordova app using the WebView+

Install the latest version of CocoonJS CLI (this is really important)

$ sudo npm install -g cocoonjs

Create a Cordova project and add the Webview+ for ios:

$ cocoonjs create MyProject
$ cd MyProject
$ cocoonjs platform add ios
$ cocoonjs plugin add com.ludei.ios.webview.plus -d

If you already have a Cordova/Phonegap project just run the following command

$ cocoonjs plugin add com.ludei.ios.webview.plus

And now your project is powered with the Webview+. You can test it by running this command:

$ cocoonjs emulate

or

$ cocoonjs run

More Info

About HTML5 APIs

Latest CocoonJS Releases

New versions of some components of CocoonJS are published. Please, share with us your comments about these releases. Your feedback is important to find bugs and determine next improvements. Enjoy!

Core 2.1.1

iOS

  • iOS ARM64 support
  • Enabled WV+ on 64 bit devices

Services

  • Updated the following third-party services
    • iOS Google Plus SDK
    • Crittercism sdk to version 5.0.5
    • iOS Flurry SDK
    • OpenAL to openal-soft-1.16.0 and enabled OpenSL backend
    • Android-support-v4 updated to 21.0.0 and google-play-services to 6.1.71
    • Parse library to 1.6 in android and 1.4 on iOS (latest ones)
  • Removed Brightroll support.
  • Removed Yume support of iOS.

Canvas+ 2.1.1

  • Fix rare bug where Canvas+ could crash when executing code in onTouchEnd listeners
  • Fixed threading bug which was consuming battery when app was in background
  • Removed support for the GLES1 canvas+ rendering path.

Launcher 2.1.1 for Android

  • Updated to Core and Canvas+ 2.1.1
  • Fixed loading URLs with spaces

Launcher 2.1.1 for iOS

  • Updated to Core and Canvas+ 2.1.1

WebView+ for Android 2.4.0

  • Updated to LudeiChromium_1.0.37.0.2062.94
    • Several bugs fixed for Cordova 3.6 compatibility
    • Added methods needed by Android 5.0
  • Removed unused log and changed exit code.

See repo on github.

Plugins 3.0.5

See repo on github.

Techniques to Optimize Memory Use in CocoonJS Canvas+ Environment

Memory is a critical resource in HTML5/JavaScript game development, especially on mobile devices. In a desktop environment you can load tons of textures but on some low-end mobile devices you can reach the maximum RAM limit quickly. Although JavaScript encourages automatic memory management by using a garbage collection mechanism, you shouldn’t ignore effective memory management techniques. HTML5/JavaScript applications can suffer the same memory related problems as native applications, such as memory leaks, out of memory issues and they must also deal with garbage collection pauses. 

This post will give you some general advice on memory optimization for HTML5 games and some CocoonJS Canvas+ specific tips.

Effective asset loading

Preloading all the assets at the start is the easiest and quickest way to manage the memory but it only works for small games where all the assets fit into the available memory. You shouldn’t preload everything on a heavy game, only the assets that you need each time, and dispose of the unneeded assets as soon as possible. Your game memory usage depends highly on your game engine (some of them do a better job than others). Don’t expect that the browser or the garbage collector will fix all your problems and that you can stop worrying about effective memory management.

Texture packer

Javascript images and canvas objects are backed into OpenGL textures and FBOs, usually using RGBA format, 32 bits per pixel. Think about it, for example a 2048×2048 image eats 16MB of memory!  Some GPUs require POT (Power Of Two) textures for the best performance, so keep in mind that some images could use more memory than their real size and use 2^n size textures whenever you can.

We recommend that you pack all your textures using one of the Sprite Packer tools out there. That way you’ll waste less memory and improve performance (by avoiding the number of context switchings) and loading times. Some HTML5 engines are able to pack all your textures at runtime, others don’t, so please check your engine features first.

Garbage Collection

JavaScript automatically frees objects when it detects that they are not used anymore, this process is called garbage collection. During a collection the execution on your page can be suspended for a moment. If your game creates too many JavaScript objects in each frame it can lead to noticeable pause issues. This is another example that proves that it is a mistake to forget about memory management on JavaScript. You should reuse javascript objects whenever possible.

The dispose method

Image and Canvas objects are disposed when the garbage collector detects that they are not reachable in the JS code. The disposal is not immediate, it may take some seconds depending on the heuristic rules of the JavaScript virtual machine. Using a WebGL context the developer has more precise control over the WebGL texture and buffers disposal but that’s not the case when using a 2d context or when dealing with Image and Canvas objects.

CocoonJS’ Canvas+ environment exposes a method called “dispose” on canvas, image and audio objects. This method immediately frees the associated texture or internal buffer, which is very useful for games with heavy textures or for games that need a greater control over the memory.

Using this CocoonJS Canvas+ exclusive feature is very easy. Imagine we have an image object represented by the “myImage” variable.

myImage.dispose && myImage.dispose(); // The same for canvas and audio objects.

The memory warning event

iOS and Android native applications are able to receive a memory warning notification from the system. The default implementation in Canvas+ and WebView+ environments is to perform a garbage collection and free as many internal cached data objects as possible.

From CocoonJS Canvas +2.1, the environment exposes the “memorywarning“ notification as a window listener. It is strongly recommended that you implement this method and free up as much memory as possible by disposing of cached data objects, images on canvases that can be recreated.

Cocoon.on(“memorywarning”, function() {
  // dispose of cached images and canvases that can be recreated
});

Texture reducer

Texture reducer is a CocoonJS Canvas+ exclusive feature. When your game targets all resolutions you need huge textures for iPad retina like devices and small textures for small mobile devices. A game developer has many ways to handle this:

  1. Create different asset packages, HD and normal. Good solution but bigger app size.
  2. Scale down HD resources. Excessive memory usage and performance impact on small devices.
  3. Create smaller asset packages on runtime rendering to a canvas/texture. Good solution but some JavaScript engines don’t support this.

The CocoonJS Canvas+ texture reducer feature can transparently do the job for you. It uses the third approach and it is highly customizable (for example, you can only apply it to certain resources). Check out the complete API documentation to see how to set it up.

As the texture reduction lowers the quality of the final images to be displayed, an interesting approach that we have recommended to some customers is to apply it only for certain device models, leaving higher resolution for some others (you can use the “navigator.userAgent” property to identify the device model). This, of course, it is not an easy task on Android due to the big number of device types, but on iOS is definitively an interesting option, specially for older devices such as the iPhone4 or the iPad Mini 1st generation.

Max Memory Threshold

This new CocoonJS Canvas+ exclusive feature available from version 2.1 and higher, exposes the “setMaxMemory” utility method. When the max memory threshold is set, CocoonJS checks the total amount of texture sizes (images and canvases). When the runtime memory size reaches the max memory threshold, CocoonJS disposes of the least recently used textures until the memory fits the threshold. It disposes of textures used for JS Image objects (which can be reloaded later if needed or are drawn again). It doesn’t dispose of canvas objects because they cannot be reconstructed if they are used again in a render operation. This extension is designed to be used in 2D contexts, because in WebGL contexts the developer is the one responsible for memory disposal.

Check out the API documentation.

Lazy Loading

Another CocoonJS Canvas+ exclusive feature available on version 2.1 and higher we have added the “cocoonLazyLoad” boolean property to Image objects (we have also added a duplicate called “idtkLoadDisposed” for retro compatibility with Construct2). When the property is set to true, the image is not loaded until it’s used in a render operation. Engines that load all the assets at startup can benefit from this property. But do not forget to purge the textures when they are not needed again, for example, using the dispose mechanism described earlier!

NPOT Textures

Canvas+ uses POT (Power Of Two) textures by default in 2d contexts. This is very useful for performance improvements, especially on mobiles with old GPUs. But it can waste memory on games that don’t use packed or 2^n textures. In CocoonJS Canvas+ version 2.1 you can allow NPOT textures in Canvas2D contexts (they were already supported in WebGL).

Check out the API documentation.

Conclusion

We have covered some basics of memory management in HTML5 games and exposed Canvas+ specific tips and tools.  We are always open to your suggestions. Remember that if you have some problem with memory usage in Canvas+ and you think that the problem is on our side you can send us a testcase and we’ll be glad to help you.

Additional Notes about Ludei’s Canvas+ Environment

CocoonJS’ Canvas+ is not a full browser, but a highly optimized JavaScript Virtual Machine for Canvas 2D and WebGL environments. Comparing it to a full fetched browser is not recommended as browsers include “a lot of magic tricks” (and that is why sometimes they are big and slow). For example, a browser might be able to handle a 5000 by 5000 pixels image but that does not mean that the underlying device is able to do it, just that the browser is handling some things internally for you either lowering the quality of the image (downscaling it) or subdividing it. Very few native technologies (C++ game engines) allow this kind of features as the developers should know how to handle this situations correctly (do not use 5000×5000 textures in the first place). Here at Ludei we never intended to create a new browser, but provide a highly specialized runtime environment so HTML5 developers can be closer to the native side without ever leaving JavaScript and the great HTML5 APIs.

CocoonJS Latest Releases

New versions of some components of CocoonJS are ready. Please, share with us your comments about these releases. Your feedback is important to find bugs and determine next improvements. Enjoy!

Core v2.1

All platforms

  • Implemented custom Keyboard handling so users can enter text directly into the app, without popping up a dialog.
  • Cordova support is now always available for all platforms and environments in CocoonJS.

iOS

  • Added the new CocoonJS WebView+ for iOS 8 based on the new WKWebView (Only for 32-bit devices at the moment).
  • Fixed iOS 8 orientation and layout issues.
  • Drop iOS 5 support.
  • Updated the following third-party services
    • FacebookSDK.framework (3.19).
    • Google Play Services (3.0).
  • Fixed bug where reloading with an open websocket made the app crash.
  • Fixed bug where sending a score to GameCenter could cause a crash in poor-quality networks.
  • Fixed bug where after a reload, the system WV was being loaded instead of the WebView+.

Android

  • Added the option to compile Canvas+ projects for Android Wear.
  • Added support for the new ART Java virtual machine.
  • Fixed bug where making a webview call forwarding replaced the HTML body with the returned value in some Android versions.
  • Alert dialogs buttons behavior was not consistent across Android versions. Fixed.
  • Fixed rare case where the webview was being added twice.
  • Fixed negative values as notification ids.
  • Fixed case where webview would remain black after load.

Services

  • Updated the following third-party services
    • Google Play Services (5.0.89)
    • MoPub (3.1.0)
    • AdColony (2.2.4)
    • AdMob (6.12.0)
    • Chartboost (5.0.1)
    • Greystripe (4.3)
    • InMobi (4.5.1)
    • MillenialMedia (5.4.1)
    • Parse (Android: 1.6.0, iOS: 1.4.0)
    • iAd
  • Fixed rare crash when using local notifications.
  • Fixed type cast error showing in the console when sending a push notification.

Canvas+ v2.1

  • Added 8 WebGL extensions:
    • WebGLVertexArrayObjectOES
    • WebGLCompressedTextureS3TC
    • WebGLCompressedTexturePVRTC
    • WebGLTextureFloat
    • WebGLTextureHalfFloat
    • WebGLTextureFloatLinear
    • WebGLTextureHalfFloatLinear
    • WebGLTextureFilterAnisotropic
  • Fixed ambiguity when getting the window.location.port value.
  • Added NPOT texture support for Canvas2D.
  • Added a mechanism to discard seldom-used textures when the app receives a memory warning, to keep Canvas+ working even if the app loads more images than fit in memory.
  • Added a lazy-loading mechanism so images can be loaded on first use instead of when the src attribute is set.
  • Fixed rarely-occurring deadlock when pausing audios.
  • Fixed issue with the audio system not being ended correctly if the audio thread was locked.

WebView+ for Android v2.2.0

  • Updated to Chromium 36.0.1985.143.
  • Fixed unnecessary creation of shell additional instance.
  • Fixed cache mode.

See on github.

Plugins v3.0.4

See on github.

Launcher v2.1

  • New UI for both Android and iOS versions.
  • Added filename/URL search mechanism.
  • Added Favorites panel.
  • The Android Launcher now allows navigation through the whole device file system and loads not only .zip files but entire folders too.
  • Improvements to the debug service usability. Also, new error/warning reporting icons.
  • Restructured settings dialog.
  • More stable architecture. The launcher will keep working even if CocoonJS has a runtime problem.
  • Fixed several problems on Android 2.3.
  • Android launcher now allows canceling the app load process.

CLI v1.0.0-0.5.0

  • CocoonJS serve now has livereload enabled by default.

Known issues:

  • Livereload feature not work in system webviews with no websockets support.

See on github.

New CocoonJS Plugins are here!

We have been working hard on improving the CocoonJS plugins. The new plugins for CocoonJS are finally ready and we have been focused on making them easier to handle. By the way, we have also revamped and improved the documentation with more examples and useful links.

 

plugins-docs

To begin with, the main namespace for all the plugins has changed from CocoonJS to just Cocoon. Secondly, there is a new namespace organization and some plugin functionalities that before were included inside the App namespace, are now distributed among them. This is a more detailed list of the new namespaces:

  • Cocoon.Camera: It represents the CocoonJS camera plugin API.
  • Cocoon.Device: All functions related to the device.
  • Cocoon.Dialog: Dialog functions (prompt / confirm).
  • Cocoon.Motion: All functions related to the Accelerometer and Gyroscope.
  • Cocoon.Proxify: It proxies different functions of the WebView environment, like Audio objects and XHR.
  • Cocoon.Touch: It holds some functions to handle the touch events in both surfaces (Cocoon & WebView).
  • Cocoon.Widget: It holds the WebDialog widget, which essentially shows a Webview on top of the CocoonJS layer.
  • Cocoon.Utils: It holds some different utilities.

Additionally, note that Construct 2 plugin will be updated in order to use these new plugins.

Another important change from the old extensions is the new event handling system, based on signal events.

Below there are several examples about how to use the new plugins:

Cocoon.Camera:

Cocoon.Camera.start({
  success : function(stream){
    ctx.fillRect(0, 0, w, h);
    ctx.drawImage(stream, 0, 0, w, h);
  },
  error : function(){
    console.log("Error", arguments);
  }
});

Cocoon.Widget.WebDialog:

var dialog = new Cocoon.Widget.WebDialog();
dialog.show("http://www.ludei.com");
//This dialog will close after 15 seconds.
setTimeout(function(){
  dialog.close();
}, 15000);

Cocoon.App: On application suspended event.

Cocoon.App.on("suspended", function(){
  console.log("The application has been suspended");
});

The new CocoonJS Plugins can be found at Github and, in order to improve them faster and to receive important feedback from our users, everyone can contribute to a better documentation by doing a pull request.

The new CocoonJS Plugins are published in beta and the old ones are in a deprecated state. Consequently, we will stop developing them.

We really hope you will benefit from this new structure of the plugins and the improved documentation.