Search code examples
ioscocos2d-iphonecocos2d-x

tunnel effect cocos2d


I am looking to create a similar tunnel effect in COCOS2D (iOS). Could anyone suggest any pointers?

Ref Image

ref Video 1

ref Video 2

Till now I have tried with several ring shape sprites with decreasing scale and positioned center to a same point and keeping Z decreasing as well for each smaller sprite.

With that, animating it with CCScaleTo and changing the size to 2.0 with animation duration but it does not come anyway near to the tunnel effect shown in the reference.

Thanks, sam


Solution

  • I found the implementation description from the author of this effect:

    "It surely was a lot of work to create the depth illusion in a 2D plane. The principle is very easy though: circles start in the middle of the screen with scale 0. Then the first circle of the tunnel starts scaling proportionally to the time elapsed (linear scaling doesn't work) and after some time the second circle starts scaling, then the 3rd, and 4th and so on. You then lower proportionally the alpha value for the circles (the ones in the far back have alpha value lower than the ones in front to give the illusion of blur), you define a path that every circle has to follow, moving the X and Y coordinates of it, then you put a spaceship in the middle of the screen. Tilting the device makes the tunnel to shift left and right, up and down (but that gives the impression that the spaceship is moving instead!). Once the circles go out of the screen, they are quickly faded and put back into initial position (to save memory so I don't need to create new circles but I reuse the same ones). Sorry about my english, but I hope that explained the general idea :)"