今日のテーマ
【時間で減少するバーを作る】
バーを増減させて、タップするタイミングや時間制限を見やすくします。
どういった考え方で作るのかを書いていきます。
■考え方
時間の経過でバーを減少させる場合は、
見た目的に画像を徐々に小さくしていく必要があります。
以上をふまえると、まず必要なものは、
•バーの画像
•時間の経過
•画像を徐々に小さくする
以上になります。
これを一つずつ,実装します。
■バーの画像
バーとして徐々に小さくする方向が横の場合、
横のサイズを1pxにします。縦のサイズは適当に40pxぐらいで作成します。
実は徐々に小さくするは徐々にもとに戻すとなります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//ヘッダファイル //------------------------------- //バーの長さと時間の長さを定義 #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を使用します。
1 2 |
//先ほどの画像の初期設定のすぐあとに書いてます。 [self schedule:@selector(drainTime) interval:0.20]; |
■画像を徐々に小さくする
■時間の経過で徐々に画像を小さくする関数 “drainTime”
1 2 3 4 5 |
-(void)drainTime{ if(remainingTime>0) remainingTime--; [bar setScaleX:remainingTime]; } |
まとめ
上記の実装で、0.2秒ごとにバーが減少します。
setAnchorPoint、setPosition等はバーの減少には直接関係がないのですが
ちょうど広告の少し下にゲージを置くという想定です。
適宜変更して頂けたらと思います。
[…] ■【時間で減少するバーを作る】アプリ開発日記(7/27)|トライストア -よくわかんないと思ったら、cocos2dのお話でした。 […]
おはあぷで、なんの話かわからないとアドバイスを頂いたのでタイトルを変更しました!//【cocos2dで時間で減少するバーを作る】アプリ開発日記(7/27)http://t.co/xObu0xfzkc