• cocos2d-x v2.1rc0-x-2.1.3
• cocos2d-html5 v2.1.3
• cocos2d-iphone v2.1-rc2
• CocosBuilder v3.0-alpha4

Our goal is to provide a complete toolchain for developing multi-platform games both for Web and Mobile, all the way from rapid prototyping to a finished high performing game.

cocos2d-x

Download

• cocos2d-2.1rc0-x-2.1.3.zip

Highlights

• Added support for Spine skeleton animation editor
• uses LuaJIT
• CocosPlayer supports iOS
• add kResolutionFixedHeight and kResolutionFixedWidth resolution policy
• updated to SpiderMonkey v20.0
• add many Lua test cases
• Possible to obfuscate JavaScript code. More info here
• plugin-x released

More information

Read more about all the new features at cocos2d-x v2.1.3 release notes.

cocos2d-html5

Download

Cocos2d-html5-v2.1.3.zip

Highlights

• CCEditbox now implemented for WebGL and JSB
• Updated CCBReader to latest version
• Improved performance Firefox by about 20%
• Added render mode flag to switch between WebGL and canvas2d
• Added support for Tizen
• Now able to load embedded texture file in a plist
• EGLView now works if canvas is placed inside another DOM element
• Added a Simulator which can be found in MoonWarriors Directory

Note

The work in progress development branch will now be “develop”, while “master” branch will only hold the latest stable release. Please send all pull requests to the “develop” branch from now on.

More information

Read more about all the new features at Cocos2d-html5 v2.1.3 release notes.

cocos2d-iphone

Download

• cocos2d-iphone v2.1-rc2.tar.gz

Highlights

• Bug fixes in many components: CCParticleSystem, DrawingPrimitives, Layer, MenuItem, ProgressActions, TMXMaps and more.
• Includes JS remote Debugger (disabled by default)
• Updated 3rd party libraries: SpiderMonkey 20.0, JS Bindings 0.7,

More information

Read more about all the new features at cocos2d-iphone v2.1 release notes.

CocosBuilder

This is the fourth release of CocosBuilder 3 alpha. If you are using cocos2d-js, make sure that you also update to the latest version of CocosPlayer and check CocosPlayer’s README.md file for information on how to enable the new JS debugger. Please make a backup of all your project files before updating as CocosBuilder is still in alpha state.

Download

• cocosbuilder.com/?page_id=11

Highlights

• Visual debugger for cocos2d-js projects, works with the version of CocosPlayer included with the source code More info here
• Much improved text editor with better syntax coloring, autocomplete and live syntax checking of your JavaScript files
• Smart sprite sheets now support different formats for iOS, Android and Web
• Publish and run in browser (for cocos2d-js projects)
• Publisher will ask to save files before publishing
• Many smaller enhancements and bug fixes

Why cocos2d?

First of all we wanted to develop the game with the minimal possible team as possible. In our indie studio we have only me, Johannes Vuorinen, as the programmer, and Juhana Myllys as the artist. Audio is something neither of us do well enough, so we subcontracted a very talented audio guy, Joonas Turner, to do the audio side. So with this small team it was clear to us that we want to focus on developing the game itself and not implementing engines and tools of our own.

So, we decided to look for an engine with good support for tools. BADLAND is a 2D game so a 3D engine with 3D physics (e.g., Unity3D) felt a little bit overkill. Also, I prefer engines with full source code access so that I really know what’s going on under the hood, and maybe change something if there’s something I do not like. And of course, most importantly, we wanted the engine to be still in development with an active community. With all these requirements, cocos2d was an excellent choice.

The other awesome engines, libraries and tools

It’s not just cocos2d that makes BADLAND tick. Box2D as the physics engine is equally important. In fact, Box2D is so amazing that we were able to implement everything we wanted to the game without changing a single line of code in its source code. For example, the ability to set continuos collision detection enabled for individual bodies was a really important feature to us because we have some thin obstacles and fast moving objects in the game.

