個人的なメモ 〜Cocos Sharp 情報を中心に‥

Tomohiro Suzuki @hiro128_777 のブログです。Cocos Sharp の事を中心に書いています。 Microsoft MVP for Visual Studio and Development Technologies 2017- 本ブログと所属組織の公式見解は関係ございません。

Xamarin + Cocos Sharp で iOS, Android 対応のゲームを開発する手順 (4) Android でタイトル画面を出す。 (Cocos Sharp 1.7 以降対応版)

はじめに

こんにちは、@hiro128_777です。
今回は、Cocos Sharp 1.7 以降に対応した Android でタイトル画面を表示する方法についてご説明します。

※これから Cocos Sharp をはじめる方は 1.7 以降をご利用ください。

既に、Cocos Sharp 1.6.2 をご利用の場合以下をご覧下さい。
hiro128.hatenablog.jp

Android でタイトル画面を表示する方法

まずは、CocosSharpGameSample.Android のプロジェクトに CocosSharpGameSample.Core プロジェクトの参照を追加します。

CocosSharpGameSample.Android プロジェクトの参照設定を右クリックし、参照の追加をクリックします。

f:id:hiro128:20170207202423p:plain

CocosSharpGameSample.Core にチェックを入れ、OKをクリックします。

f:id:hiro128:20170207202430p:plain

次に CocosSharpGameSample.Android プロジェクトの Assets/Images/Title/ にタイトル画面の画像を配置します。
画像ファイルのビルドアクションは「AndroidAsset」にします。

f:id:hiro128:20170207202627p:plain

f:id:hiro128:20170131204338p:plain
↑この画像を使っています。

ゲームロジックは共用なので作成不要!

ゲームロジックは CocosSharpGameSample.Core プロジェクトにすでに作成済みのものを共用しますので作成不要です。

※Cocos Sharp では起動部分以外は共用できます!便利ですね!

Android のプロジェクトにゲーム起動のコードを記述

最後に CocosSharpGameSample.Android プロジェクトの MainActivity.cs を変更し
アプリの起動時に、ゲーム画面を含むUIが表示されるようにします。

f:id:hiro128:20170207202654p:plain

using Android.App;
using Android.Content.PM;
using Android.OS;
using Android.Views;
using Android.Widget;
using CocosSharp;
using CocosSharpGameSample.Core;

namespace CocosSharpGameSample.Android
{
	[Activity(Label = "CocosSharpGameSample.Android"
		, MainLauncher = true
		, Icon = "@drawable/icon"
		, AlwaysRetainTaskState = true
		, LaunchMode = LaunchMode.SingleInstance
		, ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.Keyboard | ConfigChanges.KeyboardHidden
	)]
	public class MainActivity : Activity
	{

		protected override void OnCreate(Bundle bundle)
		{
			base.OnCreate(bundle);

			// タイトルを非表示にする
			RequestWindowFeature(WindowFeatures.NoTitle);

			var linearLayout = new LinearLayout(this)
			{
				Orientation = Orientation.Vertical
			};

			// ゲーム表示用コントロール作成
			var gameView = new CCGameView(this);

			// ゲーム起動
			if (gameView != null)
				gameView.ViewCreated += GameDelegate.LoadGame;

			linearLayout.AddView(gameView);
			SetContentView(linearLayout);
		}

	}
}

以上でプログラムが完成しましたので、Debug - Any Cpuで起動するとタイトル画面が表示されます。

f:id:hiro128:20170207202710p:plain

繰り返しになりますが、アプリケーションの起動部分以外は共用できますので iOS 版が作成済みの場合、非常に簡単に Android 版が作成できます。

今回はここまでです。

Xamarin + Cocos Sharp で iOS, Android 対応のゲームを開発する手順 (3) iOS でタイトル画面を出す。 (Cocos Sharp 1.7 以降対応版)

はじめに

こんにちは、@hiro128_777です。
今回は、Cocos Sharp 1.7 以降に対応した iOS でタイトル画面を表示する方法についてご説明します。

※これから Cocos Sharp をはじめる方は 1.7 以降をご利用ください。

