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

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

Cocos Sharp ハンズオン(1)地図の表示

はじめに

こんにちは、@hiro128_777です。


今回は JXUGC #23 でお見せした関東地方の地図がぐりぐり動くサンプルアプリを作成できるようにハンズオン用のテキストを作成しました。
オフラインでハンズオンも実施しますが、参加できない方でも、こちらを参考にすればサンプルアプリを作成できますので、ご興味がある方はぜひ試してみてください。

f:id:hiro128:20170623155841p:plain

完成版のソースコードはこちら

GitHub - TomohiroSuzuki128/CocosSharpFormsSample170527

今回のゴール

Xamarin.Forms 上で Cocos Sharp のアニメーションが動かせるようになる!

ハンズオンを始める前に

Cocos Sharp について

「Cocos Sharp って何??」という方はこちらをご一読ください。

hiro128.hatenablog.jp

Cocos Sharp の基本的な使い方

まずは Cocos Sharp の基本的な使い方をご説明します。

Cocos Sharp の画面の階層構造

こちらをご覧ください。

hiro128.hatenablog.jp

Cocos Sharp のオブジェクトの制御 スケジューラ

こちらをご覧ください。

hiro128.hatenablog.jp

Cocos Sharp のオブジェクトの制御 アクション

こちらをご覧ください。

hiro128.hatenablog.jp

Cocos Sharp のオブジェクトの制御 連続したアクション

こちらをご覧ください。

hiro128.hatenablog.jp

ハンズオン

それでは、早速アプリを作っていきましょう!

Prism Template Pack のインストール、Prism for Xamarin.Forms 適用済みのソリューションの作成

まずはソリューションを作成します。
手順はこちらをご覧ください。

hiro128.hatenablog.jp

Cocos Sharp のインストール

次にCocos Sharpをインストールします。
手順はこちらをご覧ください。

hiro128.hatenablog.jp

ViewModelの作成 : MainPageViewModel.cs

ViewModels/MainPageViewModel.cs を下記のように書き換えてください。

Cocos Sharp のキャンバスGameSceneのプロパティを作成し、各県ごとのコマンドにダミーのデリゲートを設定しておきます。

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;

namespace CocosHandsOn01.ViewModels
{
	public class MainPageViewModel : BindableBase
	{

		public GameScene GameScene { get; set; }

		public DelegateCommand TokyoCommand => new DelegateCommand(() => { });
		public DelegateCommand KanagawaCommand => new DelegateCommand(() => { });
		public DelegateCommand SaitamaCommand => new DelegateCommand(() => { });
		public DelegateCommand ChibaCommand => new DelegateCommand(() => { });
		public DelegateCommand GunmaCommand => new DelegateCommand(() => { });
		public DelegateCommand TochigiCommand => new DelegateCommand(() => { });
		public DelegateCommand IbarakiCommand => new DelegateCommand(() => { });

		private INavigationService navigationService;

		public MainPageViewModel(INavigationService navigationService)
		{
			this.navigationService = navigationService;
		}

	}
}

画面に地図を表示する

XAMLの作成 : MainPage.xaml

Views/MainPage.xaml を下記のように書き換えてください。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
			 prism:ViewModelLocator.AutowireViewModel="True"
			 Title="関東地方"
			 x:Class="CocosHandsOn01.Views.MainPage">
	<Grid x:Name="MainGrid" RowSpacing="0">
		<Grid.RowDefinitions>
			<RowDefinition Height="*"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>
		<StackLayout Grid.Column="0" Grid.Row="1" Padding="10,7,10,0" Margin="0,0,0,0" VerticalOptions="FillAndExpand" Orientation="Vertical">
			<StackLayout.Spacing>
				<OnPlatform x:TypeArguments="x:Double">
					<OnPlatform.iOS>7</OnPlatform.iOS>
					<OnPlatform.Android>0</OnPlatform.Android>
				</OnPlatform>
			</StackLayout.Spacing>
			<Button HeightRequest="35" BackgroundColor="Gray" TextColor="White" Text="群馬県" FontSize="Micro" Command="{Binding GunmaCommand}" />
			<Button HeightRequest="35" BackgroundColor="Gray" TextColor="White" Text="栃木県" FontSize="Micro" Command="{Binding TochigiCommand}" />
			<Button HeightRequest="35" BackgroundColor="Gray" TextColor="White" Text="茨城県" FontSize="Micro" Command="{Binding IbarakiCommand}" />
			<Button HeightRequest="35" BackgroundColor="Gray" TextColor="White" Text="千葉県" FontSize="Micro" Command="{Binding ChibaCommand}" />
			<Button HeightRequest="35" BackgroundColor="Gray" TextColor="White" Text="埼玉県" FontSize="Micro" Command="{Binding SaitamaCommand}" />
			<Button HeightRequest="35" BackgroundColor="Gray" TextColor="White" Text="神奈川県" FontSize="Micro" Command="{Binding KanagawaCommand}" />
			<Button HeightRequest="35" BackgroundColor="Gray" TextColor="White" Text="東京都" FontSize="Micro" Command="{Binding TokyoCommand}" />
		</StackLayout>
	</Grid>
