21 May 2013

衝突検知とアイテムの収集: Cocos2D 2.Xでタイルベースゲームの作成チュートリアル Part 2

アップデート 1/17/2013このチュートリアルはCocos2D 2.1 rc0とTiled 0.9.0 (released Feb 2013)Xcode4.6、ARCに対応しました。(このチュートリアルのオリジナルの執筆者はRay Wenderlich氏で、Charlie Fulton)氏によってアップデートされました)

Mmm, that was tasty!

今回は全２章でお届けしている”Cocos2DでTiled Map Editorを使ってタイルベースゲームの作成チュートリアル”。ゲーム内容は忍者が砂漠で美味しいスイカを探索するシンプルなタイルベースゲームです。

前回(パート１)のチュートリアルでは、次の４つをカバーしています。①タイルを使ってマップを作成。②マップをゲームに読み込ませる。③プレーヤーを追いかける様にマップを動かす。④オブジェクト・レイヤーの使用。

今回のチュートリアルでは、①マップ上に衝突エリアを作成。②タイル・プロパティの使用。③アイテムの収集。④マップを動的に変更。⑤忍者が食べ過ぎない様に管理。

それでは前回で作成したプロジェクトをそのまま続けて、もっとゲームらしくしましょうね。もっと読む

タグ：Cocos2D, iOS, iPhone, ゲーム, サンプルコード, チュートリアル

Add a comment! Add a comment!

Cocos2D 2.Xでタイルベースゲームの作成チュートリアル

Mmm, tasty melons!

全２回でお届けする今回のチュートリアルでは、Cocos2DとTile Map EditorでTile-Baseのゲーム作成方法を学んで行きましょう。特に今回は、忍者が美味しそうなスイカを求めて砂漠の中を探求する、そんなタイルベースのシンプルなゲームを作る事で色んな事を学んで行きましょう！

第１回目のこのチュートリアルでは、タイルでマップを作成し、プレーヤーを追いかける様に画面がスクロール、加えてオブジェクトレイヤーの使い方と、、実に内容が盛りだくさんです。

チュートリアル第２章では、衝突エリアの作成とタイルプロパティの使い方、そしてアイテムの回収、そして動的にマップを修正する方法と忍者が食べ過ぎにならない様に見張る方法と、、、、、これも又、凄く盛りだくさんです。

今回のチュートリアルを進めるにあたって、　何がなんだか分からないと仰る方は、Cocos2Dの基礎を学ぶべくCocos2D 2.X　でシンプルなiPhoneゲームの作成チュートリアルを先に見て力を付ける事をお勧めします。

それでは、タイルマップを思いっきり楽しみましょう！もっと読む

タグ：Cocos2D, iOS, iPhone, ゲーム, サンプルコード, チュートリアル

Add a comment! Add a comment!

15 May 2013

Cocos2Dでスプライトをドラッグ&ドロップする方法

Drag and drop these cute pets with Cocos2D!

最近たくさんの人からCocos2DでTouch Gestureを使ったスプライトのドラッグ＆ドロップのチュートリアルを作って欲しいとのリクエストがありました。というわけで、作った次第です。それではどうぞ。

このチュートリアルで学ぶことは:

タッチでスプライトのドラッグ＆ドロップの基本。
タッチを使ってViewをスクロールさせる方法。
頭の中で座標を整理する方法。
さらなるクールなエフェクトの為にCocos2DでGesture Recognizerを使う方法。

チュートリアルをちょっと面白くするために、私のラブリーワイフ作の可愛い動物をSceneの中で動かしてみましょう。背景はgwebstock作です。

このチュートリアルはCocos2Dのインストールと、Cocos2Dを使用しての基本的なプログラミング力を有する事が前提となっています。もしCocos2Dをよく知らないと仰る方は, Cocos2DでシンプルなiPhoneゲームの作成を先にご覧になる事をお勧めします。

おしゃべりはこのくらいにして、そろそろ初めましょうか！もっと読む

タグ：Cocos2D, iOS, iPhone, サンプルコード, チュートリアル

Add a comment! Add a comment!

13 May 2013

iPhoneゲーム：スペース・シューターの作成チュートリアル

Make a Space Shooter iPhone game!

このチュートリアルではiPhone版スペースシューターゲームの作成方法を学びます。

ゲーム内容は貴方が宇宙船のパイロットとなり加速度計を駆使して、自慢のレーザー砲を武器に襲い来る小惑星を破壊するゲームです。