For the audio we chose FMOD with FMOD Designer. I can highly recommend FMOD as well. We were able to develop very dynamic soundscape without touching the game’s source code that much as the FMOD Designer does lots of stuff for you. Use of FMOD is not completely free but it’s very inexpensive for indie developers.

As offline tools we used the fantastic tools by Andreas Loew: TexturePacker and PhysicsEditor. I can highly recommend both of them and they work easily with cocos2d and Box2D. With the TexturePacker we were able to highly optimize the game performance and memory consumption, and with PhysicsEditor we were easily able to define physics shapes.

In addition to these, we used GlyphDesigner to rapidly create the game’s font atlas, and ParticleDesigner to create particle effects. Both of them work out of the box with cocos2d. ParticleDesigner was not as perfect as the other tools mentioned and I have lots of improvement ideas to it but it did its job.

Finally we used CocosBuilder to create 80% the menus. It was easy and efficient. The only thing that I really missed using this tool was the lack of ability to use ready-made spritesheets to reduce draw calls when rendering the CocosBuilder nodes.

BADLAND of course also use lots of additional open source libraries that do not play as big role as the ones mentioned. However, this should give the general idea that we used a LOT of ready-made engines, libraries and tools to develop BADLAND. I would say the 95% of the time we were able to concentrate on just developing the actual game itself.

Conclusion

All in all, I can highly recommend using cocos2d for any 2D game. It was easy to learn, use and modify. Without the engine and the awesome community, BADLAND would not have seen daylight this early. And with the cocos2d-x, we have the possibility to bring the game to other platforms too in the future. Thank you for the awesome engine and all the support!

We are continuing developing BADLAND further with updates so if you want to stay in the loop, you can follow us:
Facebook – http://www.facebook.com/badlandgame
Twitter – http://www.twitter.com/badlandgame
Blog – http://www.badlandgame.com
iTunes link – https://itunes.apple.com/app/badland/id535176909

If you have any questions, please ask for example in the comments or by twitter @johannesvuorine

Adding those features in the current cocos2d design is not trivial, so a reboot of cocos2d is necessary. Let me introduce you to Watermelon2D, the future of cocos2d. Planned features:

• Multithreading
• Complete UI toolkit
• Multiple OpenGL view support
• It is going to be implemented in D language
• Not as tasty as a coconut, but with more water
• Green in the outside, red in the inside with black seeds
• Support for Groundhog2d physics engine
• Backwards compatible with cocos1d

• CocosBuilder v3.0-alpha3
• cocos2d-html5 v2.1.2
• cocos2d-iphone v2.1-rc1
• cocos2d-x v2.1rc0-x–2.1.2

Our goal is to provide a complete toolchain for developing multi-platform games both for Web and Mobile, all the way from rapid prototyping to a finished high performing game.

CocosBuilder

This is the third release of CocosBuilder 3 alpha. When updating please make sure to also update to the latest version of CCBReader and CocosPlayer. You will be able to open old ccb-files with the new version, but it may not be backwards compatible. Please make a backup of all your project files before updating as CocosBuilder is still in alpha state.

Download

• cocosbuilder.com/?page_id=11

Highlights

• Improved default project structure
• Adds support for sound playback directly from the timeline
• Adds support for callbacks from the timeline
• Improved support for Cocos2d JS
• Skew properties can now be animated (not supported in cocos2d-html5)
• Plenty of bug fixes

More information

Read more about all the new features at cocosbuilder.com.

cocos2d-html5

Download

• Cocos2d-html5-v2.1.2-beta.zip

Highlights

• WebGL support! Great performance boost on modern browsers
• cc.Loader now supports multiple stage preloading – all tests now preload by multi resource groups
• cc.Node now uses transform matrix – better performance
• Added Accelerometer support
• Added support for MP4 and M4a Audio format
• Designer resolution for multi resolution support
• Faster cc.ParticleSystem, thanks to Ivo Wetzel
• Bug fixes in audio support, file utility, Google Closure compiler, LocalStorage, cc.MenuItemImage, cc.MenuItemToggle, actions andUIWebView compatibility

More information

