がんばれガンプ ソルバルウを倒せ！　について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 が他のゲームエンジンと違うところ

10

各プラットフォームのネイティブ UI コントロールとしてCCGameView （ゲーム画面）が提供される（ ver. 1.7.1 以上）

11

　　 UIView 　　　 SurfaceView 　　 SwapChainPanel

　　　　 CCGameView （ゲーム画面）

CCGameView が各プラットフォームのネイティブ UI コントロールとして提供される。

通常の UI コントロールと共存可能！！

つまり…画面の一部にのみゲームエンジンを適用可能

12

　リスト表示など

　　ゲーム画面 • ゲームエンジンと通常の UI を同時に表示可能

• 通常の UIからゲーム画面の操作、またはその逆が可能

Xamarin.Forms のコントロールとしても使用可能

13

デモをご覧ください

さらに詳細は

Cocos Sharp の具体的な使い方

14

　　　 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.

CCLayerCCLayer は CCScene 上に配置する重ねあわせが可能な画面です。

背景用に 1枚、画面上を動くキャラクター用に 1枚、というように、用途ごとに CCLayer を準備します。

重ね合わせたゲーム画面

キャラLayer

Layer の重ね合わせ

23

MapLayer 作成

GameLayer 作成

CCSprite

24

DesignResolution

©BANDAI NAMCO Entertainment Inc.

CCSpriteCCSprite は 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 使ってください…

ご清聴ありがとうございました。