🎮

Unity 〜UIをカスタマイズ

2025/03/11に公開

ほんとはFlutterで作りたいのだが

Flutterで『四次元年表ChronoMap』というウェブサイトを運営している。
せっかくのFlutterなので、モバイルアプリもつくっている。
でも、三次元空間内を一人称視点で移動したい
VRもやりたい、ということで、Unityも使っている。
最初はFlutterの本体に、一部Unityとか、
Unityメインで、FlutterのUIを活用、とか思っていたのだが、
いかんせん初心者ができるところから手をつけて育ててきたプロジェクトなので、
気がついたら、合体させるのがめんどうくさい状態になっていた。
しかも爺様が、
Unity部分まで取り込むとAWSの使用料が上がるよ、と脅すので、
ならもうしばらく、Unityはfirebaseのホスティングで無料運営していくか、
と、思っているのが、現状。

別々のウェブサイトだけど、ロゴぐらい揃えよう


これがUnityで最初に作ったトップページ(というか今もこのまま、ダサい)
これをどうにかしたい。
せめてタイトルは揃えよう。
でも、それだけのためにFontSetを導入する、というのはめんどうくさい。
Canvaで作って、背景除去して、イメージで貼る。
ついでにShadowをかけて、ちょっと浮かせる。

Buttonもどうにかしよう

まず立体的にしたい。
Flutterなら、ElevatedButtonで一発解決なのだが、
どうやらUnityにはそういうButtonがないらしい。
いや、ないわけはない。あっちこっちでいろんなButton見るもの。
そうか・・・みんなAssetStoreで買うのね(freeのも含めて)。
でも、そこまでしたいわけじゃない。
ほんの少し画面から浮き上がって、陰がついてて、
あ、ここ、押すのね、っていう感じにしたいだけ。
それから、宛名シールみたいな色もナントカしよう。
色についていえば、無段階でいろいろ試せるから、楽しい。

Flutterのサイトに飛ぶボタンもつけよう

こちらのロゴもCanvaで作った。
Imageの角丸がめんどうくさかったので(Flutterなら一瞬なのに)、
背景を除去した上で、Buttonに載せた。
Buttonはdefaultで角丸なんだよね。
こちらもshadowをかける。
それからリンクを張るScriptを書いて、くっつける。

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class AccdssWeb : MonoBehaviour
{
    public void clickPhoto() 
    {
        Application.OpenURL("https://app.laporte.academy/");

    }
}

うーん、ロゴの色がいまいちだけど

ともかくいったん、明日、これで、deployしよう。
おやすみなさい!

Discussion