がんばれガンプ ソルバルウを倒せ! について
2017年1月28日 JXUGC #22 東京
鈴木友宏
自己紹介
鈴木友宏
業務アプリの開発者です。
車とドライブをこよなく愛する逸般人一般人です。
Cocos Sharp を広めるため日夜がんばっております
ほそぼそとBlogもやっています。
http://hiro128.hatenablog.jp/
Twitter
@hiro128_777
2
今回は以下のゲームの開発についてのご説明です。
3
ゼビウス がんばれガンプ ソルバルウを倒せ!(仮題)
ゼビウスをモチーフとしたカジュアルゲームです。
本アプリは、「カタログIPオープン化プロジェクト」の取り組みとして制
作しています。
許諾番号:20537
公式サイト
https://open.channel.or.jp/
©BANDAI NAMCO Entertainment Inc.
ゲームの概要
4
プレイヤーはゼビウス軍を率いる超知性体ガ
ンプとなりソルバルウの進撃を防ぎます。
画面にタッチでバキュラなどのキャラが配置さ
れソルバルウへの攻撃を行ないます。
ソルバルウ(3機)は自動で動き、攻撃を
行ない配置されたキャラを攻撃、破壊します。
ソルバルウが3機破壊された時点での進入
距離の短さがスコアとなります。
ハイスコアはAzureのサーバ上へ保存されま
す。
縦画面
画面タッチで敵キャラ配置
即、動き出し、自動で自機を攻撃
自機は自動で動き、敵
キャラを攻撃する
敵キャラ配置できるのは画面の上部だけ、さら
に1秒につき1機の制限。
アプリの構成
5
Azure Mobile Apps
ハイスコア登録
ハイスコア読み込み
Easy
Tables
iOS, Android
6
このアプリは、Cocos Sharp で開発しています。
今日お話しすること
7
• Cocos Sharp ってどんなもの
• Cocos Sharp のスゴイところ
• Cocos Sharp の具体的な使い方
Cocos Sharp ってどんなもの
Xamarin 向けの2Dゲーム開発用クロスプラットフォームライブラリです。
Cocos Sharp は Monogame のラッパーであり、Monogameのエンジンを
Cocos2d,3d 風の API で利用できます。
C#ユーザーであれば、Xamarin + Cocos Sharp で
最短でクロスプラットフォームでのゲーム開発が可能です!!
8
Cocos Sharpのスゴイところ
PCL内にゲームロジックを押し込める事ができるので、コード共有率が非常に高い。
→おおよそ90%
固有実装部分は、起動部分、各種センサー、カメラ周り、広告関係など。
iOS, Androidハイブリッドのアプリを単体アプリの作成工数の10%増程度で作成できる。
理解しやすい API で、素人でもゲーム開発が可能。
サポートフォーラムのレスポンスがよく、質問に丁寧に答えてくれる。
9
Cocos Sharp が他のゲームエンジンと違うところ
1
各プラットフォームのネイティブUIコントロールとして
CCGameView(ゲーム画面)が提供される(ver. 1.7.1以上)
11
UIView SurfaceView SwapChainPanel
CCGameView(ゲーム画面)
CCGameViewが各プラットフォームのネイティブUIコントロールとして提供される。
通常のUIコントロールと共存可能!!
つまり…画面の一部にのみゲームエンジンを適用可能
12
リスト表示など
ゲーム画面
• ゲームエンジンと通常のUIを同時に表示可能
• 通常のUIからゲーム画面の操作、またはその逆が可能
Xamarin.Formsのコントロールとしても使用可能
13
デモをご覧ください
さらに詳細は
Cocos Sharp の具体的な使い方
1
CCGameView
Cocos Sharp の画面の階層構造
15
DesignResolution
CCGameViewはゲーム画面領域全体を表
します。
CCSceneの中に複数のCCLayerが存在し、
それぞれのCCLayerの中に複数のCCSprite,
CCLabelが存在します。
CCGameViewの配置 Android
16
①CCGameView作成
②ゲーム起動
CCGameViewの配置 iOS(1)
17
①UIViewController作成
CCGameViewの配置 iOS(2)
18
②CCGameView作成
③ゲーム起動
ゲームの起動 PCL
19
DesignResolution……デバイスのディスプレイ上の物理的なピクセル数に関係なく定義できるゲーム内の解像度
ContentManager.SerchPaths ……画像、サウンドなどのアセットの配置場所を指定しておく
DesignResolution
CCScene
20
DesignResolution
タイトル画面 ゲーム画面
©BANDAI NAMCO Entertainment Inc.
CCScene① CCScene②
シーン切り替え
・新しいCCSceneを作成
・CCSceneにCCLayerを配置
・ReplaceScene()実行
CCSceneはキャンバスと考えて頂くとわかりやす
いです。
キャンバスの上に色々なオブジェクトを配置します。
そしてCCSceneはその名の通り、ゲームのシーン
ごとに作成します。タイトル画面で1つ、ゲーム画
面で1つ、ゲームオーバーの画面で1つといった感
じで、場面場面ごとにシーンを切り替えていきま
す。
シーンの切り替え
21
移動先のCCScene作成
CCScene切り替え処理
CCLayer
22
DesignResolution
マップLayer
©BANDAI NAMCO Entertainment Inc.
CCLayer
CCLayerはCCScene上に配置する重ねあわ
せが可能な画面です。
背景用に1枚、画面上を動くキャラクター用に1
枚、というように、用途ごとにCCLayerを準備し
ます。
重ね合わせたゲーム画面
キャラLayer
Layerの重ね合わせ
23
MapLayer作成
GameLayer作成
CCSprite
24
DesignResolution
©BANDAI NAMCO Entertainment Inc.
CCSprite
CCSpriteはCCLayer上に配置するスプライト
です。プレーヤーや敵キャラ、シューティングゲーム
の弾などが相当します。
ゲームでは文字でもCCSpriteをよく利用します。
スコアやステージ情報、残機情報などが相当しま
す。
CCSprite
Sprite表示
25
プレーヤー追加
照準追加
まとめ
26
• Cocos Sharp は簡単です。
• 単独でも、Xamarinと一緒にも使えます。
• ゲームだけでなく、アプリに動きが欲しい時には是非お試しを!
27
Cocos Sharp でアプリ作ってくださると嬉しいです!!
基本的な使い方などはXamarinのチュートリアル、
https://developer.xamarin.com/guides/cross-platform/game_development/cocossharp/first_game/
または私のblogをご覧ください
http://hiro128.hatenablog.jp/
Cocos Sharp 使ってください…
ご清聴ありがとうございました。

がんばれガンプ ソルバルウを倒せについて