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!

iBasketGunner: Ludei’s First 3D WebGL Mobile Game

Ludei started as a game development company around 4 years ago. Then we focused most of our efforts in platform and technology development. Still, we publish a game or two from time to time that help us fulfill two main purposes:

  • Taste our own dog food ;). Test the CocoonJS platform.
  • Have fun! We love making games!

iBasketGunner is one of our latest productions. It continues the saga started by our fairly successful game iBasket. We started iBasketGunner as we wanted to test 3D capabilities of our WebGL implementation for both iOS and Android and also include all of the extension services into one product. This game has them all: In-App Payments, Social Network Integration, Multiplayer, Advertising, … and of course, 3D and even an ad-hoc implementation of a 3D physics native binding, one of those cool things only CocoonJS can offer. Let’s check out the result in the following video:

And now, let’s talk about some of the technical features of the game:

  • It is definitively one of the best looking 3D WebGL games for mobile in the market. Our team has worked on some cool shaders for the ball, the net, etc.
  • It uses a modified version of ThreeJS, one of the most well known 3D WebGL open source engines out there.
  • We have used all of our CocoonJS extensions in this game. It has been great to have a single API for all of them, even the complicated ones like multiplayer through Game Center (for iOS) and GooglePlay Game Services (for Android in GooglePlay). Ads, IAPs, Social Network Integration, etc.
  • There is our first approach to a 3D physics engine native integration using Bullet and it’s JavaScript counterpart AmmoJS. This makes the game run smoothly as JavaScript is not a very powerful language to make math computation. We have even tested the game on low-end devices such as the iPhone4 or even on a Nexus One (Android 2.3). Of course the performance is lower, but you still can get 20-30 FPS on them!

We really hope you enjoy iBasketGunner that is available in iTunes, GooglePlay and Amazon!

 

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)
[code lang=”bash”]
$ sudo npm install -g cocoonjs
[/code]

Create a Cordova project and add the Webview+ for ios:
[code lang=”bash”]
$ cocoonjs create MyProject
$ cd MyProject
$ cocoonjs platform add ios
$ cocoonjs plugin add com.ludei.ios.webview.plus -d
[/code]

If you already have a Cordova/Phonegap project just run the following command
[code lang=”bash”]
$ cocoonjs plugin add com.ludei.ios.webview.plus
[/code]
And now your project is powered with the Webview+. You can test it by running this command:
[code lang=”bash”]
$ cocoonjs emulate
[/code]
or
[code lang=”bash”]
$ cocoonjs run
[/code]

More Info

About HTML5 APIs

CocoonJS Announces the WebView+ for iOS 8: Publish WKWebView Powered Standalone Apps

Apple’s new iOS version 8 announcement brought many good news for the HTML5 developer community. Safari has improved much (it now supports WebGL for example, yay!) and the system webview now comes in two different flavors: UIWebView and WKWebView. The main difference is related to the JIT optimization for JavaScript. To put it in plain words: the execution speed for JavaScript code is orders of magnitude faster using a JIT compiler and thus, your web app may run much faster inside the new WKWebView than in our older friend the UIWebView. To know more about the WKWebView and to have a glimps of the performance improvements, please, check the following great article by Sencha or check our own tests below.

At Ludei, we immediately started playing around with the WKWebView as we were eager to provide it along with all the great runtime environments we have (Canvas+, WebView and WebView+ for Android). But there was a catch. At least in the current version of iOS, there is no way of deploying a native hybrid HTML5 app using the WKWebView that has access to local files, something that is quite common on Hybrid apps to be able to execute them off-line. But Ludei has always loved a good challenge and we decided to solve the problem and make the WKWebView available to every developer that would like to use it.

