WebGL on iOS 8 Safari and WebView!

The long wait has ended: we can confirm that webgl is present by default on iOS 8 (and MacOSX) both in Safari and the system webview. We have downloaded and installed iOS 8 beta on an iPad2 and thanks to the CocoonJS Launcher App, that offers access to both the System WebView and to Canvas+, we have been able to confirm that WebGL support is for both mobile Safari and the webview.

IMG_0010

The CocoonJS Launcher App using the iOS 8 WebView running a WebGL demo @38FPS.

IMG_0008

 The CocoonJS Launcher App on iOS 8 using Canvas+ running a WebGL demo @ 60FPS.

These are the results of WebGL support in both Safari and the system webview in iOS 8 on the same iPad2 (website: BrowserLeaks.com)

Safari WebView
iOS 8 Safari WebGL support specs iOS 8 WebView WebGL support specs

CocoonJS has been actively supporting WebGL for more than a year now and developers are able to publish native apps/games with WebGL for both iOS 5.0+ and Android 2.3+ TODAY!. Download the CocoonJS Launcher App from iTunesGooglePlay or Amazon and check it out for yourself right now. No need to wait for iOS 8!

This move from Apple is definitively great news for the whole web based game and app development community (and the web in general).

All hail WebGL! 😉

Celebrating a full year of WebGL inside CocoonJS with ThreeJS running on iOS!

WebGL is spreading everywhere and to celebrate this and the fact that it’s been over a year that CocoonJS has provided support for it inside it’s Canvas+ technology for iOS and Android, we have recorded this video of some of the great ThreeJS demos and games running on iOS!

ThreeJS is the most well known and used open source WebGL engine and the de facto standard today to develop web 3D interactive experiences. At Ludei, we strongly believe that WebGL is the future of advanced computer graphics on the web and that is why we have been actively supporting any technology that pushes it forward during the last year. Type in (or use a QRCode) a URL to a WebGL demo and execute using the CocoonJS Launcher App either in Canvas+ or WebView+, both our HTML5 execution environments that support WebGL, and unleash WebGL on your device today!

CocoonJS 2.0, now ready for HTML5 Apps! Introducing the Phonegap Killer

We have some really incredible news to share with you. Usually, we’d tell you about all the amazing updates that we’ve made to CocoonJS. But, this time it’s different. The new version of CocoonJS, 2.0, is live and it allows users to compile HTML5 apps! Starting today, current Phonegap users have a better and faster alternative! 

Screen Shot 2014-04-03 at 13.50.38

In order to use it, all you have to do is select the new CocoonJS version in your project when you are ready to compile it inside the DevPortal. Please note that this version is still in beta so we will allow you to still use the previous 1.4.7 version of CocoonJS. 

But, let’s explain a bit more about this new version. With CocoonJS 2.0 you can compile your project in the Canvas+ -our accelerated canvas, the best choice to accelerate your game-, or WebView+ -the Chromium-based WebView able to run DOM-based games and apps-. This is great because you can take advantage of each environment: Canvas+ to accelerate and WebView+ to dodge the fragmentation problems HTML5 app developers have when deploying to mobile using other technologies.

With this new step, it doesn’t matter what kind of HTML5 project you are working on: with Ludei’s CocoonJS you can deploy it cross-platform with no headaches because you don’t need to make code changes. Your app or game will work like a charm on all mobile devices and with the full native advantages. CocoonJS is moving the HTML5 development to the next level: finally, all HTML5 projects are first-class native citizens on mobile.

We’re super excited about this launch and happy to be able to offer our developers many other features:

– New launcher design
– Android remote debugging
– Bug fixes
– And much more… (take a look at the full change log on Help Center)

If you haven’t already, sign up for CocoonJS for FREE.

Bonus: We’ve also entirely transformed our website, so check it out here.

Why Flappy Bird should have been an HTML5 game

Here at Ludei we do not want to start a new discussion on the virtues and flaws of the (in)famous game Flappy Bird. We think is undeniable that this game has earned a spot on the videogame history. We will leave to the reader and other media to discuss about the game mechanics, enjoyment and frustration that it has fired heated arguments among the community of both players and developers. Just FYI, here are some interesting links about the game (in case you didn’t even heard about it :?), both supporting and demonising it, that we think are worth reading/watching:

