(この記事の使用環境: Unity5.5.0f3 Personal、Windows10


UIのイメージを使って、画面に回転する薔薇の花付きのフレームを付けてみました。
SnapCrab_NoName_2017-3-17_21-54-24_No-00


動画はこんな感じ。




桜の花びらのイメージ素材は 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)