cocos2d-x 关于 Sprite应用 的一个小游戏 – Sky Defense

1.效果图:

 

 

 

这个是《Cocos2d-X by Example Beginner’s Guide》上的第二个例子,用鼠标点屏幕点一下就会生成一个炸弹,等炸弹大到一定程度再点击屏幕,炸弹就爆炸了,光圈碰到下落的绿色物体就加分了,绿色物体落到地上,就减生命的,生命到0就Game Over了。

 

还蛮有趣的一个游戏,不知道我复制代码哪里出错了,这游戏应该还会掉落急救包的,没一个掉落下来。

 

这游戏主要教了下面几个内容:

1.用Sprite Sheets 来优化加载Sprite图片。这里用到了“TexturePacker”这软件。

2.用Bitmap fonts来在游戏中显示文字

3.Sprite 像图中的下落陨石,炸弹等 进行一些 CCActions

4.除了CCAction外,还有动画, Animate a Sprite

 

2.使用TexturePacker进行创建Sprite Sheets

 

 

假设我们有四张Sprite的图如上,那么在游戏加载资源时就需要加载4张图片,往往一个游戏的Sprite 图有几十张,几百张,靠用一张一张读取显然效率比较低,这个时候就用到了Sprite Sheets。像下面这张图。

 

 

 

之前我做的一个游戏完全是手动的创建Sprite Sheets,游戏中需要知道每一个小的Sprite位置。用TexturePacker就简单很多了。

把整个文件夹拖到最右侧的Sprites中,中间就自动生成了一张预览的效果图,导出就会有一张Png图片和一个plist文件。plist里就记录了每个单独的Sprite的位置和名字等信息。在游戏中同时载入这两个文件就可以得到所有单个Sprite了。

 

 

 

代码非常简单:

 

//载入plist和创建CCSpriteBatchNode
	CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("sprite_sheet.plist");
	CCSpriteBatchNode *_gameBatchNode = CCSpriteBatchNode::create("sprite_sheet.png");
	this->addChild(_gameBatchNode);
	//得到单独的一个Sprite
	CCSprite *sprite = CCSprite::createWithSpriteFrameName("city_dark.png");

 

2.使用BMFont来制作Bitmap font

 

 

那本书中是使用GlyphDesigner来制作的,可是我没有Mac系统啊,伤不起,只好用BMFont了。

 

1.首先准备好一个txt包含你要在游戏中显示的文字。比如我的是“世界你好”这4个字。

 

 

接下来要进行主体和编码的设定。

 

打开BMFont菜单的Options中的Font Settings,主要设置Face和Charset,这里我们选择了跟Txt一样的宋体和Unicode。

 

 

BMFont的导出选项也要弄下,打开Options中的Export Options,宽度和高度看字体多少设置,Bit Depth要清晰的话选择32,Texture选择Png。

 

 

 

接下来就是导入我们的Txt,选择Edit中的Select chars from file选择,导入我们之前设置好的txt。注意这个时候如果提示 xx Characters from the file are not available in the font,可有可能是编码或者字体不对的原因。

 

 

选择Options里的Save Bitmap font 就得到了一张Png图片和fnt文件。等下在Cocos2d-x中就可以使用了。

 

代码中比如我要载入0这个字就可以用下面的代码。

CCLabelBMFont *_scoreDisplay = CCLabelBMFont::create("0","font.fnt",_screenSize.width * 0.3f);

 

3.Cocos2d-x中的CCActions

 

 

Cocos2d-x中有非常多类型的Action,大家可以看它自带的Sample中的TestCpp中的ActionsTest了解更多。

 

CCActionInterval *rotate = CCRotateBy::create(0.5f, -90);
	CCRepeatForever *_rotateSprite = CCRepeatForever::create(rotate);
	CCSprite *child;
	child = (CCSprite*) _bomb->getChildByTag(kSpriteHalo);
	child->runAction((CCAction*) _rotateSprite);

 

 

4.Cocos2d-x中的Sprite Animation

 

 

大家可以看它自带的Sample中的TestCpp中的ActionsTest中Animation了解更多。

 

CCAnimation *animation;
	CCSpriteFrame *frame;//动画的每一帧,你可以想象做gif的每张图

	animation = CCAnimation::create();
	CCString *name;
    int i;
	for(i = 1; i<=10; ++i){
		name = CCString::createWithFormat("boom%i.png",i);
		//动画的原理就是n张图快速播放
		frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(name->getCString());
		animation->addSpriteFrame(frame);
	}
	animation->setDelayPerUnit(1 / 10.0f);
	animation->setRestoreOriginalFrame(true);//动画播完是否恢复到第一帧
	CCSequence *_groundHit = CCSequence::create(
		 CCMoveBy::create(0, ccp(0, _screenSize.height * 0.12f)),
		 CCAnimate::create(animation),//动画也是一种CCAction,可以放在CCSequence中
		 CCCallFuncN::create(this,callfuncN_selector(GameLayer::animationDone)),//动画执行完后进行的函数
		 NULL
		);
	_groundHit->retain();

 

 

下面是Windows下的这个例子下载地址(我用的是7z的压缩):

Sky-Defense.7z

文章源地址:http://www.waitingfy.com/?p=643

Tags:

643

One Response to cocos2d-x 关于 Sprite应用 的一个小游戏 – Sky Defense

  1. QQ 50953771说道:

    你的文章图文并茂很适合我们这些初学者啊

Leave a Reply

Name and Email Address are required fields.
Your email will not be published or shared with third parties.