“Bop a Dork” App from a CartoonSmart Student and a Survey!

My friend Nathanael at iPhoneGameKit.com is close to releasing a new starter kit and has asked for some pre-release feedback on what people want out of a Kit, and perhaps even out of life itself. You can give him some open-ended feedback if you want. Its only about 20 short questions, and for people who like surveys LIKE ME, its not long enough.  CLICK HERE for more.

And Dallas has released his first app! Ahh, that first approval is so sweet. And this game looks great! Check it out in the App Store…

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…

A new CartoonSmart student’s game hits the App Store.

Congrats to Marcel at Proba Studios, his first kid’s game looks terrific (and it’s in HD)!  The goal is to help Henry (the cool red fish) not get eaten by the lesser-cool baddies.  Marcel emailed me with something I didn’t realize (although probably could have assumed), which is that to support HD graphics on the new iPad you have to target the project to iOS 5.1 . And his question was, whether to downgrade the project on the next update. In my opinion, heck no!  Keep the awesome graphics, and in time most people will have updated their devices to the new iOS and this problem solves itself. The game looks great as is, so I say keep it that way.  =)

Keep at it!

 

Our first HTML5 Template / Component Galleries!

Our master of all things template related, Tibi,  has returned with some Flash-less but no-less-cool templates using the magic of HTML5, CSS, Javascript and all that other good code that’s making both websites and mobile devices look awesomely similar these days. These HTML5 templates are setup essentially the same as his Flash templates: Change the XML file to set your preferences and image locations, and upload away. The only big difference now is how you embed the gallery. This just involves pasting some code in your html file (this was true with Flash too). And we’ve documented those changes in an included written file, and I’ve added my own movie file which covers every aspect of getting the gallery on your site. This includes swapping out images and also using the demo version to view live changes of the gallery, and using those values in the configuration XML file.

Finally, I’ve tested this on all my iPads and it looks great (and wait, before I finish typing this, I should test on my iPhone too)… and yup, they look and play great on the iPhone as well. Check ‘em out below. Each is just $15…

Whoa. Phonegap in CS6 looks really wild!

Our fabulous instructor Lawrence just showed me what he’ll be covering in the continuation of his PhoneGap course. We’re holding off until CS6 is out, and we can demonstrate some of what’s featured in this preview from Adobe.

Wait till you see QR Code at the end. How weird is that?!?  Maybe I’ll start pointing my phone’s camera at those things in my day-to-day life and see if an app pops up. I thought those were just price tag checkers =)