Flex、AIR、Java、Androidなど

12月3日 2010

cocos2dでiPhone用横スクロールゲームを作るチュートリアル(1)(ソースコード有)

Posted by: tachibana In: iPhone| プログラミング

ここ最近はiPhone用ゲームを作るのにはまってます。んで一個横スクロールゲームで楽しいのが出来たんで公開しました。

Horseback Archery -Yabusame-

App Store

まあよくある横スクロールゲームですね。既にたくさんありますが、これまで私が遊んだのは

Run!

紹介ページ
App Store

iHelicopter

紹介ページ
App Store

とか。ここらは私が作ったゲームと同じタイプ?ですね。

あとはAngry Birdとかの発射ゲームも背景のスライドとかは同じかもしれません。

んで、この記事はこういうのを一から作っていくチュートリアルになります。

今回はとりあえずパーツとかを貼っていったりイベントを追加していく前の段階、背景画像をスクロールさせるところまでやりたいと思います。

ご要望があるようでしたらアニメーション、当たり判定、広告の入れ方等も書いていきたいと思います。

では始めます。長いんで畳みますね。

◆ 最初に注意
ここに載せているコードはちょー適当ですが自分の環境では動いてます。上手な方に言わせると間違いだらけですし遅いでしょうが動いてるのを直すと別のところが動かなくなるのでアドバイス頂いても直さないかもしれません。スミマセン。

◆ いるもの
・Snow Leopard搭載のMac
・XCodeとiPhoneSDK(入れ方はググってください)
・cocos2d(こちらとかこちらを参考に)
・やる気

あと、英語が苦手じゃない方はこの本買いましょう。ひと通りできるようになります。
http://apress.com/book/view/9781430233039

◆ 始めます

□ プロジェクト作成

XCode開いて左のcocos2dペインを選択、cocos2d Applicationを選択して右下の選択ボタン。適当に名前を付けてプロジェクトを作成します。出来たらこんな感じになるでしょう。

Base SDK Missingになる方はメニューバー > プロジェクト > プロジェクト設定を編集 > ビルドタブから適当に他のSDKを指定してください。

ここでテンプレートに含まれているHelloWorldSceneの説明をしときます。

ヘッダファイルを見て頂ければ分かると思いますが、CCSceneではなくCCLayerを継承しています。んで、用意されている関数は+(id) sceneのみ。ソースファイルを見ると+(id) scene関数は新規にCCSceneをインスタンス化したものに自分自身を-(id) init関数でインスタンス化したものをaddして返しています。

試してみたい方はCCLabelの文字列を変えてみて下さい。

意味が分からん、という方は普通のゲームを考えてみて下さい。最初にゲームモードを選んで、ゲームメイン画面があって、オプション画面があって、というところの「画面」がCCSceneです。そんで、キャラクターとか背景がCCLayer上に描画されていて、CCLayerは同一CCScene上に重ねて表示したりもできる、という感じです。まあやってる内に分かると思います。

□ メイン画面を作る
色んなやり方があると思いますが自分はメイン画面は以下のような構成にしています。

MultiLayerSceneはGameLayerとControlLayerを貼りつけたシーンを返すのですが、自分自身のインスタンスをstaticに持っていて、これによりGameLayerとControlLayerの間でのやりとりを容易にします。

GameLayerは背景画像やキャラクターが描画されているレイヤーです。ControlLayerがタッチイベントを受け取り、状況によりGameLayer上のオブジェクトを変化させる関数を呼びます。

ControlLayerはタッチイベントを受け取り、座標等を元にGameLayerに命令を出します。

今回のような単純なゲームだとGameLayerとControlLayerを一枚のレイヤーにしても問題ないと思うのですが、ソースが長くなるのといつかタッチイベントの処理を拡張したくなった時にタッチをハンドルするレイヤーと描画のレイヤーが別れている方が都合がいいのでいつもこうするようにしています。

□ スクロールする背景を作って、GameLayerに貼り付ける
仕組みは簡単です。背景画像は奥に位置するもののスクロールを遅く、近いもののを早く移動させるだけ。画像の端が途切れないように一枚の画像を横反転させて追加します。図解するとこんな感じ。

ソースコードとコメント見てもらえれば分かると思います。

□ 最初に起動するSceneをHelloWorldSceneからMultiLayerSceneに変更
プロジェクト名AppDelegate.mファイルにMultiLayerScene.hをインポートし- (void) applicationDidFinishLaunching:(UIApplication*)applicationの中のHelloWorldSceneを変更します。

◆ ソースコード
ここまでのソースコードを置いておきます。

SampleScrollGame.zip

EasyFreeAds Blog News Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google Yahoo Buzz StumbleUpon

No Responses to "cocos2dでiPhone用横スクロールゲームを作るチュートリアル(1)(ソースコード有)"

Comments are closed.

Categories

 

2017年5月
« 4月    
1234567
891011121314
15161718192021
22232425262728
293031  

About

Author: tachibana

  • ちょっとしたことはTwitterに書いています。こっちはアプリの公開等の時に更新されます。
  • 最近はもっぱらJavaとObjective Cです。AS3は飽きました。
  • スクリプト言語ではPerlが好きでしたが最近はGAE/Jで何でもやってます。
  • Linuxは自宅サーバー建てるのがやっとのレベルです。前の会社で何日も徹夜してやったのはいい思い出です。
  • アプリへのご要望などご意見等ありましたらお気軽にご連絡下さい。

Alternative content here