The vital and depressing lessons Flappy Bird can teach indie developers (Forbes)

Flappy Bird Creator Pulled Game Because It Was Too Addictive (The Wall Street Journal)

Some awesome Flappy Bird clones and a bot that learns to play the game

Defending the indefensible: Why Flappy Bird is a good game (Video)

The purpose of this post is different. Ludei is actively supporting and promoting HTML5 as a great platform for developing games and apps and Flappy Bird is a great candidate to be developed in HTML5. First of all, we can be quite confident that everyone agrees is a simple to develop casual game. It could be included inside the “endless scroller/runner” type of games category that usually require less game content to be developed as it can be provided programmatically. There are great examples of this kind of games both developed natively and in HTML5 using Ludei’s CocoonJS technology. Here there is a list of some of them:

Headless (iTunes, GooglePlay)

RunPixieRun (Web)

Red Riding Hood Run (iTunes)

R.U.Nuts (iTunes, GooglePlay)

The bottom line is that HTML5 has already proven to be a great option to develop this kind of games. Why?

  1. This games need fast iteration to get the mechanics right and web technologies are great for that. Changing parameters even during the gameplay is as easy as it can get thanks to the interpreted nature of JavaScript.
  2. This game MUST be cross-platform. The game is so simple that is worth to be EVERYWHERE. I do not foresee many ways to monetize this kind of games but with non-intrusive advertisement, so being everywhere is key to maximise possible revenue. And when here at Ludei we talk about being everywhere, means not only iOS and Android, but the ChromeStore, Mozilla Marketplace, FirefoxOS, Tizen, Kik, web based games portals, etc. This kind of cross-platform deployment is only possible today thanks to HTML5 and the web.
  3. In relation to the statement about cross-platform deployment above, as graphics are simple, not much performance is needed, but it is expected. At Ludei we believe a better HTML5 execution is possible and that is what we have been working on for several years now improving iOS and Android performance. Of course, achieving steady 60FPS is our goal that is why our canvas acceleration technology is here to help. Remember, not just acceleration is important but eliminating fragmentation, specially on Android, is also key to achieve success. With CocoonJS a game like this can run steady 60FPS on an Android 2.3 device and that is something that any player would expect at least. But the good thing is that other platforms will also be able to execute the game, like Tizen or FireFoxOS, with not such acceleration but enough power to provide a good user experience. Another win for HTML5.

Well, we think these arguments are enough to realise that HTML5 is a great option for this kind of games (even better than some other stablished platforms like Unity). It will keep your budget under control (don’t need to spend much money on the game, just some time) and you will be able to maximise the reach truly being everywhere.

This is why we think Falppy Bird should have been developed in HTML5 ;).

But do not take our word to believe it. Our amazing developer community has taken this issue into their hands and we have seen a major Flappy Bird Clone deployment using Ludei’s CocoonJS technology. For example, PandaJS, a new and very well developed game engine fully compatible with CocoonJS’ accelerated canvas, has an open source version of a FlappyBird clone that is a great way to better understand how a game like this can be developed easily with the right tools.

Screen Shot 2014-02-21 at 8.24.02 PM
http://www.pandajs.net/games/flyingdog/

It has been exciting to see the number of Flappy Bird clone games published with CocoonJS grow day by day and to realise how creative developers can get when cloning this basic idea. We ourselves have developed our own version of the game in just 12 hours of work in total with just a developer and a designer involved. Of course, using our own platform for testing (the CocoonJS Launcher) and to introduce advertisement and share capabilities has helped tremendously to speed up this process by orders of magnitude.

Screen Shot 2014-02-22 at 4.16.08 PM
Ludei’s Jumping Submarine (iTunes)
Ludei’s Jumping Submarine (GooglePlay)
Ludei’s Jumping Submarine (Amazon)
Ludei’s Jumping Submarine (Chrome Store)
Ludei’s Jumping Submarine (Kik)
Ludei’s Jumping Submarine (Web)
Ludei’s Jumping Submarine (Facebook)
Ludei’s Jumping Submarine (Mozilla Marketplace)
Ludei’s Jumping Submarine (Flappy Jam)
Also available for OUYA and Tizen!

