 |
Animation adds excitement to a game and makes the characters more realistic. In this article, we’ll look at the Cocos2D library and how it supports programmatic animations in iPhone games.
This article is part of a series that teaches you how to create iPhone games based on the open-source game Seven Bridges. Make sure to check out the first article in the series, “Designing an Open-Source iPhone Game” and look at the source code in the Seven Bridges GitHub repository.
This article walks you through the basics of animation. We’ll look at actions in Cocos2D and see how to combine them to create complex and custom effects.
All of the basic building blocks in a Cocos2D game, such as images and layers, derive from CCNode. Nodes interact with actions, which extend CCAction to create movement on the screen.
The basic Cocos2D actions can:
We’ll start by looking at the simple action CCBlink. Seven Bridges doesn’t use the blink action, but it’s one of the easiest actions to understand.
Before we can start to use any action, we’ll need a node. We’ll start with PlayerNode from Seven Bridges.
The player node is a simple one. It shows the player sprite, 
, and it handles the movement and animation of the player around the screen. PlayerNode isn’t actually a CCNode, but it contains a CCSprite, which represents a single image and extends CCNode. Separating the player object from the actual player image makes the player object a little more flexible.
Our player node needs a color and a LayerManager. LayerManager is a helper object in Seven Bridges that lets game nodes interact with the world around them. You don’t need to code your objects with a LayerManager, but it gives you a simple place to add some standard code.
Let’s create a new player and place the player on the screen.
PlayerNode* player = [[PlayerNode alloc] initWithColor:cBlack layerMgr:_layerMgr];
player.player.position = ccp(100, 100);
PlayerNode contains the sprite pointer and uses the LayerManager to add the sprite to the scene. It makes the sprite available as a property named player, which has a property named position. The full code for creating LayerManager is in LevelLayer.
The blink action can run directly on the player sprite, because sprites are also CCNode objects that implement the runAction method. It works like this:
CCBlink* blink = [CCBlink actionWithDuration:10 blinks:5];
[player.player runAction:blink];
Most actions define a static actionWithDuration method, which creates a new action object. CCBlink takes a duration and the number of times it should blink. We can apply whatever actions we’d like to the node just by passing them to the runAction method.
The latest version of Seven Bridges introduces teleporters, 
. When players run into teleporters, they should look like they’re jumping in. To create that effect, we’ll combine three actions: rotate, fade and scale. Each of these actions takes a little time to run, but we can make them all run simultaneously. Put them together and we’ll see players spinning and disappearing as they shrink (again, see LevelLayer.mm).
[player.player runAction:[CCRotateBy actionWithDuration:0.5 angle:360]];
[player.player runAction:[CCFadeTo actionWithDuration:0.5 opacity:0.0]];
[player.player runAction:[CCScaleTo actionWithDuration:0.5 scale:0.25]];
CCRotateBy rotates the player from the current position by a specified number of degrees. In this case, we want a full circle, so we rotate by 360 degrees.
CCFadeTo changes the player’s opacity to the specified value. We want players to disappear completely, so we fade to 0.0.
CCScaleTo grows or shrinks the player according to the specified scaling factor. We want players to shrink as they enter the teleporter, so we scale them down to one quarter of the default size.
These actions take a duration, just like CCBlink. By specifying the duration as the same for each action, we cause all three of them to run at the same time. Playing them all together looks like this:
Rotating and fading is cool, but let’s take it up a notch by actually changing the dimensions of the sprite, instead of just the size. The “Houses and Colors” map introduces houses, 
, that you have to visit. When you visit a house, we turn it gray with a little flourish.
Houses are rendered by an object similar to PlayerNode, named HouseNode. Each is a helper object that contains a sprite and that handles the interactions. PlayerNode exposes the player sprite in a property named player, and HouseNode exposes the house sprite in a property named house.
The house-visiting animation flips the house horizontally while turning it gray. To flip the house back and forth, we run two actions sequentially. The first action flips the house to the right and leaves it backwards. The second action flips it back to the left.
The spinning, shrinking, fading player used three animations that ran at the same time. The house needs more control. To space them out, we’ll use a new object named CCSequence. Sequences string together actions that run one after another.
We’ll start by creating our two actions (HouseNode.mm):
float scale = 1.0;
CCEaseExponentialIn* flipHalf = [CCEaseExponentialIn
actionWithAction:[CCActionTween actionWithDuration:0.25 key:@"scaleX" from:-scale to:0.0]];
CCEaseExponentialOut* flipRemainingHalf = [CCEaseExponentialOut
actionWithAction:[CCActionTween actionWithDuration:0.25 key:@"scaleX" from:0.0 to:scale]];
Cocos2D provides a series of special actions that make easing and tweening possible. They all derive from CCEase. These actions provide simple access to some of the basic movement animations that make objects bounce and slide into each other with a more natural movement. These same techniques are used on the Web for JavaScript animations.
CCEaseExponentialIn and CCEaseExponentialOut provide natural movement in and out of various positions using an exponential curve. This animation combines that with CCTween, which can apply changes to any property of a node. We change the scaleX property to start the rotation.
Confused yet?
There’s a lot of math here, but the basic concepts are pretty simple. The first animation causes the house to get smaller horizontally along the x axis. This squishes the house together until it disappears. The second animation pulls the house apart from zero to the full width. When you put them together, the house looks like it’s rotating.
Let’s create our house and run the animations together with a sequence like this (HouseNode.mm):
HouseNode *houseNode = [[HouseNode alloc] initWithColorAndCoins:cBlack layerMgr:layerMgr coins:0];
CCSequence* seq = [CCSequence actions:flipHalf, flipRemainingHalf, nil];
[house runAction:seq];
CCSequence takes a series of actions and runs them one after another. The last argument is an Objective-C construct called a selector; it defines a method to call when the actions are complete. It is optional, and we don’t need any notification, so we just pass it nil.
This sequence will flip the house, but we also want to turn it gray: 
. Cocos2D provides special actions for tinting, but we want a high-quality image for the gray house, so we’ll use a PNG file. None of the default actions replace a sprite’s image, so we need a little custom code. Cocos2D provides the ultimate flexibility with the CCCallFunc action, which sits inside a sequence and calls any code you want.
The house turns gray when the visit ends, so we’ll create a new function named visitEnded and define it on HouseNode, like so (HouseNode.mm):
-(void)visitEnded {
CCSpriteFrameCache* cache = [CCSpriteFrameCache sharedSpriteFrameCache];
CCSpriteFrame* frame;
frame = [cache spriteFrameByName:@"house_gray.png"];
[self.house setDisplayFrame:frame];
}
We already have a gray house icon, so the visitEnded function gets that icon from the sprite cache and sets it into our house sprite. Now we just need to tweak our sequence to call visitEnded in the middle of the animation. This code is getting a little complicated, so we’ll add it to a new method on HouseNode and call it visit.
-(void) visit {
float scale = 1.0;
CCEaseExponentialIn* flipHalf = [CCEaseExponentialIn
actionWithAction:[CCActionTween actionWithDuration:0.25 key:@"scaleX" from:-scale to:0.0]];
CCEaseExponentialOut* flipRemainingHalf = [CCEaseExponentialOut
actionWithAction:[CCActionTween actionWithDuration:0.25 key:@"scaleX" from:0.0 to:scale]];
CCSequence* seq = [CCSequence actions:flipHalf,
[CCCallFunc actionWithTarget:self selector:@selector(visitEnded)],
flipRemainingHalf, nil];
[self.house runAction:seq];
}
This new sequence will squish the house down, call the visitEnded method with CCCallFunc to turn the house gray, and stretch the house back out.
Cocos2D provides a series of actions for calling custom code, such as CCCallFuncN and CCCallBlock. Each is a variation of calling custom code during sequences. Combining out-of-the-box animations with custom code creates an ideal environment for complex animations.
We’ve looked at simple animations and looked at some more complex interactions. Now let’s get fancy with particles. Cocos2D provides a set of more complex animations, which all start with CCParticleSystem.
Particle systems aren’t actions. They use actions to create flexible canned animations. They’re awesome, complex and poorly documented. Particle systems work well for mimicking natural phenomena such as rain and smoke.
When you beat a level of Seven Bridges, we give you a little reward: star-shaped confetti that spins and floats across the screen. We add whimsy to those stars with some randomness, and pull everything together with a particle system named CCParticleRain.
So… um… there’s no way to ease into this one — here’s a really big chunk of code (LevelLayer.mm):
-(void) showConfetti: (float) x y:(float) y {
self.emitter = [[CCParticleRain alloc] init];
[self.emitter setScaleX:0.5];
[self.emitter setScaleY:0.5];
[self.emitter resetSystem];
self.emitter.texture = [[CCTextureCache sharedTextureCache] addImage:@"confetti.png"];
self.emitter.duration = 1.5;
// Set the gravity effect for the stars to control how
// fast they fall down.
self.emitter.gravity = ccp(self.player.player.position.x, 90);
// Specify the angle of the stars as they extend from the
// starting point.
self.emitter.angle = 90;
self.emitter.angleVar = 360;
// The speed the particles will use when floating
self.emitter.speed = 160;
self.emitter.speedVar = 20;
// The radial variable
self.emitter.radialAccel = -120;
self.emitter.radialAccelVar = 120;
// The tangential variable
self.emitter.tangentialAccel = 30;
self.emitter.tangentialAccelVar = 60;
// How long each star should last before fading out
self.emitter.life = 1;
self.emitter.lifeVar = 4;
// How much each star should spin
self.emitter.startSpin = 15;
self.emitter.startSpinVar = 5;
self.emitter.endSpin = 360;
self.emitter.endSpinVar = 180;
// The color of the stars as RGB values. Each color uses
// a variable value for where the stars should start and
// what color they should use when they're done.
ccColor4F startColor = {171.0f, 26.0f, 37.0f, 1.0f};
self.emitter.startColor = startColor;
ccColor4F startColorVar = {245.0f, 255.f, 72.0f, 1.0f};
self.emitter.startColorVar = startColorVar;
ccColor4F endColor = {255.0f, 223.0f, 85.0f, 1.0f};
self.emitter.endColor = endColor;
ccColor4F endColorVar = {255.0f, 131.0f, 62.0f, 1.0f};
self.emitter.endColorVar = endColorVar;
// The size of each of the stars
self.emitter.startSize = 50.0f;
self.emitter.startSizeVar = 20.0f;
self.emitter.endSize = kParticleStartSizeEqualToEndSize;
// The rate at which new stars will be created
self.emitter.totalParticles = 250;
self.emitter.emissionRate = self.emitter.totalParticles/self.emitter.life;
// The position to start the stars
self.emitter.posVar = ccp(x + 20, y - 20);
self.emitter.position = ccp(x,y);
// We have a simple white background, so we don't want to
// do additive blending.
self.emitter.blendAdditive = NO;
// Now we're ready to run the particle emitter
[self addChild: self.emitter z:10];
self.emitter.autoRemoveOnFinish = YES;
// We call the doWon function when the particle system completes
// so that we can take the player to the You Won screen.
[self scheduleOnce:@selector(doWon) delay:3];
}
This code comes from LevelLayer, which controls the player’s interactions with the play screen. When the player wins the level, we call the showConfetti method and pass in the player’s current location.
The particle system starts with a single image, 
, creates hundreds of instances of that image, and moves those instances across the screen while changing their size, color, rotation and speed.
Most of this code just sets up CCParticleRain and tells it how to behave. Particle systems are very flexible and support a dizzying array of configuration properties. These properties aren’t well documented; I found most of them by looking in Cocos2D’s source code.
Particle systems achieve a natural look by having random variability added to them. You control the range of the randomness with var properties. For example, we want the stars to start out between 20 and 50 times their regular size, so we specify a startSize property of 50.0f and a startSizeVar property of 20.0f. This means that each of the stars will start somewhere between these two values.
Now that you’ve seen some of the basic concepts in Cocos2D animations, you can create your own. An easy place to start is by changing Seven Bridges. Just download the source code and start tweaking it.
Add a blinking animation to make the player character blink while moving. Take a look at PlayerNode to see the sequence for moving the player across the screen. Play with the particle emitter to change the way the stars work.
In this article, we’ve reviewed programmatic animations in games, but Cocos2D also supports sprite-based animations. These animations play a series of images to create the illusion of movement, somewhat like a flip book. Seven Bridges uses that style of animation when moving the player around the screen.
Ray Wenderlich has an awesome tutorial on sprite-based animation, titled “How to Use Animations and Sprite Sheets in Cocos2D.” The article is excellent, but it mentions a product called Zwoptex, and I strongly recommend TexturePacker instead.
(al)
© Zack Grossbart for Smashing Magazine, 2013.
]]>
    
