【Unity】ゲーム内でパネルサイズを動的に変化させる

あらゆる端末の画面比率に対応するには、canvasでいろいろ設定すると思うのですが、それに限界を感じた時に、微調整はユーザーに委ねてしまおうと思いました。

 

準備

canvasやpanel、sliderを用意します。

スクリプトの作成

基準値になるスクリーンのアスペクト比を取得するスクリプトを作成します。

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

public class AspectCheckerController : MonoBehaviour
{
   public float widthScreenSize;
   public float heightScreenSize;
   public float aspectRatio;

   public void CalculateAspectRatio()
    {
        // カメラを取得
        Camera cameraToUse = Camera.main; // メインカメラを指定
        //任意のカメラを指定するならSerializeField

        widthScreenSize = Screen.width;
        heightScreenSize = Screen.height;
        // カメラのアスペクト比を計算
        aspectRatio = (float)Screen.width / Screen.height;
    }
}

これを、先ほどの空のゲームオブジェクト（画像のAspectChecker）にアタッチします。

スライダーで調整するためのスクリプトを作成

下記の通り。

using UnityEngine;
using UnityEngine.UI;

public class PanelSizeController : MonoBehaviour
{
    AspectCheckerController aspectCheckerController;
    [SerializeField] GameObject AspectChecker;
   [SerializeField] Slider slider;

    GameObject selfObject;
    string selfObjectName;//この辺はなくてもいい
    RectTransform selfObjectRect;
    float sliderMin;
    float sliderMax;

    // Start is called before the first frame update
    void Start()
    {
        aspectCheckerController = AspectChecker.GetComponent<AspectCheckerController>();
        
        selfObject = gameObject;
        selfObjectName = gameObject.name;//この辺はなくてもいい
        selfObjectRect = selfObject.GetComponent<RectTransform>();
        sliderMax = selfObjectRect.rect.height;
        sliderMin = selfObjectRect.rect.height * (float)0.5;
        slider.minValue = sliderMin;
        slider.maxValue = sliderMax;
        
        aspectCheckerController.CalculateAspectRatio();
    }


    void Update()
    {
            selfObjectRect.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical,slider.value);             selfObjectRect.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal,slider.value * aspectCheckerController.aspectRatio);
            Debug.Log("ScreenSize: " + selfObjectRect.rect.width + "x" + selfObjectRect.rect.height );

    }
}

このスクリプトを、リサイズしたいパネル等にアタッチするだけ。

他にも色々やり方あると思うし、果たして有効性があるのか、まだわからないのですが、色々使えそうです。

【Unity初心者向け】スクロール式選択肢を自作する

ドロップダウンじゃなくてスマホのスクロール式の選択肢を作りたかったので試したら簡単にできた。

 

1.ScrollViewを配置する

横スクロール(Horizontal)は使わないのでOFF

縦スクロールを使うが、UIは不要なので縦スクロールバーのサイズを0にしてつぶす。

使わない横スクロールも、バー自体を削除すると問題起きそうなので私は0にして隠してます。

Viewportの高さ設定をして、Contentを合わせて修正

Viewport　→ 実際に見える範囲

Content　→ スクロールして見せたいオブジェクト全範囲

なので、

Viewportの高さを基準にして他の高さも合わせます。

選択肢三つならContentの高さはViewportの高さx3のサイズ。

Contentに配置するTextの高さも、Viewportの高さとイコールにします。

ContentにVertical Layout Groupを追加

パディングは全て0に。

 

スクロールの動きを選択肢の個数に合わせてステップさせる

画像の通り。

ぬるぬる動いていたスクロールが、ここの数字の数を1以上にすると、その数だけカクカク動きます。

 

スクリプトを作成

以下の通り。短いコードです。

using UnityEngine;
using UnityEngine.UI;

public class ScrollSample : MonoBehaviour
{
    public Scrollbar scrollbar;//publicじゃなくても良い
    public Text Number;//動的に選択肢を区別できてるか確認用のテキストを配置
   
    void Start()
    {//this.gameObjectで、アタッチ元のゲームオブジェクトを指定できます。
      GameObject obj = this.gameObject;
      scrollbar =  obj.GetComponent<Scrollbar>();
    }

