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 プロジェクトの参照設定を右クリックし、参照の追加をクリックします。

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

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

↑この画像を使っています。

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

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

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

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

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

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で起動するとタイトル画面が表示されます。

繰り返しになりますが、アプリケーションの起動部分以外は共用できますので 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 プロジェクトの参照設定を右クリックし、参照の追加をクリックします。

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

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

↑この画像を使っています。

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

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 を追加します。

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 を追加します。

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が表示されるようにします。

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 で起動するとタイトル画面が表示されます。

今回はここまでです。

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

こんにちは、＠hiro128_777です。

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

jxug.connpass.com

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

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

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

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 パッケージの管理をクリックします。

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

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

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

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

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

補足

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

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

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

これで、プロジェクトの選択画面で 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 でゲーム開発にチャレンジしてみてください！