もし、貴方がiPhoneゲーム開発に於いて全くの初心者ならば、このチュートリアルは貴方にぴったりです！開発経験が無くても、全くのゼロからゲームの完成まで１つのアプリを作成する過程を学ぶ事が出来ます。

もし、プログラムの経験さえも全く無いと仰るなら、初心者用のチュートリアルをまずご覧になる事をお勧めします。

加えて、このチュートリアルは中級クラスの開発者にも楽しんでいただけると思います。何故なら、”parallax scrolling”や”CCNodeの事前allocating”、”加速度計を使用した動きの制御”、そして”パーティクルシステム”を学ぶ事が出来るからです。

前置きはこのくらいにして、早速始めましょう！

タグ：Cocos2D, iOS, iPhone, ゲーム, サンプルコード, チュートリアル

Add a comment! Add a comment!

12 May 2013

Cocos2Dでのボタン作成: シンプル、ラジオ、トグルボタン

Buttons Tutorial Screenshot

Cocos2Dでのゲーム開発に於いてとりあえず無くてはならない物、それはボタンですね。このチュートリアルではCocos2Dでのボタンの作り方を分かりやすく解説していきます。始めは、初歩的なボタンから始まって、トグル、ラジオ・ボタンも勉強しちゃいましょう。このチュートリアルでは先にCocos2Dでシンプルなゲームの作成チュートリアルをご覧になる事をお勧めします。

私が初めてCocos2Dを使ってボタンを作成し始めた時、Spriteでボタンを作成してボタンがタップされたかどうかを判定する方法が一番良い方法だと思ってました。もちろん、これも有りでしょう。しかし、Cocos2Dにはもっと、簡単な方法があるんです。それはCocos2D”menu”システムです。

Cocos2Dメニュー·システムは、その中にたくさんのメニュー項目を有する”menu”で構成されています。”menu　item”は”イメージ”でも”テキスト”でも構いません。”menu”では”menu”アイテムをアレンジする事も出来ます。例えば、”menu”がタップされた時にアイテムをハイライトしたり、アイテムの切り替え(Toggle)、その他色々あります。それでは、Cocos2Dを使っての作成を始めましょう！もっと読む

タグ：Cocos2D, iPhone, サンプルコード, チュートリアル

Add a comment! Add a comment!

11 May 2013

Cocos2D 2.X プロジェクトをARCに対応させる方法

このチュートリアルは私達(チュートリアルチーム)メンバーのTony Dahbura氏によって執筆されました。彼はFullMoon Manor LLCの個人iOSデベロッパーで、Google+をチェックして下さい。

Learn how to use ARC in a Cocos2D project!

“Automatic Reference Counting”(ARC)はアプリ開発に於いて、メモリーマネージメントの苦労を払拭してくれる素晴らしい機能です。

ARCの最大の利点は、Spriteやイメージ等の掃除の煩わしさから解放してくれる事です。もうご存知だとは思いますが、たとえそれがとても小さなリークだとしてもアプリ全体に大きく影響を与える可能性を持っています。そして、最終的には「さあ、盛り上がって参りました！！！」と言う時に、クラッシュ！等と言うユーザーにとっては悪夢のような出来事が起こるうる可能性を秘めているのです。

ARCのその他の利点に関しては、メモリ管理を自動で行ってくれるわけですから、よけいな事は考えず、ゲーム開発のみに１００％全力投球出来る事ですね。結果的には、開発時間の大幅な短縮となります。素晴らしい。

しかし、Cocos2に於いてデフォルトではARCは有効になっていません。となると疑問に思うのは「だったら、どうやってCocos2DでARCを有効にするの？」ってことですね。はい、そんな疑問を持ったそこの貴方！このチュートリアルはそんな貴方の為に用意しました。

まずは、ゼロからARC有効のシンプルなプロジェクトを作成します。それからclassic raywenderlich.com gameの”How To Make A Simple iPhone Game with Cocos2D 2.X Tutorial”のプロジェクトを使いましょう。あと、Cocos2D 1.Xで作ったプロジェクトをCocos2D 2.Xにアップデートする方法も学べます。

それじゃ、準備は良いですか？よろしい方は、このまま読み進めちゃって下さい! もっと読む

タグ：Cocos2D, iOS, iOS5, iOS6, iPhone, チュートリアル

Add a comment! Add a comment!