既に、Cocos Sharp 1.6.2 をご利用の場合以下をご覧下さい。
hiro128.hatenablog.jp

iOS でタイトル画面を表示

まずは、CocosSharpGameSample.iOS プロジェクトに CocosSharpGameSample.Core プロジェクトの参照を追加します。

CocosSharpGameSample.iOS プロジェクトの参照設定を右クリックし、参照の追加をクリックします。

f:id:hiro128:20170131204236p:plain

CocosSharpGameSample.Core にチェックを入れ、OKをクリックします。

f:id:hiro128:20170131204256p:plain

次に CocosSharpGameSample.iOS プロジェクトの Resources/Images/Title/ にタイトル画面の画像を配置します。
画像ファイルのビルドアクションは「BundleResource」にします。

f:id:hiro128:20170131204338p:plain
↑この画像を使っています。

f:id:hiro128:20170131204318p:plain

次に CocosSharpGameSample.Core プロジェクトの Layers に TitleLayer.cs を追加します。

f:id:hiro128:20170131204455p:plain

TitleLayer.cs では、画面にタイトル画像を配置します。

using CocosSharp;

namespace CocosSharpGameSample.Core
{
	public class TitleLayer : CCLayerColor
	{

		protected override void AddedToScene()
		{
			base.AddedToScene();
			// タイトル画像を配置
			var title = new CCSprite("/Resources/Images/Title/Title.png", null);
			title.Position = new CCPoint(ContentSize.Center.X, 200);
			AddChild(title);
		}

	}
}

次に CocosSharpGameSample.Core プロジェクトの ルートに GameDelegate.cs を追加します。

f:id:hiro128:20170131204513p:plain

GameDelegate.cs では、
ゲーム上の仮想解像度であるデザイン解像度の設定、
シーンにタイトル画面の作成、セットの処理、ゲームの開始処理を行ないます。

using System;
using System.Collections.Generic;
using CocosSharp;

namespace CocosSharpGameSample.Core
{
	public static class GameDelegate
	{
		public static void LoadGame(object sender, EventArgs e)
		{
			var gameView = sender as CCGameView;
			if (gameView == null) { return; }

			// デザイン解像度設定
			gameView.DesignResolution = new CCSizeI(224, 380);
			gameView.ResolutionPolicy = CCViewResolutionPolicy.ShowAll;

			// コンテンツパス設定
			var contentSearchPaths = new List<string>() { "Images", "Sounds" };
			gameView.ContentManager.SearchPaths = contentSearchPaths;

			// タイトル画面のシーン作成、セット
			var gameScene = new CCScene(gameView);
			gameScene.AddLayer(new TitleLayer());

			// ゲーム開始
			gameView.RunWithScene(gameScene);
		}
	}
}


次に CocosSharpGameSample.iOS プロジェクトのルートに MainView.cs を追加します。

f:id:hiro128:20170131204526p:plain

MainView.cs では、
UI上にゲーム画面のコントロールであるCCGameViewを配置し、ゲームの起動処理とひも付けます。

using CoreGraphics;
using UIKit;
using CocosSharp;
using CocosSharpGameSample.Core;

namespace CocosSharpGameSample.iOS
{
	public class MainView : UIViewController
	{
		CCGameView GameView { get; set; }

		public override void ViewDidLoad()
		{
			base.ViewDidLoad();

			GameView = new CCGameView(new CGRect(0, 20,
				UIScreen.MainScreen.ApplicationFrame.Width,
				UIScreen.MainScreen.ApplicationFrame.Height));
			GameView.ViewCreated += GameDelegate.LoadGame;
			View.AddSubview(GameView);
		}

		public override void ViewWillDisappear(bool animated)
		{
			base.ViewWillDisappear(animated);

			if (GameView != null)
				GameView.Paused = true;
		}

		public override void ViewDidAppear(bool animated)
		{
			base.ViewDidAppear(animated);

			if (GameView != null)
				GameView.Paused = false;
		}

		public override void DidReceiveMemoryWarning()
		{
			base.DidReceiveMemoryWarning();
		}

	}
}

最後に CocosSharpGameSample.iOS プロジェクトの AppDelegate.cs を変更し
アプリの起動時に、ゲーム画面を含むUIが表示されるようにします。

