HTML5 games are hot in China

For the past several months we have been traveling to China to attend HTML5 game development related conferences where we have been invited to participate as speakers (GMGC, H5GDC, ChinaJoy, …). It has been an amazing experience to see how both the Chinese markets and developers are embracing HTML5 as a possible great way to drive gaming content in a different direction from the polluted and very complex to stand out of what are the so called “traditional” native content stores (iTunes, GooglePlay, Amazon, …). We have and still are learning a lot about this interesting new ecosystem that is being developed in China.

GMGCH5 H5GDC

HTML5 games section at GMGC and the HTML5 Game Developer Conference (yes, H5GDC!).

GDCTalkChinaJoy

It is strange to have lived how the western countries have led the HTML5 game development for some years now, but there has not been a great reception from the markets. We are still using the same native markets as any other technology to build native games using HTML5. And do not get us wrong, it is one of the many beauties of HTML5: content can be delivered in many different forms, including native apps.

The great advantage from HTML5, apart from being cross-platform, is that it can provide new ways to access content on demand. This kind of possibilities work the best in the area of social networks, where engagement can be achieved in a much easier and organic way: just provide a link to some content and download/consume it right away. It is what we are doing in our Facebook or Twitter timeline’s in a daily basis with web content. Imagine being able to integrate the missing pieces of realtime communication with the other players that a social network provides, with monetization using some kind of virtual currency, native feature access, great performance, etc. from within the social network app itself.

All this is what is happening in China right now. Of course, there are plenty of differences between the Chinese market and its user base compared with western countries, but the idea is exactly the same. Chinese social networks (so called Super Apps in China) are very diverse and users are used to being active in more than one at the same time. These networks are great platforms for native game distribution nowadays. But the experience is disconnected as the user selects the game and has to go to a store to download the content and execute it as a separate app. With HTML5, Chinese super apps are able to engage the user inside the app and still provide all the mechanisms the social network is able to provide. This is the type of HTML5 content use case we at Ludei have been waiting for years but in the Western countries haven’t been successful yet for different reasons (the messaging app Kik has been the only significant example). So imagine our excitement when we started to travel to China to learn from what’s happening there.

It is very early still but China has established the steps in the right direction to make this whole HTML5 gaming ecosystem a reality. New technology companies have started to create great technology and tools, markets/super apps are embracing HTML5 and creating new sections for this type of content and users are starting to show that acquiring them can be much easier if the whole experience is integrated inside the social network and the content is virally distributed among players. The perfect storm.

This is a great opportunity for Ludei. China is a great believer in the benefits of HTML5 runtimes and Ludei has both the technology and the community to provide great content to the Chinese market. Runtimes are being integrated inside the Super Apps so the fragmentation, performance and feature problems of traditional webviews are eliminated to the benefit of the developers.