Read more about all the new features at cocos2d-html5 release notes.

cocos2d-iphone

Download

• cocos2d-iphone v2.1-rc1.tar.gz

Highlights

• OpenGL bindings for JavaScript (compatible with the WebGL API)
• New drawing primitives functions ccDrawSolidCircle, ccDrawArc, ccDrawSolidArc
• Bug fixes in different components: CCClippingNode, CCDirector, CCGLProgram, CCTexture2D, CCRenderTexture, CCEaseBound*,CCEaseExp*
• Updated 3rd party libraries: Chipmunk 6.1.4, SpiderMonkey 19.0, JS Bindings 0.6,

More information

Read more about all the new features at cocos2d-iphone v2.1 release notes.

cocos2d-x

Download

• cocos2d–2.1rc0-x–2.1.2.zip

Highlights

• Initial support for Chrome native client support.
• New tool to create multi-platform projects ( tools/project-creator/ ).
• Eclipse integration for Android. Information here.
• Added webp image format support.
• Add AssetsManager to do auto upgrading. More info here
• Add VS2012 Express template installing support.
• Update SpiderMonkey to Firefox19.
• Improved Lua bindings and test cases
• Synchronize with cocos2d-iphone v2.1rc0.

More information

Read more about all the new features at cocos2d-x-v2.1rc0–2.1.2 release notes.

Improved tests

cocos2d tests

• Started test automation: 62 automated tests
• Added OpenGL/WebGL tests
• Try the cocos2d tests online

How to run the games and tests

For further information regarding how to run the tests, please visit this page: cocos2d JS tests

Thanks

Many thanks to all the developers, contributors and testers from the cocos2d (html5, iphone and x) and CocosBuilder communities!

We are happy to announce the second coordinated release of the cocos2d family. We are releasing:

• CocosBuilder v3.0-alpha1
• cocos2d-html5 v2.1.1
• cocos2d-iphone v2.1-rc0a
• cocos2d-x v2.1beta3-x-2.1.1

Our goal is to provide a complete toolchain for developing multi-platform games both for Web and Mobile, all the way from rapid prototyping to a finished high performing game.

CocosBuilder

Today a second version of CocosBuilder 3 alpha is released. It is a fairly stable release, although there are still features missing that will be in the final version of CocosBuilder 3.

Download

• cocosbuilder.com/?page_id=11

Highlights

• Much improved cocos2d JS support
• Built in texture packer with support for png, pvr and pvrtc
• Automatic resizing of assets for different devices
• Improved publishing for Android
• Improved support for cocos2d-x
• Automatic audio conversions for different platforms
• CocosPlayer support for Android, and many fixes regarding reliability

More information

Read more about all the new features at cocosbuilder.com.

cocos2d-html5

Download

• cocos2d-html5-v2.1.1 @ Jan.28, 2013

Highlights

• Added mouse button to MouseDispatcher, supports right-click
• Changed preload audio type from “bgm” and “effect” to “sound”
• Added “Sys” class for system capabilities
• Improved cc.BuilderReader to support .ccbi extension auto-completion
• Improved TMXXMLParser to support XML, CSV and zlib compression
• Changed cc.Time.gettimeofdayCocos2d to Date.now which is more javascript friendly.
• Added stackable support for position actions like cc.Move*, cc.Jump, cc.CatmullRom*, etc.
• Added filename lookup support in CCFileUtils
• Fixed bugs

More information

Read more about all the new features at cocos2d-html5 release notes.

cocos2d-iphone

Download

• cocos2d-iphone v2.1-rc0a.tar.gz

Highlights

• Added stackable support for position actions like CCMove*, CCJump*, CCCatmullRom*, etc.
• Added filename lookup support in CCFileUtils
• Added option to cascade color and opacity in nodes
• Added auto-premultiplied alpha support PVRv3 textures
• Improved JS bindings support
• Many bug fixes

More information

Read more about all the new features at cocos2d-iphone v2.1 release notes.

cocos2d-x

This version is a present of Chinese New Year. Hope you like it.

Download

