Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

㉒初期プロジェクトを改造!

11,929 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

㉒初期プロジェクトを改造!

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

×