List of 3D and Tile Effects CCActions and example video!

So I’m still working on my Cocos2D iBook (partially available here) , and I started looking around for a nice example page of some of the cooler 3D and Tile Effects CCAction’s that Cocos2D offers, and I came up a bit short. So what the heck, I might as well give the internet what I was looking for a couple days ago.

Because I can’t just test things like normal people on a simple image, I started by making this project….

Don’t get too excited, I wish this was a real game too. Dirty bombs, poison darts, Acme-style TNT. It’s quite a weapons board. Each icon is a separate CCSprite, and by touching each one it will run a different CCAction. I won’t go into all that code, but the finished example project is zipped up here (for Cocos2d v1) and here (for Cocos2d v2) if you want to peek at it.

If you want to follow along with your own project and test out some of these actions, then you’ve probably already got Cocos2D setup and are working from the usual starting template which has an AppDelegate.m file. Find that, and scroll down to where the glView is created and change the pixelFormat parameter to what  you see below….

CCGLView *glView = [CCGLView viewWithFrame:[window_ bounds]
pixelFormat: kEAGLColorFormatRGBA8 // was kEAGLColorFormatRGB565

Done? Good. That makes these actions look much better (as in you won’t see black around them) And if you’re using Cocos2d v2, you’ll need to comment out…

// [director_ setProjection:kCCDirectorProjection2D];

And use instead…

[director_ setProjection:kCCDirectorProjection3D];

Otherwise some of the 3D Actions won’t run.

Let’s get started with CCShaky3D , which animates a shaky effect. For all these examples, I’ll run them with a CCRepeatForever action just so they keep playing for a while.

CCShaky3D* shaky = [CCShaky3D actionWithRange:10 shakeZ: NO grid: ccg(20,20) duration: 5];
CCRepeatForever* repeat = [CCRepeatForever actionWithAction: shaky];
[weapon runAction: repeat];

Let’s pick apart that first line, actionWithRange is basically just the intensity of the effect.  Lower that number to 1 and you’ll barely notice the effect. Raise it up and you’ll see the effect get even crazier. Then shakeZ is a bool parameter which enables the effect on the z axis. I set it to NO because I didn’t notice a major change. The duration parameter is obviously the number of seconds. If you plan on repeating the action forever you might wonder why you would set the duration very long at all, but when the action loops it is sometimes noticeable, so you might want to set a high duration for that reason.

Finally the big thing to talk about is the grid. Every time I read that, I can hear Jeff Bridges from Daft Punk’s TRON:Legacy soundtrack saying “The Grid”. So if you want to set the mood for these examples, skip to Track 2 on the album.  Most of these Actions ask for a grid setting, and I’ve found 20 by 20 runs smoothly and plays the effect in a believable way. In other words, I don’t notice The Grid. So what is the grid? What does it look like? “Ships, motorcycles?”. Nope. it’s just squares. In fact, if you hadn’t adjusted your AppDelegate.m file, you will come face to face with The Grid just like I did when I took this screenshot below.

All those black squares won’t be there if your pixelFormat is kEAGLColorFormatRGBA8, but this provides a great example of The Grid. If you were to count the number of squares from left to right and top to bottom it would be 20 and 20.

Now most of these Actions don’t show The Grid as noticeably as this particular tile effect in the screengrab, but they do break the scene down into square chunks to bend and play with. So the fewer squares in your grid the

more clunky the effect will be. But the more you use, the more resource intensive the action is. So again, I found that 20, 20 is a good starting point, and then you can tweak the effect as you like.

Continuing on, let’s look at the CCWaves and CCWaves3D actions.

CCWaves* waves = [CCWaves actionWithWaves:5 amplitude:20 horizontal: YES vertical: NO grid: ccg(20,20) duration: 5.0];
repeat = [CCRepeatForever actionWithAction: waves];
[weapon runAction: repeat];


CCWaves3D* waves = [CCWaves3D actionWithWaves:5 amplitude:25 grid: ccg(20, 20)    duration: 2.0];
repeat = [CCRepeatForever actionWithAction: waves];
[weapon runAction: repeat];

As you can see these are pretty similar. Adjust the actionWithWaves or amplitude parameters to change the number of waves in the duration and intensity. The CCWaves3D action appears much smoother to me and more like a waving flag.

Next up, let’s look at CCFlipX3D and CCFlipY3D, these are so similar I’ll just show you the X version. In the example code below (and video example) , I’m running a reverse action in the sequence to send the weapon icon back in place. Then it repeats endlessly.

CCFlipX3D* flip = [CCFlipX3D actionWithDuration:3.0];
CCSequence* sequence = [CCSequence actions: flip, [flip reverse], nil];
CCRepeatForever* repeat = [CCRepeatForever actionWithAction: sequence];
[weapon runAction: repeat];

Next up, is CCRipple3D, my favorite because it looks like the heat signature from something really hot if the effect is subtle enough.

CCRipple3D* ripple = [CCRipple3D actionWithPosition: weapon.position radius:
weapon.contentSize.width  waves:3 amplitude:15 grid: ccg(40,40) duration:8.0];

CCRepeatForever* repeat = [CCRepeatForever actionWithAction: ripple];
[weapon runAction: repeat];

Since this action is creating a ripple and bending the object around that, it is asking for a position and radius for the ripple. You could use any location or size radius, but I’m using the weapon.position and weapon.contentSize.width (the sprite’s location and width).  The other parameters are similar to the previous actions, I changed the grid to 40 by 40 for a smoother effect.

Ready to get dizzy? Let’s look at CCTwirl

 CCTwirl* twirl = [CCTwirl actionWithPosition: weapon.position twirls:1 amplitude:3 grid: ccg(20, 20) duration:3.0 ];

CCRepeatForever* repeat = [CCRepeatForever actionWithAction: twirl];
[weapon runAction: repeat];

Again, I’m using the center of the weapon icon for the actionWithPosition parameter. The twirls parameter is how many times the object will twirl in the given duration and the amplitude changes the intensity as usual.

My second favorite, CCLiquid creates a fun watery effect.

CCLiquid* liquid = [CCLiquid actionWithWaves:5 amplitude:20 grid: ccg(20,20) duration:3.0 ];
CCRepeatForever* repeat = [CCRepeatForever actionWithAction: twirl];
[weapon runAction: repeat];

Experiment with the number of waves and amplitude to your liking.

Next, let’s combine a few actions into one sequence. The sequence moves like a wave, shakes at 3 different settings, then does two fade out effects (one starting from the bottom left, the other from the top right)…

CCWavesTiles3D* tileWaves = [CCWavesTiles3D actionWithWaves:3 amplitude:15  grid:ccg(20,20) duration:5]
CCShakyTiles3D* shaky = [CCShakyTiles3D actionWithRange:4 shakeZ: YES  grid:ccg(20,20) duration:1.0];
CCShakyTiles3D* shaky2 = [CCShakyTiles3D actionWithRange:10 shakeZ: YES  grid: ccg(20,20) duration:1.0];
CCShakyTiles3D* shaky3 = [CCShakyTiles3D actionWithRange:20 shakeZ: YES grid: ccg(20,20) duration:1.0];
CCFadeOutBLTiles* tileEffect = [CCFadeOutBLTiles actionWithSize: ccg(20,20)
duration:2.0]; //tiles fade from the Bottom Left “BL”
id reverseTiles = [tileEffect reverse]; //reverse the previous action
CCFadeOutTRTiles* tileEffect2 = [CCFadeOutTRTiles actionWithSize: ccg(20,20)
duration:2.0]; //tiles fade from the Top Right “TR
id reverseTiles2 = [tileEffect2 reverse]; //reverse the previous action
CCSequence* sequence = [CCSequence actions: tileWaves, shaky, shaky2, shaky3, tileEffect, reverseTiles, tileEffect2, reverseTiles2,  nil ];
CCRepeatForever* repeat = [CCRepeatForever actionWithAction: sequence];
[weapon runAction: repeat];

Finally, here’s one more sequence of tiled actions. This time you’ll see a jump effect, quick shattering, shuffle (which moves the tiles across the screen and back again using the reverse action), column split, row split, and two more fade effects (which look like window blinds closing).

CCJumpTiles3D* jump = [CCJumpTiles3D actionWithJumps:3 amplitude:10 grid: ccg(30,30) duration:5];
CCShatteredTiles3D* shatter = [CCShatteredTiles3D actionWithRange:20 shatterZ: NO grid: ccg(20,20) duration:0.2];
CCShuffleTiles* shuffle = [CCShuffleTiles actionWithSize: ccg(20,20) duration:2];
id reverse = [ shuffle reverse];
CCSplitCols* split = [CCSplitCols actionWithCols:30 duration:2.0];
CCSplitRows* split2 = [CCSplitRows actionWithRows:30 duration:2.0];
CCFadeOutDownTiles* fade = [CCFadeOutDownTiles actionWithSize: ccg(20,20) duration:4.0];
CCFadeOutUpTiles* fade2 = [CCFadeOutUpTiles actionWithSize: ccg(20,20) duration:4.0];
CCSequence* sequence = [CCSequence actions: jump, shatter, shuffle, reverse, split, split2, fade, fade2, nil];
CCRepeatForever* repeat = [CCRepeatForever actionWithAction: sequence];
[weapon runAction: repeat];

And if you’d like to watch some of these Actions in action, here’s a video…


2 thoughts on “List of 3D and Tile Effects CCActions and example video!

  1. JJ says:

    this is awesome demo – I was looking for tile effect and didn’t know it existing in cocos2d off-the-shelf. thank you!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s