Here is a list of some of the FlappyBird-like games published with CocoonJS in the last couple of days (and the list grows everyday!). Enjoy!?

https://play.google.com/store/apps/details?hl=en&id=com.maneiros.superminion
http://www.amazon.com/gp/mas/dl/android?p=com.twistedmotion.bouncybird
https://play.google.com/store/apps/details?hl=en&id=com.krunakin.frappy1
https://play.google.com/store/apps/details?hl=en&id=couchknight.lazyrocket
https://play.google.com/store/apps/details?hl=en&id=com.uk4dee.funcat
https://play.google.com/store/apps/details?hl=en&id=com.restylemedia.flappyunicorn
https://play.google.com/store/apps/details?hl=en&id=com.thedigitalchampion.flappysharks
https://play.google.com/store/apps/details?hl=en&id=com.projectstudios.flyingbird
https://play.google.com/store/apps/details?hl=en&id=szymdev.flappyspacedoge
https://play.google.com/store/apps/details?hl=en&id=com.halfgeekstudios.flappyspermiefree
https://play.google.com/store/apps/details?hl=en&id=com.matt.flappybird
https://play.google.com/store/apps/details?hl=en&id=com.wkg.firebird
https://play.google.com/store/apps/details?hl=en&id=org.wisimedia.ravenspike
https://play.google.com/store/apps/details?hl=en&id=com.pixlslave.flapordie
https://play.google.com/store/apps/details?hl=en&id=com.redcube.bird
https://play.google.com/store/apps/details?hl=en&id=com.xgelite.geticy
https://play.google.com/store/apps/details?hl=en&id=com.dg.flyingalong
https://play.google.com/store/apps/details?hl=en&id=com.guizmows.devrelease.tappyflight
https://play.google.com/store/apps/details?hl=en&id=com.visualmoose.fduck

New Announcement: Ludei’s Fun-Featured Segment

Hello fellow gamers, developers,  fans and viewers!

We’ve recently started a new-fun-featured segment. Each week, we’ll be highlighting several games and apps that were developed with the help of Ludei’s CocoonJS technology on our Facebook page. Consequently,  we’ll have a blog post that compiles all the games we featured on on our Facebook page. Don’t want to wait? Like our Facebook page and discover these new games as they are posted!

We want YOU to know about all the amazing projects you can conjure up with HTML5 and the magic of our technology. See the amazing graphics, and variety of features such as push notifications, ads, multi player support and lots more, available for your project!

Don’t take our word for it, play for yourself :

1. Moon Mouse: Help the rat get past hurdles and wily enemies with balloons and his jetpack to make his dream of going to the moon a reality! It’s fun, exciting, and easy!

2. Candy Breaker: Your classic brick-breaker game now with candy! Bounce the piece of candy off the paddle or with power-ups  to remove all the colorful candy in the game!

3. Poise: A challenging game about an alien named Spike whose ship got stuck in the asteroid belt. Help him use the special rescue capsule to get to the ship so that he can safely blast out of the asteroid! 

4. Headless: A game inspired by the true story of Miracle Mike, the chicken that lived without a head for 18 months. Help the poor headless chicken stay alive and see how far he can run! Don’t be a chicken! 

Enjoy these amazing Html5 games that these talented developers have created with the help of Ludei and our CocoonJS technology. Comment and let us know what you think!

Happy Friday and happy gaming!

 

The new and improved CocoonJS is coming for your HTML5 games and now also apps!

We have some much awaited news! As you know, CocoonJS wasan incredible cross platform for only games…up until now at least. The future is now and Ludei has been working hard to make CocoonJS an awesome platform for not only games, but for all kind of HTML5 apps. Exciting, isn’t it? Our entire team is thrilled about expanding our platform to support what everyone’s been waiting for: cross platform development for all kinds of HTML5 projects, even apps! We know you probably got that tingly, exciting feel just itching to use this new and improved CocoonJS for apps and games.