Core Graphicsチュートリアル: 曲線とレイヤーPart2

こちらはCore Graphicsチュートリアル: 曲線とレイヤーからの続きとなります。

アプリを完成させよう！

おめでとうございます！ここまで、やっちゃいましたね！後少し手を加えて完成させちゃいましょうね。感情に合わせて背景色を変化させるにはskyにそれらを反映させる必要があります。感情の変化の値はSkyViewクラスに渡されているので、以下の様に変更して下さい:

drawSkyInRectメソッドを以下に置換えて下さい:

-(void) drawSkyInRect: (CGRect) rect forMode: (NSInteger) mode inContext: (CGContextRef) context withColorSpace: (CGColorSpaceRef) colorSpace
{
    UIColor * baseColor = nil;
    UIColor * middleStop = nil;
    UIColor * farStop = nil;
 
    switch (mode) {
        case HAPPY:
            baseColor = [UIColor colorWithRed:0/255.0 green:158.0/255.0 blue:183.0/255.0 alpha:1.0];
            middleStop = [UIColor colorWithRed:0.0/255.0 green:255.0/255.0 blue:252.0/255.0 alpha:1.0];
            farStop = [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0];
            break;
 
        case SOMEWHAT_HAPPY:
            baseColor = [UIColor colorWithRed:0/255.0 green:158.0/255.0 blue:183.0/255.0 alpha:1.0];
            middleStop = [UIColor colorWithRed:144.0/255.0 green:152.0/255.0 blue:253.0/255.0 alpha:1.0];
            farStop = [UIColor colorWithRed:96.0/255.0 green:111.0/255.0 blue:144.0/255.0 alpha:1.0];
            break;
 
        case NEUTRAL:
            baseColor = [UIColor colorWithRed:148.0/255.0 green:158.0/255.0 blue:183.0/255.0 alpha:1.0];
            middleStop = [UIColor colorWithRed:127.0/255.0 green:138.0/255.0 blue:166.0/255.0 alpha:1.0];
            farStop = [UIColor colorWithRed:96.0/255.0 green:111.0/255.0 blue:144.0/255.0 alpha:1.0];
            break;
 
        case TICKED_OFF:
            baseColor = [UIColor colorWithRed:255.0/255.0 green:147.0/255.0 blue:167.0/255.0 alpha:1.0];
            middleStop = [UIColor colorWithRed:127.0/255.0 green:138.0/255.0 blue:166.0/255.0 alpha:1.0];
            farStop = [UIColor colorWithRed:107.0/255.0 green:107.0/255.0 blue:107.0/255.0 alpha:1.0];
            break;
 
        case RAGING:
            baseColor = [UIColor colorWithRed:255.0/255.0 green:0/255.0 blue:0/255.0 alpha:1.0];
            middleStop = [UIColor colorWithRed:140.0/255.0 green:33.0/255.0 blue:33.0/255.0 alpha:1.0];
            farStop = [UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:1.0];
            break;       
    }
 
    CGContextSaveGState(context);
    NSArray * gradientColors = @[(__bridge id)baseColor.CGColor, (__bridge id)middleStop.CGColor, (__bridge id)farStop.CGColor];
    CGFloat locations[] = { 0.0, 0.1, 0.25 };
 
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) gradientColors, locations);
 
    CGPoint startPoint = CGPointMake(rect.size.height / 2, 0);
    CGPoint endPoint = CGPointMake(rect.size.height / 2, rect.size.width);
 
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
 
    CGGradientRelease(gradient);
    CGContextRestoreGState(context);
}

次は以下の修正をdrawInRect:で。

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
 
    [self drawSkyInRect:rect forMode:self.rageLevel inContext:context withColorSpace:colorSpace];
    [self drawMountainsInRect:rect inContext:context withColorSpace:colorSpace];
    [self drawGrassInRect:rect inContext:context withColorSpace:colorSpace];
    [self drawFlowersInRect:rect inContext:context withColorSpace:colorSpace];
 
    CGColorSpaceRelease(colorSpace);
}

それではビルド＆ランしてください。スクリーンをスワイプしてください。さて、チャレンジの時間です。

チャレンジ課題

初心者レベルのチャレンジ – これまで学んだ事を使ってオリジナルの描画をしてみましょう。

中級レベルのチャレンジ – スワイプする度に変化する、グラデーションの色の変化がちょっとぎこちないですが、これらの色の変更をスムーズにしてみましょう。