    void Update()
    {//swtichでも
     if(scrollbar.value > 0.251f && scrollbar.value < 0.750f){Number.text = "2";}
     else if (scrollbar.value < 0.250f){Number.text = "3";}
     else if (scrollbar.value > 0.751f){Number.text = "1";}        
    }

}

このスクリプトをVerticalのスクロールバーにアタッチ。

新たにゲームオブジェクトを作成して、インスペクターから指定しても良いです。

複数のスクロールバーを作るなら（冒頭のサンプルのように2つ以上）一つスクリプトを作ってそれぞれのスクロールバーにアタッチします。

これで完成！簡単ですね

選択肢が増えると、Scrollbar.valueの範囲ももちろん変わってきます。

【Unity】URLで画像取得して複数のImageを一括変換

簡単にゲームオブジェクトのImageをURLから引っ張ってくる方法

1.画像をサーバーにアップロード

3つの画像をサーバーにある同じディレクトリにアップロードします。

ban01.png　という名前です。

ban02.png　という名前です。

ban03.png　という名前です。

同じディレクトリにアップロードしたので、URLがそれぞれ 『 https://~~~/ban01.png 』というように末尾のファイル名だけ違う状態になる。

2.ファイル名と同じ名前のゲームオブジェクトを作成

3.スクリプトでURLから画像を取得してspriteに変換する

以下のコード

using System;
using System.Collections;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;

public class BannerImageLoadController : MonoBehaviour
{
private Sprite banner01;
private String objectName;

void Start() {
        objectName = this.name;
        StartCoroutine(GetTexture());
    }
 
    IEnumerator GetTexture() {
        UnityWebRequest www = UnityWebRequestTexture.GetTexture("https://<YOUR SERVER>/img/"+objectName+".png");
        yield return www.SendWebRequest();

        if (www.result != UnityWebRequest.Result.Success) {
            Debug.Log("ImageLoadERROR:"+www.error);
        }
        else {
            Texture2D tex =((DownloadHandlerTexture)www.downloadHandler).texture; 
            banner01 = Sprite.Create(tex , new Rect(0,0,tex.width,tex.height),Vector2.zero);
            var bancomponent = this.gameObject.GetComponent<Image>();
            bancomponent.sprite = banner01;
        }
    }
}

URLの末尾を、アタッチしてるゲームオブジェクト名を取得したstring変数にしてます。

このスクリプトを、それぞれのゲームオブジェクトにアタッチさせるだけ。

らくちんです

インプットフィールドで入力させて読み込ませるのも面白そう。

【初心者.NET MAUI】mac + VSCodeで.NET MAUI（Visual studio for mac終了）

japan.zdnet.com

残念ながら終了。VisualStudioCodeで.NET MAUIプロジェクトを扱うまでの備忘録です。

できましたが、知識がないので、やってはいけないこともやってる可能性大です。

【最初にやること : 拡張機能のインストール】

拡張機能を追加していきます。起動後、左側のアイコンから拡張機能を追加できるアイコンをクリック。

上記の四角いアイコン。

Visual Studio Codeは「拡張機能」から自分のニーズにあった機能を選んでカスタマイズしていくところから始まるみたいです。

上のバーから「.NET MAUI」とか「Unity」とか「C#」とか検索して、自分がvs for macで使っていたものに関する拡張機能をインストールしていきます。

間違いなくインストールしたい場合は、下記のページをご参考にしたほうが良いかも。

learn.microsoft.com

私はこういう説明文読むのが大の苦手かつ大嫌いなので自己判断でそれっぽいの選びました。記事書いてる今もまだ読んでません。

あとで失敗して後悔するのもまた勉強

ひととおりインストールしたら、新しいプロジェクトを作成してみます。

【新規プロジェクト作成 : エクスプローラーから】

新規プロジェクトを作成する方法は何通りかあります。

一番初心者がわかりやすいのが、左側のエクスプローラーアイコンから、新規作成する方法。

すると、上部にあるバーから、テンプレートを選べます。

Blazorなら一番上、そうでない普通のテンプレなら上から２番目。

選択すると、どこにプロジェクトフォルダを作るか選べるので、選択して、プロジェクト名を入力します。

ここまできたら、下のような画面が出ました。

要するに、このフォルダにあるファイルにアクセスしても安全ですか？と聞いているので、信頼しますをクリック。

