デバッグ用にスロー再生する cocos2d

デバッグ用にスロー再生したいとき。

cocos2dのテンプレートで作成したプロジェクトのAppDelegate.mのapplication:didFinishLaunchingWithOptions:の最後の方に以下の一文を入れます。(return YES;の前。)

[objc]
– (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//【中略】

// 時間を5倍にする
[director_ scheduler].timeScale = 0.2;

return YES;
}
[/objc]

これで通常の5分の1のスロースピードで動きます。
timeScaleを2とかにすると、2倍の早さで動きます。

スプライトを、回転軸を指定して回転させる cocs2d

Cocos2d。先日の「Nodeを回転させる」の発展版。

デフォルトだとスプライトは中心に回転軸があるのですが、
これをずらしたい時の方法。

[objc]
// -45度まで回転させるCCRotateをつくる
CCRotate *rotateToMinus45 = [CCRotateTo actionWithDuration:0.2 angle:-45];

// スプライトの回転軸(中心点)を変更。ccp(0,0)だと左下、ccp(1,1)だと右上
hogeSprite.anchorPoint = ccp(0, 0);

// スプライトを回転させる
[hogeSprite runAction:rotateToMinus45];
[/objc]

中心軸(anchorPoint)を変更すると、回転軸も変わります。
中心軸は0~1で指定します。デフォルトは中心なのでccp(0.5,0.5)ですね。
中心軸を変更すると、それにともなって描画位置も変更されるので、座標の調整が必要です。

cocos2dの新規プロジェクトを縦画面に変更する(バージョン2.1)

cocos2d 横画面にする

cocos2dの新規プロジェクトで作ったアプリの画面は横画面(Landscape)ですが、これを縦画面(Portrait)に変更します。バージョンは2.1です。

まずiPhone / iPod Deployment Infoを変更します。

cocos2d 横画面にする

つぎにAppDelegate.mを変更します。

AppDelegate.m