This is a big achievement for us and opens new doors to a whole amazing world of opportunities for you as a developer. You can now focus your development projects on all types of apps and work with Ludei and our cloud and tools for test and deployment, CocoonJS, to publish them across iOS, Android, and more! This web based development will work with native features and with absolutely no code changes. Code once. Publish everywhere. That’s our motto; it’s as simple as that.

You must be excited to know when you’ll be able to use CocoonJS to create your amazing apps. Hang tight and stay tuned- it’s coming soon ;). Before we make this available for everyone, we’re going to be opening up a private beta and we’ll send you more information by email. Interested in learning more? All you have to do is provide us with your email and if you qualify, you’ll get more info, tips, and tricks straight to your inbox.

CocoonJS is really the easiest way to have your web based app on mobile. You’ll save a ton of time…and..well, you know what they say..time = money! Don’t wait, start using CocoonJS for both games and apps!

Do you want more information? Sign up!

Tips on OpenSource tools to the rescue of Javascript developers

Desktop JavaScript/HTML5 tools like in browser debugging, inspectors, profilers, … are great and thankfully, many of these tools are beginning to be available for mobile. Among these tools, there are some open source projects that we, at Ludei, use from time to time to check our javascript code. In this blog post we’d like to introduce you two different tools that can ease your debugging process of Javascript code.

Weinre: weinre is a remote web inspector. This tool enables you to debug remotely your JS code. The only change you’ve to do in your code is to include a small JS file in your index.html. Using this script, you can connect to your remote site running inside CocoonJS through your web browser. You can find more info on this tools in the following url.

Lighttable: lighttable is a Javascript IDE where the JS code is evaluated as you write it. You can perform REPL on code that is executed inside CocoonJS. In a similar way to weinre, adding a small script to your index.html empowers lighttable to evaluate Javascript code. You’ll be able to see the results of CocoonJS variables and so on inside lighttable. You can find more info on light table at their official site.

Pro tip: Using tools is fine, but if you want to have more verbosity on our CocoonJS console, you can override the following function:

window.onerror = function(a, b, c) {

               alert(“Error: ” + a + ” ” + b + ” ” + c);

}

Drop us a line about your experiences debugging javascript in CocoonJS in our community site!

Reinvention of HTML5 Gaming : Partnership with Goo Technologies

Ludei is now working with Goo Technologies to reinvent HTML5 gaming and bring you the best 3D graphics. Goo technologies is a leading company using HTML5 high-end graphics for games and interactive visualizations on the web ; it is also the creator of the Goo engine.

Why is this so great? Game developers can now create amazing WEBGL games with rich 3D visuals using Goo Technologies’ Goo creator or Goo game engine. Then use Ludei’s technology, CocoonJS, to deploy them everywhere on the web and mobile app stores. It’s the perfect package to launch the games you want, and the games customers enjoy!

They say this partnership will “help bring WebGl games with high-end HTML5 graphics to mobile platforms like iOS and Android.” This is a challenge that we’ve been facing, and the first steps to bridging this gap.

Ludei’s CEO, Eneko Knorr, states “Goo Create, with its web-based platform, ease-of-use, and powerful engine, is an exponential leap forward in terms of making HTML5 and WebGL a truly competitive, cross-platform game development ecosystem.”

Learn more about this partnership, and watch a demo video here!

Here’s wishing you all a Happy New Year from the Ludei team! We wish you the best, and cheers to a wonderful 2014!

New venture with Nickelodeon!

Ludei Brings New Technology to Nickelodeon’s Emmy Award-Winning Nick App for Android

nickelodeon logo

Ludei, a leading app and game development platform, is working with Nickelodeon to apply its newest CocoonJS technology to the games section of Nick’s Emmy Award-winning Nick App for Android devices. Scheduled for a December release on Android, Ludei’s CocoonJS technology will deliver significant performance improvement to the HTML5 games featured in the Nick App for Android.