Today, we are happy to announce that we have added a way to create WKWebView based completely standalone hybrid applications for iOS 8 in our CocoonJS Cloud Compiler System version 2.1. As far as we know, no other technology allows to publicly create completely offline WKWebView based apps at the moment. We have decided to call the WKWebView based runtime environment: WebView+ on iOS 8. We will still provide Canvas+ and the regular UIWebView, but every CocoonJS developer that wants to take advantage of the WKWebView, is able to do it right now. Whenever the application is running on an iOS version lower than 8.0 where the WKWebView is not available, there will be a fallback to the UIWebView.

We have also added this shiny new WebView+ for iOS inside our CocoonJS Launcher that is still in review by Apple. Meanwhile, if you want to check the awesome performance that it provides, you can build a Custom CocoonJS Launcher using our cloud.

ADDITIONAL NOTE: We are working hard to add the WebView+ to the CocoonJS CLI too! Stay tuned!

WebView+ Vs WebView on iOS 8

We have performed some tests ourselves to check how much of a better option the WKWebView (CocoonJS WebView+ for iOS 8) is compared to the UIWebView (CocoonJS WebView). These are the results:

Canvas intensive operations

All the test were executed on a iPad Air iOS 8.0.2

First test

2000 sprites rotation + translation with sprite animation rotation and random colored vertices

  • Webview+ : 30 FPS stable
  • System Webview: 6 FPS stable

Second test

3000 sprites Rotation + translation. Using 3 framebuffers. Transparency and tint with custom shader and custom clip area

  • Webview+: 20 FPS stable
  • System Webview: 4 FPS with unstable frame timing

Third test

5000 sprites 32×32 using rotation + translation, tinted vertices and MipMap

  • Webview+ 17 FPS stable
  • System Webview: 3FPS with a frame timing between 379 and 400ms

Tests with well known benchmarks

All the test were executed on a iPhone 5 running iOS 8.0.2

Octane 2.0

Octane 2.0: is the javascript benchmark from the v8 team. Lets see the differences between webview+ and webview. The higher the mark, the better.

Octane test Webview+ Webview
Richards 2712 117
Deltablue 2834 125
Crypto 3491 203
Raytrace 3474 365
EarleyBoyer 5118 636
Regexp 382 42,5
Splay 2384 605
SplayLatency 1641 2101
NavierStrokes 3455 323
pdf.js 3025 1006
Mandreel 2407 118
MandreelLatency 1784 702
GB emulator 4593 943
CodeLoad 5315 3912
Box2DWeb 2806 689
zlib 4675 N/A
Typescript 4363 N/A
Octane Score 2819 N/A

N/A means that the benchmark stops or freezes the the device.

Wirple BMark

This is test for webGL performance. The higher the score, the better.

Test Name Webview+ Webview
Canvas test1 61 26
Canvas test 2 38 10
WebGL test 1 17 7
WebGL test 2 14 7
Total score 130 50

Of course, some screenshots of the results 😉

The webview+’s results on Wirple BMark

Screen Shot 2014-10-22 at 18.34.00

The system webview after running Wirple BMark

Screen Shot 2014-10-22 at 18.34.14

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.
[code lang=”javascript”]
myImage.dispose && myImage.dispose(); // The same for canvas and audio objects.
[/code]

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.
[code lang=”javascript”]
Cocoon.on(“memorywarning”, function() {
// dispose of cached images and canvases that can be recreated
});
[/code]

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 Enables Android Wear HTML5 App Development

Google announced Android Wear this year, a new Android OS version suitable for wearable devices (Google Glass and smartwatches for now). Of course, Ludei right away started to wonder what kind of HTML5 execution capabilities will be available in such interesting devices. A couple of weeks ago, we purchased several Android Wear watches and begin to perform some tests over them. The first thing that we noticed was that at least this initial version of Android Wear does not come with a system WebView. It kind of makes sense as it is a very constrained environment and webviews are very resource demanding. Every attempt to execute a full fetched web environment on Android Wear Smartwatches has shown really low performance. Still, we wanted to see HTML5 running on a Smartwatch and how a good of a fit our highly optimized Canvas+ technology could be for Android wear. Our results were really encouraging as Canvas+ works amazingly well on these devices. Check out the following video that shows some HTML5 canvas apps and games running on Android Wear!