• cocos2d-2.1beta3-x-2.1.1.zip

Highlights

• Added CocosPlayer support for Android. For forther info refer to this document
• Added Japanese language support
• Added Lua support on Linux
• Added stackable support for position actions like CCMove*, CCJump*, CCCatmullRom*, etc.
• Added filename lookup support in CCFileUtils
• Added Support two strategies of loading resources. For further info refer to this article
• Remove all deprecated methods to reduce warning message when compiling
• gles20 branch is replaced with master in github
• JSB improvements:
  • Added sys.localStorage support fo JSB
  • Updated SpiderMonkey to v18.0

More information

Read more about all the new features at cocos2d-x-v2.1beta3-2.1.1 release notes.

New game and improved tests

Crystal Craze

Crystal Craze, a simple match-3 game was added. Features:

• Designed with CocosBuilder
• 100% JavaScript
• Runs at 60 FPS on iPhone 3GS
• Uses particles, sounds and batch nodes
• Runs on Web (on top of cocos2d-html5), on iOS (on top of cocos2d-iphone or cocos2d-x) and on Android (on top of cocos2d-x)
• Try Crystal Craze online

cocos2d tests

Many tests were added.

• Try the cocos2d tests online

How to run the games and tests

For further information regarding how to run the tests, please visit this page: cocos2d JS tests

Thanks

Many thanks to all the developers, contributors and testers from the cocos2d (html5, iphone and x) and CocosBuilder communities!

How a 2D game engine came to power a professional photo editor

LensFlare Studio is a brand new photo editor for adding optical effects on your Mac. With over 100 effects, you can choose from anamorphic lens flares, lighting effects, sci-fi flares, sunlight glare, and more.  The heart of LensFlare Studio is the Optics Engine running on cocos2d, the powerful animation framework based on OpenGL.

Lens flares have really become an important part of the visual language for design, adding glares and imperfections to overly perfect shots and computer animation. Lens flares add a sense of depth and brightness to an otherwise flat looking image. I’ll be the first to admit that they are often overused and can over-power an image. Nevertheless, having a powerful tool for creating optical effects is a must for any designer or photographer.

LensFlare Studio is great for:

• Graphics Design
• Logos and Titles
• Anamorphic Flares
• Special Effects

Isn’t cocos2d a Game Engine?

Who would have thought the leading game framework would be used for a photo editor? When I started the original app, LensFlare for iOS, I knew I needed a fast and easy framework that could handle full animation. For my photo app idea, I wasn’t interested in making static overlays and filters, but a fully interactive app where you can move, rotate, and scale optical elements effortlessly. This app would also need to render numerous image layers without any slowdown. Effective lens flares are composed of many light components that move, rotate, and scale independently relative to the light source.

It turns out, cocos2d is the perfect framework for this. It was super easy to get started with, yet has proven to be capable of high quality effects and rendering.

Optics Engine

The heart of my apps is the Optics Engine. This handles all of the display and rendering duties to realize the optical effects. Each lens flare effect is a collection of images contained in classes derived from the CCSprite base image class. Cocos2d framework handles large numbers of on screen images very efficiently through the use of texture caching. My custom CCSprite image classes handle the different types of optical effects and model the physical characteristics of light and glass interaction. For example, the EdgeFlare class only shows itself when the light source is near the edge of the screen, thus modeling light hitting the edge of a physical camera lens and glaring across the the frame.

LensFlare for iOS

I first developed the Optics Engine as the foundation of LensFlare for iOS.
Over the past 2 years I’ve expanded this into two more apps; LensLight and AlienSky, which add more content and features while using the same Optics Engine.

These are iOS apps designed for adding optical effects to your iPhone photos. They have minimal UI and are mostly gesture based. After placing an effect on your photo, you can move, rotate, and scale it by touch. These apps are universal and work on iPads as well. Making them universal was very easy to do with the cocos2d framework which elegantly handles screen resolution internally.

LensFlare Studio for Mac

