How would a cutting effect be implemented on iPhone?

Question

The "cutting" effect I am talking about can be seen in the famous iPhone game "Fruit Ninja" and "Cut the Rope", that is, when you move your finger across the screen, there is a trail following your finger to simulate the knife cutting effect.

I am wondering what's the name of this kind of effect and how it is implemented. Could anyone give me a hint?

Answer 1

This depends on how you have implemented your game thus far, i.e., using 2D graphics like in Cocoa or using OpenGL. Fruit Ninja, for example, uses the latter, because its fruits are 3D models. In that case, your Render() chain will typically draw all your 3D objects, then change projection to orthographic to render things like sprite fonts or untransformed 2D sprites (like a HUD) on top of everything. Each of these "sprites" is a quad (2 triangles forming a rectangle) with a texture image mapped to it. Once the texture is loaded into graphics memory, the GPU can draw it over & over really fast, and stretch it or rotate it with no additional cost!

So that's the way I'd do it: a quad with a transparent texture that looks like the "streak" you want. Then watch for the touch point and keep track of the previous (or multiple previous) touch coordinates. Calculate the distance between the two points (Google "distance formula") and its angle vector (just two division operations on deltaX,deltaY now that you have the distance). Apply these to the 4x4 matrix you'll use to transform your quad, so that you stretch it (scale X by the distance), rotate it according to your vector, and translate it to the X,Y of the most recent touch point. When the touch is lifted, you can shrink/fade the streak easily.

There's another approach you could use to handle curved swipes. It's more difficult but would look better. Use a TRIANGLE STRIP with your "streak" image applied (texture coordinates 0.0 to 1.0) across the vertices along its length. Then based on all those previous touch points, set all the the vertex coordinates yourself, calculating lines between the points and offsetting vertices perpendicularly. Make sense? I hope so! This approach is fun and it's not as painful as it might sound, I promise!

Answer 2

The GLPaint sample may give you some hint.

Answer 3

A good place to start with CoreAnimation are the WWDC 2010 Videos.

• Session 424 - Core Animation in Practice, Part 1
• Session 425 - Core Animation in Practice, Part 2

To access it you will be asked to login with your developing-account.