Foldify

Published by Krzysztof Zabłocki on December 13, 2012 in cocos2d. 19 Comments

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_

 

19 Responses to “Foldify”

Feed for this Entry Trackback Address

Leave a Reply

Social Widgets powered by AB-WebLog.com.