Cocos2d-html5 V4 Alpha preview

We’ve been working hard for some months on the upcoming Cocos2d-html5 v4 release and we are excited about the features it will bring.

Working on a new engine version is always a good opportunity to bring a fresh new approach to many well known problems. We know the previous versions of the engine could seem a bit too much C++-ish, and that was something we definitely expected to fix. For example we paid special attention to javascript best practices like not enforcing a class extension model or having a modular design. Since we expect all our Cocos2d-html5 users to use the new V4 its core is fully compatible with the previous version’s core. Developers of Cocos2d-html5 V3 will safely be able to deploy their code to V4 and at the same time, benefit from the new V4 features.

Among some decisions taken at the very core of the engine, we can find:

A super light object hierarchy

For example, Actions, fully compatible with V3 actions, are just two object hierarchy levels. We also added some generic Actions like PropertyAction, which can act on an arbitrary set of Object properties. Not only on Nodes, but on any object, so, for example, you can apply an Action to an audio volume.

Draw functions

At the nodes level, the V3 engine implementation offers a lot of specialization for rendering. It offers specific nodes which talk WebGL, each node does specific rendering, and if it is expected to get a general purpose node for drawing, either Node composition, or directly dealing with WebGL code was the only option. We expect our developers to focus on their games, and not in knowing all the engine internals to set their scenes up, that’s why we are bringing arbitrary rendering per node. You still can use the previous ClipNode or LayerGradientNode, but they will be kind of deprecated. For example, this is valid rendering code for the new V4:

Yes, that is also webGL code. The complete RenderingContext can be seen here. It still lacks Shader/Material per quad, that will soon make it to the WebGL renderer.

Detached renderer

Following arbitrary code per Node, the next thing to have was a detachable renderer which has no dependencies with the engine’s core. This has lots of advantages:

  • The renderer can be changed, upgraded, downgraded, even removed from the final game.
  • We can share the renderer internal state with the rest of the world. Say you want to add a fancy shader not present in the codebase. It will be safe to do it since the exposed internal state is appropriately proxyed.
  • We expect Nodes to talk to a RenderingContext, which understands drawing primitives, and this one to a batcher, which understands geometry. This is the safe way of doing it, no more WebGL sprouted around the Node code.

Layout solver

We know that many games are heavily relying mainly in UI. Laying out Nodes based on code can be a real pain, specially when dealing with different resolutions, screen orientations and of course, depending on the complexity of the Nodes hierarchy to lay out.
To assist on this, we have created some layout constraint solvers, which based on declarative rules, mainly a JSON object, layouts happen on the fly.
An example declaration of layout could be:

You get the idea. The solver uses percentage or absolute values to divide the available space based on different constraints, ones will push the content like springs from the borders, other will partition the space. Simple and intuitive.
You can check some live demos here and here, which changes layout based on orientation (so you can resize your browser to get the same effect).

Screen resolution

Professionally looking games should conform to any screen size without losing aspect ratio, and, if possible, without affecting visual quality.
The V4 core, is able to unbound the concept of pixel from that of in-game-unit at no cost. Technically, means just applying a scale matrix to the cc.node.Director object, which transparently affects all the Nodes in the Scene graph. When odd aspect ratios appear and the game simply can naturally fit on device’s resolution, the units system will suggest you a new size for your game, or just use automatic letterboxing for the content.
This system allows for transparent retina display graphics. If your art is HDPI, it will apply transparently. You artist will feel the freedom of defining the games in units regardless of the resolution, which is always good. These two line will do the magic:

You can try a live demo here.

Cocos Studio

We believe a game engine is not a valid solution without an authoring tool. That’s why we are working hard to make the V4 core give support to Cocos Studio tool, the scene editor for the Cocos suite.
Developers using V3 with editor can be safe about what the support for editor will be.

Third party tools.

Based on the flexibility of the V4 WebGL detachable renderer, we partnered with Kestrel Moon Studios to bring the most advanced animation tool to your Javascript projects. Since an image is much better than 1000 words, and a live demo 1E6 times better than an image, you can test the following demos: dragon and my fav: chameleon. Here’s anyway an image of what you could see animated:

Screen Shot 2015-03-11 at 9.23.44 PM

We expect to bring more tool integrations which will make a difference for the Cocos2d-html5 and Cocos2d-x community.


Creature Animation tool from Kestrel Moon Studios, has just hit the Apple Store today.
Unlike other animation apps, Creature allows the user to generate very complex motion like Walk Cycles, Cloth & Hair Dynamics, Soft Body Flesh etc. automatically. This is done using Creature’s built in Physics and Procedural Animation Engine. Animations are all generated from a single image. Using Creature, animators and technical artists can produce fluid, high quality animations very quickly. This translates into huge savings in both time and cost. There are very advanced features used in the VFX industry like Motion Capture available in Creature as well.

Video Trailer:


Follow on Twitter:

Best of all: Cocos2d-html5 v4 and Cocos2d-x are already full compatible with the solution, and the integration is frictionless.

Everyone is welcome on board

We welcome all developers around to:

and of course, participate in the definition of the engine roadmap.


Posted in Announcement, programming Tagged with: , ,