上級レベルのチャレンジ – iPadでも見る事が出来る様にコードを修正してみましょう！　これを実現するにはもう１つStoryboardを作成する必要があります。加えてスクロールビューの計算をiPad様のスクリーンの大きさに合わせて変更し、スクリーンサイズを独立させる為に描画コードを変更する必要があります。

これらのチャレンジが完成したら、スクリーンショットをフォーラムに投稿してくださいね。みなさんの上達の成果を是非見せてください。

まだまだ教えて欲しいんだけど？

このチュートリアルに付き合ってくださって本当に有難うございました。今回のチュートリアルのソースコードはこちらからどうぞ。

これでCore Graphicsチュートリアルシリーズは今の所終わりです。これまでの勉強でCore Graphicsの基礎は身についたと思います。後はガンガン使って、メキメキ上達しちゃってくださいね。

Core Graphicsに興味がありましたら、アニメーションも楽しんで頂けるかも知れませんね。やってみたい！とおっしゃる方は、UIViewの使い方チュートリアルをチェックしてください！楽しいですよ。

どうでしたか?このCore Graphicsチュートリアルシリーズを楽しんで頂けましたか？質問やコメントは以下のフォーラムからどうぞ。

このチュートリアルはBrian Moakley氏によって執筆されました。氏はiOS開発者、フィクション作家だけでなく、Razewareの最初のフルタイムメンバーでもあります。Google+やTwitterもチェックして下さい。

Add a comment! Add a comment!

8 May 2013

Core Graphicsチュートリアル: 曲線とレイヤー

Working with Core Graphics Need Not Be So Rage Producing

このチュートリアルはBrian Moakley氏によって執筆されました。氏はiOS開発者、フィクション作家だけでなく、Razewareの最初のフルタイムメンバーでもあります。Google+やTwitterからどうぞ。

“Core Graphics”チュートリアル・シリーズへようこそ！　実践的なプロジェクトを例に”Core Graphics”を学びましょう!

チュートリアルパート１、パート２、そしてパート３では全くのゼロから”Core Graphics”だけでTable Viewのカスタマイズ方法を学びました。

チュートリアルパート４では”Core Graphics”を使ってUIButtonのグロス効果のカスタマイズ方法を学びまし

チュートリアルパート５ではほんのわずかなコードで繰り返しのパターン描写の作成方法を学びました。

そして、今回のチュートリアルでは、”Core Graphics”の描画モデルを学ぶことで、どの様に図形の描画が行われるのかを知る事が出来ます。

また、二次とベジェ曲線の描画同様、既存の図形にトランスフォームする方法も学びましょう。

最後に、描画したものを簡単に複製出来る”Core Graphics”のレイヤーを使用します。 :]

今回のチュートリアルはやる事がいっぱいです。ですから緊張しないでゆっくりいきましょう。それではゆっくりXcodeを起動して描画していきましょう。もっと読む

タグ：Core Graphics, iOS, iPhone, サンプルコード, チュートリアル, ベジェ曲線, レイヤー, 二次曲線

Add a comment! Add a comment!

6 May 2013

Core Graphicsチュートリアル: アークとパスの描画

Drawing Arcs, Oh My!

Update アップデート4/17/2013 Xcode4.6、及びARCに対応しました。(オリジナル投稿者:Ray Wenderlichアップデート投稿者：Brian Moakley)。

このチュートリアルは初めての”Core Graphics”シリーズ第３弾、実践的なプロジェクトを例に”Core Graphics”を学びましょう!

シリーズ・パート１では、Table Viewのセルの背景をカスタマイズする事で線の引き方と長方形、グラデーションの作成方法を学びました。

In the シリーズ・パート２では、Table Viewのセルの”header”をカスタマイズする事で、影とグロスエフェクトの作成方法を学びました。

このチュートリアルでは”footer”と少しのスパイスを加える事でTable Viewを完成させます。加えて”アーチ”の描画と”クリップ”や”パス”を使う方法を学びます！

もし、前回までのプロジェクトが手元に無いなら前回までのサンプルプロジェクトをここからダウンロードしてください。もっと読む

タグ：Core Graphics, iOS, iPhone, UITable View, サンプルコード, チュートリアル

Add a comment! Add a comment!

Core Graphicsチュートリアル: 影と光沢効果の描画

Custom draw the header of this table!

