裏返しができるカード

Question

前提・実現したいこと

こちらのサイトに、カードの裏返し方法が掲載されていますが、
ゲームオブジェクトの構造と、一部、スクリプトの意図がわかりません。
いいねをされている方が7人もいるのでおそらく理解できている方はいるのかと思いますが。
ご教示お願い致します。

発生している問題・エラーメッセージ

・どういう親子構造でこのゲームオブジェクトが成り立っているかわかりません。
・構造がわからない為、なぜこれで裏返しが実装できるかわかりません。
・最初に、180度に設定しておきながら、

transform.eulerAngles = new Vector3 (0, 180, 0);

次の処理では、

float angle = -180f;

に設定している理由がわかりません。
ゲームオブジェクトは、
「180 → -180 → -90 → 0」という流れで回転しているのでしょうか？
「-180 → -90 → 0」この流れは、コルーチンでアニメーションのように動いていることは想像できますが、
「180 → -180」は、瞬時に変わっていませんか？何か意味がありますか？

・裏面と表面の2枚のSpriteを用意していると考えましたが、
「Spriteを差し替える」とはどういうことかわかりません。

試したこと

CanvasGroupグループというコンポーネントがあることを知りました。
これは、Canvasにアタッチするコンポーネントみたいですが、Canvasに限らずともアタッチできるみたいなので、
今回は、親子構造のカードオブジェクトのルートオブジェクト辺りにアタッチさせて透明度を操作させているかもしれないと考えましたが、
やはり構造がわからないので、合っているかわかりません。

Answer 1

そもそもリンク先のソースコードと「画像を表面のSpriteに差し替える」という筆者の概要が別々の内容になっています。
特に理由が無いなら概要側の方を採用した方がいいです。オブジェクト１つで済むし。

• Imageオブジェクトに以下のスクリプト付ける（他オブジェクトは不要）
• ImageオブジェクトのRectTransformのRotation Yを-180にしておく
• 最初にImageに設定するSpriteは「裏面のスプライト」（-180度状態では左右反転するので注意）
• 「表面のスプライト」を何らかの形で指定しておく（今回はとりあえずインスペクタから指定）

    //表面用画像はとりあえずインスペクタで指定（変数名は雑）
    public Sprite omoteSprite;

    Image myImage;

    void Start () {
        myImage = GetComponent<Image>();
    }

    //右回転用
    public IEnumerator CardOpen ()
    {
        float Speed = 300f;
        float angle = -180f;

        //-90度を超えるまで回転
        while (angle < -90f) {
            angle += Speed * Time.deltaTime;
            transform.eulerAngles = new Vector3 (0, angle, 0);
            yield return null;
        }

        //画像差し替え
        myImage.sprite = omoteSprite;

        //0度まで回転
        while (angle < 0f) {
            angle += Speed * Time.deltaTime;
            transform.eulerAngles = new Vector3 (0, angle, 0);
            yield return null;
        }

        //綺麗に0度にならないことがあるため、補正
        transform.eulerAngles = new Vector3 (0, 0, 0);
    }

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ご教示いただいた内容で作成し、カードが裏返せる挙動が確認できました。
CanvasGroupも必要なく、透明にする必要もなかったのですね。
最初に-180度で裏面スプライトをImageにセット、-90度まで回転した時点でImageを表面スプライトに差し替え、0度まで回転、正確に角度を0度に補正というとてもシンプルな処理の流れでわかりやすかったです。
表面のスプライトは、プレハブのものを参照させましたが、Instantiateしなくても、Imageにセットして差し替えることができるというのも発見でした。
(全てのプレハブは参照だけでなく、Instantiateしないと使えないという勘違いをしていました。)
ありがとうございました。

Answer 2

#180°問題
元のソースコードがわりと冗長というか、無駄な部分が多くてわかりにくいですが…

transform.eulerAngles = new Vector3 (0, 180, 0);
(略)
 while (angle < -90f) {
            angle += Speed * Time.deltaTime;
            transform.eulerAngles = new Vector3 (0, angle, 0);

としているので、180という値はゲームに反映されずにすぐに-180にされていますね。
なので、このnew Vector3 (0, 180, 0)の代入は無意味ですね。無視しましょう。

ReversedFace_CanvasGroupについては、おそらくプロパティにCanvasGroupコンポーネントとして同名のものを持っており、その値を変化させている…のだと思います。かなり元の記事がわかりにくいので断言できかねます…

#親子構造問題

あくまで予想ですが、

カードオブジェクト←ここにスクリプトがついている
-カード裏面オブジェクト←ここにCanvasGroupがついている...?
-カード表面オブジェクト

という構造になっていると思います。というか、これ以上複雑にできない…
ただ、こうなると、何故カードを透明・不透明にする必要があるのかわからないので、また謎です…

#じゃあ結局どういう実装をすればいいのか
何故わざわざコルーチンで実装するのか謎ですが…
元ソースを見る限り、返り値nullなので、実行時間も保障されていません(つまり処理負荷によってめくる速度が変わる)

トランプなどで、捲るだけでいいのであれば元のソースコードで大丈夫です。
親子構造を前述のようにした後、安全性のために、

yield return null;

ではなく

yield return new WaitForSeconds(任意の時間);

を使った方がいいと思います。

#それだけじゃ足りないはず

カードゲームであれば、捲って終わりではなく、特殊エフェクトが発生したり、あるいは効果が終わったら墓地やバトルフィールドに移動したりといった複雑な制御が必要だと思います。

Unityであれば、Animation、Animatorコンポーネントを使いましょう。
Animatorは、オブジェクトに予め決まっている動作をさせ、それらを状態遷移を使って複数組み合わせることができる機能です。(例えば、手札から場に出す→効果を発動する→墓地へ移動する)
また、これらに組み合わせてメソッドを呼び出すこともできます。

詳しい使い方は
Unity初心者のためのアニメーションの基礎の基礎
https://qiita.com/yamachan360/items/38b76a67ee0faef7e6b0
や
【Unity】Animatorのアニメーション終了待ちをする方法
http://tsubakit1.hateblo.jp/entry/2016/02/11/021743

を参照してください

Comments

[sakura_hana]

概ね同意なのですが、一点だけ。

> 返り値nullなので、実行時間も保障されていません
yield return null; はUnityのコルーチンの特性上「１フレーム待つ」と同義なんで、動作時間自体は保証されてます。
（angleの計算でTime.deltaTimeが掛け算されてるので、90度回転する時間は「90/Speed」秒になる）

[yuto_onizakura]

あ、Time.deltaTimeを見落としてました‥

ありがとうございます‥

[退会済みユーザー]

ご回答ありがとうございます。
勉強になりました。
180度問題は意味ないということがわかってよかったです。