Drawing in cocos2D

ok — so, last time I was really excited about cocos2D for it’s flash-like features. Because I use the flash graphics API extensively, I was looking for something similar in the iPhone API. unfortunately, it’s not as straight forward, but Cocos2D once again came to the rescue.

there are 2 ways generally to draw in Cocos2d. One is taking advantage of the ‘draw’ function that every instance of CCNode, CCSprite and CCLayer inherit. it’s taking advantage of the openGL engine, but for most cases the result is a bit rough looking… you can draw lines, basic shapes and fills. It’s really fast and it saves you a lot of the hassle of getting the graphic context and all that. here’s how you draw a simple line — “draw” is overriding a function that gets called every single frame — you you are essentially redrawing all the time.

The other way of drawing in Cocos2D is using whats called Render Texture. The general idea is that you take an image and burn it’s texture in a certain position. it’s really straight forward and it lets you control the type of brush/shape with the image you’re using. The basic implementation is something like this:

When I was playing around with these methods my first instinct was to create a bunch of sprites and draw on the at the same time to get a cool effect with rotation/scale etc. That proved to be a very bad idea with RenderTexture. Sprites are extremely expensive, memory-wise, and especially when they’re big. Very quickly I brought the FPS down to 12 (from 60). What I had to do is create more complex math and keep the sprite count at 1 which works really well.

Cocos2D is Flash for the iPhone

This is really the one line advice I needed. I’ve dabbled with iPhone apps for a couple of months now, but building temperature converters, table views and sliders bored me to death! So it wasn’t until I went out for some hummus with my friend that he suggested I download the Cocos2D framework. 2 days later I’m hooked. and basically, I just want to put down some things so I don’t forget — stuff that would help me translate AS3 to xCode. The stuff below is really all from the first page of the beginner tutorials, but it is so similar to how flash works (or at least, how I’m used to work with flash) that I wanted to point it out.

Here are some early findings:

how to create a sprite and add it to the display list:

how to add an enterFrame Event:

and how the enterFrame function looks like:

Circular Slider

One of the challanges in the design of www.flurrious.com was getting those circular sliders in. Of course you can fake it and create an animation of a slider and control the timeline from 0-100, but that’s lame and not so easy to modify (like change the radius, sweep angle etc.). so, I set to create a circular slider.

I had the basic principles in place: create a circle, and create a beginSwipe andgle and an endSwipe angle. done:

the code looks something like this:

Next, I needed to place the scroll handlebar at the top of the sweep (top of green line in picture), and have it be draggable to the bottom of the sweep. To do that, I calculated the X,Y position of the top and bottom (which I already have in the code), and upon click, I created a rectangle that represented the bounding box for the drag operation. Then, I calculated the percentage point of the handle inside that bounding box to get the 0-1 result, and using the Y position, extracted what the X position would be:

The only problem is that now, when I remove the guides (the circle and angles), I am left with only the slider… and I need the arc so the slider has some visual representation. There are 2 solutions for that. Simple solution: mask the circle… easy to do. here’s the result:

A solution that’s a bit more complex is to DRAW the arc.. that’s where I was happy to find this nice post by the algorythmist. So, using this code, you can then create a nice circular slider:

now all that’s left to do is output the percentage from the slider and you got yourself a nice circular slider!

here’s the final code:

Drawing Snowflakes: Part 1

So, like I said in my last post, I’m going to dedicate these few next posts to go over some of the techniques I used to create Flurrious.com.

The first thing I want to go over is the creation of the drawing application. The architecture of it is pretty simple, but crucial to making it work well, and having it be extendable and modular. My first step was to create the canvas. since a snowflake has an ice crystal formation, it has to have 6 sides.  So my first step is to draw 6 triangles that form a hexagon:

The code for this is pretty simple, looks like this:

Now, even though this is my canvas which I’m using to capture the mouse events, I’m going to draw the actual shapes on a separate Sprite, so I can have better control. In order to do that, I’m going to place 6 empty Sprites in the center of the hexagon, each one rotated, just like the triangles I drew. I’ll add a new function – createShapeHolders() – to the constructor (notice that I’m disabling all MouseEvents for these ’shapes’, because I want to control them from the canvas I drew earlier). For each of the triangles (which are separate Sprites), I’m going to add a MouseEvent, which will trigger the drawing application. I’m going to add that to the ‘for loop’ in the createFlakeStage() function, and I’m also adding 3 MouseEvent functions: beginShape, renderShape and endShape.

