Best Games of Telegram

Since Telegram announced its Game Platform we have been very enthusiastic to work in it as you might already know. After all, along this article, we have already published a tutorial about how to develop a game bot and another tutorial about porting your HTML5 games to Telegram.

But we also like to play and we realized it is not very easy to find games in Telegram (only for the moment… we hope); that’s why we want to list here our favorites games.

Don’t Die in @DontDieBot

Listen to me, this is a good one. Really challenging but extremely easy to learn. The responsiveness of the controls is perfect.

In each level you drag your character to pick up a key that will open the door of the next level. But don’t let the zombies see you… or smell you.

iBasket in @ludeiBot

What? Yes, it is one of our games, but we really worked hard on it to create a good game. And more than once we have had bad looks at the office when someone gets the first place in the rankings.

Simple. Colorful. Fun. Throw the balls and get the maximum amount of points in 90 seconds. Don’t think too much, if you don’t score for a certain amount of time you lose the score multiplier. And listen here, the key to be the best: clean shots give you 5 extra seconds of play, maybe using 2 seconds to aim instead of 1 is worth it.

Kung Fu Inc in @gamee

Tap left or right to throw a punch in either direction to destroy… vacuum cleaners?

Yep, that’s right. I guess somebody doesn’t really like Roombas. Try to not throw punches in the air, the combo multiplier is the key to reach the top of the ranking.

Jumper Frog in @microgamesbot

An old classic not so common nowadays. If you are young maybe you don’t even know it.

Jump across the road avoiding the cars and use the turtles and the logs to not fall in the water (just ignore the fact that every frog can swim, we all do). Your objective is to reach the top of the screen and eat every fly in the way.

Flappy Bird

There is more than one Flappy Bird and there aren’t many differences but visual aspect. Play the one you like the most, all of them are equally addictive.

Flappy Bird in @awesomebot
Jumping Submarine in @ludeiBot
Skipper in @gamee

Meteoric and Meteoric Plus in @gamee

Combine similar asteroids to form a planet. Combine the planets to create stars. Combine the stars and watch it EXPLODE!

In Meteoric, the asteroids fall from the top and you have to pile them next to their alike to combine them; whereas in Meteoric Plus, the asteroids appear randomly and you drag everything to the top, right, bottom or left (like in the game 2048), if two similar objects collide they will fuse.

2048 in @awesomebot

Speaking about 2048, that is a great game too. Of course we can find it in Telegram.

One of the best games to compete with your friends. But for the love of Cthulhu, keep your highest tile in a corner of the board.

Sumon in @ludeiBot

A target number appears, you have to combine numbers in the board to sum the exact amount. Then, the target changes and you have to do it again until there are no more numbers in the board to complete the level. Easy, right?

Well, you have to do it fast; and it is better if the numbers you combine are far apart from each other. If you are one of those who asks why bother learning to do mental calculus if every mobile has a calculator nowadays, maybe it’s not that easy.

Every level concedes notably more points than the previous one. So you might think that playing in a easy level for several minutes will assure you a place in the winners podium, when actually, anybody capable of playing in a harder level will surpass your score in a matter of a minute.

Hextris in @awesomebot

I’m sure you know Hextris. Another of those extremely simple games but incredibly competitive. Share it in your chats, you will see how everybody tries to get the record but “casually, they were just playing in the public transport”. Yeah… suuure… me too…

I haven’t even put any effort to get that screenshot, I could do it better…

Do you agree with our list? Did we miss any game? Leave a comment if you found a really good game we didn’t list here. We want to try it, it’s not easy to find them.

How to adapt HTML5 games to be published on Telegram

The Announcement

On October 3rd, Telegram published its gaming platform. Now, the bots are able to launch HTML5 games inside Telegram and share your score with your friends. @gamebot and @gamee were the two first bots announced and Ludei is not going to be the last when it comes to HTML5.

The Rules

When creating a game with @BotFather, he will make you accept a series of rules:

You will not implement any ads or any external links on your custom URL pages.
You will not invite users to pay for any services provided on custom URL pages.
You will not use any data collected over the course of user interaction with your custom URLs for spamming Telegram users.
You will not transfer any Telegram data collected over the course of user interaction with your custom URLs to any third parties.
In order to protect the privacy of Telegram users, your custom URL pages must not set any cookies.