Of course, some minor modifications had to be done both to the technology and our cloud compiler, but we are more than happy to announce that we have enabled a new compilation target inside the CocoonJS Cloud Compilation System so any developer inside our community can test it. As far as we know, CocoonJS is the only technology that allows to deploy hybrid HTML5 applications for Android Wear even supporting WebGL! This is just an initial testing environment that allows you to build Android Wear applications but there are some initial limitations:

  • Do not add ad services. These services use the system webview to show ads and as we mentioned, Android Wear does not have a system webview.
  • Although you will be able to install the resulting APK on your smartwatch, we need to work on ways to better integrate the Android and Android Wear experiences. Please, use this initial builds for testing purposes.

If you want to test it, you need to make sure your app works on our Canvas+ environment. You can test it using the CocoonJS Launcher for iOS on iTunes, GooglePlay or Amazon. Then, just go to the CocoonJS cloud compiler, create or select an existing project, go to “Compile Project” and you should see the new target “Android Wear”.

Screen Shot 2014-10-23 at 12.44.03

Once you select the target, as it happens with any other CocoonJS compilation, a simple APK will be built in our cloud service, similar to the GooglePlay, OUYA or Amazon APKs, and it will be sent to your email account, but this one completely prepared to be executed on a Android Wear device. Connecting to Android Wear devices is similar to any other Android device as you will need to activate the developer options in the device and allow USB debugging. 

Enjoy testing your games and apps on an Android Smartwatch!

“Tic Tac Toe by Ludei” turns into an HTML5 mobile game

We want to present to you the new Tic Tac Toe by Ludei, one of our famous board games, originally a native game and now re-written in HTML5 and JavaScript and published thanks to CocoonJS. This new version incorporates many of the advantages of our games development platform providing the same as native gaming experience.

HTML5 development has led to a complete makeover of the original game so we hope you enjoy it.

 

Tic Tac Toe by Ludei

 

Tic Tac Toe by Ludei is already available on the App Store, Google Play, Google Chrome Store and Firefox MarketPlace . The versions for Tizen and Amazon Store are coming soon!

Find out the different game options and enjoy playing:

-Player vs Machine
-Player vs Player
-Multiplayer online

Who will be the first to get three in a row?

Download it now!

Tic Tac Toe icon

available-appstore1

 

google play

ChromeWebStore_Badge_v2_496x150

firefox-marketplace_logo-wordmark_RGB-300dpi-640x240

Ludei GDC wrap-up

Last week the Ludei team was at the very exciting Game Developers Conference and we had a blast talking to developers about HTML5 and our awesome technology.

Although HTML5 hasn’t fully blown out yet, we saw a lot of excitement and hope for HTML5 amongst all game developers (flash, iOS, and Android).

We talked to various kinds of developers that wanted to make the transition to HTML5 that were looking for a good solution in the present.

 

ludei stand gdc

 

We all sensed the rising opportunity for HTML5 and all the developers we’ve talked to were very interested in learning about CocoonJS.

Because our technology does not constrain developers to a SDK or library (thus no code changes), we believe that our technology is positioned to provide the right support in the present while being able to adapt to the inevitable changes of HTML5 in the future.

Thus far, we have gotten great feedback and even though GDC is over, we look forward to hearing from everybody!

Ludei on VentureBeat!

We are very happy to announce that our HTML5 technology,CocoonJS, has been featured onVentureBeat!

This is awesome news for us since VentureBeat is one of the most well known blogs that focuses on innovative companies and we are very honored!

We’re working hard to offer a world class leading technology for all HTML5 developers and you’ll be able to see it very soon.

venturebeat ludei
 

As you may have read, Ludei is launching CocoonJS, a new platform to turn the JavaScript HTML5 games into fast applications that take advantage of the graphics hardware in mobile devices.  We’re about to publish CocoonJS launcher that allows you to test your HTML5 canvas game running in an Android or iPhone device.

Hope you’ll like it!  😉