(译)Cocos2d_for_iPhone_1_Game_Development_Cookbook：1.2多彩的精灵

最新推荐文章于 2024-04-30 09:23:29 发布

iam126

最新推荐文章于 2024-04-30 09:23:29 发布

阅读量2.3k

点赞数

分类专栏： cocos2d翻译文章标签： iphone 工作 float c

cocos2d翻译专栏收录该内容

15 篇文章 0 订阅

订阅专栏

(译)Cocos2d_for_iPhone_1_Game_Development_Cookbook

著作权声明:本文由iam126 翻译,欢迎转载分享。

请尊重作者劳动,转载时保留该声明和作者博客链接,谢谢!

相关程序代码下载：http://download.csdn.net/detail/iam126/4068610

或搜索“Cocos2d_for_iPhone_1_Game_Development_Cookbook代码”于CSDN；

新手翻译，不准确请见谅，参考代码与原书。

1.2多彩的精灵

在上一个案例中，我们使用了彩色长方形绘制的天空和地面。设置材质颜色以及透明度的方式可以创造出非常好的效果。在这个案例中，我们将会创建一个类似电影中的场景，两个武士拿着发光的宝剑面对面站着。

如何工作…

#import "CCLayerGradient.h

@implementation Ch1_ColoringSprites

-(CCLayer*) runRecipe

{

[self initButtons];

//The Fade Scene Sprite

//淡入淡出的精灵

CCSprite *fadeSprite = [CCSprite spriteWithFile:@"blank.png"];

[fadeSprite setOpacity:0];

[fadeSprite setPosition:ccp(240,160)];

[fadeSprite setTextureRect:CGRectMake(0,0,480,320)];

[self addChild:fadeSprite z:3 tag:TAG_FADE_SPRITE];

//Add a gradient below the mountains

//为山加入一个渐变

//CCGradientDirectionT_B is an enum provided by CCLayerGradient

//CCGradientDirectionT_B是CCLayerGradient的效果之一

CCLayerGradient *gradientLayer = [CCLayerGradient layerWithColor:ccc4(61,33,62,255)fadingTo:ccc4(65,89,54,255) alongVector:ccp(480,100)];

[gradientLayer setPosition:ccp(0,50)];

[self addChild:gradientLayer z:0 tag:TAG_GROUND_GRADIENT];

//Add a sinister red glow gradient behind the evil samurai

//为那个邪恶的武士配备一个诡异的红色渐变

CCLayerGradient *redGradient = [CCLayerGradientlayerWithColor:ccc4(0,0,0,0) fadingTo:ccc4(255,0,0,100)alongVector:ccp(200,200)];

[redGradient setPosition:ccp(280,60)];

[redGradient setRotation:-90];

[self addChild:redGradient z:2 tag:TAG_RED_GRADIENT];

// Make the swords glow

//上光！

[self glowAt:ccp(230,280) withScale:CGSizeMake(3.0f, 11.0f)withColor:ccc3(0,230,255) withRotation:45.0f withSprite:goodSamurai];

[self glowAt:ccp(70,280) withScale:CGSizeMake(3.0f, 11.0f)withColor:ccc3(255,200,2) withRotation:-45.0f withSprite:evilSamurai];

return self;

}

-(void) initButtons

{

[CCMenuItemFont setFontSize:16];

//'Fade To Black' button

//"颜色变黑"的按钮制作

CCMenuItemFont* fadeToBlack = [CCMenuItemFont itemFromString:@"FADETO BLACK" target:self selector:@selector(fadeToBlackCallback:)];

CCMenu *fadeToBlackMenu = [CCMenu menuWithItems:fadeToBlack, nil];

fadeToBlackMenu.position = ccp( 180 , 20 );

[self addChild:fadeToBlackMenu z:4 tag:TAG_FADE_TO_BLACK];

}

/* Fade the scene to black */

//场景变黑

-(void) fadeToBlackCallback:(id)sender

{

CCSprite *fadeSprite = [self getChildByTag:TAG_FADE_SPRITE];

[fadeSprite stopAllActions];

[fadeSprite setColor:ccc3(0,0,0)];

[fadeSprite setOpacity:0.0f];

[fadeSprite runAction:

[CCSequence actions:[CCFadeIn actionWithDuration:2.0f], [CCFadeOutactionWithDuration:2.0f], nil]];

}

