memo epic_yoshimax

cocos2dでニュースティッカーみたいなのを作成してみるメモ

仕様
1. 文字の両端が薄くなってゆく
2. 表示しきれない文字はスクロールして表示する

実装方法
1. アルファブレンディングで文字の両端が薄くなってゆくマスクをかける
2. はみ出す文字の部分をクリッピングする

以下の画像のようなモノ実装してみます。


プログラム
1. アルファブレンディングで文字の両端が薄くなってゆくマスクをかける

1-1. CCMaskを使う事によりお手軽にアルファブレンディングが行えます。
フォーラムのCCMask for Cocos2D « cocos2d for iPhone
CCMaskをコピペしてプロジェクトにクラスとして 取り込みます。

1-2. マスク用の画像を作成
画像ソフトを使いマスク用の画像を作成します。
黒い部分が見えなくなります。
ここでは黒と透過のグラデーションの画像を作成しました。

Retina用


普通用


1-3. CCMaskを実際に使ってみる

// 文字を表示する
NSString *titleName = @"2012/03/21(水) おはようニュースABC あいうえお かきくけこ さしすせそ たちつてと";
        
// 文字数が多い場合 lineBreakMode で調整 (テクスチャサイズが大きくなる為)
/*
NSLog(@"titleName length %d", [titleName length]);
title =  [CCLabelTTF labelWithString:titleName dimensions:CGSizeMake(1200,12) alignment:CCTextAlignmentLeft lineBreakMode:CCLineBreakModeTailTruncation fontName:@"Arial" fontSize:12];
*/
        
titleLable =  [CCLabelTTF labelWithString:titleName fontName:@"Arial" fontSize:12];
titlePositonX = 300;
titleLable.position = ccp(titlePositonX, 0);
titleLable.color = ccc3(0, 0, 0);
titleLable.anchorPoint = ccp(0, 0);
NSLog(@"titleLable.contentSize.width: %f", titleLable.contentSize.width);

// マスクのスプライトを作成する
CCSprite *mask = [CCSprite spriteWithFile:@"maskTB.png"];        
mask.position = ccp(0, 0);
mask.anchorPoint = ccp(0, 0);
        
// マスクを適用する
myMask = [CCMask createMaskForObject:titleLable withMask:mask];
myMask.position = ccp(10, 460);
myMask.anchorPoint = ccp(0, 1);
[self addChild:myMask z:100];
[myMask mask];
        
// 文字をスクロールさせる為のスケジューラの呼び出し
[self schedule:@selector(update:) interval:0.1];

文字を移動する

- (void)update:(ccTime)dt {
    // 文字の位置を移動する
    titlePositonX = titlePositonX -3;
    if(titlePositonX < -titleLable.contentSize.width){
        titlePositonX = 300;
    }
    titleLable.position = ccp(titlePositonX, 0);
    [myMask mask];
}

内部的には

[maskSprite_ setBlendFunc: (ccBlendFunc) { GL_ZERO, GL_ONE_MINUS_SRC_ALPHA }];
[[masked_ sprite] setBlendFunc: (ccBlendFunc) { GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA }];

などが使われているので、興味がある方はこの辺をググれば
詳しい内容を調べる事ができます。

2. はみ出す文字の部分をクリッピングする

マスク画像の範囲で文字をクリッピングしたいのでglScissorの呼び出しを
CCMaskに追加しました。

// glPushMatrix(); beginで呼ばれる

glEnable(GL_SCISSOR_TEST);
glScissor(0, 
                0,
	        maskSprite_.contentSizeInPixels.width, 
	        maskSprite_.contentSizeInPixels.height);

// 表示対象の描画

glDisable(GL_SCISSOR_TEST);
// glPopMatrix(); // endで呼ばれる

beginやendの中で glPushMatrix()やglPopMatrix()が呼ばれるので
明示的に呼び出す必要はありません。
(参考 CCRenderTexture.m GitHub ) またクリッピングする範囲の計算を簡略化してるので
Rerina用の画像と通常の画像を用意しないと
範囲の指定がうまくいかないので両方用意してください。

glScissorの範囲を調整すれば、クリッピングの範囲を自分で任意に調整できます。

XCodeの4.3.1、cocos2d v1.0.1で作成したサンプルプロジェクト
MaskTest.zip


参考サイト
CCMask for Cocos2D « cocos2d for iPhone
Seasons7/CCSlider · GitHub
Cocos2d iPhone - Sprite cliping/mask/frame - Stack Overflow
How To Mask a Sprite with Cocos2D 1.0 | Ray Wenderlich