cocos2d:CCMenuでボタンが押されたような効果

2013/01/28

category: cocos2d | tag: cocos2d | no comments

ユーザービリティの観点からも押されていることが分かるようにするのは大切なこと。

押された時のイメージ(画像)を用意すれば何の問題もなくできますが、ここでは1つの画像で手軽に実現する方法を考えてみました。

使った画像は

buttonStart.png

メニュー項目が押されている間は、

若干暗くなる
位置が移動する

となるようにしてみました。

コード抜粋

        // STARTボタン
        CCSprite *btnPlayDef = [CCSprite spriteWithSpriteFrameName:@"buttonStart.png"];
        CCSprite *btnPlaySel = [CCSprite spriteWithSpriteFrameName:@"buttonStart.png"];
        btnPlaySel.color = ccc3(200, 200, 200);
        btnPlaySel.position = ccp(2, -2);
        CCMenuItemSprite *buttonPlay = [CCMenuItemSprite itemWithNormalSprite:btnPlayDef
                                                               selectedSprite:btnPlaySel
                                                                       target:self
                                                                     selector:@selector(tappedStartButton:)];
        [buttonPlay setPosition:ccp(160, 103)];
        
        CCMenu *menu = [CCMenu menuWithItems:buttonPlay, nil];
        [menu setPosition:ccp(0, 0)];
        [self addChild:menu];

// STARTボタン

CCSprite *btnPlayDef = [CCSprite spriteWithSpriteFrameName:@"buttonStart.png"];

CCSprite *btnPlaySel = [CCSprite spriteWithSpriteFrameName:@"buttonStart.png"];

btnPlaySel.color = ccc3(200, 200, 200);

btnPlaySel.position = ccp(2, -2);

CCMenuItemSprite *buttonPlay = [CCMenuItemSprite itemWithNormalSprite:btnPlayDef

selectedSprite:btnPlaySel

target:self

selector:@selector(tappedStartButton:)];

[buttonPlay setPosition:ccp(160, 103)];

CCMenu *menu = [CCMenu menuWithItems:buttonPlay, nil];

[menu setPosition:ccp(0, 0)];

[self addChild:menu];

4行目：色を設定。元の画像から若干暗くなるような値を設定(本当は明るくしたい所だけど、colorプロパティへの値設定では元の画像よりも明るくするのは無理か？)。
5行目：位置を設定。押された時に右下へ若干移動するような値を設定した。

実行結果

Pocket

Check

コメントを残すコメントをキャンセル

コメントを投稿するにはログインしてください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Trackback URL:

devlog [naru design]