/* Create a glow effect */

//创建发光效果

-(void) glowAt:(CGPoint)positionwithScale:(CGSize)size withColor:(ccColor3B)color withRotation:(float)rotationwithSprite:(CCSprite*)sprite

{

CCSprite *glowSprite = [CCSprite spriteWithFile:@"fire.png"];

[glowSprite setColor:color];

[glowSprite setPosition:position];

[glowSprite setRotation:rotation];

[glowSprite setBlendFunc: (ccBlendFunc) { GL_ONE, GL_ONE }];

[glowSprite runAction: [CCRepeatForever actionWithAction:[CCSequenceactions:[CCScaleTo actionWithDuration:0.9f scaleX:size.widthscaleY:size.height], [CCScaleToactionWithDuration:0.9f scaleX:size.width*0.75fscaleY:size.height*0.75f], nil] ] ];

[glowSprite runAction: [CCRepeatForever actionWithAction:[CCSequenceactions:[CCFadeTo actionWithDuration:0.9f opacity:150], [CCFadeToactionWithDuration:0.9f opacity:255], nil]]];

[sprite addChild:glowSprite];

}

@end

如何工作…

这个案例向我们展示了通过代码所制作的颜色。

设置精灵颜色：

最简单的颜色设置方法是这种：

-(void)setColorLccColor3B)color;

设置精灵的颜色在一定程度上减少了可以显示的颜色，不过同时也为程序绘图增加了很多灵活性。在这个案例中，我们使用了多次setColor，包括绘制蓝天，太阳，黑色的“电影外框”等等。

ccColor3B是一个C结构体包括3个GLubyte变量。使用辅助宏来创建ccColor3B结构体：

ccColor3Bccc3(const GLubyte r,const GLubyte g,const GLubyte b);

cocos2d也设定了一些颜色常量。包括如下几个：

ccWHITE,ccYELLOW,ccBLUE,ccGREEN,ccRED,ccMAGENTA,ccBLACK,ccORANGE,ccGRAY.

渐变颜色：

在上面这个案例中，我们使用blank.png来为渐变场景指定一个颜色。我们首先话了一个跟屏幕差不多大的图片，然后使他透明，最后运行CCFadeIn动作去渐变出他的颜色。

[fadeSprite setColor:ccc3(255,255,255)];

[fadeSprite setOpacity:0.0f];

[fadeSprite runAction: [CCFadeInactionWithDuration:2.0f] ];

使用CCGradientLayer（现在新版本是CCLayerGradient）

使用CCGradientLayer类，我们可以用代码实现渐变色。制作山体到地面的渐变色，我们用的是如下的方法：

CCLayerGradient *gradientLayer =[CCLayerGradient layerWithColor:ccc4(61,33,62,255) fadingTo:ccc4(65,89,54,255)alongVector:ccp(480,100)];

[gradientLayer setPosition:ccp(0,50)];

[self addChild:gradientLayer z:0tag:TAG_GROUND_GRADIENT];

因为CCGradientLayer让你控制透明度很简单，所以他其实具备很多的用途。正如你所见，一个邪恶的红色光体在那个邪恶的武士身上。

制作精灵的发光：

为了让剑发出光，我们微妙的操纵着颜色，使用了混合渐变以及改变尺寸的方式。首先我们读取一个fire.png作为精灵。通过分别控制他的俄X、Y的尺寸，我们可以让图片或长或短。尺寸大小根据你的需要（本例中使用3：11的比例是因为剑特别瘦），你可以随意的控制尺寸以及透明度来实现你需要的效果。你也需要设置混合模式｛CL_ONE,GL_ONE｝。最后，把这个特效精灵添加给实际的精灵使它看起来真的在发光～

CCSprite *glowSprite = [CCSpritespriteWithFile:@"fire.png"];

[glowSprite setColor:color];

[glowSprite setPosition:position];

[glowSprite setRotation:rotation];

[glowSprite setBlendFunc: (ccBlendFunc) { GL_ONE,GL_ONE }];

[glowSprite runAction: [CCRepeatForeveractionWithAction:

[CCSequence actions:[CCScaleToactionWithDuration:0.9f

scaleX:size.width scaleY:size.height], [CCScaleTo

actionWithDuration:0.9f scaleX:size.width*0.75fscaleY:size.

height*0.75f], nil] ] ];