【cocos2dで時間で減少するバーを作る】アプリ開発日記（7/27）

今日のテーマ
【時間で減少するバーを作る】

バーを増減させて、タップするタイミングや時間制限を見やすくします。
どういった考え方で作るのかを書いていきます。

■考え方
時間の経過でバーを減少させる場合は、
見た目的に画像を徐々に小さくしていく必要があります。
以上をふまえると、まず必要なものは、
•バーの画像
•時間の経過
•画像を徐々に小さくする
以上になります。
これを一つずつ,実装します。

■バーの画像
バーとして徐々に小さくする方向が横の場合、
横のサイズを1pxにします。縦のサイズは適当に40pxぐらいで作成します。
実は徐々に小さくするは徐々にもとに戻すとなります。

//ヘッダファイル
//-------------------------------

//バーの長さと時間の長さを定義
#define MAX_TIME 460

//クラス間で使用する共通の変数
int remainingTime;

//-------------------------------
//本体（-(id) initへ）
//-------------------------------

//画像の初期設定
remainingTime = MAX_TIME;
CGSize winSize = [[CCDirector sharedDirector] winSize];
//横1px,縦40pxの画像
bar = [CCSprite spriteWithFile:@"gage.png"];
[self addChild:bar z:0 tag:0];
[bar setPosition:ccp(45,winSize.height - 60)];
[bar setScaleX:remainingTime];
[bar setAnchorPoint:ccp(0,1)];

//ヘッダファイル

//-------------------------------

//バーの長さと時間の長さを定義

#define MAX_TIME 460

//クラス間で使用する共通の変数

int remainingTime;

//-------------------------------

//本体（-(id) initへ）

//-------------------------------

//画像の初期設定

remainingTime = MAX_TIME;

CGSize winSize = [[CCDirector sharedDirector] winSize];

//横1px,縦40pxの画像

bar = [CCSprite spriteWithFile:@"gage.png"];

[self addChild:bar z:0 tag:0];

[bar setPosition:ccp(45,winSize.height - 60)];

[bar setScaleX:remainingTime];

[bar setAnchorPoint:ccp(0,1)];

■時間の経過
こちらは、schedule:@selectorを使用します。

//先ほどの画像の初期設定のすぐあとに書いてます。
[self schedule:@selector(drainTime) interval:0.20];

1 2	//先ほどの画像の初期設定のすぐあとに書いてます。 [self schedule:@selector(drainTime) interval:0.20];

■画像を徐々に小さくする
■時間の経過で徐々に画像を小さくする関数 “drainTime”

-(void)drainTime{
		if(remainingTime>0)
			remainingTime--;
		[bar setScaleX:remainingTime];
}

-(void)drainTime{

if(remainingTime>0)

remainingTime--;

[bar setScaleX:remainingTime];

}

まとめ
上記の実装で、0.2秒ごとにバーが減少します。
setAnchorPoint、setPosition等はバーの減少には直接関係がないのですが
ちょうど広告の少し下にゲージを置くという想定です。
適宜変更して頂けたらと思います。

関連記事:

Profile cancel