14
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Unity】カードを回転させてめくる動作を実装する

Last updated at Posted at 2018-03-02

カードゲームといえば、裏になってるカードを捲って表にする動きを実装したいですよね。そんな時に使える方法を紹介します。
#概要

uGUIでもtransformを回転させればGameObjectを回転させられます。
そこで、カードのGameObjectを回転させて90度を越えたら画像を表面のSpriteに差し替えることで、カードが捲られたように見えるようになります。

#サンプル


	//カードのGameObjectにアタッチしたScriptに記述
	//右回転用
	public IEnumerator CardOpen ()
	{
		//カードを予め-180度回転させ裏面用の画像を表示する
		//裏面表示はコルーチン外で行っても良い
		//CanvasGroupでなくspriteのalpha値を操作しても良い
		transform.eulerAngles = new Vector3 (0, 180, 0);
		ReversedFace_CanvasGroup.alpha = 1f;

		float angle = -180f;
		float Speed = 300f;

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

		//裏面用の画像を非表示(表面が表示される)
		ReversedFace_CanvasGroup.alpha = 0f;

		//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);
	}

回転させる方法はぶっちゃけもっと良い書き方があると思いますが、大筋の方針としてはこれで良いかと思います。

#まとめ
1.カードのGameObjectを予め-180度回転させておき、裏面用画像を表示させる
2.ransform.eulerAnglesなどでGameObject回転させる
3.90度回転したら裏面用画像を非表示にする
4.そのまま180度回転させる

サンプルの動画

参考になった方はいいねお願いします。
それともっとこう書いた方がスマートだよ等あれば是非教えてください。

14
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?