(この記事の使用環境: Unity5.5.0f3 Personal、Windows10)
UIのイメージを使って、画面に回転する薔薇の花付きのフレームを付けてみました。
動画はこんな感じ。
桜の花びらのイメージ素材は Flode illustration (フロデイラスト) 様よりお借りしました。
フレームのイメージ素材は 花のイラストなら『百花繚乱』/無料のフリー素材集 様よりお借りしました。
こんな感じで作りました。
スクリプトはこんな感じ。
今回は以上です。
UIのイメージを使って、画面に回転する薔薇の花付きのフレームを付けてみました。
動画はこんな感じ。
桜の花びらのイメージ素材は Flode illustration (フロデイラスト) 様よりお借りしました。
フレームのイメージ素材は 花のイラストなら『百花繚乱』/無料のフリー素材集 様よりお借りしました。
こんな感じで作りました。
- フレームのイメージUIをキャンバス全体にストレッチして配置する。
- 四すみに薔薇の花のイメージUIを配置。
- フレームのオブジェクトに各イメージ要素を動かすスクリプトをアタッチ。
- 薔薇の花は一定速度で回転する。
- フレームと薔薇の花は一定速度で透明度が変化する。
スクリプトはこんな感じ。
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; // --- UIキャンバス上のフレームと薔薇のイメージを動かす ---------------------------- public class ImageRotation : MonoBehaviour { public float rotationSpeed = 1f; // 薔薇の回転速度 public Image[] images; // 薔薇のイメージ(インスペクタから指定する) Image frameImage; // フレームのイメージ Color frameColor; // フレームの色 // --- 初期化 ---------------------------------------- private void Start () { frameImage = GetComponent<Image> (); frameColor = frameImage.color; // 薔薇のイメージの初期回転をバラバラにする(rectTransformを変更する) foreach (Image image in images) { image.rectTransform.Rotate (0, 0, Random.Range (0f, 360f)); } } // --- 更新処理 ---------------------------------------- private void Update () { // 透明度変更用のカラー変数 Color alpha = new Color (frameColor.r, frameColor.g, frameColor.b, Mathf.PingPong (Time.time / 5, 1f)); // 薔薇のイメージを一定速度で回転させる(rectTransformを変更する) foreach (Image image in images) { image.rectTransform.Rotate (0, 0, -rotationSpeed); image.color = alpha; // 透明度変更 } // フレームの色の透明度を変更する frameImage.color = alpha; } }
今回は以上です。
(管理情報: 3D_Test > 3D_Test01>Prefabs>FrameImage)
コメント