LoginSignup
1
2

More than 3 years have passed since last update.

パニシング:グレイレイヴンのUI設定が好き

Last updated at Posted at 2020-12-04

はじめに

みなさん、「パニシング:グレイレイヴン」はもうプレイしましたでしょうか?

私は崩壊3rd推しだったので、もちろん注目していました。

皆さんも是非プレイしましょう!!!!

公式サイトはこちらです!
https://grayraven.jp/ (『パニシング:グレイレイヴン』公式サイト)

image.png

満を持して今日の正午にサービスが開始したこのゲームですが、設定の中のある項目に驚きました。

それがこちらです↓
ご覧ください。

iOS の画像.gif

はーーー天才!

と、言うわけで、コレを作ってみましょう。

作り方

分からないけど、どうせUnityを使ってるのでUnityで作成します。

シーン

まず、シーンを用意します。空で良いです。
image.png

何もありません。
ここに、Canvasを生成しましょう。
image.png

そしてその中にImageを投入します。
アンカーは縦横ともにストレッチにしておきます。
image.png

コレが背景になりました。
image.png

そうしたらまずは適当に右側についてくるモノを生成しましょう。
こんな感じです。
image.png

ヒエラルキーはこんな感じ。

LeftSideとRightSideに項目を分け、その二つのアンカーも縦横をストレッチにします。
image.png

image.png

そしてその項目のアンカーを下記のように設定します。
image.png
image.png

後はスクリプトを書くだけです。

スクリプト

UIPositionController.cs
using UnityEngine;
using UnityEngine.UI;

public class UIPositionController : MonoBehaviour
{
    public RectTransform leftTransform;
    public RectTransform rightTransform;
    public Slider slider;


    private void Update()
    {
        // スライダーの値を取得する。(0~1)
        float value = slider.value;

        // スライダーの値を元に位置を動かす。
        float move = 10;
        leftTransform.offsetMin = new Vector2(value * move, 0);
        rightTransform.offsetMax = new Vector2(value * move * -1, 0);
    }
}

適当なObjectにつけて(canvasに付けた)、インスペクターにしっかりと設定する。

image.png

そして実行すると見事成功です!!

iOS の画像_1.gif

端のボタンが押しづらい!!手が短くて届かない!!などの理由がある人にはありがたい設定ですね!

おしまい

1
2
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
1
2