これで、見慣れたディレクトリが出てくると思います。

【管理者として実行】

右下に、こんな警告が出てるので、

承諾を押すのですが、「管理者として実行してください」うんぬん出るので、

上のバーで下記を入力します。

画像の選択してるものでなく、下の「シェルコマンド：PATH内に'code'コマンドをインストールします」を選択

ターミナルでインストールが始まってます。

下部、日本語訳すると「受け入れられていないライセンスを確認しますか?」yes or no で入力待ちになっている状態です。

なので、'y'を押して続けます。

しばらく'y'を押して続けると、下記のような文章が出ます。

任意のキーを押すと閉じます。

【.NET MAUIプロジェクトを実行してみる】

ここまでやって、左にある実行ボタンを押します。

無事に起動されました。

Visual Studio for macを使い続けていた人にとっては未知の領域です。。。

【個人アプリ制作者のデザイン発注】結論：自作したほうが最終的には時短になる

デザインをやらない方であっても、ある程度きちんとしたアプリリリースを考えるのであれば、AdobeCCプランのサブスクリプション契約は必須じゃないのかな、と思います。

そうでなくても、最低限、ベクタ素材が作れるツールは用意しておきたいところです。

※ベクター素材がなんなのかを知りたい方はググってください。

プログラミングに長けてる方は、きっと

「この機能ならわざわざアセット買わずに自作した方が良いだろうに…」

と思うこと、多分きっとありますよね…？それと同じです。

理想の素材を探す手間よりも、さっと自分で作ってしまう方がより時短になり理想のものができあがるからです。

普段デザインやイラスト制作に慣れてる側からすると、

その素材ならイラレでサッと作れば早いのに、

わざわざリサイズするにも何するにもオンラインのツール使うなんて……

と思うことが多々あります。

この記事では、平面素材または3D素材等の見かけに関する素材をどう用意してくかについて、個人イラストレーター兼プログラミング初心者の立場から思ったことを書いておきます。

よくあるココ○ラとかで個人に依頼するのってどうなのか。

良いと思います。きちんと人と対話できる自信がある方ならおすすめです。

よくトラブルになるのは、契約外の微調整に対する業務依頼です。

ちょっとした加工を何度も依頼するのは、正直面倒がられると思います。

通常、イラストやデザインを発注する際の契約単位は時間等ではなく、枚数や個数です。

その後の色味やサイズの微調整は個人の感覚もありますが、個人のイラストレーターと契約するのであれば、完成品を一度納品した後に修正を依頼するのは、1~2回程度が限度で、対象の修正箇所も2〜3個が限度です。

そして、その完成品の解釈も人によって違いがあります。

イラストレーター側としての思考では、最後の工程まで終わり形になったもの、いわゆる初回の清書が完成したところが完成品になります。

そこから一度、二度の修正があると想定はしてますが、三度も続くと、「指示書になかったことを今更いわれても」という気持ちになっていきます。

何度も比率変えるならちゃんと決めてから頼んでよ！とか

カラーパターンを何度も変えて検証したいならそれくらいはそっちでやってよ！と私自身も良く思います。

そんな拘るなら個人に安く依頼しないできちんとデザイン事務所にお金払って依頼したら？とも思いますし、見切り発車で依頼して報酬も遅れるってどうなの？と思うこともありました…

お金を払うんだから、依頼者（客）が納得いくまでやり通すのが当たり前なんじゃないの？

と、思う方もいらっしゃると思います。その通りです。

ですが、全て発注者の好きなように受注者に依頼をしていいわけではありません。

見合った報酬でなければ、受注者も対応できませんし、報酬が低ければ勿論他の案件を優先します。

また、何度も修正を依頼するという時点で、依頼する時の説明が不十分な可能性が高いため、発注時点で説明に落ち度がなかったか改めて検証する必要が出てきます。

修正依頼が何度も続けば、それだけ報酬支払いのタイミングも遅れます。そうなるとクリエイター側としては見込んでいた売り上げをどんどん後に延ばすことになるので、そういった仕事は後回しになります。

そのため、契約合意の時点で、完成品というものがどの時点でのものなのか、ということと、報酬支払いのタイミングを必ず詳細に合わせていく必要があります。