“Technologies like HTML 5 allow us to create games and content that are playable across multiple platforms.” says Dhimiter Bozo, Vice President Engineering, Nickelodeon Group. “Performance is a key metric for Nickelodeon and is a goal we aim for with every game. Ludei’s easy-to-use solution will help us deliver a consistent gaming experience in our Android app.”

 “Nickelodeon’s use of HTML5 technology is another example that HTML5 is ready for prime time and Ludei’s technology will be instrumental in powering HTML5 game deployment,” said Eneko Knorr, CEO of Ludei. “Nickelodeon’s focus on HTML5 technology for its game development strategy is a big vote of confidence for HTML5 and its ecosystem. It looks like 2014 will be a big year for HTML5, and engagements like this one further underscore Ludei’s role driving the mobile HTML5 app development industry.”

More than 10,000 developers, including top game publishers, are using Ludei’s CocoonJS to power HTML5 applications, helping customers achieve the speed, complexity and features normally reserved for native apps.

More than 700 games have been published using Ludei’s CocoonJS, including ScribbleMix, iBasket, Lunch Bug, Bubble Soccer and Rhino Hero. Developers can finally code once and publish on every store with one click: Apple Appstore, Google Play, Windows, Amazon, Nook, FirefoxOS, Pokki and more.

Mobile GPU setbacks

We received a question in the forum that prompted us to write a detailed explanation of what things you should have in mind when developing games for mobile hardware.

Here’s the question by xero in our forum:

In earlier posts you mentioned to keep the number of canvases tight. However, it is a common technique in browsers to use multiple layered canvases to gain performance boost, since only some part of the content gets redrawn. What are you’re suggestions about that? Are CocoonJS canvases more expensive than browser ones? Will I benefit from having to redraw less stuff or will the overhead (memory, CPU?) of managing additional canvases by CocoonJS overweight all possible performance gains?

The first thing you must understand to develop for mobile platforms is those devices have very low performance compared to what you can expect in a modern PC. On the other hand, while most mobile browsers draw everything using the CPU, CocoonJS uses the GPU to draw shapes and images really fast, so the picture is more complex than it would initially appear. Mobile devices are slower, but we’re squeezing every last bit of performance out of them.

In this case, the performance optimization mentioned by xero is generally useful in run-off-the-mill browsers because blending several images in a canvas is pretty slow there. In CocoonJS however, image blending is done by the GPU, so it’s a lot cheaper.

The optimization does usually work, however, if you intend to draw lots of static images into a canvas, and then reuse that canvas during lots of frames. In effect, you’ll be creating a “cache” with that image to reuse it later. This can be very useful if you want to display, say, 500 objects which won’t change for a long time.

The thing is, drawing from that “cached” canvas to the final screen isn’t free either, so you must make sure the original draws are actually slower than drawing the “cache” canvas will be. For example, using a canvas to cache a simple static background probably won’t get you any performance improvement compared to just drawing the background itself.

More to the point, drawing full-screen canvases can easily exhaust what in GPU jargon is called “fill-rate”. Fill-rate, usually expressed in MPixels/s, is the speed at which a GPU can paint pixels. A mid-range GPU nowadays has about 500 MPixels/s of fill-rate. If you intend to run at 60fps, that means you get ~8.3 MPixels/frame. If your screen has a resolution of 1280 by 720 (pretty standard nowadays), each fullscreen canvas you draw takes 0.92 Mpixels of fill-rate. That means if you have 5 canvases you’re already exhausting more than half the fill-rate your GPU is capable of delivering.

Some devices have such a small fill-rate/screen-size ratio that you can only get about 2-3 fullscreen draws before you hit the GPU’s max drawing capacity. This is unfortunately a hardware limitation you’ll have to think about in your games if you want to deploy to low-power mobile devices.

So, to sum everything up, if you want to optimize your game you’re gonna have to know a bit about the hardware, test your assumptions and measure results. CocoonJS provides you with a powerful time profiling mechanism you can use to track how much CPU each part of your game is using.

In the case of the optimization mentioned by xero, how well it works will depend on how many canvases are used, how much work is saved by drawing to a canvas, how powerful is the hardware, and if fill-rate is actually the bottleneck for you! The only way to be sure is trying the technique in your game and measuring performance. Always measure!