When it came time to consider making a Mac app, I realized this would need a much richer user interface. My solution was to simply treat my cocos2d Optics Engine as a view surrounded by an AppKit UI. I was essentially dropping my iOS LensFlare app into an OpenGL view on the screen and building a Mac interface around that. I’m reusing the entire Optics Engine in the Mac app. The Mac and iOS apps share many of the same effects using the same code. The cocos2d framework has had no problems scaling up to the much higher requirements of a Mac app. It efficiently handles the huge image assets and artwork I use for the Mac version.

Here’s a screenshot of my Xcode environment. The big OpenGL view completely encapsulates the Optics Engine, which is controlled by the surrounding interface. The Optics Engine nicely scales up to any Mac screen size, whereas the surrounding UI stays the same. This is another example of how powerful the cocos2d framework is. From the ground up, it’s designed to be scalable for any screen size or pixel density.



Mac Process Threading

One thing to be aware of when moving from iOS to Mac is threading. When accessing the OpenGL view and cocos2d code, you have to make sure you’re on the same thread as the CCDirector instance. Some of the built in functions like document open run on different threads, so I had to make sure the calls from the document open code use the right thread to access the Optics Engine.

Conclusion

I hope this overview of LensFlare Studio helps sparks some ideas of your own. It’s relatively easy to take a pure cocos2d iOS app and drop it into a view for a more feature rich Mac app.

Cocos2d is a powerful framework and the cocos2d community is an important part of the equation. I want to thank Riq and the cocos2d community for this awesome site!

I’d love to answer any questions and hear your comments. Thanks for reading!
- James Grote

WEBSITE
http://LensFlareStudioApp.com

FACEBOOK
You can find me on Facebook. I post updates and previews of new effects I’m working on.
https://www.facebook.com/LensFlareStudio

VIDEO

Creating Games with cocos2d for iPhone 2 takes you through the entire process of designing and building nine complete games for the iPhone, iPod Touch, or iPad using cocos2d 2.0. The projects start simply and gradually increase in complexity, building on the lessons learned in previous chapters. Good design practices are emphasized throughout.

Why This Book Exists

I will dispense with the general marketing blurbs here.  If you want to read the “official” promotional information, it is all in the first post of this forum thread.

Instead, I want to share, from a developer’s perspective, why you might want to read this book.  Most developers learn the basics of cocos2d for iPhone v.2.0, and subsequently hit a wall.  We have all these interesting classes that are really powerful, like CCLayer, CCSprite, actions, etc.  How can we put these things together and make something equally interesting out of them?

That is the “gap” this book aims to fill.  Rather than take the beginner’s book approach, where we spend several pages explaining what a sprite is, how it is drawn, etc.  “Creating Games” skips many of the generalities and jumps right into the reason we are here: building games.   This is the book I wished I had in hand when I was first exploring cocos2d for iPhone.

Class by class, method by method, the text explains the “good parts” of why we are building the code in this fashion.  All the “good parts” are explained in detail: from building with Box2D to GameKit Bluetooth integration, and even how to build in “artificial randomness” into a Match 3 game, so you never run out of moves.

Each chapter is a complete game, and all source code is available as a download from the publisher’s web site. The games cover a wide variety of game types, and the games become more intricate and complex as the book progresses.

The games included in the book are:
Chapter 1: Memory
Chapter 2: Match 3
Chapter 3: Mole Thumper
Chapter 4: Snake
Chapter 5: Brick Breaker (with Box2D)
Chapter 6: Cycles of Light (iPad with Bluetooth integration)
Chapter 7: Pool (with Box2D)
Chapter 8: Scrolling Shooter (using Tiled)
Chapter 9: Endless Runner

Book Giveaway

We are giving away two free copies of Creating Games with cocos2d for iPhone 2!  The contest runs until January 29, 2013.  To enter, all you need to do is post why you want the book to the book’s forum thread.  To see the particulars of the contest, read this post: Book Giveaway

Foldify is an Indie app, created by a team of 3:

• Engineering – Krzysztof Zabłocki
• Design – Mariusz Ostrowski & Renata Ostrowska

