Alpaca Tech Blog

ゲーム作る系 草食動物の備忘録

【Unity】GamestrapUIで簡単UI作成【アドカレ2018】

この記事は、

Unity アセット真夏のアドベントカレンダー 2018 Summer!

8/29(wed) イベントの記事です。

 

 概要

GamestrapUIは、GUI素材集とスクリプトを合わせたアセットです。

 f:id:alpacatech:20180816181245p:plain

 素材だけでなくツールもついているので色々見ていきます。

 

AssetStore

 

紹介動画 

 www.youtube.com

ドキュメント

Gamestrap Unity Assets - UI, Editor Camera & Localization

 

 サンプルシーン

とりあえずサンプルシーンを見てみます

13種類のサンプルレイアウト

f:id:alpacatech:20180816190154g:plain

*1秒ごとにシーンが変わります(gifアニメ) 

一枚絵でなく配置された物です。

グラデーションの背景、ボタンは画像でなくスクリプトで表現されています。

  

ゲーム用サンプルシーン

 f:id:alpacatech:20180828151947g:plain

タイトル、設定、ゲームの一連の流れサンプルです。

フェードインアウトや外部サイトのリンクも対応しています。

設定の音声設定はシーンまたいで保存されていない&音声制御していないので別途必要です。

 

複数のシーンを切り替えしているのでシーンを追加する必要があります。

f:id:alpacatech:20180828152147p:plain

 

リアルタイムで見た目変更

 f:id:alpacatech:20180828170054g:plain

 ツール内でなく実行中にパターン変更できるようです。

素材紹介シーン

f:id:alpacatech:20180816190157g:plain

*1秒ごとにシーンが変わります(gifアニメ)  

シーン内に含まれない素材も多数あります。

 

 

 

素材

サンプルシーン以外にもたくさんありました。

形状

f:id:alpacatech:20180828153807p:plain

f:id:alpacatech:20180828153843p:plain

 他にも線の太さの違う円等があります

 

アイコン

f:id:alpacatech:20180828153741p:plain f:id:alpacatech:20180828154034p:plain

フォント

一部フォントは太さ違いも存在します。

海外製なので日本語未対応です。 

f:id:alpacatech:20180816190204p:plain

国旗素材

f:id:alpacatech:20180828153658p:plain

 

メニューから配色済みUIパーツ生成

f:id:alpacatech:20180828155054p:plain

メニューに配色済みGamestrapUIのUIパーツが登録されておりすぐに作れます。

標準UIにないアイコンボタンパターンなどもあります。

 

 

配色、エフェクト一括変更機能

このアセットの売りの一つです。

簡単にUIの配色やエフェクトを変更できます。

調整ウィンドウ表示

メニュー→Window→Gamestrap UI Kit で設定ウィンドウが出ます。

f:id:alpacatech:20180828160002p:plain

 

基本的な変更方法

一括色変更・選択

f:id:alpacatech:20180828163427g:plain

Hierarchyのオブジェクトを選択して、

色を選択してSelectedで一括変更。

  

一括色変更・タグ指定

ウィンドウのColorDetailsのTagとオブジェクトのタグが同じ

オブジェクトは、Tagボタンを押すと一括変更されます。

f:id:alpacatech:20180828162458g:plain

 

 

これらは、動画じゃ説明できてないのですが、

単色だけでなく、ボタン等に利用される複数種類(Normal/Highlighted/Pressed...)も

変更されます。

 

エフェクト

色だけでなくエフェクトも指定できます。

f:id:alpacatech:20180828165043g:plain

・Gradient ... グラデーション

・Shadow ... 影

・Radial Gradient ... 円グラデーション?(値の指定がわからなかった)

・mirror ... ミラー。水面に映ったような。FF5のタイトルのようなのもできそう

・skew ... 変形(パースや傾き)

が指定できます。

注意:適応する順番によってかかり方が変わるので注意

(Shadow→Gradientの順番だとグラデーションがかからなかった)

 

色自動作成

Normal/Highlihted/Pressed/Dissabled等、

複数ある色を指定するのは大変です。

 

GamestrapUIでの色指定は、

・あらかじめ準備された色や

f:id:alpacatech:20180828165747g:plain

 

・パターン生成から選べます

f:id:alpacatech:20180828165805g:plain

 ↑ベースの水色から様々なパターンで色が生成される。

 

 

 

他にもフォント一括指定等、機能はありそうですが

今回は以上です。

 

 

素材集としても配色ツールとしても優秀なアセットだと思います。

 

 

 

 

 明日8/30の担当は、

COREVALE (@corevale_com) さん の

First Person Exploration Kit を使って脱出ゲーム制作

です。

宜しくお願い致します。