FC2ブログ
    08 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.» 10

    ハルシオンシステムの気ままBlog

    株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

     

    【ハルシオンブログ】Unity2Dでカードを回転させて裏から表にする方法。こんな感じでできますよん♪ 

    皆様御機嫌いかがでしょうか?
    こんにちは。坂内です。

    最近金がマジやばいんで受託して生きています。
    何をしてでも生きていきましょう!転職はする予定はないですが。

    さて、ちょっとしたUnityの小ネタを。

    裏のカードを回転して表にする方法。
    ゲームとかでたまにカード使ったりしますよね。

    こんな感じで。



    3Dなら簡単だと思うんですが、2Dでやるとするとカード(ImageやSpriteRenderer)に裏・表という概念がないため、「裏返しする」といった事はできません。

    では、どうやるのかというと、
    ①カードを90度回転
    ②カードの絵を表の絵(スーツとか絵が描いてる方ね)に変更
    ③カードを90度戻す
    この一連の流れをすると、上の動画みたいにカードが裏返ったように見えます。

    それでは実際のコードとかを書いていきますね。

    ResourceフォルダにCardsというフォルダを作成し、そこにトランプの表の絵を置いておきます。
    (Resourceフォルダはあんまり使わない方がいいらしいですが・・・)




    コードはこちら。

    【CardTest.cs】
    using UnityEngine;
    using UnityEngine.UI;
    using DG.Tweening;

    public class CardTest : MonoBehaviour {

    public Image imgCard;

    string[] suits = {"c","d","h","s"};

    public void OpenCard() {
    string card;
    // スーツ
    card = suits[Random.Range(0,suits.Length)];
    // No
    card += Random.Range(1,14).ToString("00");

    imgCard.transform.DOLocalRotate(new Vector3(0, 90, 0), 0.6f)
    .SetEase(Ease.Linear).OnComplete(() => ChangeCard(card));
    }

    void ChangeCard(string cardNo) {
    imgCard.sprite = Resources.Load<Sprite>("Cards/" + cardNo);
    imgCard.transform.DOLocalRotate(new Vector3(0, 0, 0), 0.6f).SetEase(Ease.Linear);
    }
    }


    こんな感じで簡単にできますので、是非やってみてください!

    ということで、小ネタでしたが、今日のところはこんな感じでおさらばです。あでゅ~ノシ

    Category: 開発日記(Unity)

    tb 0 : cm 2   

    コメント

    個人的にはUIとかだと2Dだけで考えたいんで、
    Y軸中心に回すよりはX軸方向のScaleで表現したほうが好きです

    しろくろ #- | URL | 2018/08/20 12:04 [edit]

    Re: タイトルなし

    > 個人的にはUIとかだと2Dだけで考えたいんで、
    > Y軸中心に回すよりはX軸方向のScaleで表現したほうが好きです

    なるほどなるほど。
    それでも全然いけますね!

    株式会社ハルシオンシステム #- | URL | 2018/08/20 12:07 [edit]

    コメントの投稿

    Secret

    トラックバック

    トラックバックURL
    →http://halcyonsystemblog.jp/tb.php/529-48af9a73
    この記事にトラックバックする(FC2ブログユーザー)