</ContentPage>

XAMLは通常の Xamarin.Forms の場合と何も変わりません。上下2段のGridが配置してあり、下のセルにボタンが配置されています。
CocosSharp のコントロールは XAML 上には配置されていません。CocosSharp のコントロールは XAML 上で追加すると落ちるため、後ほどコードビハインドで追加します。

コードビハインド : MainPage.xaml


usingを以下のように書き換えます。

using System;
using System.Collections.Generic;
using Xamarin.Forms;
using CocosSharp;
using CocosHandsOn01.ViewModels;


コンストラクタを以下のように書き換えます。
InitializeComponentの後にCocosSharpViewのコントロールを作成し配置します。。

public MainPage()
{
	InitializeComponent();

	var grid = this.FindByName<Grid>("MainGrid");

	var gameView = new CocosSharpView()
	{
		HorizontalOptions = LayoutOptions.FillAndExpand,
		VerticalOptions = LayoutOptions.FillAndExpand,
		ViewCreated = CocosSharpView_ViewCreated
	};
	grid.Children.Add(gameView, 0, 0);
}


下記のイベントハンドラを追加します。
CocosSharpViewの生成時にゲーム画面CCGameViewの初期設定を行います。

private void CocosSharpView_ViewCreated(object sender, EventArgs e)
{
	var gameView = sender as CCGameView;

	if (gameView != null)
	{
		gameView.DesignResolution = new CCSizeI(350, 300);
		gameView.ResolutionPolicy = CCViewResolutionPolicy.ShowAll;
		gameView.ContentManager.SearchPaths = new List<string> { "Images" };
		var gameScene = new GameScene(gameView);
		gameView.RunWithScene(gameScene);
		var viewModel = BindingContext as MainPageViewModel;
		viewModel.GameScene = gameScene;
	}
}

参考

ゲーム画面の初期化の内容を具体的に見ていきましょう。

gameView.DesignResolution = new CCSizeI(350, 300);

ゲーム内の仮想解像度を横350ユニット、縦300ユニットに設定します。

gameView.ResolutionPolicy = CCViewResolutionPolicy.ExactFit;

アスペクト比を保ったまま最大の大きさで表示します。

gameView.ContentManager.SearchPaths = new List<string> { "Images" };

アセットを探しに行くパスを設定します。

var viewModel = BindingContext as MainPageViewModel;
viewModel.GameScene = gameScene;

また、ViewModel側からゲーム操作できるように参照を渡しています。この部分本当は疎結合にしたいのですが、現状では厳しそうな感じです。

アセットの配置

Imageファイルをプラットフォームごとのプロジェクトに配置します。

Imageファイルは以下をご利用ください。

tokyo.png
f:id:hiro128:20170627155409p:plain



kanagawa.png
f:id:hiro128:20170627155654p:plain



saitama.png
f:id:hiro128:20170627155701p:plain



chiba.png
f:id:hiro128:20170627155711p:plain



gunma.png
f:id:hiro128:20170627155719p:plain



tochigi.png
f:id:hiro128:20170627155732p:plain



ibaraki.png
f:id:hiro128:20170627155747p:plain


iOSの場合

Content/Images の中にpngファイルを配置してください。

f:id:hiro128:20170627181950p:plain

pngファイルのビルドアクションはBundleResourceに設定してください。