Now, those are some serious rules that made us change some things in our games.

Due to these rules we had to remove every way of promoting the rest of our games and every social media integration like Twitter or Facebook. Thankfully, we didn’t collect any information for third parties neither used cookies in our games -removing all that sounds like a headache.

Game rules by @BotFather

Sharing the games

The first thing you notice when reading the technical post is the script you have to include inside your games. It is a rather short script. This is because launching a game inside Telegram means opening a URL, provided by our bot, in the webview of Telegram. Our game should need hardly any changes.

This script provides us with the TelegramGameProxy.shareScore() method, which is used to share the game (but not a score, weird) with Telegram chats. It works like the usual share button in Telegram, there is no complexity with this part. We added a button with the shareScore() function at the result screen of each game in case you don’t know what to do with it.

Sending scores

The name “shareScore“ is quite confusing since you can’t even pass it a parameter to share. To actually send a score you should also read our post about a game bot creation. The game must send the score to the bot (with a HTTP POST, in our case) and the bot is responsible of notifying Telegram of our score. But how does the bot know who we are when it receives it? We solved this problem sending along the score a number of identifiers the bot previously added to the URL of the page. These identifiers are always userId (identifies the user) and either inlineId (if the bot was summoned with an inline call), or the pair chatId and messageId. The necessary ones are in the request Telegram sends to our bot when a user taps the play button.

@ludeiBot updates scores in Telegram

To sum it up: the user activates the play button, Telegram asks our bot for a URL to open and sends the identifications of the user, the bot returns a URL containing those identifiers in a query, and finally, our game can send the score and the identifiers of the user so the bot can update the rankings.

Detecting Telegram

At this point we have a game that can be published to Telegram, but why would we use two versions of the source code of our game? We still want to be able to promote our games if the user plays at ludei.net. If we can know when the game is executing as a Telegram game we can serve it from its original server to Telegram. Any special change we made for Telegram just has to follow a condition.

At first we tried checking window.TelegramWebviewProxy !== undefined (like Telegram does in its script), but somehow TelegramWebviewProxy is undefined even inside the Telegram webview, so in the end, we just check if the URL contains the identifiers of Telegram our bot adds. In our case the identifiers were query parameters because our games already had a method to parse them. Although they could have been hash parameter too; Telegram exposes an object containing them.


function getIsTelegram() {
  var qs = getQueryString();
  return !!qs.inlineId || !!qs.chatId || !!qs.messageId || !!qs.userId;
}

function getQueryString() {
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = decodeURIComponent(pair[1]);
      // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
      query_string[pair[0]] = arr;
      // If third or later entry with this name
    } else {
      query_string[pair[0]].push(decodeURIComponent(pair[1]));
    }
  }
  return query_string;
}

function getIsTelegram() {

var qs = getQueryString();

return !!qs.inlineId || !!qs.chatId || !!qs.messageId || !!qs.userId;

}

function getQueryString() {

var query_string = {};

var query = window.location.search.substring(1);

var vars = query.split("&");

for (var i = 0; i < vars.length; i++) {

var pair = vars[i].split("=");

// If first entry with this name

if (typeof query_string[pair[0]] === "undefined") {

query_string[pair[0]] = decodeURIComponent(pair[1]);

// If second entry with this name

} else if (typeof query_string[pair[0]] === "string") {

var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];

query_string[pair[0]] = arr;

// If third or later entry with this name

} else {

query_string[pair[0]].push(decodeURIComponent(pair[1]));

}

return query_string;

}


function getIsTelegram() {
  var hs = window.TelegramGameProxy.initParams;
  return !!hs.inlineId || !!hs.chatId || !!hs.messageId || !!hs.userId;
}

function getIsTelegram() {

var hs = window.TelegramGameProxy.initParams;

return !!hs.inlineId || !!hs.chatId || !!hs.messageId || !!hs.userId;

}

Testing your game

The last thing to do is testing. Most of the testing can be done easily like with any web page development: set up a local server and open the URL in your devices. But we found some resolution problems when Telegram launched the games. Some elements appeared several times larger than when using a typical browser app. Therefore, one last advice from us is to create a minimal test bot, capable of just launching the games, enough to be able to fix any bug that might appear only in Telegram.

Our games

Check out our games (please open the following links on your mobile device):

