個人的なメモ

Tomohiro Suzuki @hiro128_777 のブログです。Microsoft MVP for Developer Technologies 2017- 本ブログと所属組織の公式見解は関係ございません。

Swift, Objective-C を Xamarin.iOS に移植する際のポイント(1) デリゲート その2

はじめに

こんにちは、@hiro128_777です。

前回は、Swift のプロトコル、デリゲートが Xamarin.iOS でどのように表現されているかを確認しました。

hiro128.hatenablog.jp


今回は、前回の続きです。実際に Swift のコードを Xamarin.iOS へ移植していきましょう。

PhotoCaptureDelegate.swift の Xamarin.iOS への移植


それではPhotoCaptureDelegate.swiftファイルのコードを見てみましょう。

using

importを確認すると

Swift

import AVFoundation
import Photos

とありますので、追加します。

C#

using System;
using AVFoundation;
using Photos;

クラス定義

次にクラスの定義部分に注目すると、以下のようにクラスの定義とエクステンションがあります。

Swift

class PhotoCaptureProcessor: NSObject {


Swift

extension PhotoCaptureProcessor: AVCapturePhotoCaptureDelegate {


前回説明したように、Swift でAVCapturePhotoCaptureDelegateのように定義済みのプロトコルが利用されている場合、基本的には Xamarin.iOS 側には対応する interface および class が準備されています。
よって、AVCapturePhotoCaptureDelegateのメタ情報を確認すると

C#

public class AVCapturePhotoCaptureDelegate : NSObject, IAVCapturePhotoCaptureDelegate, INativeObject, IDisposable

とありますので、AVCapturePhotoCaptureDelegateを継承すれば、NSObjectを継承し、AVCapturePhotoCaptureDelegateを実装するクラスになります。
よって、以下のようにクラスを定義します。

C#

using System;
using AVFoundation;
using Photos;
using Foundation;

namespace AVCamSample
{
    public class PhotoCaptureDelegate : AVCapturePhotoCaptureDelegate
    {
    }
}

 

フィールド

次に、インスタンス変数(C#ではフィールド)を移植します。

Swift

private(set) var requestedPhotoSettings: AVCapturePhotoSettings

private let willCapturePhotoAnimation: () -> Void

private let livePhotoCaptureHandler: (Bool) -> Void

private let completionHandler: (PhotoCaptureProcessor) -> Void

private var photoData: Data?

private var livePhotoCompanionMovieURL: URL?

Swift では[アクセス修飾子] [var or let] [変数名] : [型名] の順で記述されています。

よって、1行目で言えば、requestedPhotoSettingsが変数名、AVCapturePhotoSettingsが型名です。
これは、C#に簡単に書き換えられます。
AVCapturePhotoSettingsの型も Xamarin.iOS に定義済みです。
もし「型が見つからない」とエラーが出る場合は、using を確認してみてください。

private(set) は、setter のみprivateという意味です。

3行目の場合、willCapturePhotoAnimationが変数名、() -> Voidが型名です。
これは、型名が() -> Voidですから、C#で言うデリゲートですね(Swiftではクロージャ)。->の左辺が引数の型、右辺が戻り値の型です。

9,11行目のData?,URL?は、Xamarin.iOS ではそれぞれNSData,NSUrlになります。
NSがつくのは、Xamarin.iOS は、Objective-C に基づいており、Objective-C で、NSがつく型名になっているからです。
また、NSData,NSUrlを使う場合、using Foundation;が必要になります。

これらを考慮するとフィールド定義は以下のようになります。

C#

using System;
using AVFoundation;
using Photos;
using Foundation;

namespace AVCamSample
{
    public class PhotoCaptureDelegate : AVCapturePhotoCaptureDelegate
    {
        public AVCapturePhotoSettings RequestedPhotoSettings { get; private set; }

        Action willCapturePhotoAnimation;
        Action<bool> capturingLivePhoto;
        Action<PhotoCaptureDelegate> completed;

        NSData photoData;
        NSUrl livePhotoCompanionMovieUrl;
    }
}

 

コンストラクタ

次に、イニシャライザ(C#ではコンストラクタ)を移植します。

Swift

init(with requestedPhotoSettings: AVCapturePhotoSettings,
     willCapturePhotoAnimation: @escaping () -> Void,
     livePhotoCaptureHandler: @escaping (Bool) -> Void,
     completionHandler: @escaping (PhotoCaptureProcessor) -> Void) {
    self.requestedPhotoSettings = requestedPhotoSettings
    self.willCapturePhotoAnimation = willCapturePhotoAnimation
    self.livePhotoCaptureHandler = livePhotoCaptureHandler
    self.completionHandler = completionHandler
}

引数がクロージャであるものに全て@escapingがついていますが、移植する際にはあまり気にしなくても良いです。
※クロージャがスコープから抜けても存在し続けるときに@escapingが必要になります。

selfはC#ではthisです。
あとはベタで移植すれば大丈夫です。

これらを考慮しコンストラクタを追加すると以下のようになります。

C#

using System;
using AVFoundation;
using Photos;
using Foundation;

namespace AVCamSample
{
    public class PhotoCaptureDelegate : AVCapturePhotoCaptureDelegate
    {
        public AVCapturePhotoSettings RequestedPhotoSettings { get; private set; }

        Action willCapturePhotoAnimation;
        Action<bool> capturingLivePhoto;
        Action<PhotoCaptureDelegate> completed;

        NSData photoData;
        NSUrl livePhotoCompanionMovieUrl;

        public PhotoCaptureDelegate(AVCapturePhotoSettings requestedPhotoSettings,
                                     Action willCapturePhotoAnimation,
                                     Action<bool> capturingLivePhoto,
                                     Action<PhotoCaptureDelegate> completed)
        {
            RequestedPhotoSettings = requestedPhotoSettings;
            this.willCapturePhotoAnimation = willCapturePhotoAnimation;
            this.capturingLivePhoto = capturingLivePhoto;
            this.completed = completed;
        }

    }
}

コンストラクタは簡単ですね!
 

メソッド

次に、メソッドを移植します。

Swift

private func didFinish() {
    if let livePhotoCompanionMoviePath = livePhotoCompanionMovieURL?.path {
        if FileManager.default.fileExists(atPath: livePhotoCompanionMoviePath) {
            do {
                try FileManager.default.removeItem(atPath: livePhotoCompanionMoviePath)
            } catch {
                print("Could not remove file at url: \(livePhotoCompanionMoviePath)")
            }
        }
    }
    
    completionHandler(self)
}

ここは多少厄介です。なぜなら、Xamarin.iOS は、Objective-C に基づいており、
Swift をそのまま移植できず、若干表現を変えなければならないためです。

ここは、仕方ないので Swift のコードの処理を理解し、同等の処理を Xamarin.iOS で書かなくてはいけません。

まずif letですがこれは、これは、Optional-Binding と呼ばれており、Optional の Unwrap を行っています。

Optional とは変数にnilの代入を許容するデータ型で、反対に Not Optional はnilを代入できません。Optional の変数にはデータ型の最後に?!をつけます。

Unwrap とは Optionalから Not Optional な値を取り出す事です。

FileManagerは、Xamarin.iOS ではNSFileManagerです。
このNSがつくかどうかの件については、慣れるとだんだん迷わなくなります。

最初のうちは「型が見つからない」とエラーが出る場合は、まずは using を確認、
次に、NSをつけてみるという手順を取るとつまづきにくいです。

後は、インテリセンスを利用してNSFileManagerのAPIにあわせて、書き換えていきます。

これらを考慮しDidFinish()を追加すると以下のようになります。

C#

using System;
using AVFoundation;
using Photos;
using Foundation;

namespace AVCamSample
{
    public class PhotoCaptureDelegate : AVCapturePhotoCaptureDelegate
    {
        public AVCapturePhotoSettings RequestedPhotoSettings { get; private set; }

        Action willCapturePhotoAnimation;
        Action<bool> capturingLivePhoto;
        Action<PhotoCaptureDelegate> completed;

        NSData photoData;
        NSUrl livePhotoCompanionMovieUrl;


        public PhotoCaptureDelegate(AVCapturePhotoSettings requestedPhotoSettings,
                                     Action willCapturePhotoAnimation,
                                     Action<bool> capturingLivePhoto,
                                     Action<PhotoCaptureDelegate> completed)
        {
            RequestedPhotoSettings = requestedPhotoSettings;
            this.willCapturePhotoAnimation = willCapturePhotoAnimation;
            this.capturingLivePhoto = capturingLivePhoto;
            this.completed = completed;
        }

        void DidFinish()
        {
            var livePhotoCompanionMoviePath = livePhotoCompanionMovieUrl?.Path;
            if (livePhotoCompanionMoviePath != null)
            {
                if (NSFileManager.DefaultManager.FileExists(livePhotoCompanionMoviePath))
                {
                    NSError error;
                    if (!NSFileManager.DefaultManager.Remove(livePhotoCompanionMoviePath, out error))
                        Console.WriteLine($"Could not remove file at url: {livePhotoCompanionMoviePath}");
                }
            }

            completed(this);
        }

    }
}

これでクラス本体部分の移植が完了しました!
いかがでしょうか?最初はちょっとわかりにくいかもしれませんが、何度か試してみれば慣れますので、ぜひ試してみてください!

また、長くなりましたので今回はここまでです。

間違いなどございましたらご指摘お願いします。

次回は、エクステンション部分を移植します。
 


次回はこちらからどうぞ!
hiro128.hatenablog.jp

Swift, Objective-C を Xamarin.iOS に移植する際のポイント(1) デリゲート その1

はじめに

こんにちは、@hiro128_777です。

Xcode での開発経験がない方が、iOS の開発を Xamarin で始めてWebで情報を集めると、 Swift や Objective-C の情報はたくさん見つかりますが、Xamarin の情報は案外少ないことに気づきます。

そして、Swift や Objective-C のサンプルコードを見て、Xamarin に移植する必要が出てきますが、これは Xcode での開発経験がないと結構骨が折れる作業です。

今回から数回にわたり、Swift, Objective-C を Xamarin.iOS に移植する際のポイントをご説明します。

初回である今回は、デリゲートについてご説明します。

C# のデリゲートと iOS のデリゲートの違いについて

C#のデリゲートは安全にカプセル化された関数ポインタのようなもので、言語仕様として準備されている機能ですが、Swiftのデリゲートは言語仕様ではなくデザインパターンであり、設計手法の一つです。よって利用目的は似てるのですが、文法的にはまったく違うものです。

この違いがわかりにくいので、今回はデリゲートについてご説明します。
 

なお、iOS のデリゲートについては以下の公式ドキュメントも非常に参考になります。
docs.microsoft.com
 

Xamarin.iOS は、Swift ではなく、Objective-C に寄った設計です。

このことが、Swift のコードを Xamarin.iOS へ移植する際のハードルになっています。もちろん、Swift, Objective-C の開発経験があれば簡単なのですが、Windows の世界から来た方にはなかなか大変です(私もいつも苦労しています)。

プロトコルと Xamarin.iOS

標準ライブラリで定義済みのデリゲートは、プロトコルと一緒に利用されます。

プロトコルは、C#の世界のインターフェースとほぼ同じと考えていただいて結構です。iOSの世界では、標準ライブラリに様々なプロトコルが定義されています。

では、標準ライブラリのプロトコルを利用したデリゲートの実装を詳しく見ていきましょう。

今回は写真撮影のサンプルアプリを題材にします。

以下よりサンプルコードをダウンロードして下さい。
developer.apple.com

その中の、PhotoCaptureDelegate.swiftファイルのコードを見てみましょう。
クラスの定義部分に注目すると、

class PhotoCaptureProcessor: NSObject {
extension PhotoCaptureProcessor: AVCapturePhotoCaptureDelegate {


とあります。

ここに出てきているAVCapturePhotoCaptureDelegateは定義済みのプロトコルです。

Swift でAVCapturePhotoCaptureDelegateのように定義済みのプロトコルが利用されている場合、基本的には Xamarin.iOS 側には対応する interface および class が準備されています。
interface は Swift のプロトコルの名前の頭に 「I」 を付けた名前、class は Swift の Protocol の名前と同名になっています。

例えば、Swift のAVCapturePhotoCaptureDelegateに対応する Xamarin.iOS の interface はIAVCapturePhotoCaptureDelegate、class はAVCapturePhotoCaptureDelegateです。

では、IAVCapturePhotoCaptureDelegateのメタ情報を見てみましょう

namespace AVFoundation
{
    [Introduced(PlatformName.iOS, 10, 0, PlatformArchitecture.None, null)]
    [Protocol(Name = "AVCapturePhotoCaptureDelegate", WrapperType = typeof(AVCapturePhotoCaptureDelegateWrapper))]
    [ProtocolMember(IsRequired = false, IsProperty = false, IsStatic = false, Name = "WillBeginCapture", Selector = "captureOutput:willBeginCaptureForResolvedSettings:", ParameterType = new[] { typeof(AVCapturePhotoOutput), typeof(AVCaptureResolvedPhotoSettings) }, ParameterByRef = new[] { false, false })]
    [ProtocolMember(IsRequired = false, IsProperty = false, IsStatic = false, Name = "WillCapturePhoto", Selector = "captureOutput:willCapturePhotoForResolvedSettings:", ParameterType = new[] { typeof(AVCapturePhotoOutput), typeof(AVCaptureResolvedPhotoSettings) }, ParameterByRef = new[] { false, false })]
    [ProtocolMember(IsRequired = false, IsProperty = false, IsStatic = false, Name = "DidCapturePhoto", Selector = "captureOutput:didCapturePhotoForResolvedSettings:", ParameterType = new[] { typeof(AVCapturePhotoOutput), typeof(AVCaptureResolvedPhotoSettings) }, ParameterByRef = new[] { false, false })]
    [ProtocolMember(IsRequired = false, IsProperty = false, IsStatic = false, Name = "DidFinishProcessingPhoto", Selector = "captureOutput:didFinishProcessingPhotoSampleBuffer:previewPhotoSampleBuffer:resolvedSettings:bracketSettings:error:", ParameterType = new[] { typeof(AVCapturePhotoOutput), typeof(CMSampleBuffer), typeof(CMSampleBuffer), typeof(AVCaptureResolvedPhotoSettings), typeof(AVCaptureBracketedStillImageSettings), typeof(NSError) }, ParameterByRef = new[] { false, false, false, false, false, false })]
    [ProtocolMember(IsRequired = false, IsProperty = false, IsStatic = false, Name = "DidFinishProcessingRawPhoto", Selector = "captureOutput:didFinishProcessingRawPhotoSampleBuffer:previewPhotoSampleBuffer:resolvedSettings:bracketSettings:error:", ParameterType = new[] { typeof(AVCapturePhotoOutput), typeof(CMSampleBuffer), typeof(CMSampleBuffer), typeof(AVCaptureResolvedPhotoSettings), typeof(AVCaptureBracketedStillImageSettings), typeof(NSError) }, ParameterByRef = new[] { false, false, false, false, false, false })]
    [ProtocolMember(IsRequired = false, IsProperty = false, IsStatic = false, Name = "DidFinishRecordingLivePhotoMovie", Selector = "captureOutput:didFinishRecordingLivePhotoMovieForEventualFileAtURL:resolvedSettings:", ParameterType = new[] { typeof(AVCapturePhotoOutput), typeof(NSUrl), typeof(AVCaptureResolvedPhotoSettings) }, ParameterByRef = new[] { false, false, false })]
    [ProtocolMember(IsRequired = false, IsProperty = false, IsStatic = false, Name = "DidFinishProcessingLivePhotoMovie", Selector = "captureOutput:didFinishProcessingLivePhotoToMovieFileAtURL:duration:photoDisplayTime:resolvedSettings:error:", ParameterType = new[] { typeof(AVCapturePhotoOutput), typeof(NSUrl), typeof(CMTime), typeof(CMTime), typeof(AVCaptureResolvedPhotoSettings), typeof(NSError) }, ParameterByRef = new[] { false, false, false, false, false, false })]
    [ProtocolMember(IsRequired = false, IsProperty = false, IsStatic = false, Name = "DidFinishCapture", Selector = "captureOutput:didFinishCaptureForResolvedSettings:error:", ParameterType = new[] { typeof(AVCapturePhotoOutput), typeof(AVCaptureResolvedPhotoSettings), typeof(NSError) }, ParameterByRef = new[] { false, false, false })]
    [Unavailable(PlatformName.WatchOS, PlatformArchitecture.All, null)]
    [Unavailable(PlatformName.TvOS, PlatformArchitecture.All, null)]
    [Unavailable(PlatformName.MacOSX, PlatformArchitecture.All, null)]
    public interface IAVCapturePhotoCaptureDelegate : INativeObject, IDisposable
    {
    }
}

かなりごちゃごちゃしていますが、悲しいことに全て非常に重要な情報です(笑)。特にNameSelectorなどの情報に注目してください。


次に、AVCapturePhotoCaptureDelegateのメタ情報を見てみましょう

namespace AVFoundation
{
    [Introduced(PlatformName.iOS, 10, 0, PlatformArchitecture.None, null)]
    [Model]
    [Protocol]
    [Register("AVCapturePhotoCaptureDelegate", false)]
    [Unavailable(PlatformName.WatchOS, PlatformArchitecture.All, null)]
    [Unavailable(PlatformName.TvOS, PlatformArchitecture.All, null)]
    [Unavailable(PlatformName.MacOSX, PlatformArchitecture.All, null)]
    public class AVCapturePhotoCaptureDelegate : NSObject, IAVCapturePhotoCaptureDelegate, INativeObject, IDisposable
    {
        [CompilerGenerated]
        [EditorBrowsable(EditorBrowsableState.Advanced)]
        [Export("init")]
        public AVCapturePhotoCaptureDelegate();

        [CompilerGenerated]
        [EditorBrowsable(EditorBrowsableState.Advanced)]
        protected AVCapturePhotoCaptureDelegate(NSObjectFlag t);

        [CompilerGenerated]
        [EditorBrowsable(EditorBrowsableState.Advanced)]
        protected internal AVCapturePhotoCaptureDelegate(IntPtr handle);

        [CompilerGenerated]
        [Export("captureOutput:didCapturePhotoForResolvedSettings:")]
        public virtual void DidCapturePhoto(AVCapturePhotoOutput captureOutput, AVCaptureResolvedPhotoSettings resolvedSettings);

        [CompilerGenerated]
        [Export("captureOutput:didFinishCaptureForResolvedSettings:error:")]
        public virtual void DidFinishCapture(AVCapturePhotoOutput captureOutput, AVCaptureResolvedPhotoSettings resolvedSettings, NSError error);

        [CompilerGenerated]
        [Export("captureOutput:didFinishProcessingLivePhotoToMovieFileAtURL:duration:photoDisplayTime:resolvedSettings:error:")]
        public virtual void DidFinishProcessingLivePhotoMovie(AVCapturePhotoOutput captureOutput, NSUrl outputFileUrl, CMTime duration, CMTime photoDisplayTime, AVCaptureResolvedPhotoSettings resolvedSettings, NSError error);

        [CompilerGenerated]
        [Export("captureOutput:didFinishProcessingPhotoSampleBuffer:previewPhotoSampleBuffer:resolvedSettings:bracketSettings:error:")]
        public virtual void DidFinishProcessingPhoto(AVCapturePhotoOutput captureOutput, CMSampleBuffer photoSampleBuffer, CMSampleBuffer previewPhotoSampleBuffer, AVCaptureResolvedPhotoSettings resolvedSettings, AVCaptureBracketedStillImageSettings bracketSettings, NSError error);

        [CompilerGenerated]
        [Export("captureOutput:didFinishProcessingRawPhotoSampleBuffer:previewPhotoSampleBuffer:resolvedSettings:bracketSettings:error:")]
        public virtual void DidFinishProcessingRawPhoto(AVCapturePhotoOutput captureOutput, CMSampleBuffer rawSampleBuffer, CMSampleBuffer previewPhotoSampleBuffer, AVCaptureResolvedPhotoSettings resolvedSettings, AVCaptureBracketedStillImageSettings bracketSettings, NSError error);

        [CompilerGenerated]
        [Export("captureOutput:didFinishRecordingLivePhotoMovieForEventualFileAtURL:resolvedSettings:")]
        public virtual void DidFinishRecordingLivePhotoMovie(AVCapturePhotoOutput captureOutput, NSUrl outputFileUrl, AVCaptureResolvedPhotoSettings resolvedSettings);

        [CompilerGenerated]
        [Export("captureOutput:willBeginCaptureForResolvedSettings:")]
        public virtual void WillBeginCapture(AVCapturePhotoOutput captureOutput, AVCaptureResolvedPhotoSettings resolvedSettings);

        [CompilerGenerated]
        [Export("captureOutput:willCapturePhotoForResolvedSettings:")]
        public virtual void WillCapturePhoto(AVCapturePhotoOutput captureOutput, AVCaptureResolvedPhotoSettings resolvedSettings);
    }
}

こちらにも、非常に重要な情報が含まれています。先ほどのIAVCapturePhotoCaptureDelegateNameSelectorなどの情報と、こちらのExportの情報を組み合わせて、コンパイル時にiOSのデリゲートが構成される仕組みになっています。深堀してみるとかなりの力技ですね(笑)

長くなりますので今回はここまでにします。

間違いなどございましたらご指摘お願いします。

次回は、具体的にデリゲートを含むコードをどう移植するのかご説明します。

次回はこちらからどうぞ!
hiro128.hatenablog.jp

Cocos Sharp での基本的なゲームの制御の方法 複数のアクションを同時に実行する。

はじめに

こんにちは、@hiro128_777です。

今回は複数のアクションを同時に実行する方法についてご説明します。

複数のアクションを同時に実行するアクション

複数のアクションを同時に実行するには、アクションを複数作成した上で、そのアクションを CCSpawn に登録し、CCNodeRunAction メソッドで実行します。

public CCSpawn(params CCFiniteTimeAction[] actions);

例として
移動、拡大、回転
を同時に行うアクションを作成しましょう。

// 連続して実行したいアクションをそれぞれ作成
var moveByAction = new CCMoveBy(3f, new CCPoint(50f, 100f));
var scaleByAction = new CCScaleBy(3f, 2f);
var rotateByAction = new CCRotateBy(3f, 45f);

// 同時実行するアクションを作成
var spawn = new CCSpawn(moveByAction, scaleByAction, rotateByAction);

// アクション実行
node.RunAction(spawn);

これだけで移動、拡大、回転を同時に行うアクションアクションを実行できます。

とても簡単ですね!

今回はここまでです。

Cocos Sharp 画面遷移のアニメーション (7) CCTransitionSplit*, CCTransitionTurnOffTiles, CCTransitionZoomFlip*

はじめに

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

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

今回はCCTransitionSplit*, CCTransitionTurnOffTilesCCTransitionZoomFlip*をご紹介します。

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

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

CCTransitionSplitCols

f:id:hiro128:20170727101253g:plain

CCTransitionSplitRows

f:id:hiro128:20170727101320g:plain

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

CCTransitionTurnOffTiles

f:id:hiro128:20170727101347g:plain

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

CCTransitionZoomFlipAngular (CCTransitionOrientation.DownOver, CCTransitionOrientation.UpOver, CCTransitionOrientation.LeftOver)

f:id:hiro128:20170727101413g:plain

CCTransitionOrientation.DownOver,CCTransitionOrientation.UpOver,CCTransitionOrientation.LeftOverは同じ動きになります。

CCTransitionZoomFlipAngular (CCTransitionOrientation.RightOver)

f:id:hiro128:20170727101444g:plain

CCTransitionZoomFlipX (CCTransitionOrientation.DownOver, CCTransitionOrientation.UpOver, CCTransitionOrientation.LeftOver)

f:id:hiro128:20170727101521g:plain

CCTransitionOrientation.DownOver,CCTransitionOrientation.UpOver,CCTransitionOrientation.LeftOverは同じ動きになります。

CCTransitionZoomFlipX (CCTransitionOrientation.RightOver)

f:id:hiro128:20170727101557g:plain

CCTransitionZoomFlipY (CCTransitionOrientation.DownOver, CCTransitionOrientation.LeftOver, CCTransitionOrientation.RightOver)

f:id:hiro128:20170727101635g:plain

CCTransitionOrientation.DownOver,CCTransitionOrientation.LeftOver,CCTransitionOrientation.RightOverは同じ動きになります。

CCTransitionZoomFlipY (CCTransitionOrientation.UpOver)

f:id:hiro128:20170727101714g:plain


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

また、画面遷移のアニメーションのご紹介は今回で終了です。

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

Cocos Sharp ハンズオン(2)地図のアニメーション設定

はじめに

こんにちは、@hiro128_777です。


前回は地図が表示される部分までを作成しました。今回はハンズオン用のテキスト後半部分です。ボタンをタップすると地図がアニメーションする部分を作成していきます。

この記事からご覧になった方は、前回からご覧になることをお勧めします。

hiro128.hatenablog.jp

ハンズオン続き

それではさっそく続きを始めましょう。

アニメーションを追加 : GameLayer.cs

GameLayer.csにアニメーション用のフィールドを追加します。

CCActionStateはアニメーションの動作中、終了のステータス管理、CCBlinkCCScaleByなどはアニメーションを表すオブジェクトです。

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

private CCBlink blink;
private CCScaleBy scaleLarge;
private CCEaseBackIn easedScaleLarge;
private CCRotateBy rotate;
private CCEaseBounceIn easedRotate;
private CCScaleBy scaleOrigin;

次にGameLayer.csのコンストラクタにアニメーションのインスタンスを作成するコードを追加します。

blink = new CCBlink(2, 10); 
scaleLarge = new CCScaleBy(1, 4); 
easedScaleLarge = new CCEaseBackIn(scaleLarge); 
rotate = new CCRotateBy(3, 2880); 
easedRotate = new CCEaseBounceIn(rotate); 
scaleOrigin = new CCScaleBy(1, 0.25f); 

さらにGameLayer.csに各県ごとの、アニメーションの実行可否判断用のプロパティとアニメーションの実行用のメソッドを追加します。

実行可否判断は現在実行中のアニメーションが終了するまで次のアニメーションを実行させないようにするために使用します。

public bool CanPlayAnimationTokyo
{
	get { return tokyoActionState == null ? true : tokyoActionState.IsDone; }
}

public void PlayAnimationTokyo()
{
	if (!CanPlayAnimationTokyo)
		return;

	var sequence = new CCSequence(
		new CCCallFunc(() => tokyoSprite.ZOrder = 1000),
		blink,
		easedScaleLarge,
		easedRotate,
		scaleOrigin,
		new CCCallFunc(() => tokyoSprite.ZOrder = 0)
		);
	tokyoActionState = tokyoSprite.RunAction(sequence);
}

public bool CanPlayAnimationKanagawa
{
	get { return kanagawaActionState == null ? true : kanagawaActionState.IsDone; }
}

public void PlayAnimationKanagawa()
{
	if (!CanPlayAnimationKanagawa)
		return;

	var sequence = new CCSequence(
		new CCCallFunc(() => kanagawaSprite.ZOrder = 1000),
		blink,
		easedScaleLarge,
		scaleOrigin,
		new CCCallFunc(() => kanagawaSprite.ZOrder = 0)
		);
	kanagawaActionState = kanagawaSprite.RunAction(sequence);
}

public bool CanPlayAnimationSaitama
{
	get { return saitamaActionState == null ? true : saitamaActionState.IsDone; }
}

public void PlayAnimationSaitama()
{
	if (!CanPlayAnimationSaitama)
		return;

	var sequence = new CCSequence(
		new CCCallFunc(() => saitamaSprite.ZOrder = 1000),
		blink,
		scaleLarge,
		rotate,
		scaleOrigin,
		new CCCallFunc(() => saitamaSprite.ZOrder = 0)
		);
	saitamaActionState = saitamaSprite.RunAction(sequence);
}

public bool CanPlayAnimationChiba
{
	get { return chibaActionState == null ? true : chibaActionState.IsDone; }
}

public void PlayAnimationChiba()
{
	if (!CanPlayAnimationChiba)
		return;

	var sequence = new CCSequence(
		new CCCallFunc(() => chibaSprite.ZOrder = 1000),
		easedScaleLarge,
		scaleOrigin,
		new CCCallFunc(() => chibaSprite.ZOrder = 0)
		);
	chibaActionState = chibaSprite.RunAction(sequence);
}

public bool CanPlayAnimationGunma
{
	get { return gunmaActionState == null ? true : gunmaActionState.IsDone; }
}

public void PlayAnimationGunma()
{
	if (!CanPlayAnimationGunma)
		return;

	var sequence = new CCSequence(blink);
	gunmaActionState = gunmaSprite.RunAction(sequence);
}

public bool CanPlayAnimationTochigi
{
	get { return tochigiActionState == null ? true : tochigiActionState.IsDone; }
}

public void PlayAnimationTochigi()
{
	if (!CanPlayAnimationTochigi)
		return;

	var sequence = new CCSequence(
		new CCCallFunc(() => tochigiSprite.ZOrder = 1000),
		scaleLarge,
		scaleOrigin,
		new CCCallFunc(() => tochigiSprite.ZOrder = 0)
		);
	tochigiActionState = tochigiSprite.RunAction(sequence);
}

public bool CanPlayAnimationIbaraki
{
	get { return ibarakiActionState == null ? true : ibarakiActionState.IsDone; }
}

public void PlayAnimationIbaraki()
{
	if (!CanPlayAnimationIbaraki)
		return;

	var sequence = new CCSequence(
		new CCCallFunc(() => ibarakiSprite.ZOrder = 1000),
		rotate,
		new CCCallFunc(() => ibarakiSprite.ZOrder = 0)
		);
	ibarakiActionState = ibarakiSprite.RunAction(sequence);
}


この部分もう少し詳しく解説します。

CanPlayAnimationTokyoプロパティでは、アニメーションのステータスを確認し、アニメーション実行前、または終了後であれば、実行許可を許可します。

public bool CanPlayAnimationTokyo
{
	get { return tokyoActionState == null ? true : tokyoActionState.IsDone; }
}


PlayAnimationTokyoメソッドでは、以下のような処理を行っています。


実行許可が出ていなければアニメーションを実行しません。

if (!CanPlayAnimationTokyo)
	return;

個別のアニメーションを連続実行するように組み合わせ、連続したアニメーションを構築します。

アニメーション時に最前面にないと他のスプライトの後ろに隠れたりしますので、最初に今回アニメーションするスプライトを最前面に移動させ、終了後元に戻しています。

CCSequenceはアニメーションを連続的に実行しますが、CCSpawnでは複数のアニメーションを同時実行できます。

CCEaseBackInなどを使うことによって通常はリニアなアニメーションの変化量を関数的に変化するように装飾できます。

var sequence = new CCSequence(
	new CCCallFunc(() => tokyoSprite.ZOrder = 1000),
	blink,
	easedScaleLarge,
	easedRotate,
	scaleOrigin,
	new CCCallFunc(() => tokyoSprite.ZOrder = 0)
	);

アニメーションをスプライトに紐づけて実行し、実行状況を参照できるようにします。

tokyoActionState = tokyoSprite.RunAction(sequence);

GameLayerの操作メソッドをViewModelに公開する : GameScene.cs

GameSceneGameLayerCanPlayAnimationTokyoなどのアニメーション実行メソッドをViewModelに公開するためのメソッドを追加します。

public void PlayAnimationTokyo()
{
	layer.PlayAnimationTokyo();
}

public void PlayAnimationKanagawa()
{
	layer.PlayAnimationKanagawa();
}

public void PlayAnimationSaitama()
{
	layer.PlayAnimationSaitama();
}

public void PlayAnimationChiba()
{
	layer.PlayAnimationChiba();
}

public void PlayAnimationGunma()
{
	layer.PlayAnimationGunma();
}

public void PlayAnimationTochigi()
{
	layer.PlayAnimationTochigi();
}

public void PlayAnimationIbaraki()
{
	layer.PlayAnimationIbaraki();
}

ViewModelのCommandのデリゲートを設定する : MainPageViewModel.cs

MainPageViewModelDelegateCommandGameSceneのアニメーション起動メソッドを設定します。

public DelegateCommand TokyoCommand => new DelegateCommand(() => GameScene.PlayAnimationTokyo());
public DelegateCommand KanagawaCommand => new DelegateCommand(() => GameScene.PlayAnimationKanagawa());
public DelegateCommand SaitamaCommand => new DelegateCommand(() => GameScene.PlayAnimationSaitama());
public DelegateCommand ChibaCommand => new DelegateCommand(() => GameScene.PlayAnimationChiba());
public DelegateCommand GunmaCommand => new DelegateCommand(() => GameScene.PlayAnimationGunma());
public DelegateCommand TochigiCommand => new DelegateCommand(() => GameScene.PlayAnimationTochigi());
public DelegateCommand IbarakiCommand => new DelegateCommand(() => GameScene.PlayAnimationIbaraki());

確認

以上でプログラムは完成しました!
ボタンをタップすると地図がアニメーションするか試してみましょう。


f:id:hiro128:20170704201300g:plain


いかがでしょうか!これで Cocos Sharp の基本的な使い方はバッチリです!

この後は完成したサンプルをアレンジしてみましょう!

プラクティス

  • アニメーションの種類を変更してみましょう。

CCMoveByCCMoveTo 移動
CCScaleByCCScaleTo 拡大・縮小
CCRotateByCCRotateTo 回転
CCJumpByCCJumpTo ジャンプ
CCFadeInCCFadeOutCCFadeTo フェード
CCTintByCCTintTo 色合いを変化
CCSkewByCCSkewTo ゆがませる
CCBlink 点滅させる


  • CCSequenceの代わりにCCSpawnを使ってみましょう。

 
 

  • 動きにイージングを適用してみましょう。

CCEaseInCCEaseOutCCEaseInOut
CCEaseExponentialInCCEaseExponentialOutCCEaseExponentialInOut
CCEaseSineInCCEaseSineOutCCEaseSineInOut


CCEaseElasticInCCEaseElasticOutCCEaseElasticInOut
CCEaseBounceInCCEaseBounceOutCCEaseBounceInOut
CCEaseBackInCCEaseBackOutCCEaseBackInOut