原カバンは鞄のお店ではありません。

Unityを使ったゲーム制作のあれこれを綴っていきます。

【Unity】Unity提供アセット「UIWidget」を使ってみよう・・・と思った話

急に暑くなる

5月なのに30度以上の気温になるとか聞いてない。日差しも強いので車を運転していると顔だけが日焼けして鼻とか目の周りが真っ赤になってる皆さんこんにちは。顔を洗っているとヒリヒリして痛いです。

 

さて、当プロジェクトのゲームアプリ「Dull Things No Life」は残念ながらIndie Game FestivalのTop20に選出されなかった為、プレゼンテーション用の資料を作る必要もなくなり、不本意ながらもプロジェクト作業はこれで一段落となります。

 

なのでブログのネタも尽きた状態なのですが、何かしら書こうと色々探していたら、毎度お世話になっている「Unity AssetStoreまとめ」さんで面白そうなアセットが紹介されていました。

 

www.asset-sale.net

で、今回はそのアセットの導入をしてみたお話

 

UIWidgetとは

ここ最近、アプリ系界隈で話題に上がっているフレームワーク「Flutter」


スマホのOS(Android/iOS)に拠らない綺麗なアプリを素早く作るためのクロスプラットフォームSDKなんですが、Unityでそれに類似したワークフローでアプリのUIが作成できるアセットがこの「UIWidget」です。

 

この「UIWidget」の利点は"60fps以上の高効率でレンダリングできること"・・・らしく、Unity標準のuGUIでは重くなりがちだったUIアニメーションを、サクサク軽快に動作させることができる・・・みたいです。

 

ただ、UIWidgetで作成するUI(イメージやボタン)は標準のuGUIのようにEditor画面にてマウスで配置やサイズを変更することは出来ません。全てコーディングで実装する必要があります

 

またコーディング言語はC#を使用しますが、記述式はFlutterで使用するDart言語のような記述となるので、Flutterを使ったことがない方や、Dart言語とか触れたことがない方は最初戸惑って頭を抱える事になるかもしれません(実際、私がそうでした)

 

導入してみよう

「UIWidget」はアセットストアから無料でダウンロードすることができます。

 

アセット内にはSampleシーンが数多く含まれているので、インポート後にそれらを確認して「UIWidget」の色々な動作を確認することができます。

 

今回はSample/ReduxSampleにあるCounter/Appシーンを起動します。

f:id:Karvan:20190528215731p:plain

こんな感じのシーン。

 

実行すると、Addボタンをクリックする度に「Count」とかかれた文字の横の数字がカウントアップしていく簡単なUIとなっています。

 

f:id:Karvan:20190528220010g:plain


このウィンドウを示す赤枠や中央ボタンや「Count」とかかれた数字、これら全てがUIWidgetで実装されているUIです。

 

で、このシーンをHierarchyウィンドウで確認すると・・・

f:id:Karvan:20190528215929p:plain

 

Unity標準のuGUIならCanvas配下にButtonやらTextなどのUIオブジェクトが表示されているはずですが、Canvas配下にはPanelしか無いのがわかります。

 

PanelオブジェクトのInspectorを確認すると・・・

f:id:Karvan:20190528220144p:plain

 

こういう感じになっています。ここにもButton等のComponentはありません。


そう、画面上に表示されているButtonやらTextなどの配置やサイズの情報は全てPanelオブジェクトにアタッチされている「CounterAppSample.cs」の中に記述されているのです。

 

あ~、これは使いづらいわ~

・・・と、ここまで読んで思われた方もいるでしょう。サイズやら位置などの情報がInspectorで確認できなのは確かに使いづらい。

 

ただ、UIWidgetではUIWidgetで作ったUI専用のInspectorが用意されており、そちらでサイズ、位置の情報が確認することができます。

 

Window > UIWidgets > Inspectorを開くと、空白のウィンドウが開くのでその上部タブにある<Please Select>をクリック⇒UIWidgetで作ったUIを選択するとそのUIのいろいろな情報を表示することができます。
(事前にBuild Settings > Player Settings > Player のScripting Define Symbolsに「UIWidgets_DEBUG」を登録する必要があります)

 

f:id:Karvan:20190528220323p:plain

 

ここら辺の話は先程紹介した「Unity AssetStoreまとめ」さん方に詳しく書かれているので、そちらを参考にして下さい。

 

スクリプトでの実装

前述のように「UIWidget」ではUIを全てスクリプトで実装する必要があります。

 

UIの各部品(ButtonやText、イメージ等)はぞれぞれが「Widget」と言う単位で考えられ、このWidgetをツリーのように組み合わせて作ります。

 

今回のサンプルシーンでは赤枠の中にButtonとTextをWidgetとしてツリーのような入れ子にしてレイアウトを組み立てています。
これをソースコードで表すとこんな感じになります。

 

f:id:Karvan:20190528220456p:plain

赤枠(Container) の定義の中にButtonとTextがnewされて利用されおり、ButtonとText各プロパティをその中で記述し配置やサイズを実装します。

また、Button定義の中にはクリックしたときの処理も記述されていることが分かります。

 

難しいですか?そうですよね。

今回は単純なUIでの実装サンプルについての記事なので、これだけではピンと来ない方も多いと思います。


また、記述式も入れ子方式でこれまでとは違う感じなので慣れないと難しいでしょう。(私もそうだし)

 

ただ、既存で用意されているWidgetは豊富でサンプルもそろえられているので、これらを使いこなせば従来より少ないコード量で高速なUIを実装可能に・・・なるかもしれません。

 

また、サンプルシーンにはこんなものもあります。

f:id:Karvan:20190528220845g:plain

ゲーム空間にあるオブジェクトを名前で検索して、赤く色を変える

 

確かに学習コストの高いアセットですが、その分見返りも多いものが得られるアセットではないでしょうか。

 

 

 

◇プライバシーポリシー

●個人情報の利用目的

当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

●個人情報の第三者への開示

当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。

・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示、訂正、追加、削除、利用停止
ご本人からの個人データの開示、訂正、追加、削除、利用停止のご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

●免責事項

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

●プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。