清書を納品し、1回目の修正までがこの報酬の範囲内、それ以降の修正は別途報酬を支払う等、細かくすり合わせしたほうが良いと思います。

だからと言って、発注者が納得のいくものが納品されない限り、報酬は支払えません。などと書いたらきっと受注してくれる人はいないと思います。

そういったすり合わせやら、相手に依頼する内容を間違いなく伝えるように工夫するやら、相手からの反応を待つ時間やら、意外にとっっても手間がかかることがわかります。

そういったやりとりが上手くできる方であれば、個人への依頼は良い方法です。

より早く素材を得たいなら自作するスキルを得るのが早い

クリエイターに依頼すれば細かな内容を伝えるスキルがあれば、理想のものができあがりますが、時間とお金がかかります。

フリー素材ですと理想に遠くとも妥協ができるなら、すぐに素材が手に入ります。ただし、制作ツールがなければ微調整もできません。

そもそもフリー素材が出回ることで、そういったものを作るクリエイターの労力が見えにくくなるのもいかがと思います…プログラマーの方も同じくなのでは。

結論、私が思うに素材をその都度集めるところから始めるよりも、そのスキルを会得するのが一番の時短になるのでは、と思います。
ネットでも解説記事は豊富ですし、慣れれば簡単な図形制作なら本当に簡単です。

Adobeは高いとかボるとか言われるけど…

Adobe製品は確かに値段だけ見れば高いかもしれないですけれども、実はillustratorのみ使いたい方等へ単体ソフトのサブスクリプションプランもありますし、個人的には支出考えても全く高いと思いません。

というか毎月6,000円程度で動画制作もイラスト制作も写真加工もWebサイト制作もできるなら全く申し分無いと思います。それにどんな取引先とも対応できるようになりますので。個人的な趣味にかけるにしては高いでしょうけども。

高いと言われるのは、個人ユーザーが趣味で使おうとしているケースが多いからだと思っています。仕事で使うなら全く高くありません。すぐに回収できます。

それよりもAdobeに対して驚きだったのは十数年前まで「うちは海外で最終的に売り上げあげてるから消費税払う必要ないよ」ってごねてたらしい事です。。今はちゃんと納付してるみたいですが（あくまでも身内税理士さんから聞いた噂程度なので確証は無いです。消費税表示してたかどうかなんて気にしてなかったので。。）

Adobe製品って難しいんじゃないの？

大体の用語を覚えれば難しくないと思います。難しいのは、使い方よりも、どうデザインを構成していくかのデザイン力です。

そこをこだわるならプロにお願いしたほうが早いですし、そのためにプロがいます。

でも、簡単なUI素材をストックしておきたい場合や、よくあるアイコンを作っておきたい程度なら、これほど簡単で汎用性のあるツールはありません。

どのツールがあったほうが良いの？

まず、個人アプリ制作者向けに必須と思われるツールは以下の通りです。

・Illustrator

・Photoshop

・AfterEffects(宣伝用に動画用意したいなら)

この三つだけは、ある程度使用方法を勉強するのが良いと思います。

この3つのツールはAdobeCCプランを契約すれば利用可能です。AdobeCCの契約についてはググってください。

これらのツールの違いについてもわからない方はググってください。使う予定が無い方も、何かしらデジタルコンテンツを制作していく方であれば、ググって違いを理解しておいたほうが良いと思います。これらの違いは個人製作者にとっても常識レベルになりつつあると思います。

ただ本当に奥が深いので完全に「理解した！」と思って、色々とプロの方に何かしら注文をつけるときに言い方を間違えると恥ずかしい思いをするかもしれません。。プログラミングも同じですよね？

勉強するにはどこから始めればいい？

ネットで「初心者　イラレ」「初心者　フォトショ」等で検索すればすぐに出てきます。逆引き本が有用です。

逆引き本がおすすめの理由

上記リンクにある「Illstrator逆引きデザイン辞典」は私も昔よく読んでいた本です。本当にわかりやすいです。

逆引き本なら「手書き風のロゴを作るには」「格子状の二色のパターンを作るには」「カラーパターンを変えるには」等、作りたいものを索引から選んですぐに作り方を見れるからです。本業でないならすべての機能を覚える必要はありませんので。

 

結論：シンプルUIだけど細かい部分をこだわりたいなら自作が一番時短になる