f:id:hiro128:20170131204539p:plain

using Foundation;
using UIKit;

namespace CocosSharpGameSample.iOS
{
	[Register("AppDelegate")]
	public partial class AppDelegate : UIApplicationDelegate
	{
		public override UIWindow Window
		{
			get;
			set;
		}

		public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
		{

			Window = new UIWindow(UIScreen.MainScreen.Bounds);

			var viewController = new MainView();

			Window.RootViewController = viewController;
			Window.MakeKeyAndVisible();

			return true;
		}

	}
}

以上でプログラムが完成しましたので、Debug で起動するとタイトル画面が表示されます。

f:id:hiro128:20170131204604p:plain

今回はここまでです。

「JXUGC #22 最新事例&お前のアプリを説明してもらおうの会」で発表させていただきました。

こんにちは、@hiro128_777です。

タイトルの通り、2017/01/28(土)に、「JXUGC #22 最新事例&お前のアプリを説明してもらおうの会」で発表させていただきました。

jxug.connpass.com




まだまだ、Cocos Sharp の認知度は少ないですが、アンケートでは「試してみたい!」「ゲーム以外でも利用できそう!」というご意見もございましたので、
ゲーム以外にも、動きがあるアプリで有効活用できることがアピールできたのではないかと思っています。

以下、発表時のスライドを掲載しておきます。

www.slideshare.net

皆様、Cocos Sharp ぜひ、試してみてください!

よろしくお願いします!

Xamarin + Cocos Sharp で iOS, Android 対応のゲームを開発する手順 (2) Cocos Sharp をインストールする (Cocos Sharp 1.7 以降対応版)

はじめに

こんにちは、@hiro128_777です。
今回は、Cocos Sharp 1.7 以降に対応した Cocos Sharp をインストールする方法についてご説明します。

※これから Cocos Sharp をはじめる方は 1.7 以降をご利用ください。
※テンプレートを使用すれば手動でパッケージのインストールは不要ですが、今回はあえて手動でインストールしています。


Cocos Sharp 1.6.2 をご利用の場合以下をご覧下さい。
hiro128.hatenablog.jp

インストール方法

ソリューションを右クリックし、ソリューションの NuGet パッケージの管理をクリックします。

f:id:hiro128:20170127113159p:plain

Cocos Sharp を検索し選択すると、プロジェクトの選択画面が開きますので、
3つすべてにチェックが入っていることを確認し、インストールボタンをクリックします。
※バージョンが1.7.1以上であることを確認してください。

もし、 CocosSharpGameSample.Core が表示されない場合、本エントリ最後の[補足]を確認してください。

f:id:hiro128:20170127113208p:plain

下記ウインドウが表示されたら、OKボタンをクリックします。

f:id:hiro128:20170127113520p:plain

インストールが完了したら、インストール済みのパッケージに Cocos Sharp が表示されます。
※バージョンが1.7.1以上であることを確認してください。

f:id:hiro128:20170127113441p:plain

また、各プロジェクトの参照設定を見ると、Cocos Sharp のライブラリが追加されています。

f:id:hiro128:20170127113531p:plain

補足

プロジェクトの選択画面で CocosSharpGameSample.Core が表示されない場合、
または、Cocos Sharp のインストールが失敗する場合は、PCL ターゲットが間違っています。

修正するには、プロジェクトのプロパティを開きライブラリタブの変更ボタンをクリックします。

f:id:hiro128:20160303172853p:plain

ターゲットの変更画面が開きますので、下の画像のように、
.NET Framework 4.5, Windows 8, Xamarin.Android, Xamarin.iOS, Xamarin.iOS (Classic) にチェックを入れます。

f:id:hiro128:20160303172843p:plain

これで、プロジェクトの選択画面で CocosSharpGameSample.Core が表示されます。

今回はここまでです。

Cocos Sharp 入門 (3) DesignResolution について

はじめに

こんにちは、@hiro128_777です。
今回は、Cocos Sharp でゲームを開発する上で大事な概念であるDesignResolutionについてご説明します。

モバイルデバイスでのゲームの解像度の問題