Let’s talk about how it was created and the technical aspects.

Basics

Foldify is using cocos2d 2.x for 2d rendering, and on top of that there is custom 3d rendering code.

Why not cocos3d? It doesn’t work with shaders, and I like shaders a lot.Besides, the problem with cocos3d is the lack of a GitHub account. So there is no way to send pull request to the authors.

During the development of Foldify I’ve encounter few missing features in cocos2d, which were necessary:

I needed render texture with support for depth and stencil buffers, and also an easier way to render content into it.

Stencil buffers can be used for many effects, like shadowing and marking parts of scene immutable ( preventing drawing on them ). The second usage was actually used in Foldify to prevent the user from drawing outside the grid. These changes are now part of cocos2d 2.x.

Gestures

When we started working on Foldify, we decided we didn’t want to follow standard patterns, we wanted to make new ones.

One place where we could implement that was Creation Layer. What if instead of changing brush size we could use gestures to zoom in and out of virtual paper ?

The problem with changing brush size is that you can’t really change your finger size or make it transparent, so if you set small brush size how are you actually gonna see the area you are drawing on ?

I’m not skilled graphical artist, I want something simple and something I can use with ease. Instead let’s try zooming in on the area I want to draw detail on, now you can still use your finger-sized brush but the relative size of drawing is way smaller ( because you are zoomed in ).

One of the missing features of cocos2d is the lack of Gestures. We have touches[Began,Moved,Ended] which may work for simple games, but it’s just not usefull for heavy gesture driven apps.

That’s why I’ve created Category for adding gesture recognizers in any cocos2d version. Once you include this code in your project, you can add any gesture recognizer to any CCNode and it works flawlessly. This is the same code that drives Foldify creation, where you can use pinch/rotate/pan gestures at the same time.

Drawing

When I started working on Foldify, I was surprised by the lack of good algorithms for drawing lines. There were some materials, but people were using different bezier calculations or cat-mull roms algorithms, which really required a lot of control points to create nice smooth lines. And there was not a single article that would explain how to create line drawing from Scratch to final anti-aliased lines.

I’ve also been impressed by how easy and beautiful is to draw with Paper by Fifty Three. They have created line drawing algorithm which was based on the speed of strokes.

I’ve decided to come up with proper algorithm for line drawing, that would explain whole algorithm from scratch to complete anti-aliased lines. That’s how I’ve created this tutorial.

Conclusion

Foldify is probably the biggest Indie project I’ve worked on, I’ve been doing it after hours during my full-time job, which wasn’t that easy, working long nights and getting little sleep.

The feedback we received from everyone is just amazing. It’s really great to see your work appreciated!

Most of all I’d like to thank all people that contributed to cocos2d, as this is probably the best 2d framework. And the community of cocos2d is full of really creative people. I hope my contributions will help you create fascinating games!

If you have any questions, don’t be afraid to ask

Thank you for reading. Let’s keep in touch on twitter @merowing_

• CocosBuilder v3.0-alpha0
• cocos2d-html5 v2.1
• cocos2d-iphone v2.1-beta4
• cocos2d-x v2.1beta3-x–2.1.0

Our goal is to provide a complete toolchain for developing multi-platform games both for Web and Mobile, all the way from rapid prototyping to a finished high performing game.

The main components of our stack are:

• A visual editor ( CocosBuilder )
• A graphics engine ( cocos2d )
• A physics engine ( Chipmunk )

For the Web, we are using pure JavaScript code, while for Mobile we are using JavaScript on top of native engines for maximum performance.

CocosBuilder

Version 3.0 will be the next main release of CocosBuilder, today an alpha version is released.

Download

• cocosbuilder.com/?page_id=11

Highlights

• Support for cocos2d JavaScript API
• Publishing to HTML5
• CocosPlayer lets you test your JavaScript apps directly on your iOS device without recompilation
• Many bug fixes

More information

Read more about all the new features at cocosbuilder.com.

cocos2d html5

Download

• cocos2d-html5-v2.1 @ Dec.4, 2012

Highlights