シンプルなUIだけど細かい部分はこだわりたい、というなら自作スキルを身につけるのが一番の近道です。

そこからもっとこだわりたいのであれば、自作した簡単なデータを個人クリエイターに頼んで修正から業務を委託するのも良いと思います。

そういった案件であればココナラやクラウドワークスでも安価で引き受けてくれるクリエイターも多いと思います。すでにデータがあれば、完成品のイメージもつきやすいので。

＊何度も言いますが、契約前に細かく依頼内容と報酬内容をすり合わせましょう。一回きりの契約であっても対人契約です。

また、納期を守れないクリエイターさんも多々いらっしゃるようなのでそこは覚悟しておいたほうがよろしいかと思います。ただ、納期が守れなかった原因"だけ"を見ると、クリエイター側だけが原因なのではなく、依頼内容の説明不足で「思った以上に作業時間がかかってしまった」という原因もなきにしもあらずなので、やはり契約前にきちんと内容説明をしたほうが良いです。納期遅れは完全にクリエイターが悪いですけども。

以上、ご閲覧いただきありがとうございます。

最近アプリリリース直近なのと他業務で多忙のため記事を書いていなかったので雑記的な記事でした。

【Unity + AI】写真から手書きのメモを読み取りテキスト化する

いわゆるOCRをUnityでできないかと思って試しました。

【結論】

Microsoft Azure の Cognitive Servicesを使ってできました。

Azureのサービスを他でも個人的に使ってるからAzureに寄っただけで、多分別の方法でも色々あるとは思います。

【使用例】

たとえば、こんなフセンがデスクに貼られていたとします。

色々な種類の文字を入れたくて奇妙な伝言になってます

下記の方の動画を参考にしながらAPIを呼び出しました。

www.youtube.com

同じ方が公開されてるデモをGitHubからDLします。

UnityからRESTful APIを呼び出せるプロジェクトです。

github.com

DLしたプロジェクトを開くと、「RestClientAzureDemo」というSceneがあるのでそれを開きます。

それに、RestwebClientというオブジェクトにアタッチされたRestClientExample.csがあるので、情報が古くなってる部分をMicrosoftのサイトを参考に修正します。

learn.microsoft.com

例えば、ここを、

    private string baseUrl = "https://westcentralus.api.cognitive.microsoft.com/vision/v2.0/ocr?language=unk&detectOrientation=true";

こうします

"https://(ENDPOINT)/computervision/imageanalysis:analyze&api-version=2023-02-01-preview&features=read&language=ja"

あと、日本語を取得したいのでとりあえず今回はレガシーのTextを追加しておいて、

このプロジェクトだと、Responce.csでクラスを定義していて、その中のDataに結果が格納されるみたいなので、

using System.Collections.Generic;

namespace RestClient.Core.Models
{
    public class Response
    {
        public long StatusCode { get; set; }

        public string Error { get;set; }

        public string Data { get; set; }  

        public Dictionary<string, string> Headers {get; set;} 
    }
}

追加したテキストにResponce.Dataを入れるコードを追記します。

jpWordsCapture.text = response.Data;

このデモではデシリアライズできるようにクラスも定義されてるのですが、情報が古いので、今のと対応するクラスを作り直さないといけなさそうです。

今回はそこまでやらずにテキストに羅列するだけです。あとJsonの取り扱いが未だ慣れてない素人なので私

で、先ほどの手書きメモの写真をアップしてURLを指定しておきます。

起動を押すと、

あの殴り書きのメモでも、ちゃんと日本語が読み取れてます！！！

【答え合わせ】

こう書いてあります↓

お疲れ様です。

7/20　13:15頃

タナカ様（中田物産）

より入電有

ゴッドファーザーⅡの感想

お待ちのようです。

　　　　松ノ木

結果を見てみます。（みやすく改行しています。）

お疲れ様です。\n

7/20 13:15頃\n

タナカ様(中田物産)\n

より入電有\n

ゴッドファーザーⅡの感想\n

お待ちのようです。\n

松ノ木

一字一句間違ってませんでした！

改行コードもつけてくれてます、、

対話型AIに対して従来の分析と学習をするAIが話題にのぼらないですが触ってみたらめちゃくちゃ便利ですごいなぁと思いました。