アップデート4/16/2013 Xcode4.6、及びARCに対応しました。(オリジナル投稿者：Ray Wenderlichアップデート投稿者：Brian Moakley)。

このチュートリアルは実践的な”Core Graphics”チュートリアル•シリーズの第２回目となります。

The シリーズ、パート１のチュートリアルでは、Table View Cellの背景色を作成する事で、線と四角形とグラデーションの描画を勉強しましたね。

今回のチュートリアルではTable Viewの”header”のカスタマイズに移りたいと思います。今回学ぶ事は前回のチュートリアルで学んだ知識をより強固なものにして影の描写と”グロス•エフェクト”になります。

もし必要なら前回のチュートリアルのサンプルプロジェクトをダウンロードしてください。もっと読む

タグ：Core Graphics, iOS, iPhone, UITable View, サンプルコード, チュートリアル

Add a comment! Add a comment!

Core Graphicsチュートリアル: 線、長方形、そしてグラデーションの描画

Welcome to Core Graphics 101!

アップデート4/15/2013 Xcode4.6、及びARCに対応しました。(オリジナル投稿者：Ray Wenderlichアップデート投稿者：Brian Moakley)。

“Core Graphics”はiOSに於いて非常に優れたAPIなんです。これを使う事によってもの凄くカッコ良くUIをカスタマイズする事が出来るんです。これが使える様になれば、グラフィック担当のアーティストなんか必要なくなります。

でも、多くのiOS開発者が、何故か”Core Graphics”に対して最初は威圧感を感じます。それは、あまりに広大なAPIであるという事と、開発途中に思わぬ障害に巻き込まれる事があるからです。

これは、チュートリアルですから、”Core Graphics”に対して多くの開発者が感じるちょっとだけ取っ付きにくい感を、これから一緒に作成するプロジェクトを通して払拭して行きたいと思います。まずは、Table Viewを美しくカスタマイズする事から始めて行きましょう。

今回のプロジェクトで作成するTable Viewは上のスクリーン•ショットのような感じになります。このデザインはPoweryBaseによりデザインされたBillsからインスピレーションを受けました。これね、本当にかっこいいアプリです。よろしかったら、ご覧になって下さい！

Note: 困った事に、このチュートリアルを書いてから、PowerBaseが無くなってしまった為、彼らのアプリのスクリーンショットをお見せする事が出来ません。でも、彼らのサイトもしくはWayback Machineではまだ閲覧可能です。

それでは、今回のチュートリアルは記念すべきシリーズ第１回目ということで、美しいTable View Cellを”Core Graphics”で作成してみようと思います。このチュートリアルを通して学ぶ事は”Core Graphics”の始め方、四角を描画して塗りつぶす方法、加えてグラデーションの描画方法そして1ピクセル幅の線の描画についてです。

この先のチュートリアルでは、Table Viewの”header”、”footer”、等アプリを最終的に仕上げる所までいけたらなと思ってます。

それでは”Core Graphics”で遊びましょう！もっと読む

タグ：Core Graphics, iOS, iPhone, UITable View, サンプルコード, チュートリアル

Add a comment! Add a comment!

5 May 2013

Cocos2D 2.XでSprite Sheetを使用してアニメーションする方法

Smoky says: Only you can start this bear!

アップデート3/12/2013:Cocos2D 2.1-rc0aに対応、Texture Packer 3.07、ARC、Ratina Display、最新Objective-Cスタイルを使用(この投稿のオリジナルはRay Wenderlich氏のよって執筆され、Tony Dahbura氏によってアップデートされました。)

以前からこのサイトへ「Cocos2D 2.xを使って、アニメーションとスプライトシートの使い方のチュートリアルを作ってくれないかな？」とのリクエストがたくさん来ていたので、はい、どん！

今回のチュートリアルではCocos2Dを使って熊が歩くだけの非常にシンプルなアニメーションの作成方法を学びましょうね。加えてSprite Sheetなるものを使用する事でアニメーションを効率的に、かつタッチイベントに対応して進行方向に向きを変え動くアニメーションの作成方法なんかも学んじゃいましょう。本当ですか？はい、本当です。

「ところでさぁ、Cocos2D、ってなんなの？」、、、おっと、そうですね。そういった方はまずCocos2DシンプルなiPhoneゲーム作成方法で勉強してみましょうか。いえね、これは別に強制と言うわけではないですよ。はい、もちろん。でも一応お勧めしときますね。

Add a comment! Add a comment!