BADLAND launched April 4th, 2013 on App Store for iPad, iPhone & iPod touch. Since then it has sold more than 100 000 copies. Try it out (iTunes link) or check out the launch trailer below so you get a better picture of what kind of game I am going to talk about. BADLAND was our two-man indie company’s, called Frogmind, first iOS game and it uses the latest development version of cocos2d-iphone 2.1 along with lots of other open source libraries.

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

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

• 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.
Continue reading ’3rd coordinated release: cocos2d-iphone v2.1-rc1 and more’

LensFlare Studio

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.

 
Continue reading ‘LensFlare Studio – Photo Editor for Mac’

There are now over 1 000 000 apps in the App Store. And there is not a single one like Foldify. If you haven’t seen it already then you definitely should:

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_