Recommended
Recommended
More Related Content
More from Satoshi Oomori
Cocoa勉強会20140419ゲームをつくってみる
- 1. ゲームを作ってみた 2014.4.19 Cocoa勉強会 関西 大森智史 @oogon / satoshi.oomori
- 3. • 大森智史といいます。 • 某印刷会社勤務。 • Cocoa勉強会関西は第0回からいます。
- 4. ゲーム • ガッポガッポでウハウハらしい。 • 当然モテモテらしい。 • 作るしかない！
- 5. …でも作ったことない • どうやって作るんだろうか • Cocos-2Dとかあるけど • Sprite Kitでしょ
- 6. 参考資料 • Sprite Kit iPhone 2Dゲームプログラミング • http://www.amazon.co.jp/dp/479804055X/
- 7. 参考資料 • Sprite Kitもろもろ • http://spritekit.jp
- 9. はてなポイント • スライドにこのマークが付いているところは よくわかってないところです。 • 随時ツッコミをお願いします。 • 某社サービスとは無関係です。 ?
- 11. どんなのを作るか • 宇宙船 • 空中戦 • 地上攻撃 • きれいなグラフィック
- 12. どんなのを作るか • 中ボス登場 • 大ボス登場 • アンドアジェネシス！
- 13. 参考資料 • ゼビウス • http://ja.wikipedia.org/wiki/ゼビウス • ゼビウス軍事パレード • http://www22.tok2.com/home/takaakit/xevi/ parade.html
- 17. 重大な問題 • 絵が描けない。 • 描く道具がない。 • 困った。
- 18. Nintendo 3DS • 「うごめも」で描いてみる。 • パラパラ漫画が描ける。 • 着色はPixelMetorで（Photoshopより安い） ?
- 22. とりあえず描いてみた • うごメモからGIF出力 • 着色はPixelMetorで • PNGファイルにする
- 23. 次は敵キャラ • 敵キャラも作る。 • まずは簡単な動きのキャラクタから。 • でも、鉄板くるくる回したい！
- 25. アトラス ! • テクスチャだけ SKSpriteNode *obj = [SKSpriteNode spriteNodeWithImageNamed:@“Spaceship"]; • テクスチャアトラス SKTextureAtlas *plateAnimatedAtlas = [SKTextureAtlas atlasNamed:@"spaceship"]; NSUInteger numImages = plateAnimatedAtlas.textureNames.count; for (int i=0; i < numImages; i++) { NSString *textureName = [NSString stringWithFormat:@"%03d", i]; SKTexture *temp = [plateAnimatedAtlas textureNamed:textureName]; [plateFrames addObject:temp]; }
- 26. ちょっとしたTips • 連番画像を使うとき@“%03d”とすると 001,002,003…とできます。 for (int i=0; i < numImages; i++) { NSString *textureName = [NSString stringWithFormat:@"%03d", i]; SKTexture *temp = [plateAnimatedAtlas textureNamed:textureName]; [plateFrames addObject:temp]; }
- 27. アトラス • テクスチャアトラスはRetina用と非Retina用 がいるんだそうだ。Retina用は”@2x”を追加 • ビルド設定 SPRITEKIT_TEXTURE_ATLAS_OUTPUT = YES にしておかないといけない • とりあえずRetina用だけで作っとく ?
- 29. 衝突 • ぶつかったらやっぱり爆発するよね • エミッターからパーティクルが飛んでいく • パーティクルクラスっていうのはないので注 意が必要
- 30. エミッター //エミッターの作成 NSString *path = [[NSBundle mainBundle] pathForResource:@"FireParticle" ofType:@"sks"]; static SKEmitterNode* spark2 = nil; spark2 = [NSKeyedUnarchiver unarchiveObjectWithFile:path]; spark2.position = contact.contactPoint; spark2.numParticlesToEmit = contact.collisionImpulse; //アクション SKAction *fadeOut = [SKAction fadeOutWithDuration:1.0f]; SKAction *remove = [SKAction removeFromParent]; SKAction *sequence = [SKAction sequence:@[fadeOut, remove ]]; [spark2 runAction:sequence]; [spark2 runAction:soundPlay]; ! [self addChild:spark2];
- 31. パーティクル • エミッターから飛んで行くもの • パーティクルクラスはないよ！ • エミッタークラスを探せ！ ?
- 32. とりあえず作って 動かしてみた
- 33. 整理 • シーンにごにょごにょ書いていたので、見苦 しい。 • オブジェクト志向っぽく書こう • SKSpriteNodeを使っていたけれど、キャラ クタごとにサブクラス作成。自分のことは自 分でするように。 ?
- 37. 枠の外 • 「後日談」 • （今回は0.3秒間隔で）としていたが… • →やはり0.015秒間隔で（1/60=0.0166..）
- 40. 敵キャラ • 出現時間をリストにして、時間が来たらキャ ラクタを出すようにした。 • NSDictionaryをNSArrayで • 将来的には別ファイルにして「面」構成に
- 41. 敵キャラ • 出現時間をリストにして、 NSArray *anArray = @[@{@"name":@"teppan",@"time":@1.0f,@"posX":@100.0,@"pos Y":@600.0}, @{@“name":@"teppan",@"time":@3.0f,@"posX":@200.0,@"posY" :@600.0}, ……
- 42. 敵キャラ • リストに基づいてキャラクタを作成するようにした。 //0.3秒間隔で調査 if ((beforeTime + 0.3f) < currentTime){ [enemyArray enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) { if ([[obj objectForKey:@"time"] floatValue] < (currentTime - durationTime) ) { if ([[obj objectForKey:@"name" ] isEqualToString:@"teppan"]) { … } … … } … } … }
- 44. 敵キャラ • 「後日談」 • できれば面の最初にオブジェクトを作っておく ほうが良い。 • まあでも毎回作っても大丈夫だけどアトラスの 作成には時間がかかるので、最低限アトラスだ けは先に作っておいて使いまわしする。ほうが よい ?
- 47. 重大な問題 • 作曲できない。 • 楽器も演奏できない。 • 困った…。
- 50. EmitterNodeにAction SKAction *soundPlay; ! soundPlay = [SKAction playSoundFileNamed:@"bomb.m4a" waitForCompletion:NO]; ! //エミッターの作成 NSString *path = [[NSBundle mainBundle] pathForResource:@"FireParticle" ofType:@"sks"]; static SKEmitterNode* spark2 = nil; spark2 = [NSKeyedUnarchiver unarchiveObjectWithFile:path]; spark2.position = contact.contactPoint; spark2.numParticlesToEmit = contact.collisionImpulse; //アニメーション SKAction *fadeOut = [SKAction fadeOutWithDuration:1.0f]; SKAction *remove = [SKAction removeFromParent]; SKAction *sequence = [SKAction sequence:@[fadeOut, remove ]]; [spark2 runAction:sequence]; [spark2 runAction:soundPlay]; ! [self addChild:spark2]; ココ ココ
- 52. BGM @property (nonatomic) AVAudioPlayer * backgroundMusicPlayer; ! //BGM NSError *error; NSURL * backgroundMusicURL = [[NSBundle mainBundle] URLForResource:@"BGM" withExtension:@"m4a"]; self.backgroundMusicPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:backgroundMusicURL error:&error]; ! self.backgroundMusicPlayer.numberOfLoops = -1; [self.backgroundMusicPlayer prepareToPlay]; [self.backgroundMusicPlayer play];
- 53. 背景 • 背景も真っ暗だと寂しい。宇宙みたい。 • 地面の絵がほしいよね。 • ナスカの地上絵とか
- 54. どうするんだろう • 小さなノードをブロック上に置く • 大きな一枚絵のノードを作る • どちらにしても、はみでる部分を継ぎ足し継 ぎ足し • 今回は大きなノードを作ることに ? ?
- 55. • 背景を動かしてみた
- 57. 背景画像を変えてみる • ノードを作り直す • ノードはそのままで、テクスチャ画像を変え る • →下のほうがコストが低そう ?
- 58. 背景画像を変えてみる • 「後日談」 • テクスチャ画像を変える方法で作ったが、微妙に「カ クッ」と動く • →結局最初に面の背景を全部作っておくことにしま した。 • 途中で作り直すことにした。最初から常にパフォー マンスを意識して制作しないといけません。 ?
- 62. • 砲弾を発射してみた
- 63. 当たったら終了 • 自機が爆発したら終了 • 別のシーンに切り替えたい。 • presentScene:transition:でよいようだ。 ?
- 65. 遅延移行 • 爆発後少し余韻を残すため、２秒後に presentScene:を呼び出しています。 //シーンの遅延移行 -(void)delayPresentScene:(NSDictionary *)obj; { SKView * skView = (SKView *)self.view; [skView presentScene:[obj objectForKey:@"scene"] transition:[obj objectForKey:@"transition"]]; } ! ! [self performSelector:@selector(delayPresentScene:) withObject:dic afterDelay:2];
- 66. 参考文献 • Sprite Kitリファレンス • シーン遷移等 • http://cocoaapi.hatenablog.com/entry/ SpriteKit/index
- 70. パスで動きをつけるとは？ • パスは計算 式で曲線を 表すことが 出来ます。 →位置を計 算できる • http://www.slideshare.net/oogon/cocoa201303pdf ?
- 75. 砲弾が当たるように • シーンで衝突が起こると、呼ばれるメソッド //衝突検知 -(void)didBeginContact:(SKPhysicsContact *)contact { } • このメソッドで衝突したオブジェクトがわか るので衝突処理
- 78. 再スタート • ゲームオーバーになったあと、もう一度ゲー ムをするための処理を行う • 一旦別のシーンに移ったあともう一度プレイ シーンに戻るには？ • 別のシーンに移るときに、プレイシーンを保 持しておいて、プレイシーンに戻ればいい。 ? ?
- 79. 再スタート • 移行先シーンにプロパティを設定して @property (retain) SKScene* beforeScene; ! • プレイシーンから移行するときに保持してお く ?
- 81. タッチしたノードは？ • タッチした部分にあるノードは何？か調べて SKNode *nodeAtPoint = [self nodeAtPoint:[touch locationInNode:self]]; • あとはノードの名前で処理を変える if ([nodeAtPoint.name isEqualToString: @"restart"]) { OOOLabelButtonNode *startButton = (OOOLabelButtonNode *)nodeAtPoint; startButton.highlighted = YES; }
- 86. • ゲームのやり直し
- 88. • スコアの表示
- 90. • 音付きで
- 92. • オープニング画面
- 93. 自動運転 • テスト面倒。 • デモ画面では自機が自動的に操作されている。 • 自機を自動操縦させよう。
- 95. • 自動操縦画面
- 99. レイヤー • zPositionというプロパティを使うみたいだ。 数字が大きくなるほど手前に来る。 • デフォルトは1のようなので、地上物は3、空 中物は5、スコアは7ぐらいにしておこう。 ?
- 100. • 上下関係を直してみた。
- 103. • 自由に動き回れる ようになった
- 105. 整理 • ベースクラスに衝突時のメソッドを作る。 • サブクラスでそれぞれの処理をオーバーライ ドする。 • キャラクタの独立性を高めて、キャラクタが 増えた時の対応をしやすくする
- 106. 整理 • シーンでの-didBiginContact{}の処理がSKPhysicsContactオブ ジェクトを渡すだけになった。 • ここで、ベースクラスOOOChatacterNodeを作った効果が出 てくる。 -(void)didBeginContact:(SKPhysicsContact *)contact { //それぞれのオブジェクトに衝突情報を渡す [(OOOCharacterNode *)contact.bodyA.node contact:contact]; [(OOOCharacterNode *)contact.bodyB.node contact:contact]; }
- 107. シーンクラス ! -(void)didBeginContact: (SKPhysicsContact *)contact { ! ! } • 衝突時の処理 自機クラス -(void)contact: (SKPhysicsCon tact *)contact{} 敵キャラクラス -(void)contact: (SKPhysicsCon tact *)contact{} シーンクラス ! -(void)didBeginContact: (SKPhysicsContact *)contact { ! ! ! ! ! ! } 自機の処理 敵キャラの処理 contactオブジェクト contactオブジェク contactオブジェクト
- 108. 敵砲弾 • 敵キャラも砲弾を
- 109. 敵砲弾 • 敵も砲弾を撃つ
- 110. いっしょに動く • 地上攻撃のマーカーを作りたい。 • 自機と一緒に動くノードSKPhysicsJointFixed で自機と接続 • ハマった所：シーンにすでに接続するものが ないと例外発生
- 113. 画面が暗くならないよう • デモプレイしているとタッチしないのでスリー プする。 • スリープしないようにするにはデリゲートで application.idleTimerDisabled = YES;として やればよい。（ゲームが終了・バックグラウ ンドになる時はNOにしておく） ?
- 115. 終了画面から タイトル画面へ • 再スタートボタンしかなかったので終了して からタイトル画面に戻るボタンを付けた。 • 一定の時間で強制的にタイトルに戻るように したほうがいいかもしれない。 ?
- 116. パフォーマンス向上 • 概ね60fpsで動いているが、背景画像の切替 時にもたつきが発生している。 • 画像差し替え時の読み込みに時間がかかって いる？ • 事前にバックグラウンドで読み込んでおく？ ?
- 117. パフォーマンス向上 • SKTextureAtlasの作成時に時間がかかっているようなので 事前に画像を読み込み、非同期読み込み。 -(void)preloadAtlas:(int)atlasNumber { dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGR OUND, 0), ^{ // Background operations preloadTextureAtlas = [SKTextureAtlas atlasNamed:[NSString stringWithFormat:@"ground%03d", groundNum]]; //dispatch_async(dispatch_get_main_queue(), ^{ // Main Thread //}); }); } ?
- 119. パフォーマンス向上 • アトラスをキャッシュすることオブジェクト の独立性が薄くなる懸念がある。 • メモリが許せば面に登場するキャラクタオブ ジェクトを最初に全部作っておくこともいい かも？ • →出来る限り最初に作成しておく！ ?
- 123. 敵キャラAI • 敵キャラに、状況に応じて行動させる。 • 敵キャラと自機の距離が一定以下になったら 砲弾を発射 • SKActionで、位置チェック、敵キャラごとに 違う処理の実装可能 ?
- 124. 敵キャラAI • 敵キャラと自機の距離が200pt以下になった場合砲弾を発射する。 SKAction *attackAction = [SKAction customActionWithDuration:2.0 actionBlock:^(SKNode *node, CGFloat elapsedTime){ NSArray *nodes = [self.parent children]; [nodes enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) { SKNode *node = (SKNode *)obj; if ([node.name isEqualToString: @"spaceship"]){ float deltaX = node.position.x - self.position.x; float deltaY = node.position.y - self.position.y; float delta = sqrtf(pow(deltaX,2.0) + pow(deltaY,2.0)); //NSLog(@"%.2f",delta); if (delta > 200.0) { NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:@150.0,@"posX", [SKTransition fadeWithDuration:1],@"transition", nil]; if (!fireing){ [self performSelector:@selector(fireEnemyShell:) withObject:dic afterDelay: 0.0f]; fireing = YES; } } } }]; }]; [obj runAction:attackAction];
- 129. 残機設定 • 自機が1回衝突になったらGame Overになっ ていたが、酷すぎるので最初は3機からス タート。 • Score sceneを改良して、残機が0の場合と0 以上の場合で分けてみる
- 131. キャラクタの動作 • キャラクタの動作はキャラクタで固定のパスだったけれ ど、シナリオファイルにmotionとしてパスを持たせるこ とにした。 • ベジェパスの内、点の移動、直線描画、曲線描画を辞書 で持たせて、ベジェパスを作成する。コードから切り離 すことで、モーションエディタで動作の設定が可能 • 動的なベジェパスの作成は、AIでの動作にも応用できる
- 132. キャラクタの動作
- 138. 実機デモ
- 140. 今後の課題 • Game center対応。Game centerが変わるよ うな があるので、変わってからにしようか なと。 • 課金。面構成のゲームだと無料＋追加面とい うシステムも取れるのかなあと。
- 142. ゲームを作ってみて • パフォーマンスを常に意識して作る。カクカク する動きはダメなので、そのような動きになら ないように常に気を使うこと。 • 速度落ちそうなことはやらない。 • 実機重要。Sprite KitはGPUの効果で高速化がな されているので、実機でないと60fpsでない。
- 144. ゲームを作ってみて • Sprite Kitの後に、Scene Kitという3Dゲーム フレームワークが控えているので（今はMac のみ）応用できそう。