モバイルデバイスで2Dゲームを開発する場合、問題になるのがゲームの解像度です。
PCやゲーム専用機の場合、解像度は機種によって特定の解像度だけを考慮すれば問題ありませんでしたが、モバイルデバイスでのゲーム開発の場合、多種多様の解像度が違うデバイス上で同じようにゲーム画面を表示する必要があります。

でも安心してください! Cocos Sharp には、DesignResolutionと呼ばれる、デバイスのディスプレイ上の物理的なピクセル数に関係なく、ゲーム内のオブジェクトのピクセルサイズを標準化するための便利な方法が準備されています。

DesignResolution

DesignResolutionで設定するものは以下の二つです。

DesignResolution …ゲーム内の仮想解像度。縦横の仮想ピクセル数を指定します。
 ※全てのゲームの処理はこのDesignResolutionを基準にして実行されます。

ResolutionPolicy …ゲームウィンドウを希望の解像度に調整する方法を指定します。

具体的なコードとしては以下のようになります。

using System;
using System.Collections.Generic;
using CocosSharp;
using CocosDenshion;

namespace CocosSharpSample.Core
{
	public static class GameDelegate
	{
		public static void LoadGame(object sender, EventArgs e)
		{
			var gameView = sender as CCGameView;

			// 省略

			// デザイン解像度設定
			gameView.DesignResolution = new CCSizeI(224, 380);
			gameView.ResolutionPolicy = CCViewResolutionPolicy.ShowAll;

			// 省略

		}
	}
}

とっても、簡単ですね!

CCViewResolutionPolicy

CCViewResolutionPolicyはゲームウィンドウを希望の解像度に調整する方法を指定します。

CCViewResolutionPolicy は以下の6つが用意されていますが、実際に使用するのはShowAllのみです。それ以外は画面が歪んだり切れたりするので実際に使うことはありません。

  • ShowAll … アスペクト比を維持した状態で、要求された解像度全体をデバイスの画面に最大になるように表示します。デバイスのアスペクト比とデザイン解像度のアスペクト比が一致しない場合は、上下、または左右に黒い帯ができます。
  • ExactFit … アスペクト比を維持せず、要求された解像度全体をデバイスの画面全体に表示します。デバイスのアスペクト比とデザイン解像度のアスペクト比が一致しない場合は、ゲーム画面がゆがみます。
  • FixedWidth … アスペクト比を維持した状態で、要求された幅全体を表示します。デバイスのアスペクト比とデザイン解像度のアスペクト比が一致しない場合は、画面の上部が切れるか、画面の上部に黒い帯が発生します。
  • FixedHeight … アスペクト比を維持した状態で、要求された高さ全体を表示ます。デバイスのアスペクト比とデザイン解像度のアスペクト比が一致しない場合は、画面の右部が切れるか、画面の右に黒い帯が発生します。
  • NoBorder … アスペクト比を維持したまま高さ全体または幅全体を表示します。デバイスのアスペクト比とデザイン解像度のアスペクト比が一致しない場合は、画面の上下または左右が切れます。
  • Custom-ゲーム画面をデバイスに表示する際の高さおよび幅の比率を自由に設定できます。

まとめ

DesignResolutionのおかげで、Cocos Sharp では、デバイスごとの解像度の差異をまったく気にすることなくゲーム開発ができます。

それでは、ぜひ皆様も Cocos Sharp でゲーム開発にチャレンジしてみてください!

Cocos Sharp 入門 (2) CCScene, CCLayer, CCSprite, CCLabel

はじめに

こんにちは、@hiro128_777です。
今回は、Cocos Sharp の基本的なオブジェクトである、CCScene, CCLayer, CCSprite, CCLabel についてご説明します。

Cocos Sharp の画面の階層構造

Cocos Sharp の画面の階層構造は下の図のようになっています。

f:id:hiro128:20161227192029p:plain

CCSceneの中に複数のCCLayerが存在し、それぞれのCCLayerの中に複数のCCSprite, CCLabelが存在します。

CCScene

CCSceneはキャンバスと考えて頂くとわかりやすいです。
キャンバスの上に色々なオブジェクトを配置します。