f:id:hiro128:20170627182303p:plain

Androidの場合

Assets/Content/Images の中にpngファイルを配置してください。

f:id:hiro128:20170627184434p:plain

pngファイルのビルドアクションはAndroidAssetに設定してください。

f:id:hiro128:20170627184443p:plain

レイヤーの作成 : GameLayer

CocosSharp では、キャンパスであるCCSceneの中に、グラフィックレイヤーであるCCLayerを配置し、その中に動くオブジェクトCCSpriteを配置します。

最初にCCLayer上にそれぞれの県のCCSpriteを配置します。

using System;
using System.Diagnostics;
using CocosSharp;

namespace CocosHandsOn01
{
	public class GameLayer : CCLayerColor
	{
		private CCTexture2D tokyoTexture;
		private CCTexture2D kanagawaTexture;
		private CCTexture2D saitamaTexture;
		private CCTexture2D chibaTexture;
		private CCTexture2D gunmaTexture;
		private CCTexture2D tochigiTexture;
		private CCTexture2D ibarakiTexture;

		private CCSprite tokyoSprite;
		private CCSprite kanagawaSprite;
		private CCSprite saitamaSprite;
		private CCSprite chibaSprite;
		private CCSprite gunmaSprite;
		private CCSprite tochigiSprite;
		private CCSprite ibarakiSprite;

		private CCActionState tokyoActionState;
		private CCActionState kanagawaActionState;
		private CCActionState saitamaActionState;
		private CCActionState chibaActionState;
		private CCActionState gunmaActionState;
		private CCActionState tochigiActionState;
		private CCActionState ibarakiActionState;

		public GameLayer(CCColor4B? color = default(CCColor4B?)) : base(color)
		{
			tokyoTexture = new CCSprite("tokyo.png", null).Texture;
			kanagawaTexture = new CCSprite("kanagawa.png", null).Texture;
			saitamaTexture = new CCSprite("saitama.png", null).Texture;
			chibaTexture = new CCSprite("chiba.png", null).Texture;
			gunmaTexture = new CCSprite("gunma.png", null).Texture;
			tochigiTexture = new CCSprite("tochigi.png", null).Texture;
			ibarakiTexture = new CCSprite("ibaraki.png", null).Texture;

			var offsetX = 50f;

			tokyoSprite = new CCSprite(tokyoTexture)
			{
				PositionX = 96.25f + offsetX,
				PositionY = 126.25f,
				Scale = 0.3f,
				Tag = (int)Prefecture.Tokyo,
			};
			AddChild(tokyoSprite);

			kanagawaSprite = new CCSprite(kanagawaTexture)
			{
				PositionX = 90f + offsetX,
				PositionY = 93f,
				Scale = 0.3f,
				Tag = (int)Prefecture.Kanagawa,
			};
			AddChild(kanagawaSprite);

			saitamaSprite = new CCSprite(saitamaTexture)
			{
				PositionX = 84.5f + offsetX,
				PositionY = 163f,
				Scale = 0.3f,
				Tag = (int)Prefecture.Saitama,
			};
			AddChild(saitamaSprite);

			chibaSprite = new CCSprite(chibaTexture)
			{
				PositionX = 177.5f + offsetX,
				PositionY = 104f,
				Scale = 0.3f,
				Tag = (int)Prefecture.Chiba,
			};
			AddChild(chibaSprite);

			gunmaSprite = new CCSprite(gunmaTexture)
			{
				PositionX = 60f + offsetX,
				PositionY = 220f,
				Scale = 0.3f,
				Tag = (int)Prefecture.Gunma,
			};
			AddChild(gunmaSprite);

			tochigiSprite = new CCSprite(tochigiTexture)
			{
				PositionX = 131f + offsetX,
				PositionY = 238f,
				Scale = 0.3f,
				Tag = (int)Prefecture.Tochigi,
			};
			AddChild(tochigiSprite);

			ibarakiSprite = new CCSprite(ibarakiTexture)
			{
				PositionX = 174.5f + offsetX,
				PositionY = 200f,
				Scale = 0.3f,
				Tag = (int)Prefecture.Ibaraki,
			};
			AddChild(ibarakiSprite);

		}

	}