[objc]
// The available orientations should be defined in the Info.plist file.
// And in iOS 6+ only, you can override it in the Root View controller in the "supportedInterfaceOrientations" method.
// Only valid for iOS 6+. NOT VALID for iOS 4 / 5.
-(NSUInteger)supportedInterfaceOrientations {

// iPhone only
if( [[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone )
//return UIInterfaceOrientationMaskLandscape;
return UIInterfaceOrientationMaskPortrait; // 差し替え

// iPad only
//return UIInterfaceOrientationMaskLandscape;
return UIInterfaceOrientationMaskPortrait; // 差し替え
}

// Supported orientations. Customize it for your own needs
// Only valid on iOS 4 / 5. NOT VALID for iOS 6.
– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// iPhone only
if( [[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone )
//return UIInterfaceOrientationIsLandscape(interfaceOrientation);
return UIInterfaceOrientationIsPortrait(interfaceOrientation); // 差し替え

// iPad only
// iPhone only
//return UIInterfaceOrientationIsLandscape(interfaceOrientation);
return UIInterfaceOrientationIsPortrait(interfaceOrientation); // 差し替え
}
[/objc]

以上で横画面化は完了です。

cocos2dでiPhoneゲーム開発_3 : 背景を置いてみよう

background
  1. まずはインストールから
  2. スプライトを置いてみよう
  3. 背景を置いてみよう ←いまここ

キャラクターの後ろに背景画像を配置する

前回と同じ要領で、背景を置いてみましょう。
背景画像はこちら。

background-hd.png
background-hd.png
background
background.png

そういえば前回書き忘れましたが、画像素材をなぜサイズ違いで2種類用意するのか。
これは、iPhoneのRetinaモデルとそうでないものを両方共対応するためです。
-hdとつけると、Retina用の画像だと識別してくれます。便利ですね。

それでは本題。前回作ったコードをいじっていきます。

前回同様にコードを追加してみましょう

-(id)init を以下のように修正します。

[objc]
-(id) init
{
// Spriteを生成
CCSprite * sprite1 = [CCSprite spriteWithFile:@"sample1.png"];
CCSprite * background = [CCSprite spriteWithFile:@"background.png"]; // 背景用に追加したコード
// スプライトを画像の中心に配置する
CGSize winSize = [[CCDirector sharedDirector] winSize];
sprite1.position = CGPointMake(winSize.width/2, winSize.height /2);
background.position = CGPointMake(winSize.width/2, winSize.height /2); // 背景用に追加したコード
// Spriteを追加
[self addChild:sprite1];
[self addChild:background]; // 背景用に追加したコード
}
return self;
}
[/objc]

sprite1と同じようにbackgroundという新しいスプライトを同じ位置に置いただけです。
とりあえずこのままビルドしてみましょう。

cocos2d 背景

壁に隠れたシャイな子、みたいになってしまいました。
cocos2dの描画順で、キャラクターのほうが先に描かれたためにこうなってしまいました。

キャラクターを上に持ってくるのは割と簡単です。
addChild の部分に、Z方向の値を指定すれば良いだけです。

修正前

[objc]
// Spriteを追加
[self addChild:sprite1];
[self addChild:background];
[/objc]

修正後

[objc]
// Spriteを追加
[self addChild:sprite1 z:2];
[self addChild:background z:1];
[/objc]

これでビルドしてみましょう。

cocos2d 背景

ちゃんとキャラクターが前に出てきてくれました。

次回はキャラクターを動かしてみます。

cocos2dでiPhoneゲーム開発_2 : スプライトを置いてみよう

プロジェクト「Sprite1」の作成

今回は、スプライトを設置してみます。スプライトとはUIKitで言うところの、UIViewのようなものです。最終的には以下の様な画面が出るようにします。

スクリーンショット 2013-07-29 0.10.34
前回でプロジェクトが作れるようになったので、まずはプロジェクトを作ってみましょう。
今回はプロジェクト名は「Sprite1」という名前にしました。
「cocos2d iOS」を選択します。
スクリーンショット 2013-07-28 22.48.35

「Sprite1」という名前をつけてNext。
cocos2d プロジェクト作成

以上でSprite1のプロジェクトが出来上がりました。
それでは早速ビルドしてみましょう。

cocos2d ビルド

このボタンを押すとシュミレーターが起動します。
cocos2dの画面が出た後、「Hello World」と出て来ます。

cocos2d hello world

スプライトを置いてみる

それでは、この「Hello World」と書いてある部分に、画像を表示させてみましょう。
「HelloWorldLayer.m」を選択します。

HelloWorldLayer.m

続いて、ファイルの中の以下の記述の部分について

[objc]

// on "init" you need to initialize your instance
-(id) init
{
// always call "super" init
// Apple recommends to re-assign "self" with the "super’s" return value
if( (self=[super init]) ) {

// create and initialize a Label
CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];

// ask director for the window size
CGSize size = [[CCDirector sharedDirector] winSize];

// position the label on the center of the screen
label.position = ccp( size.width /2 , size.height/2 );

// add the label as a child to this Layer
[self addChild: label];

//
// Leaderboards and Achievements
//

// Default font size will be 28 points.
[CCMenuItemFont setFontSize:28];

// to avoid a retain-cycle with the menuitem and blocks
__block id copy_self = self;

// Achievement Menu Item using blocks
CCMenuItem *itemAchievement = [CCMenuItemFont itemWithString:@"Achievements" block:^(id sender) {

GKAchievementViewController *achivementViewController = [[GKAchievementViewController alloc] init];
achivementViewController.achievementDelegate = copy_self;

AppController *app = (AppController*) [[UIApplication sharedApplication] delegate];

[[app navController] presentModalViewController:achivementViewController animated:YES];

[achivementViewController release];
}];

// Leaderboard Menu Item using blocks
CCMenuItem *itemLeaderboard = [CCMenuItemFont itemWithString:@"Leaderboard" block:^(id sender) {

GKLeaderboardViewController *leaderboardViewController = [[GKLeaderboardViewController alloc] init];
leaderboardViewController.leaderboardDelegate = copy_self;

AppController *app = (AppController*) [[UIApplication sharedApplication] delegate];

[[app navController] presentModalViewController:leaderboardViewController animated:YES];

[leaderboardViewController release];
}];

CCMenu *menu = [CCMenu menuWithItems:itemAchievement, itemLeaderboard, nil];

[menu alignItemsHorizontallyWithPadding:20];
[menu setPosition:ccp( size.width/2, size.height/2 – 50)];

// Add the menu to the layer
[self addChild:menu];

}
return self;
}

[/objc]

次のように修正します。

[objc]
// on "init" you need to initialize your instance
-(id) init
{
// always call "super" init
// Apple recommends to re-assign "self" with the "super’s" return value
if( (self=[super init]) ) {
// Spriteを生成
CCSprite * sprite1 = [CCSprite spriteWithFile:@"sample1.png"];
// Spriteを追加
[self addChild:sprite1];
}
return self;
}
[/objc]

if( (self=[super init]) ){ [中略] }
[中略]の部分をおもいっきり削除して、コードを入れています。

続いて、画像を追加します。
こちらの画像、sample1.pngとsample1-hd.pngを

sample1.png
sample1.png
sample1-hd
sample1-hd.png

Resourcesに追加します。

スクリーンショット 2013-07-29 0.02.37

それではビルドしてみましょう!

スクリーンショット 2013-07-29 0.00.26

見切れていますが、画像が追加できました!

位置を調整しよう

画像が見切れているのは、配置する座標を指定していないからです。
座標を指定するコードは以下のとおり。

[objc]

// スプライトを画像の中心に配置する
CGSize windowSize = [[CCDirector sharedDirector] windowSize];
sprite1.position = CGPointMake(windowSize.width/2, windowSize.height /2);

[/objc]

これをさきほどのコードの中に挿入します。

[objc]
// on "init" you need to initialize your instance
-(id) init
{
// always call "super" init
// Apple recommends to re-assign "self" with the "super’s" return value
if( (self=[super init]) ) {
// Spriteを生成
CCSprite * sprite1 = [CCSprite spriteWithFile:@"sample1.png"];
// スプライトを画像の中心に配置する
CGSize winSize = [[CCDirector sharedDirector] winSize];
sprite1.position = CGPointMake(winSize.width/2, winSize.height /2);
// Spriteを追加
[self addChild:sprite1];
}
return self;
}
[/objc]

これで画像が画面中央に表示できました。

スクリーンショット 2013-07-29 0.10.34

cocos2dでiPhoneゲーム開発_1 : まずはインストールから

cocos2d 2.1 インストール

cocos2dというスマートフォン向けの2Dゲーム開発用フレームワークを利用して、iPhone向けのゲームを開発して行きたいと思います。

cocos2dを選ぶメリットはいくつかありますが、まず第一には、「簡単にゲームが作れるから」。
通常2DゲームをiPhoneアプリ向けに作るとなると、OpenGLESというものを使います。これはかなり高度な描画ができるものなのですが、反面、難解で複雑です。
OpenGLESのパワーをそのままに、ゲーム向けに作りやすく整理してくれたものがcocos2dです。こういったものが無料で使えるなんて、ありがたいですね。

それでは、まずはインストールから行います。
http://www.cocos2d-iphone.org

cocos2dのサイトから、最新の安定版をダウンロードします。
2013/7/17現在、最新版は2.1でした。

cocos2d 2.1 インストール

ダウンロードしたら、デスクトップに展開。

cocos2d 展開

テンプレートをインストールするために、ターミナルを開きます。

ターミナルを開いたら、cocos2dが置いてあるフォルダに移動します。

$ cd ~Desktop/cocos2d-iphone/

続いて、インストールは以下を入力すればOK

$ ./install-templates.sh

「done!」と出たらOK。
無事インストールされたか、Xcodeを開いて確認してみましょう。

cocos2d インストール

新規プロジェクトを作る画面で、cocos2dが追加されています。
それでは次回からは、実際にプロジェクトを作成してみます。