そしてCCSceneはその名の通り、ゲームのシーンごとに作成します。タイトル画面で1つ、ゲーム画面で1つ、ゲームオーバーの画面で1つといった感じで、場面場面ごとにシーンを切り替えていきます。

CCLayer

CCLayerCCScene上に配置する重ねあわせが可能な画面です。背景用に1枚、画面上を動くキャラクター用に1枚、各種情報表示用に1枚というように、用途ごとにCCLayerを準備します。

CCSprite, CCLabel

CCSpriteCCLayer上に配置するスプライトです。プレーヤーや敵キャラ、シューティングゲームの弾などが相当します。
CCLabelCCLayer上に配置する文字です。スコアやステージ情報、残機情報などが相当します。

非常にシンプルでわかりやすいですね!
Cocos Sharpは簡単です!

というわけで、今回はここまでです。

Cocos Sharp 入門 (1) Cocos Sharp の概要およびメリット・デメリット

はじめに

こんにちは、@hiro128_777です。
今回は、これから Cocos Sharp を導入しようかな~と検討している方もいらっしゃるかと思いますので、あらためて、Cocos Sharp の概要およびメリット・デメリットを整理したいと思います。

Cocos Sharp ってどんなもの

Cocos Sharp は、Xamarin 上で動作する2Dゲーム開発用クロスプラットフォームライブラリです。
Cocos Sharp は Monogame 上に構築されており、Monogameのエンジンを Cocos2d,3d の API で利用できます。


つまり…
C#ユーザーであれば、Xamarin + Cocos Sharp で最短でクロスプラットフォームでのゲーム開発が可能です!!

Cocos Sharp を使うメリットは

Xamarin.Forms と共存できる

Cocos Sharp を使う最大のメリットは、ゲーム画面を Xamarin.Forms 上のUIコントロールの一つとして扱うことができるため、一つの画面内で一部分はゲーム、一部分はリスト表示というようなことが実現できることです。今のところクロスプラットフォームでこんな芸当ができるのは Cocos Sharp のみです。

具体例として、前回の記事をご参照ください。
hiro128.hatenablog.jp

ゲーム開発未経験でも簡単にスマホゲームが作れる

Cocos Sharp は学習コストが非常に低いです。C#経験者であれば、1週間も触ればすぐゲーム開発が可能になります。
職業としてではなく、趣味としてできるだけ簡単にスマホゲームをリリースしたい場合、Cocos Sharp は非常に魅力的な選択肢となります。

処理が早い

Cocos Sharp は2Dに特化しているため、3D用のライブラリも存在せず、3D用のプロセスを起動する必要もないので、非常に軽快に動作します。

コード共有率が非常に高い

ゲームは基本的に標準のUIコントロールを使用せず、独自の描画を行うため、Xamarin.Forms のように各プラットフォームのUIコントロールの差異を調整するようなことをする必要がありません。よって、コード共有率が非常に高くなります。通常の場合90%以上のコード共有率が実現できます。プラットフォーム個別の実装が必要なのは、各種センサー周り、カメラ周り、広告関係、課金関係などに限られます。

Xamarin 環境があれば導入コストが無料

Xamarin の環境をすでに持っているのであれば、Cocos Sharp 自体は無料で使い始めることができます。MIT License なので商用利用も可能です。

Cocos Sharp のデメリットは

日本語情報がほとんどない

Cocos Sharp の日本語情報はほとんどありませんが、Cocos2d-x の情報は非常にたくさん存在しますので、それをC#に読み替えれば大丈夫です。それでも分からない場合は、twitter, teratailなどで質問すれば、何らかのアドバイスが得られると思います。また、私のblogにも色々情報がありますのでご参考にしていただければ幸いです。

職業としてゲーム開発者を目指す場合メリットが薄い

C#環境で職業としてゲーム開発者を目指すのであれば Unity が最適だと考えられます。ゲーム会社さんで Cocos Sharp を使っているという会社さんは聞いたことがありませんので…

まとめ

Cocos Sharp は「Xamarin 触ったことあるけど、ゲームも作ってみたいな~」という方には最適なソリューションです。ぜひ、皆様も Cocos Sharp でゲーム開発にチャレンジしてみてください!