• Integrated Chipmunk-JS physics engine. API is compatible with cocos2d-x and cocos2d-iphone
• 10% performance increase across the board with cc.Class Release Mode
• Added support for google.base which offers alternate javascript inheritance style.
• Added support for CocosBuilder and Bone Animation.
• Added cc.PhysicsDebugNode, cc.PhysicsSprite, cc.DrawNode.
• Better support for mouse, touch and keyboard
• Fixed various bugs
• Added Watermelon with Me game sample, which is 10% done in CocosBuilder and 90% JavaScript
• Added CocosDragon game sample, which is 90% done in CocosBuilder and 10% Javascript Code
• Added Edit Box for text input

More information

Read more about all the new features at cocos2d-html5 release notes.

cocos2d-iphone

Download

• cocos2d-iphone v2.1-beta4.tar.gz

Highlights

• JS Bindings: compatible with cocos2d-html5 / chipmunk-js API
• Improved CCFileUtils:
• Added option to load resources from directories for different devices, instead of using suffixes
• Added option to add additional search paths
• Many bug fixes

More information

Read more about all the new features at cocos2d-iphone v2.1 release notes.

cocos2d-x

After one month of hard work, cocos2d–2.1beta3-x–2.1.0 is available for download. This version includes some exciting new features and big improvements.

Download

• cocos2d–2.1beta3-x–2.1.0.zip

Highlights

• JS Bindings: compatible with cocos2d-html5 / chipmunk-js API
• Added marmalade support
• Added sample games: Watermelon With Me and CocosDragon
• Updated CCBReader to latest version of CocosBuilder
• Added new features from cocos2d-iphone v2.1 beta3 like:
• CCClippingNode
• CCDrawNode
• CCPhysicsDebugNode and CCPhysicsSprite (under extensions/physics_nodes/)
• Accessing to files from APK is boosted. You can refer to this PR for detail information.
• CocosDragon, MoonWarriors, Watermelon With Me and JS Tests use the same JavaScript code as cocos2d-html5 and cocos2d-iphone.

More information

Read more about all the new features at cocos2d-x release notes.

Try our samples online

Watermelon with Me

• Play Watermelon with Me online

CocosDragon

• Play CocosDragon online

MoonWarriors

• Play MoonWarriors online

cocos2d tests

• Try the cocos2d tests online

Thanks

Many thanks to all the developers, contributors and testers from the cocos2d (html5 / iphone and x) and CocosBuilder communities!

OMG a giant worm! Micro Miners iOS game.

Worms, Lemmings, Micro Miners…

A pixel based destructible ground is the kind of engine used in many popular games such as early appstore hit iShoot by Ethan Nicholas, Worms, or Lemmings. And also, since the 15th of November 2012, in my new iOS game Micro Miners. I started Micro Miners two years ago, after testing an amazing class called CCMutableTexture that was crafted and shared by the not less amazing Lam Pham. “2 years ago” means the source code provided here is based on cocos2d v1, but not too difficult to adapt to v2, I guess.

For this article, I’ve created a Xcode v4.5 + Cocos2d v1.01 project with a basic destructible ground engine. This is intended to be very simple starting point if you want to make your own game base on destructible grounds. But in any case this is a ready to use destructible ground engine.

I also recorded a short video of the project in action on the iPhone simulator. A quick way to see if this article could be of any interest to you.

Source code : https://github.com/jpsarda/Pixel-based-destructible-ground-with-Cocos2d-iPhone

1) GitHub project and video demo

Watch carefully the video below, it shows exactly what you get when you download, compile and run the demo project provided on GitHub.

2) The performance bottleneck

The engine is based on the CCMutableTexture class. Basically, a CCMutableTexture maintains an array of pixels value representing the texture. You can then quickly access and modify the pixels in this array. But once you’re done with the modifications, you have to apply them. The internal pixel array is then drawn on the actual texture. This step is the performance bottleneck of the destructible ground engine. Knowing this, all must be done to minimize the surface of the CCMutableTexture we draw on, and the number of times we call apply on the CCMutableTexture.