	public enum Prefecture
	{
		Tokyo,
		Kanagawa,
		Saitama,
		Chiba,
		Gunma,
		Tochigi,
		Ibaraki
	}

}

シーンの作成

CCScene上に今作成したCCLayerを配置します。

using System;
using CocosSharp;

namespace CocosHandsOn01
{
	public class GameScene : CCScene
	{
		GameLayer layer;

		public GameScene(CCGameView gameView) : base(gameView)
		{
			layer = new GameLayer(CCColor4B.Black);
			AddLayer(layer);
		}
	}
}

確認

ここまでをデバッグ実行すると画面上に地図が表示されるはずです。確認してみましょう。

f:id:hiro128:20170628205102p:plain

f:id:hiro128:20170628204258p:plain

Prism Template Pack のインストール、Prism for Xamarin.Forms 適用済みのソリューションの作成方法

はじめに

こんにちは、@hiro128_777です。

CocosSharp.Forms でアプリを作成する場合、素の Xamarin.Forms ではなく、実際には Prism for Xamarin.Forms 適用済みのソリューションテンプレートを利用した方が何かと便利です。
そこで、今回は Prism Template Pack のインストール、Prism for Xamarin.Forms 適用済みのソリューションの作成方法をご説明します。

Prism Template Pack のインストール

ツール → 拡張機能と更新プログラムを開きます。

f:id:hiro128:20170621202217p:plain


オンラインから、Prism Template Pack を検索し、ダウンロードします。

f:id:hiro128:20170621202501p:plain


閉じるをクリックします。

f:id:hiro128:20170621202602p:plain


Visual Studio をいったん終了します。

f:id:hiro128:20170621202643p:plain


変更をクリックします。

f:id:hiro128:20170621202804p:plain


閉じるをクリックします。

f:id:hiro128:20170621202838p:plain


Visual Studio を再起動します。

f:id:hiro128:20170621202912p:plain


これで Prism Template Pack のインストールは完了です。

ソリューションの作成

ファイル → 新規作成 → プロジェクトを開きます。

f:id:hiro128:20170621203058p:plain


Prism Unity App (Xamarin.Forms) を選択し、プロジェクト名ソリューション名を入力の上、OKをクリックします。

f:id:hiro128:20170621203637p:plain


AndroidiOSを選択し、CREATE PROJECT をクリックします。

f:id:hiro128:20170621203851p:plain


これで、Prism for Xamarin.Forms 適用済みのソリューションが作成されました。

今回はここまでです。

「JXUGC #23 Xamarin 無料化一周年記念勉強会!」で発表させていただきました。

こんにちは、@hiro128_777です。

タイトルの通り、2017/05/27(土)に、「JXUGC #23 Xamarin 無料化一周年記念勉強会!」で発表させていただきました。

jxug.connpass.com


今回はゲーム以外で、Cocos Sharp を利用した動きがあるアプリの実例を発表させて頂きました。

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

www.slideshare.net

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


また、2017/07/09(日)に Cocos Sharp のハンズオンも行います!

connpass.com

こちらもよろしくお願いします!

Cocos Sharp 画面遷移のアニメーション (6) CCTransitionRotoZoom, CCTransitionShrinkGrow, CCTransitionSlideIn*

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回はCCTransitionPageTurnCCTransitionProgress*のアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回はCCTransitionRotoZoomCCTransitionShrinkGrow CCTransitionSlideIn*をご紹介します。

今回も言葉で表現するよりも見ていただいたほうが早いので、早速アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionRotoZoom~

CCTransitionRotoZoom

f:id:hiro128:20170421202924g:plain

画面遷移の際のアニメーション ~CCTransitionShrinkGrow~

CCTransitionShrinkGrow

f:id:hiro128:20170421203030g:plain

画面遷移の際のアニメーション ~CCTransitionSlideIn*~

CCTransitionSlideInB

f:id:hiro128:20170421203111g:plain

CCTransitionSlideInL

f:id:hiro128:20170421204657g:plain

CCTransitionSlideInR

f:id:hiro128:20170421204741g:plain

CCTransitionSlideInT

f:id:hiro128:20170421203320g:plain

というわけで、色々なアニメーションがありますので、皆さんも、色々試してみてください!

では、今回はここまでです。