When I click on any of the triangles now, beginShape() will save the slice I clicked on as _slice (added as a private var to the class), and trigger a MOUSE_MOVE event. Then, as I move the mouse, the renderShape() function will draw on all 6 sides of the hexagon:

CLICK TO SEE THIS IN ACTION

Now the only problem is that it doesn’t look like a symmetrical drawing… it basically copies the shape you’re drawing and places it in a circle. Now we need to add a reflection to the shape. So, to do that, we’ll have to add 2 Sprites to each of the ’shapes’ we created in the createShapeHolders() function. One of those shapes we’ll flip horizontally (scaleX = -1) and then, each time we trigger beginShape and renderShape, we’ll use the FP10 copyFrom() function to create a reflection effect. All we have left to do now is to hide the canvases, and start drawing! here is the result:

CLICK HERE TO SEE IT IN ACTION – CLICK AND DRAG NEAR THE CENTER OF THE STAGE

and here is the final code:

Flurrious.com

I haven’t posted anything is the past few weeks because I was busy working on Flurrious.com — Digitas’ ‘09 holiday card.  It let’s you draw a snowflake and send it to a friend — and watch all of the other snowflakes other people make.  For each snowflake sent, Digitas donates $1 to UNICEF.

The site has done MUCH better than expected — over 23,000 snowflakes were made (in less than 2 weeks), and almost $7,000 donated to UNICEF. The site is pretty small at 200kb, but so far we’ve served over 600GB of data to users (most of it is probably the snowflakes that are being saved as PNGs on the server).

To create this application I had to do an extensive brush-up on my flash drawing API skills.  I’m using some of the new features from FP10 like IGraphicsPath and the 3D rotations (as well as Papervision3D). That graphics data is being saved in Vector arrays, and is stored on the database.  When you view a snowflake, that data is being passed back to flash, and then get’s drawn again with the same API.

In the next few posts I’ll talk about some of the techniques I used to create the application.  some of the highlights in my opinion are: saving and recreating vector data, creating smooth lines, and creating the circular slidres.  Creating the snowflake generative drawing I think was the least challenging thing in the site…

-itai

Dynamic Grid Positioning v2

after some thought of how to make this more practical, I decided to make another version.

In this version the 2 boxes next to the selected box and the 2 above and below grow as well, and the response and alignment is much better.

here’s what it looks like now:

here is the source

iPhone to support Flash Application

today at Max2009 it was announced that CS5 Flash Professional will have an export option for the iPhone!! hurray!

http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

Loading fonts in run-time in Flash CS4

I came across a really cool panel for flash CS4 IDE that lets you create SWFs with multiple fonts that you can access in run-time.

check it out:
http://blog.johannest.com/2009/09/28/runtime-font-publisher-a-flash-cs4-extension/

AS3 Kaleidoscope

I was messing around with Kaleidoscopes last year, and refactored an AS2 kaleidoscope that Quasimondo posted in 2005. I was looking for that code, and found it laying around, so I thought I’d post it if anyone’s interested to see a way of doing it in AS3. Please note that if you want to use this for commercial use, you will need to contact Quasimondo because it’s based on his code. If you need more sources for Kaleidoscopes, you can check out the book ActionScript 3.0 Image Effects by Todd Yard (Friends Of Ed).

source

ExplodeBitmap transition effect

This is a simple class I created for some transition effect. It’s really simple, but the effect is cool.

I’m basically taking any displayObject and creating a grid of bitmap copies of it. then animating them with BetweenAS3 tween engine (if you haven’t heard of it, it’s worth checking out — really fast and clean engine from LibSpark). I’m planning on decoupling the animation from the grid creation, so you could create different animations with the segments (or tie them in with a particle system), so that might be coming soon.

To use it, all you need to do call it like this:

new ExplodeBitmap(sprHolder, explodingSpr, widthSegments, heightSegments, smoothing);

here’s what it looks like (with randomized segment width and height):

source