|
If you’re asking me to share with you some of the best web designs in the world, chances are I’m going to point you in the direction of something that’s pretty minimal. In fact, if you ask most designers, they’ll point you to sites that are equally sparse. Myself and others tend to believe that less is more. Plus, we’re entering an age where audiences want less fluff and more information & content. That lends to the question, how do we handle design-heavy websites?
I don’t mean design in the sense of layouts and higher understanding. I mean design in terms of aesthetics and decorations and lots of visual stuff. I’m big on separating the two, but when you think about it, I start to wonder when we on the web even left that idea. Think about it like this: many print designers know that you can’t do too many crazy effects because they don’t work on paper.
But on the web, you can really do what you want and people will see it. Nowadays, you get online and it’s not uncommon to see a website with very little design and lots of white space. So today, we’re going to do something a little different and show you some of the great websites that have tons of visual design, but still manage to work.
Most internship programs give you a piece of paper and you have to do your best to keep up. You really might feel like you’re pushing the envelope if your internship program has a dedicated web page. x3 is an agency that decided to give their entire internship a full fledged website. It’s not just any old website either. There’s so much excitement built on this page thanks to the unorthodox layout and great illustrations.
Kahuna Webstudio does a great job of creating a new iteration of the typical agency or portfolio page. While many are doing one-pagers, they aren’t doing lots to create differences per ‘page.’ Kahuna does a different thing for each section. And while it’s not the heaviest of design, they use a good amount to help create the feeling and emotion they’re looking for.
I’ve never seen cookies look so sophisticated! Beurre & Sel is an excellent site that balances lots of design with simplicity. They first create their excitement with various, bold color choices. They keep the balance by using a consistent, high quality font for headlines and a constant red color that excites and keeps base with the brand.
As designers and developers, one of the most annoying things to do is to spend hours debugging and making our website cross-browser friendly. It almost makes no sense how these browsers are so different and show different pieces of code differently. It’s also extremely maddening when people with old browsers can’t even properly enjoy your website. You couldn’t do much before but this web page for Browser Awareness Day seeks to stop all that. With it’s welcoming design and spectacular illustration, it helps spread the idea that we should all get on the same page about browsers.
At some point, creative agencies decided it would be really neat to strip their websites of lots of design. It was probably an attempt to spotlight their portfolio of work, but some just end up looking bland. Creative9 wasn’t going to take that route and decided they were going to have a great design no matter what. They create a galaxy that almost makes you feel extremely cool just to work with them.
Guitars and other instruments aren’t typically areas that experiment with much design. Many people would rather look at the beauty of the guitar than the beauty of a website. D’Angelico does a great job of highlight the guitars and creating enough aesthetics to compliment what’s already going on. It’s the perfect amount of decoration on top of a well-designed and planned website.
With some names, there’s certain things you expect to see and associate with those names. For Dearest Nature, it would almost be crazy if they passed up the idea to not use nature in their imagery. Instead of going for a clean look, they went with a natural feel. The artistic images and grungy kind of texture really help with the emotion and feel of this group.
Much like the Creative9 design agency, Delirium decided they were going to go all out on their web design. Delirium does a good job of making available the information you need only to make a decision and nothing else. It’s kind of like you have to choose heavy content over heavy design and Delirium did a great job choosing the latter.
Blue Acorn is a pretty clean site that makes sure to break up the content easily and not over complicate things. They do, however, have one major piece of design that is the centerpiece of their website. They’ve decided to create an animated illustration that helps show how they work. And while it isn’t large and across the entire site, it’s a great way to add some wonderful aesthetics amongst a solid design.
Hugs for Monsters is a portfolio for an individual. The illustration at the top of the page actually is taken across the entire site to create this exotic, tribal feel. It’s paired with extremely clean design, which makes you think this guy has a pretty good wild side while he can get his work done.
When you design for kids, there’s a fine line between being too kitchy and just being too plain for children. The Land of Nod sells great furniture for kids. Now, we know kids aren’t logging on to purchase beds and chairs online, but we do know that creating the right feel for the furniture will definitely get parents to buy quicker. Land of Nod has some great design that balances really well with what children want and what parents need.
While the homepage for Media Engine is nice, please make sure to check out the pages under the ‘Our Services’ tab. They really went above and beyond for the design here. Photo-manipulations are a great way to create some excitement with designs and they’ve utilized them throughout the site. Media Engine is known for providing new ideas, so what better way to show this than by creating crazy good manipulations, next to some good design.
Of course you want an art festival to have a web design that’s telling of the work to come. MyProvence Festival has created a theme — it seems to be like a vintage style mixed with some elements of the new age. It’s extremely creative and makes you feel that way about the festival.
The NASA Prospect site is a site designed by students in conjunction with NASA. They’ve created a site where an astronaut goes on adventures throughout the galaxy because that’s what kids dream of doing. With the help of some scrolling and development techniques, they’ve created quite an interestingly illustrated and put together story.
I like the Rdio website because it’s just a really solidly designed website. Again, there’s a great balance between cleanliness and aesthetics that has to be made note of. They do a great job utilizing the flat color design concept and pair that with a wonderfully colorful graphic that highlights some of the popular artists. The design of this site really draws you in and makes you want to try their service.
Aaron McGuire has created what seems to be a pretty regular website when you go there. Immediately, Samcreate bursts with some energy and flavor as the background moves. Throughout the site, you tend to notice some elements that have an added flair to give the site some personality that you normally wouldn’t see.
SoSweet! is a creative agency (husband and wife team) that’s created another pretty run-of-the-mill website. Until you actually look around. Much like Samcreate, they add lots of flair to different elements to make this site really pop. Not to mention the animation on the header slider, really gets you interested in what they are doing.
Every section of this one-page site feels like a new flyer design. She mixes this site up by introducing new styles, but keeping consistency by using the same type of vintage theme. This website is fun and great for those looking for new ways to spin our websites creatively.
There’s really no other way to say this, but this web site is just the coolest thing ever. If you bounce around from page to page there’s something different and interesting. They’ve revisited some of the ways we do things (especially the map) and have made it exceptionally interesting, to say the least.
Just like the Land of Nod, designers have to find a way to say ‘for children’ without overdoing it. The Wee Society has found a great, clean way to show off their products. Wee Society has many extra design elements that help with this, but the colors and design really help.
Yookoso is designed from top to bottom. Between parallax scrolling and some killer photo manipulations, you immediately get interested in what they are selling. Even though there’s so much design and aesthetics, they keep manny of their elements common and you know exactly what they’re talking about.
I think lots of have abandoned this dominate style of creating websites because of ease in development, load times of different browsers and just the notion that people want to see less. However, if there’s a way to balance or incorporate the two styles (which there are), I think it’d be beneficial to start doing so and bringing excitement back to the web and making it different.
After all, people want to read something in print and have a similar but maybe more exciting experience online, right?
Should we get back into creating design-heavy sites? What do you see as the pros and cons? Let us know your thoughts in the comments below!
| eBook: Be Awesome at Online Business – only $9! |
 |