How to create a game bot and publish your HTML5 games on Telegram

At Ludei we love HTML5 games, that’s what our motto is. That’s us. We have developed a lot of HTML5 games, from showcases to test our Cocoon.io platform to fully featured games, with 20M+ downloads. On October 3rd the Telegram team announced its gaming platform, a ready to play, easy to build, social and lightweight solution to provide digital entertainment to Telegram users (like us, the Ludei team). As Telegram’sg announcement tells us: “the underlying technology is HTML5…” , we may have an idea here; grass is green.

After we checked the examples provided and the documentation, we decided that our bot (@ludeiBot) should be capable of serving our games, setting the user’s score and answering inline queries. All this while being a social bot, that is, our bot and our games can and are going to be easily shareable on Telegram itself. Let’s start!

For the bot creation you must contact @BotFather, answer all the questions wisely and you will have your bot available to the world.

Botfather logo

When your bot is correctly created you have to register your games on Telegram. A name, a short name, a description and a correctly sized photo is enough for Telegram’s “/newgame” command.

First of all, how are we going to access the Telegram API? A fast Google search returns lots of good and reliable (frequently updated) libraries written in the most modern programming languages. We can choose what to use, there is no problem here. We chose TelegramsBots Java library and the Java programming language.

There are two kinds of Telegram bots depending on how they receive Telegram’s updates. The long polling and webhook bots, for the first prototype, lets keep it simple (KIS(S)). The webhook server requires a server accessible by Telegram while the long-polling bot doesn’t, so we chose the long-polling method for the prototype.

The first command a bot receives from any user is the “/start” command. Is there a better way to start learning the API? From there we move to our own defined commands, “/list”, “/play” and “/random”.

The list command shows our list of games, so we need to store them before answering the command request but, what is the information needed to send a game to a user on Telegram? The only properties needed to send a game are where to send it and what game we are sending, the “chatId” and the game “short name” (the same we registered when creating our game).

With that information stored on the server, we send a list of games using a custom Telegram keyboard to let the user graphically select the desired game.

Telegram’s inline keyboard.

When a user taps on one of the buttons we defined, the text written on that button is sent back to the server. We process that message and if it follows a concrete arbitrary pattern (“▶️ gameShortName” in our case) we answer the request which executes the”/play” command of our bot.

The “/play” command does the proper game sending process. To do so, we just call Telegram’s API indicating the chatId and the game’s shortname. We also send a custom inline keyboard in this response with two buttons. The first button must, as the documentation indicates, always be the play button.

We had some problems sending this button because we were a little confused by the documentation stating that the “CallbackGame” value is just “a placeholder, currently holds no information”. When trying to set the callback game with this empty placeholder the button (as our logic expected) doesn’t do anything at all.

After reading our Telegram API library source code, we discovered that a proper game callback does contain some values and after setting up a JSON with a unique field “game_short_name” the button works. Please, check the following code snippet:

new InlineKeyboardButton().setText("Play solo.")
    .setCallbackGame(
        new CallbackGame( 
            new JSONObject("{game_short_name: \"" + game.getShortName() + "\"}"))
        );

new InlineKeyboardButton().setText("Play solo.")

.setCallbackGame(

new CallbackGame(

new JSONObject("{game_short_name: \"" + game.getShortName() + "\"}"))

);

The “play with friends” button just shares a URL the way the API shares any other URL:

new InlineKeyboardButton()
    .setText("Play with friends.")
    .setUrl("https://telegram.me/ludeiBot?game=" + game.getShortName());

new InlineKeyboardButton()

.setText("Play with friends.")

.setUrl("https://telegram.me/ludeiBot?game=" + game.getShortName());

The last command is “/random”, that just selects a random game and sends it back to the channel it was requested from. Internally, it calls the “/play” command again with the game shortname parameter filled (yay, code reuse!).

There is also another topic: the inline queries. Just name our bot @ludeiBot and after writing this, hit space and start writing anything. If one of our games contains the string you have introduced then that game will appear immediately so you can tap and start playing it.

This can be done thanks to Telegram’s inline mode. Each time a user enters a new character, Telegram sends us a new inline query. We get the query text and look for a game containing that text, we collect all the matching games and we send them back before the user can even notice what is happening.