画面遷移の際のアニメーションはあと1回で全部ご紹介が終わる予定です。

Cocos Sharp 画面遷移のアニメーション (5) CCTransitionPageTurn, CCTransitionProgress*

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回はCCTransitionJumpZoomCCTransitionMoveIn*のアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回はCCTransitionPageTurnCCTransitionProgress*をご紹介します。

言葉で表現するよりも見ていただいたほうが早いので、早速アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionPageTurn~

CCTransitionPageTurn (backwards = true)

f:id:hiro128:20170419203637g:plain

CCTransitionPageTurn (backwards = false)

f:id:hiro128:20170419203716g:plain

なんとも言葉では表現できない動きです(笑)。
backwardstruefalseかで向きが逆になります。

画面遷移の際のアニメーション ~CCTransitionProgress*~

こちらも説明するより見ていただいたほうが早いので、早速アニメーションを実際に見てみましょう。
ちなみに、RadialCWはClockWise、RadialCCWはCounterClockWiseの事です。

CCTransitionProgressHorizontal

f:id:hiro128:20170419203802g:plain

CCTransitionProgressVertical

f:id:hiro128:20170419204636g:plain

CCTransitionProgressInOut

f:id:hiro128:20170419203932g:plain

CCTransitionProgressOutIn

f:id:hiro128:20170419204009g:plain

CCTransitionProgressRadialCW

f:id:hiro128:20170419204416g:plain

CCTransitionProgressRadialCCW

f:id:hiro128:20170419204442g:plain

というわけで、色々なアニメーションがありますので、皆さんも、色々試してみてください!

では、今回はここまでです。

Cocos Sharp 画面遷移のアニメーション (4) CCTransitionJumpZoom, CCTransitionMoveIn*

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回はCCTransitionFlipXCCTransitionFlipYのアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回は CCTransitionJumpZoomCCTransitionMoveIn* をご紹介します。

CCTransitionJumpZoom は文字通り「画面がジャンプしながらズーム」します。

CCTransitionMoveIn* は * で示された方向、つまり B->Bottom, L->Left, R->Right, T->Top から遷移先の画面が現れます。

では、アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionJumpZoom~

CCTransitionJumpZoom

f:id:hiro128:20170412205638g:plain

画面遷移の際のアニメーション ~CCTransitionMoveIn*~

CCTransitionMoveInB

f:id:hiro128:20170412205733g:plain

CCTransitionMoveInL

f:id:hiro128:20170412205810g:plain

CCTransitionMoveInR

f:id:hiro128:20170412205846g:plain

CCTransitionMoveInT

f:id:hiro128:20170412205929g:plain

というわけで、色々なアニメーションがあるので、ぜひ、色々試してみてください。

今回はここまでです。

Cocos Sharp 画面遷移のアニメーション (3) CCTransitionFlipX, CCTransitionFlipY

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回はCCTransitionFlipAngularのアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回はCCTransitionFlipXCCTransitionFlipYをご紹介します。

FlipX, FlipY はそれぞれ「X軸で裏返す」「Y軸で裏返す」と言う感じのアニメーションになります。

では、アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionFlipX, CCTransitionFlipY~

CCTransitionFlipX (CCTransitionOrientation.LeftOver)

f:id:hiro128:20170328185121g:plain

CCTransitionFlipX (CCTransitionOrientation.RightOver)

f:id:hiro128:20170328185203g:plain

X軸で裏返すので、CCTransitionOrientation.DownOverCCTransitionOrientation.UpOverは意味がありません。
一応動作はしますがCCTransitionOrientation.LeftOverまたはCCTransitionOrientation.RightOverと同じ動作になり無意味です。

CCTransitionFlipY (CCTransitionOrientation.DownOver)

f:id:hiro128:20170328185345g:plain

CCTransitionFlipY (CCTransitionOrientation.UpOver)

f:id:hiro128:20170328185423g:plain

Y軸で裏返すので、CCTransitionOrientation.LeftOverCCTransitionOrientation.RightOverは意味がありません。
一応動作はしますがCCTransitionOrientation.DownOverまたはCCTransitionOrientation.UpOverと同じ動作になり無意味です。

というわけで、色々なアニメーションがありますので、皆さんも、色々試してみてください!

では、今回はここまでです。