(译)cocos2d菜单教程:第三部分(完)
原文链接地址:http://www.iphonegametutorials.com/2010/09/07/cocos2d-menu-tutorial-part-3/
现在,我们已经在菜单上面做了大量文章了。可能你会问,我们还能干嘛?耐心点,我的朋友!今天我们将接触menu item的图片。很期待吧?呵呵
老实说,如果你没有图片资源,你啥事也做不好。你真的需要一些教程来教你如果为菜单定制图片,这也是这篇教程的来由。
这里有本教程的完整源代码。
好了,我们这次要完成哪些内容呢---下面是今天的日程表:
- 为所有已经存在的Layer添加一个BaseLayer作为背景。
- 给“Start Game”和“Credits”按钮添加“on”和“off”状态。也就是normal状态和selected状态。
好,让我们开始吧!
我们将在上一篇教程的基础上完成工作,所以确保你有上一个教程的工程。首先,创建一个“BaseLayer”.h和.m文件,现在这个对你来说是小菜一碟了。但是,可别太得意哈,记住在“Classes”分组上面右击,选择“Add”,然后是”New Fild“。
一旦加好之后,首先打开BaseLayer.h:
#import "cocos2d.h"
@interface BaseLayer : CCLayer {
}
@end
然后修改BaseLayer.m文件:
#import "BaseLayer.h"
@implementation BaseLayer
-(id) init{
self = [super init];
if(nil == self){
return nil;
}
self.isTouchEnabled = YES;
CCSprite *bg = [CCSprite spriteWithFile: @"backgroud.png"];
bg.position = ccp(160,240);
[self addChild: bg z:0];
return self;
}
@end
你可能看到了,这里用了“background.png”来创建精灵,所以,为了保证代码能够工作,你需要把这个背景图片添加到工程里面来。右击“Resources”分组,然后选择Add,到点击“Existing files”,然后从弹出的对话框里选择你需要的png文件,如下图所示:
如果这个文件不在实际的Resources目录下面,那么就要复选上“copy。。。”选项,把那个文件拷贝进来,如果本来就在Resources目录下面,那么就不用了。
然后,我们在每个Layer中导入BaseLayer。
MenuLayer.h:
#import "BaseLayer.h"
@interface MenuLayer : BaseLayer {
PlayLayer.h:
#import "BaseLayer.h"
@interface PlayLayer : BaseLayer {
CreditsLayer.h:
#import "BaseLayer.h"
@interface CreditsLayer : BaseLayer {
在你完成之后,你将会看到每一层的背景显示下面的图片:(Credits,Menu和Play屏幕)
好,现在我们有背景了,那么菜单按钮呢?
我们首先需要创建它们,你可以使用Photoshop或者Fireworks去完成,但是,今天来说,这种方式有点过时了。今天,我将向大家介绍一个在线创建按钮图片的工具:
我使用上面的站点创建了四个图片了,每个菜单项对应两张图片:(对应两种状态)
- newGameBtn.png
- newGameBtn_over.png
- creditsBtn.png
- creditsBtn_over.png
一种状态是按钮空闲时候显示的图片,另一种状态是用户按住菜单项的状态。我们会把这4张图片全部添加到Resource文件夹中,和之间添加background.png图片一样。
因此,我们项目中有图片了,接下来呢?
首先,找到MenuLayer.m文件,把startNew从文本形式:
CCMenuItemFont *startNew = [CCMenuItemFont itemFromString:@"New Game" target:self selector: @selector(onNewGame:)];
改成图片形式:
CCMenuItemImage *startNew = [CCMenuItemImage itemFromNormalImage:@"newGameBtn.png" selectedImage:@"newGameBtn_over.png" disabledImage:@"newGameBtn.png" target:self selector:@selector(onNewGame:)];
disabledImage是可选的,如果你有一个disabled图片就更好了,其它我完全可以输入一个nil,但是,这里我只是向你展示,可以这样使用。
现在,编译并运行代码,玩一玩吧!:)
下篇教程见!
ps:如果大家有什么意见或建议,请在下方留言,谢谢!
著作权声明:本文由http://www.cnblogs.com/andyque翻译,欢迎转载分享。请尊重作者劳动,转载时保留该声明和作者博客链接,谢谢!