タグ「cocos2d」が付けられているもの

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

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

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

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

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

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

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

Retina用
maskTB-hd.png

普通用
maskTB.png

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
cocos2dのテンプレートをiPadで動かしてみる。
(*既存のプロジェクトをiPad化する方法を試しただけ
これでよいのかは分からないです)

1. ターゲットの右クリックを行い現在のターゲットをiPad用にアップグレードを選
iPad_U1

2. ユニバーサルアプリにするか選択する
iPad_U2

3. ユニバーサルアプリを指定
iPad_U3

4. 選べるターゲットを増やす
iPad_U4

5. iPhoneシュミレータで動かす
iPad_U5

iPad_U6

6. iPadシュミレータで動かす
iPad_U7
iPad_U8

*エミュレータのCPU負荷が高いのでこの方法が合っているのか不明。。。汗

参考にさせていただいたサイト :
iPad Template
iPhone アプリを iPad 対応にする方法(プログラミング編)
iPad simulator bad performanc
お手軽に一枚画像でテクスチャを読み込む
1. 4つの画像を一枚画像にまとめる
i_test
のような画像を作成する

2. テクスチャーを読み込む
CCTexture2D *aTexture = [[CCTextureCache sharedTextureCache] addImage:@"i_test.png"];

3-2. 黄のスプライトを作成
@interface Item : CCSprite 
[[[self alloc] initWithTexture:aTexture rect:CGRectMake(128,0,128,128)] autorelease];

3-2. 赤のスプライトを作成
@interface Item : CCSprite 
[[[self alloc] initWithTexture:aTexture rect:CGRectMake(0,128,128,128)] autorelease];

3-4. 紫のスプライトを作成
@interface Item : CCSprite 
[[[self alloc] initWithTexture:aTexture rect:CGRectMake(0,0,128,128)] autorelease];

3-2. 青のスプライトを作成
@interface Item : CCSprite 
[[[self alloc] initWithTexture:aTexture rect:CGRectMake(128,128,128,128)] autorelease];

4. このように表示される
cocos2d

[参考サイト: Performance tips for Cocos2d for iPhone]