We have been in touch with all the players in the sector: developers, publishers, technology providers, markets, carriers, … and we are working hard to establish a great way to help all the great developers that have used Cocoon so far to publish their games (or any HTML5 game developer out there regardless if they haven’t used Ludei’s tools 😉 reach this very interesting but complex market in China. We have created a close relationship with the most important HTML5 game publishers in China and many developers are aware of Ludei and using Cocoon to publish their games already in the country. As a matter of fact, the game that has been awarded as the best HTML5 game in China has been developed by Wozlla, a company that has been using Cocoon for over 3 years now and with which we have a very close relationship.

WozllaAwardOur friends from Wozlla receiving their “best HTML5 game” award at H5GDC

We will make all the efforts possible to make the transition to this market as easy as possible for anyone that wants to leverage their content in the country of the Great Wall.

Exciting times for HTML5 games.

Cocoon 2.2 Update

We have pushed another Cocoon update to the cloud with some bugfixes and new features, check them out.

Canvas+ improvements

  • Added support for Cookies in Android XHR.
  • window.location.href = URL to work.
  • Made getAttribute to return null if the attribute is not found. Previously it returned an empty string.
  • Improved XHR related error messages.
  • Added postMessage support to window.
  • Support for the anchor tag/element.
  • Added “hasAttribute” and “classList” to every node.
  • Added search to location.
  • Added JSON support for XHR connections and fixed a bug that was passing “undefined” to user and password in XHR open commands (did break connections in Android with JQuery).
  • Added minor modifications to make Canvas+ more JQuery and Construct2 (non CocoonJS export) friendly.
  • Added srcElement to every event instance.
  • Added DOMParser, querySelector and querySelectorAll.
  • Added getElementsByClassName.

Canvas+ extensions

  • Added secure text option for the text dialog
  • When a canvas object is disposed from javascript, dispose the context too.
  • Added XHR Dispose.
  • Only allow input capture on canvas and image HTML Elements.

Canvas+ bug fixes

  • Store vertexAttribPointerData in the WebGL defender. These fixes some conflicts with canvas2d and wangle renderer (specially on Pixi V3).

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

 

CocoonJS Core 2.1.1 Bugfixes release

We have been working during the last weeks on solving some issues that some of you have reported through the forums and we have just pushed them to production. You already have this bugfixes available if you are compiling with CocoonJS Core version 2.1.1 in the cloud. Launcher had also been pushed to AppStore and PlayStore and will be available any time soon.

 

– Fixed touch status error when the application shows a dialog.

– Audio bug when handling an audio interruption on iOS (notification center, calls, …).

– Fixed depth buffer and stencil buffer creation bug on some Android GPUs.

– Added iPhone 6 Launch images to support full iPhone 6 resolution.

– Fixed error when receiving notification payload when app is not running on iOS.

– Fixed error sending multiple local notifications in Android. Only the last one was received.

– Fixed WebGL method glCompressedTexSubImage2D bug when using compressed textures.

– Fixed bug when loading base64 images in WebGL.

– Fixed Android bug when using “./” in APP_STORAGE references.

 

We are still working on some other fixes so you can expect another bugfixes release some time soon.

Thanks for sending us bug reports, that is really helpful to keep on improving CocoonJS and make it a better product. If you still have any error that is bugging you, please report us using the bug report template:

http://support.ludei.com/hc/en-us/articles/203459717-How-to-report-a-CocoonJS-bug

 

Thanks for using CocoonJS!

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!

 

Powered By CocoonJS: Elliot Quest

Here at Ludei we try to review and stay in touch with many (if not all) of the developers in our community. We are always amazed by the quality of products that you guys publish and try to provide the best feedback and listen to all your needs in order to improve the platform.

Today, we want to focus on a very interesting project we knew about some time ago as it was a successfully backed KickStarter project that looked amazing and was highly anticipated: Elliot Quest. We have been in touch with the mind behind the project (Luis Zuno) and we are happy to announce that the OUYA version of the game has been published powered by CocoonJS’ Canvas+ technology. In this case the game was developed using ImpactJS, one of the many game development engines Canvas+ supports. The game is also available on Steam now and there is a WiiU version coming out soon. 

Luis has been really kind to write some words about his project and the process of using CocoonJS.

“Since I started working on Elliot Quest, I always wanted to have the possibility to publish my game on a platform such as OUYA, but due to the limitations of the default HTML5 runtimes it was nearly impossible. I was getting 16FPS and the game was unplayable.

Fortunately I found CocoonJS and it’s Canvas+ technology and my wishes became a reality! The performance is simply awesome, the framerate is stable and it supports the gamepad API with the same HTML5 standard API. It is fully compatible with ImpactJS and as a developer it was a relief to find the CocoonJS cloud compiler service. Compiling the game and testing it on the console was a delight and the support team helped me during the whole process.

I recommend CocoonJS to any developer that wants to get their HTML5 products to mobile native platforms.”

We want to applaud the great work behind Elliot Quest and all of the projects that are being published using CocoonJS. Thank you very much everyone, you are the reason why CocoonJS exists and hope to see more great products published in the future!

If you have an interesting project, do not hesitate to let us know about it. We will try to periodically write posts about interesting apps published using CocoonJS.

 

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.

CocoonJS CLI now with live reload

At Ludei coding never stops, and today, we’d like to introduce to you the new feature we’ve added to our CocoonJS Command Line Interface: live reload.

We are javascript developers too and we’re aware of the need of being productive. We realized we needed a faster way to iterate over our JS code, so why not include the live reload capability to our CLI?

For those who don’t know what live reload is, this feature reloads automatically the code of your app inside the connected browsers each time you save your changes. This way you forget about saving, going to the launcher, and refreshing the content to see the changes every time.

How do I benefit from this new feature?

First of all you must update your cocoonjs-cli version. You can find more information about our CLI here.

sudo npm install -g cocoonjs

Then, you can create a new project, as always:

$ cocoonjs create MyProject com.ludei.test LudeiTest
$ cd MyProject
$ cocoonjs platform add android
$ cocoonjs serve

You’ll read a message like this one:

[CocoonJS] Executing command ‘serve’
[CocoonJS] A ‘cordova prepare’ is needed before executing ‘cordova serve’.
[CocoonJS] Command ‘cordova prepare’ executed correctly.
[CocoonJS] Static file server running on port 8070 (i.e. http://192.168.0.43:8070)
[CocoonJS] Path: /Volumes/data/hello-world
[CocoonJS] CTRL + C to shut down

Now, open a launcher an point to that web address. In our case http://172.16.100.43:8070. You’ll find the default main page. Also, if you are working in the same machine where the command was executed, you can point to the loopback/localhost interface (127.0.0.1).

Open the contents of the www folder with your code editor, and edit them. Each time you save the code, the launcher will refresh with the new content!

The video below is a good demo.

We hope you’ll love it!

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