3) Minimizing the surface of the CCMutableTextures

This is achieved in 2 steps

1. 1 pixel on the texture will be rendered as a 2×2 square on the screen. In other words the displayed CCSprite associated to the texture is scaled by a factor of 2. The look is more pixelated but it’s still acceptable. For example, instead for applying our changes on a 320×480 texture, we will apply them on a 160×240 texture. This is 4 times less pixels to draw when we call apply on the CCMutableTexture.
2. If we use full screen textures, each time we move our finger on the screen to dig the ground, the full screen CCMutableTexture is modified and we must call apply on it. That’s a pity because only a small part of the screen is affected by our finger. To prevent this, the ground is splited in zones. In the project provided, we’ve splited the ground in 4 stripes (from top to bottom). When we dig the ground, only the affected zones are redrawn (you can see the affected grounds colorized in red while digging).

Finger digging in the middle of a ground zone, only 1 zone affected.

Finger digging at the border of 2 zones, 2 zones affected.

4) Minimizing the calls to apply

ccTouchesMoved, which is the method invoked when the user moves his finger on the screen, can be called at very high frequency. We can’t afford to call apply on the textures on every move. We solve this problem by introducing a minimum delay (0.5 seconds) to pass before taking into account a move of the finger. Illustrated with this peace of code in ccTouchesMoved :

if (now-lastDigTime>0.05f) {
    // determine affected zones ...
    // draw lines ...
    // apply changes ...
    lastDigTime=now;
}

5) Digging and polygons

The awesome CCMutableTexture class was modified mainly to add polygon drawing capabilities.

Drawing a line with rounded extremities via convex polygon filling

// This method fills a convex polygon with a given color
-(void) fillConvexPolygon:(CGPoint*)p :(int)n withColor:(ccColor4B)c;
 
// This method draws a solid line (with line width parameter) by building a polygon to be used in fillConvexPolygon
-(void) drawLineFrom:(CGPoint)p0 to:(CGPoint)p1 withLineWidth:(float)w andColor:(ccColor4B) c;

So here is what happens when you move your finger on the screen to dig in the ground :

• We call drawLineFrom:A to:B withLineWidth: andColor: , A and B being respectively the coordinates of the finger before the move and after the move.
• The method build a 10 points polygon to draw a rounded line from A to B (4 points to draw the rectangle and 3 points for each rounded extremities)
• We call fillConvexPolygon: : withColor: with the calculated polygon.
• Before drawing, the points of the polygon are ordered from bottom to top.
• The polygon is filled from bottom to top by drawing horizontal lines.
• On each step of the drawing loop, we follow the left and right edges of the polygon to determine the coordinates of the horizontal line to be drawn.

6) Drawing on different zones

Most of the time, your finger on the screen will affect only one zone of ground. But when the finger cross a zones border, it hits 2 zones at the same time. When this happens, we draw the polygon on each textures. That means our polygon filling algorithm is run twice instead of once. That’s the price to pay for splitting the ground in zones, but it’s insignificant compared to the cost of not splitting the grouns in zones (see 2) and 3)).

7) Collisions

I’ve added some basic tiny miners in the demo project to show how to handle collisions. They will fall if you dig the ground under their feet.

For collision checking, we consider a miner to be 1 pixel. First we determine which ground zone contains the collision pixel. Then, by calling getPixelAt in the CCMutableTexture associated to the zone, we determine if the collision pixel is in a hole (alpha=0) or not.

8) Go further

• Create a class to handle the multi-zone destructible ground, that will handle polygon drawing and zone detection.
• Create a class to handle the characters (miners, lemmings, whatever…), make them walk, jump, …
• Manage the scrolling of the ground, dynamically create new ground zones when needed.
• Split the ground in smaller zones, vertical AND horizontal splitting managed with a 2-dimensional array. Necessary for large maps in both width and height.

Thank you for reading. Let’s keep in touch on twitter @jpsarda.

Download Micro Miners on the AppStore : iTunes link.

Micro Miners gameplay video below