Wait; a request each time a user changes a character, how many requests are we going to process? Can we answer all those requests fast enough for a nice user experience? We use Amazon’s Lambda for other internal services and we have some experience with it, could our bot be hosted in this extremely useful service?

Again, after a fast search we found lots of tutorials helping us with this concrete need , we just need to set Telegram’s webhook location to an Amazon API Gateway endpoint that launches a Lambda function calling our bot with the received update from Telegram.

Just one Amazon Lambda function is enough to receive all the messages from Telegram, process them and answer all the requests. And all this is done in less than 70 ms without spending too much time on code optimization (this could surely be faster) and without losing time and resources dealing with lateral escalation.

Another message that must be processed is the callbackQuery that is being produced when the user taps the “play solo” button of our game message. When the user taps the button, we receive a callbackQuery from the Telegram API containing the tapped game shortName parameter indicating which game the user has selected as well as other parameters.

In order to let the user play, we must then answer this callback with the game’s URL and then Telegram will redirect the user to the game’s site and display it in a webview-like environment.

The last requirement is the score sharing functionality. In order to send a score to Telegram’s API, we have to receive the userId of the player who is scoring, and either both the chatId and the messageId from the chat the game is being played on or only the inlineMessageId from which the game has been launched from.

All this parameters are received in the callbackQuery call after the user taps the “play solo” button. Coincidence?, Sherlock doesn’t think that. When answering the callbackQuery you can specify a custom game URL, so you can include the needed parameters in the URL as query parameters.

From the server perspective, we should receive a POST request to the Amazon API Gateway endpoint containing the needed parameters (the userId, both the chatId and the messageId or the inlineId only).

With this information all we need to do is call the setGameScore method on Telegram’s API setting the needed parameters and voilá. The score is shared in the user’s chat room and when the game is shared again in the same chat you can see a beautiful leaderboard instead of the game description.

Ok. Wait, what!? Let’s review how we managed Telegram’s game lifecycle:

First of all, a user requests a game through the “/play” command, pressing a button after a “/list” command is issued or through an inline query.
When we receive the request, we answer the request with the sendGame function of the API setting our own buttons.
When the user taps the “Play solo” button a callbackQuery is received, we must answer this query by sending the URL of our game. It is useful to also send the needed parameters to use the setScore endpoint.
When you score in the game a request is received in the server with the needed information to use the setScore function.

Checkout our published games here:

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.

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!

Carlos Jimenez Joins Ludei as Vice President of Products

Today, we are glad to announce a new and important hire here at Ludei. Carlos Jimenez, Head of Products of Trov (San Francisco, CA), will be joining Ludei as Vice President of Products and member of the executive team, reporting to CEO Eneko Knorr.

Carlos Jimenez will have oversight of the strategic direction, expansion and operation of Ludei’s product suite. With over 60,000 developers around the world, reaching hundreds of millions of users, Ludei’s core product, Cocoon, offers developers the fastest and easiest way to deliver their HTML5 Apps & Games on mobile. Ludei’s technology is being used today by Fortune 500 companies such as Disney or Viacom.

Carlos Jimenez, new VP of Products, Ludei

I’ve known Carlos for years and I always wanted to have him in our team” said Knorr. ” He has a wide experience working at awesome startups either in Silicon Valley and in Europe creating products used by millions of people”.

“I am very excited to join Ludei and very much look forward to working with the team to continue helping the Apps & Games development community.” said Carlos Jimenez. “I believe we can lead the new wave of Apps & Games development with a suite of tools & services that will expedite & ease the increasing complexity due to the huge fragmentation.”

Carlos Jimenez has an extensive footprint in the Mobile industry, where he has been involved in the launch of hundreds of Apps & Games. He has spent the last 3 years in Silicon Valley where he was VP of Products & Head of Products at Movoto & Trov respectively, driving the Products Strategy for both companies. Previous to that, he founded Quadram in 2009 (a mobile apps development company) where he helped companies like BBVA, El Mundo, El Pais, AS, Linea Directa, Fox, McDonald’s, Eleconomista.es, DGT, Sanitas, Instituto Cervantes, Anaya, Movistar, Vodafone, Yoigo, Orange, LG, and many others with their Mobile Strategy and Apps development.

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 — HTML5 games section at GMGC and the HTML5 Game Developer Conference (yes, H5GDC!).

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

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.

Our 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

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!