Cocos2D菜单相关教程

最新推荐文章于 2025-07-19 14:38:49 发布

原创最新推荐文章于 2025-07-19 14:38:49 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

cocos2d/cocos2d-x 专栏收录该内容

4 篇文章

订阅专栏

本文介绍Cocos2d中菜单的基本用法，包括文本菜单、精灵菜单及菜单项动画等，适用于场景切换等游戏开发需求。

最近在研究COCOS2D的菜单，目前我的菜单主要是用于场景的切换。下面是我总结的几点用法。

简单的文本菜单示例（代码加到初始化方法里面）：

-(id)init
{
    if (self = [super initWithColor:ccc4(255, 255, 255, 255)])
    {
        [CCMenuItemFont setFontName:@"Helvetica"];
        [CCMenuItemFont setFontSize:30];
        
        CCMenuItem * start = [CCMenuItemFont itemWithString:@"Start Game" target:self selector:@selector(start:)];
        CCMenuItem * score = [CCMenuItemFont itemWithString:@"Score" target:self selector:@selector(score:)];
        CCMenuItem * about = [CCMenuItemFont itemWithString:@"About" target:self selector:@selector(about:)];
        
        CCMenu * menu = [CCMenu menuWithItems:start, score, about, nil];
        [menu alignItemsVertically];//菜单居中
        [menu setColor:ccc3(0, 0, 0)];//设置菜单字体为黑色

        [self addChild:menu];
        
    }
    return self;
}

菜单出现的飞出动画效果实现：

for(CCNode * child in [menu children]) //快速枚举菜单孩子
        {
            CGPoint destinationPoint = child.position; //获取菜单的目的地点坐标
            child.position = ccp(50, destinationPoint.y);
            [child runAction:[CCEaseElasticOut actionWithAction:[CCMoveTo actionWithDuration:5 position:CGPointMake(destinationPoint.x, destinationPoint.y)]]];
        }

制作精灵菜单：

CCSprite * startMenuNormal = [CCSprite spriteWithFile:@"Button1.png"];
        CCSprite * startMenuSelected = [CCSprite spriteWithFile:@"Button1Sel.png"];
        CCMenuItem * start = [CCMenuItemSprite itemWithNormalSprite:startMenuNormal selectedSprite:startMenuSelected target:self selector:@selector(start:)];

下面是集中菜单形式的用法：

GSize size = [[CCDirector sharedDirector] winSize];  
 
// set CCMenuItemFont default properties  
 [CCMenuItemFont setFontName:@"Helvetica-BoldOblique"];  
 [CCMenuItemFont setFontSize:26];  
   
// 直接用文本当菜单项，CCMenuItemFont简单地创建了一个CCLabel，如果你已经有一个CCLabel，可以使用CCMenuItemLabel类  
 CCMenuItemFont* item1 = [CCMenuItemFont itemFromString:@"Go Back!" target:self  
 selector:@selector(menuItem1Touched:)];  
   
// 用图像创建，可以用CCMenuItemImage或者CCSprite（如下），后者的优点在于你可以用同一幅图，仅靠着不同色来达到高亮效果  
 CCSprite* normal = [CCSprite spriteWithFile:@"Icon.png"];  
 normal.color = ccRED;  
 CCSprite* selected = [CCSprite spriteWithFile:@"Icon.png"];  
 selected.color = ccGREEN;  
 CCMenuItemSprite* item2 = [CCMenuItemSprite itemFromNormalSprite:normal selectedSprite:selected   
 target:self selector:@selector(menuItem2Touched:)];  
   
 // 用开关（CCMenuItemToggle）创建菜单项，可以用文本标签或者图像都可  
 [CCMenuItemFont setFontName:@"STHeitiJ-Light"];  
 [CCMenuItemFont setFontSize:18];  
 CCMenuItemFont* toggleOn = [CCMenuItemFont itemFromString:@"I'm ON!"];  
 CCMenuItemFont* toggleOff = [CCMenuItemFont itemFromString:@"I'm OFF!"];  
 CCMenuItemToggle* item3 = [CCMenuItemToggle itemWithTarget:self selector:@selector(menuItem3Touched:) items:toggleOn, toggleOff, nil];  
   
 // 创建菜单  
.CCMenu* menu = [CCMenu menuWithItems:item1, item2, item3, nil];  
menu.position = CGPointMake(size.width / 2, size.height / 2);  
 [self addChild:menu];  
   
 // 把菜单项排列起来  
 [menu alignItemsVerticallyWithPadding:40];