Recommandé
Contenu connexe
Tendances
Tendances (19)
En vedette
En vedette (18)
Similaire à ㉒初期プロジェクトを改造！
Similaire à ㉒初期プロジェクトを改造！ (20)
Plus de Nishida Kansuke
Plus de Nishida Kansuke (20)
Dernier
Dernier (9)
㉒初期プロジェクトを改造！
- 1. cocos2d 2.0for iPhone 勉強会 初期プロジェクトを改造！
- 2. 動作環境 • Mac OS X 10.8 Mountain Lion • xcode 4.4.1 • cocos2d for iPhone 2.0 http://www.cocos2d-iphone.org/
- 3. はじめに • まずは、cocos2dのおおまかな機能を学 習しよう！ • あと、インストールもしよう！ • retaina対応をしてみよう！ • cocos2dに対応したツールの使い方を覚 えよう！
- 4. もくじ • cocos2dについて • デメリット • cocos2dの基礎知識 • インストール • プロジェクトの作成 • cocos2dの構成 • 縦画面に挑戦！ • キャラクターを表示しよう！ • おまけ
- 5. cocos2dについて • オープンソース＋無料で商用利用可能 • ２Dに特化 • 物理エンジン搭載（box2d,chipmunk） • 効果音やBGMの再生も可能 • OpenGL利用で高速描画 • Objective-Cで書かれている
- 7. cocos2dの基礎知識 • スプライト(sprite)：一般的には、キャラ クターを表示する技術。 • スプライトエンジン：スプライトを簡単 に管理、表示できる仕組み
- 8. cocos2dの座標 • 座標は左下が(0,0) • スプライトの基準点は中心（変更可能） (480,320) (基準点) (0,0) ※単位はpointで、通常1point=1px,retinaでは1point=2px
- 9. cocos2dの基礎知識 • CCSprite – 回転、拡大、縮小、傾斜、透過 • CCAnimation – ぱらぱら漫画のような、画像切り替え • CCAction – キャラクターに任意の動きを設定可能 – イベント処理 （CCSendMessage、CCCallFunc）
- 10. cocos2dの基礎知識 • CCTMXTiledMap – タイルマップの表示 • CCParticleSystem – パーティクルの表示 • CCSpriteBatchNode – スプライトをまとめて管理 • SimpleAudioEngine – 効果音、BGMを簡単に再生
- 11. こまったときは？ • こまったときは、プログラミングガイド を見よう！ – http://www.cocos2d-iphone.org/wiki/ doku.php/prog_guide:index
- 12. インストール • Cocos2d for iPhoneをダウンロード http://www.cocos2d-iphone.org/ • 解凍後、ターミナルからインストール ./install-templates.sh ※一度インストールした後に、上書きしたい時は ./install-templates.sh -f -u
- 15. プロジェクトの作成 • インストールが終わると、Xcodeに新し いテンプレートが追加されます。 • Cocos2dを選んで、プロジェクトを作っ てみましょう！
- 16. テンプレートが追加されてる！
- 17. やってみよう！ • 真ん中のbox2dのプロジェクトを選ぼう • box2dTestという名前でプロジェクトを 作ろう • シュミレーターで実行してみよう！
- 18. できた！ • こんなかんじ！
- 19. ＭＥＭＯ • 初期設定では、横画面になっている • アイコン、起動画面は自由に変更可能 • 左下の数字はドローコール数、SPF、FPS の表示 ※AppDelegate.mにある // Display FSP and SPF [director_ setDisplayStats:YES]; をNOに変更すると非表示にできる。
- 20. 残念なお知らせ① • ワーニング１４個 • アナライズ４個 • 実害はないけど気分は良くない＞＜
- 23. cocos2dの構成① • Directorと呼ばれるクラスを使って、設定 を変更したり、画面遷移などをコント ロールします • シングルトンのため、どこからでもアクセ ス可能です。 • (CCDirectorIOS*) [CCDirector sharedDirector];
- 24. cocos2dの構成② • cocos2dのオブジェクトは、基本的に頭 にCCがつきます ※説明するときはCCを省略します。たまに省略 忘れるかも。 • cocos2dの構成要素の大半はCCNodeと いうクラスを継承しています • すべてのメソッドが実装されている訳では ないので注意しましょう
- 25. 画面構成 • 画面の単位をSceneといいます • Sceneには、複数のLayerを重ね合わせて おくことができます。 • Layerには、複数のSpriteなど、いろいろ なものをおくことができます。
- 27. TagとZ • Layerや、スプライトなど、CCNodeには、 TagとZが定義されています。 • Tagを一意にすることで、getChildByTag で親Nodeから取得が可能です。 • Zは重ね合わせの優先順位を表します。 • Zが値が大きい方が上に描画されます。
- 28. MEMO • 画面の座標は、左下が(0,0) 右上が (480,320) • Spriteの座標は中心が基準 • Windowのサイズの取得方法 CGSize size = [[CCDirector sharedDirector] winSize]; • 基本的に単位はpoint、たまにpixcelのメ ソッドもあるので注意。 • pointで指定すれば、retinaでは自動的に２ 倍になるため、座標については特に意識しな くてもよくなる
- 29. retina対応の仕方① • AppDelegate.mの以下の行をコメントにす ると、retina非対応になる。デフォルトでは retinaがONになっている • retina対応にする場合、全部の画像を用意す る必要がある。画像が見つからない場合、小 さい画像が表示されるので注意しよう // Enables High Res mode (Retina Display) on iPhone 4 and maintains low res on all other devices //if( ! [director_ enableRetinaDisplay:YES] ) ←コメントすると非対応 CCLOG(@"Retina Display Not supported");
- 30. retina対応の仕方② • retina画像を用意する（通常画像の名前の 最後に-hdを付けたファイルを用意） ※AppDelegate.mで定義されているので変更可能 // On iPad HD : "-ipadhd", "-ipad", "-hd // On iPad : "-ipad", "-hd // On iPhone HD: "-hd
- 31. 縦画面に挑戦！ • なんとなく、基本がわかったところで、サ ンプルを縦画面にしてみよう • ついでに、retainaにも対応しよう
- 32. スプラッシュ対応① • スプラッシュの画像がそもそも通常サイ ズしかないので、あたらしいのに変えよ う！ • まずは、Default.pngと、Default- Landscape ipad.pngを削除しよう
- 33. スプラッシュ対応② • 縦画面用の画像を用意しよう • Launch Imagesにドラッグしよう！
- 34. 縦にしよう • Supported Device Orientationsを変更 しよう
- 35. 縦にしよう② AppDelegate.mm // Supported orientations: Landscape. Customize it for your own needs - (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation { return UIInterfaceOrientationPortrait == interfaceOrientation; }
- 36. できた • 変な画面がでる・・・
- 38. IntroLayerって？ • スプラッシュ→ゲーム画面だと、いきなり 切り替わってカッコ悪い • スプラッシュ→IntroLayer→（フェー ド）→ゲーム画面とすることで、カッコ良 くなる！ • IntroLayerには、スプラッシュ画面と同 じ画像が表示されるようにしておこう！
- 39. やってみよう IntroLayer.mm if( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone ) { background = [CCSprite spriteWithFile:@"Default.png"]; //background.rotation = 90; } else { background = [CCSprite spriteWithFile:@"Default- Landscape ipad.png"]; } • rotationの部分をコメントにしよう！
- 41. AppDelegate.mm // Create an CCGLView with a RGB565 color buffer, and a depth buffer of 0-bits CCGLView *glView = [CCGLView viewWithFrame: [window_ bounds] pixelFormat:kEAGLColorFormatRGBA8 // kEAGLColorFormatRGBA8 depthFormat:0 // GL_DEPTH_COMPONENT24_OES preserveBackbuffer:NO sharegroup:nil multiSampling:NO numberOfSamples:0];
- 42. できた • いいかんじ！
- 43. retaina対応しよう • ブロックの画像がretaina対応してないの で、削除した後、新しい画像を設定しよ う！
- 44. MEMO • ファイル追加の時設定がおかしいとあとで 困る！確認しよう！
- 45. Debug情報を表示しよう HelloWorldLayer.mm uint32 flags = 0; flags += b2Draw::e_shapeBit; flags += b2Draw::e_jointBit; flags += b2Draw::e_aabbBit; flags += b2Draw::e_pairBit; flags += b2Draw::e_centerOfMassBit; m_debugDraw->SetFlags(flags); • コメントをはずそう！
- 46. MEMO • デバッグ情報は、Zが0の位置に描画され る！背景に画像を表示するときは、注意 しよう！（z:-1か別レイヤーにする。レイ ヤーに色を付けると表示されないので注 意！）
- 47. なんかでてる＞＜ • WARNINGログが出てるので、指示に従っ て直そう！ • ccConfig.h #ifndef CC_ENABLE_GL_STATE_CACHE #define CC_ENABLE_GL_STATE_CACHE 1 #endif
- 48. できた • いいかんじ！
- 49. キャラクターを表示しよう！ • 自分でも、キャラクターを書いて表示して みよう！
- 50. スプライトシートを作ろう • １枚の画像ファイルに１枚の画像を保存す るのではなく、１枚の画像に複数画像を 保存する技術 • ファイルアクセスが減るので読み込み効率 がよくなる！ • 画像をまとめるので、メモリ上での無駄が 減る！ • １回の描画で複数のキャラクターを書け るので描画速度が上がる！
- 51. TexturePacker • スプライトシートが簡単に作れる！ • 対応フォーマットが多い • 圧縮や原色、@2x画像の自動作成もして くれる！ – http://www.codeandweb.com/ texturepacker
- 52. キャラクターを追加 • AddFolderで、charsフォルダを指定 • 画像ファイルは、retainaサイズのものを 用意（ファイル名に-hdは付けない）
- 54. 設定を変更②
- 55. 設定を変更③
- 56. 設定を変更④
- 58. box2d用のシェイプを作る • キャラクターの画像にあわせて、box2d 用のシェイプを作ろう！
- 59. PhysicsEditor • 画像からbox2dなどで使う物理モデルを つくってくれる！ • 凸を組み合わせて、凹な形のやつも作って くれるみたい！ – http://www.codeandweb.com/ physicseditor
- 60. キャラクターを追加 • AddSpritesで、キャラクターを指定 • 画像ファイルは、retainaサイズのものを 用意（ファイル名に-hdは付けない）
- 61. 設定を変更① • ExpoterをBox2D generic(PLIST)に変更 • PTM-Ratioを64に変更（retaina画像を元 に設定しているので、box2dのPTM- Ratioの２倍に設定する）
- 62. PTM-Ratioって？ • Box2Dの物理演算をするにあたって、何 pxを1mにするかの単位 • 例えば、PTM-Ratioが32だったら、 32pxが1mになる。 • HelloWorldLayer.h – #define PTM_RATIO 32
- 63. 設定を変更② • Shape Tracerを使って、各キャラごとに シェイプを設定しよう！
- 64. 設定を変更③ • ドロップシャドウがついている画像の場合 は、Alpha thresholdの値を増やすと綺麗 に輪郭をトレースしてくれる
- 65. 設定を変更④ • Toleranceを大きくすると、トレースの制 度が荒くなる。Vertexesが頂点の数なの で、あまり多くならないよう調整しよう！
- 66. 設定を変更⑤ • Relativeに0.5を設定して、基準点を真ん 中にしよう！
- 67. ほかにも • 当たり判定とか、材質とか決められる！ けど、今回はそのままで！
- 70. 読み込み用クラスを追加 • シェイプはcocos2dが標準だと対応して ない！ • PhysicsEditorに付属しているクラスを追 加しよう！
- 71. やってみよう① HelloWorldLayer.mm #import "GB2ShapeCache.h" enum { kTagParentNode = 1, kTagCharsNode };
- 72. やってみよう② //Set up sprite [[GB2ShapeCache sharedShapeCache] addShapesWithFile:@"shapes.plist"]; [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"mychars.plist"]; CCSpriteBatchNode *batchNode = [CCSpriteBatchNode batchNodeWithFile:@"mychars.pvr.ccz" capacity:10]; [self addChild:batchNode z:1 tag:kTagCharsNode];
- 73. やってみよう③ //--- p = CGPointMake(p.x, p.y - 50); NSArray *names = @[ @"ojisan", @"inu", @"kujira", @"uchujin", @"star", @"tonosama", @"rkun" ]; NSString *name = [names objectAtIndex:(rand()%7)]; parent = [self getChildByTag:kTagCharsNode]; sprite = [PhysicsSprite spriteWithSpriteFrameName:[NSString stringWithFormat:@"%@.png", name]]; [parent addChild:sprite];
- 74. やってみよう④ sprite.position = ccp(p.x, p.y); // Define the dynamic body. //Set up a 1m squared box in the physics world bodyDef.type = b2_dynamicBody; bodyDef.position.Set(p.x/PTM_RATIO, p.y/PTM_RATIO); body = world->CreateBody(&bodyDef); // add the fixture definitions to the body [[GB2ShapeCache sharedShapeCache] addFixturesToBody:body forShapeName:name]; [sprite setAnchorPoint:[[GB2ShapeCache sharedShapeCache] anchorPointForShape:name]]; [sprite setPhysicsBody:body];
- 75. ついでに -(void) createMenu { : [self addChild: menu z:10]; } メニューを前面にもってこよう！
- 76. 背景色を変えよう HelloWorldLayer.h @interface HelloWorldLayer : CCLayerColor <GKAchievementViewControllerDelegate, GKLeaderboardViewControllerDelegate> HelloWorldLayer.m -(id) init { if( (self=[super initWithColor:ccc4(193, 137, 245, 255)])) {
- 77. MEMO • 重力の指定（左右はなし、下方向に10の重 力）をしている部分 • 地球上の重力が大体10くらいだと思えばOK • ゲームによって変えてみよう！ b2Vec2 gravity; gravity.Set(0.0f, -10.0f); world = new b2World(gravity);
- 78. MEMO • doSleepがtrueだと、動きが止まった物 体について、計算を省略するようになる。 • 厳密に計算するならfalseだけど、多分す る必要はない // Do we want to let bodies sleep? world->SetAllowSleeping(true);
- 79. MEMO • オブジェクトの衝突判定をするときにすり 抜けないように調整して計算する。false にするとすり抜けるかもしれない＞＜ • 多分変更しなくていい。 world->SetContinuousPhysics(true);
- 80. MEMO • 重力や摩擦の計算をするときに、他との影響を考 慮し、何回計算するか（velocityIterations） • 移動するときに、他との影響を考慮し、何回計算 するか（positionIterations ） • 両方とも増やすと計算精度が上がる • 多分変更しなくていい。 • 移動の方は3くらいにしてもいいかもしれない。 int32 velocityIterations = 8; int32 positionIterations = 1;
- 82. まとめ • 基本的なことができるようになった！ • ツールの使い方を覚えた！便利だから購入 してみよう！ • あとは、便利な機能を覚えたり、ゲームを 作るコツを覚えていこう！ • cocos2d 1.0.の資料だけど、参考に！ – http://tonosamart.com/blog/
- 84. ParticleDesigner • パーティクルを簡単にデザインできる！ – http://particledesigner.71squared.com/
- 85. retaina対応 • save asの時に、以下の設定で書きだそ う！ • -hd画像を別に用意しておこう！
- 86. くみこみれい CCParticleSystem* system = [CCParticleSystemQuad particleWithFile:@"star.plist"]; system.position = ccp(x, y); [self addChild: system z:20];
- 87. Tiled • ２Dのマップエディタ！ • レイヤーを重ねたり、オブジェクトを配置 できるので便利！ – http://www.mapeditor.org/
- 88. retaina対応 • 普通に書きだそう！ • .tmxファイルをコピーして、-hd.tmxにリ ネームしよう！ • -hd画像を別に用意しておこう！ • テキストエディタでひらいて、書き換えよ う！ • http://www.cocos2d-iphone.org/wiki/ doku.php/prog_guide %3ahow_to_develop_retinadisplay_game s_in_cocos2d
- 89. かきかえれい <map version="1.0" orientation="orthogonal" width="10" height="15" tilewidth="32" tileheight="32"> <tileset firstgid="1" name="mapChips" tilewidth="32" tileheight="32"> <image source="mapChips.png" width="1024" height="1024"/> ↓ <map version="1.0" orientation="orthogonal" width="10" height="15" tilewidth="64" tileheight="64"> <tileset firstgid="1" name="mapChips" tilewidth="64" tileheight="64"> <image source="mapChips-hd.png" width="2048" height="2048"/>
- 90. くみこみれい CCTMXTiledMap *tileMap = [CCTMXTiledMap tiledMapWithTMXFile:@"title.tmx"]; [self addChild:tileMap z:kTagBgNode];
- 91. おまけ② • ゲームの基本的な流れは、入力→処理→出 力！ • cocos2dなどのゲームエンジンは、出力 の部分を簡単にしてくれる！ • あとは、処理の部分をどうするか！ • それと、全体の構成、プログラムの組立を どうするか！
- 92. 簡単なゲームに挑戦しよう • いきなり難しいゲームを作ろうとしても、 どうしていいかわからない＞＜ • 簡単なゲームをまずは作ってみよう！ • 技術的に簡単でも、手間がかかるゲームは 作るのが（時間的に）難しい！ • ボリュームの小さい、プログラムの難易度 の小さいゲームを作ってみよう！
- 93. プログラムを組み立てる能力 • 初心者にありがちなのが、ゲームエンジン は使える！でも、そこから先ゲームが作れ ない的な＞＜ • 業務用プログラムもそうだけど、一本のソ フトを最初から最後まで組み立てる能力 が必要 • まずは、規模の小さいプログラムで練習し よう！
- 94. ゲームを分解しよう • ゲームの中の機能を分解して、すこしづつ 作っていこう！ • たとえば、キャラクターを表示する。ボ タンを表示する。ボタンが押されたら、 点数が入る。点数を表示する。 • 一つずつ機能を足していくことで、ゲーム を完成させていこう！
- 95. 出来る技術から考えよう • 複雑なものからではなく、できること、 自分の持っている技術から考えよう！ • 数字が表示できる→数字当てゲーム • キャラクターが表示できる→早押しゲーム • 自分の持っている技術の組み合わせで何 ができるか考えてみよう！
- 96. まずは作ってみよう！ • まずはつくってみよう！素材がないとき は、フリー素材とかでもいいけど、探す のに時間がかかるくらいなら、色のつい た四角とかでもいいと思う！ • どうせコードの再利用とかしないし、動 くものを作るところから始めよう！ライブ ラリーを作ることが目的にならないよう に！
- 97. おわり 主催（共同開催）： 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師：西田 寛輔 (Tonosamart) http://www.facebook.com/tonosamart