私みたいな普段全くプログラミングに関係ない仕事してるど素人でもここまでできちゃうのがすごい。

【MAUI】イラレで作れる自作フォントで文字の間にアイコンを入れる！

2000年代のメールを見てるような懐かしさ 笑

Appに組み込めるフォントって少ないですよね。

あとアイコンをちまちま配置したりするのも面倒くさい。そして色々なところから素材をひっぱると統一感が出ない。

フォントを作れるサイトがあるから、それで絵文字を自作したらいいんじゃないか…？と思って試してみました。Unityでも使えそうよね。

フォントを自作できるサイト

www.calligraphr.com

まずはこちらにアカウント登録。英語ですが翻訳使うなりすれば大体わかります。

無料アカウントでは、サーバーに保存できるフォントは一つのみ。ただし完成してDLしてしまえば、サーバー上のデータは削除して新しいものを作れます。

有料でも月1000円程度、半年契約なら600円程度なので安いです。

シンプルなUIなのも良いです。

テンプレートの枠に合わせてフォントを描いてアップロードするだけで.otfと.ttf

がDLできるすごいサイト。

上部左の「Download Template」からテンプレをDLしましょう。

英語そのまんまなので説明不要かと思います

お好きな設定にしてDownloadします。

初めての場合は下の二つはチェックいれたほうが作りやすいと思います。

枠の中に補助線が入るのと、薄い色で下書き用のフォントがつきます。

あとでアップロードする際もPNGで問題ありませんので、あとは、お好きなように文字を作っていくだけ。

※テンプレはそのまま載せてしまうことになるので画像は載せません。。

ちなみに私はイラレで作っていたアイコンの線幅を若干調整して配置しただけです。

あと完全な黒一色で作りましょう。

その後、サイトに戻って上部の「MY FONTS」をクリック、

「Upload Template」をクリックして作成したpngをアップします。

そうすると、このようにいい感じに一文字ずつ分けてくれます。

若干、歪みがあるのは仕方ないですね。。

Edit Font Detailsをクリックすると文字の大きさや字間などを調整できるスライダーが表示されるのでおおまかな修正ができます。

metadataの編集は無料アカウントだとできないみたいです。

これで、Build Fontをクリックすれば、

DLできちゃいます。

あとはMAUIのフォントフォルダに入れるだけ。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DelegateMAUISample.MainPage">

    <ScrollView>
        <VerticalStackLayout Padding="5">
        <HorizontalStackLayout
            Spacing="0"
            Padding="30,8,5,30"
            VerticalOptions="Center">
                    <Label Text="文字と" FontFamily=""/><Label Text="3" FontSize="30"/>
                    <Label Text="文字の間に" FontFamily=""/><Label Text=":" FontSize="30"/>
                    <Label Text="アイコンが入るよ！" FontFamily=""/>
        </HorizontalStackLayout>
        <HorizontalStackLayout
            Spacing="0"
            Padding="30,8,5,30"
            VerticalOptions="Center">
                    <Button Text="1" Clicked="button3_Click" FontSize="34" Padding="-5" CornerRadius="20"/>
                    <Label Text="l" FontSize="30"/><Label Text="このボタンも矢印もFontだよ" FontFamily=""/>

        </HorizontalStackLayout>
            <HorizontalStackLayout
                Spacing="20"
                Padding="30,8,5,30"
                VerticalOptions="Center">
                <Label FontSize="50" Text="9" TextColor="Green" />
                <Label FontSize="50" Text="o" TextColor="Brown" />
                <Label FontSize="50" Text="6" TextColor="DarkCyan" />
                <Label FontSize="50" Text="'"/>
                <Label FontSize="50" Text=","/>
                <Label FontSize="50" Text="c" TextColor="WhiteSmoke" BackgroundColor="MediumSlateBlue" />

            </HorizontalStackLayout>
            </VerticalStackLayout>
    </ScrollView>

</ContentPage>

画像一枚も使ってません。※上のコードはfontfamilyをデフォルトで自作フォントに変えています。これだけ手軽なのに思った以上に高い再現率で驚きました。

しかもテキストだけだから軽量化も期待できます。

アイディア次第でなんでもできそうですよね。

オリジナルのロゴとかキャラクターのアイコンとかアプリ特有のアイコンをこれで作っても楽しそう。