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

この記事は、

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

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

 概要

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

 

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

AssetStore

紹介動画 

 www.youtube.com

ドキュメント

Gamestrap Unity Assets - UI, Editor Camera & Localization

 サンプルシーン

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

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

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

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

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

ゲーム用サンプルシーン

 

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

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

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

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

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

 

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

素材紹介シーン

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

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

素材

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

形状

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

アイコン

 

フォント

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

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

国旗素材

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

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

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

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

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

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

調整ウィンドウ表示

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

基本的な変更方法

一括色変更・選択

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

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

一括色変更・タグ指定

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

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

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

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

変更されます。

エフェクト

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

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

・Shadow ... 影

・Radial Gradient ... 円グラデーション？（値の指定がわからなかった）

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

・skew ... 変形（パースや傾き）

が指定できます。

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

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

色自動作成

Normal/Highlihted/Pressed/Dissabled等、

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

GamestrapUIでの色指定は、

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

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

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

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

今回は以上です。

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

 明日8/30の担当は、

COREVALE (@corevale_com) さん の

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

です。

宜しくお願い致します。

itch.ioにアプリ登録してみました

itch.ioとは

steamみたいなゲーム配信サイトです

Download the latest indie games - itch.io

開発者は無料で登録が出来、自由に値段を設定できます。

値段を無料にして寄付を受け付けることもできます。

登録した物

alpacatech.itch.io

NVIDIA FleXを利用した砂場遊びツールです。

マウスで砂を掘って遊びます。

（ゲームじゃなくてシミュレーターみたいな物なんですが）

WindowsのみでPCの要求スペック高めです。
（数年後のPCだと簡単に動く事を信じて先行アップ） 

youtu.be

登録方法

itch.coにフリーゲームを登録してみた。登録までの流れ/～飛竜翔の活動報告日記～

このサイト様を参考と

日本語翻訳を活用して埋めていきました。

寄付画面が出てこない

アカウント設定の寄付設定してませんでした。 

左が、itchが受け付けて後で受け取る
右が、直接受け取る
左の方お勧めされてたのでとりあえず左で。

登録結果

5時間後の結果です＞＜

半分以上が自分でクリックしてる。

何人かダウンロードしてもらえてました（たぶん）

寄付は自分で確認用のやつ。

メモ

せっかく作ったのに誰も見てくれないのは悲しい

対策と反省

itch

・スクリーンショットやアイコンはgifアニメでも表示できるのでgif作成して登録。

・アメリカとの時差は13時間（今回深夜にアップした）

twitter動画ツイート

twitterは流れが速いので、動画の開始3秒で見るか見ないか判断される感じです。

ので、

・最初数秒はインパクトのあるシーンをもってくる。

・サムネ（最初のフレーム）は、見てわかるもの。

→YouTubeの動画そのまま持ってきたのでフェードインの黒画面になってしまってた

・タグつける

・月末は避ける？
→パケット死んでて動画見れない（自分）

最後に

とりあえずitch.ioデビュー出来ました。うれしい。

次はスマホアプリデビューします。

【Amazon.co.jp 限定】サントリー 南アルプスの天然水 2L×9本

【Unity】Camera.mainにアクセスしようとすると例外が発生する

例外が発生

NullReferenceException: Object reference not set to an instance of an object
PlayerTest.Update () (at Assets/Game/PlayerTest.cs:32)

ソース

var cameraForward = Camera.main.transform.forward;

Camera.mainにアクセスしていました。

原因

カメラのTagがUntagged

tagをMainCameraに変更

Camera.mainアクセスが問題なくなりました。

【Unity】PC版作成時のアイコンやスプラッシュスクリーンの設定

PC版を作成した際のバナーやアイコンとかの設定メモ

概要

スプラッシュスクリーンは、このような起動時のダイアログ画面です。

そこで表示されるバナー解像度等の情報がなかったので調べた＆書きました。

 設定場所

アイコンやバナーは以下の場所を設定する必要があります。

メニューの

Edit->Project Settings->Player

モジュールのアイコン

このようなexeのアイコンです。

Default Iconを設定します。

解像度別は、Iconタブで確認できます。

起動時のダイアログ

このような起動時の解像度やInputの設定変更するダイアログです。

バナー設定と解像度

SplashImage→

Application Config Dialog Banner（バージョンによってはConfig Dialog Banner）

です。

 バナーの解像度は432x163がフィットするらしいです。

 (Mac版未確認)

バナーが汚くならない為の対応

そのままの設定の場合、引き延ばされたり圧縮で劣化して表示されます。

設定を変更します。

TextureType  ... Sprite2DでNPOT（2のべき乗拡大を廃止）

Compression ... None（非圧縮）

※実際に1ドット間隔のグリッド画像を432x163で表示してみました。

 引き延ばされることもなくきれいに表示されています。

たぶんこれであってる。

起動時にダイアログを表示したくない

もしダイアログを表示したくなければ

Display Resolution Dialog を 変更します。

Disabled (無効)

Enabled (有効)

Hidden by Default (デフォルトで非表示。起動時に Alt キーを長押しした場合にのみダイアログが表示される

非表示時の解像度は、他の設定を変更します。

スタンドアロンのプレイヤー設定 - Unity マニュアル

docs.unity3d.com

起動時のロゴ

Logosで設定。

アニメーションの時間設定や色を指定できます。

[Preview]ボタンで確認できます

参考

公式の設定マニュアル version 2018.1

docs.unity3d.com

解像度について

what is the config dialog banner splash image size - Unity Answers

【Unity】using System.Windows.Formsを利用する（Windowsモジュール限定）

概要

UnityでWindowsのフォームやダイアログを利用する場合、

using System.Windows.Forms;

を宣言すると利用できます。

エラー

そのまま宣言しても、

The type or namespace name `Windows' does not exist in the namespace `System'. Are you missing an assembly reference?

というエラーが出ます。

System.Windows.Formsを利用するには

１．Api Compatibility Levelを .Net 2.0にする

メニューのEdit -> Project Settings -> Player -> Other Settings

Api Compatibility Levelを .Net 2.0にします（Subsetじゃないほう）

2.PluginsフォルダにSystem.Windows.Forms.dllをコピー

AssetsフォルダにPluginsフォルダを生成します。

C:\Program Files\Unity\Editor\Data\Mono\lib\mono\2.0

から、

System.Windows.Forms.dll
をコピーします。

必要であれば、
System.Drawing.dll
System.Data.dll

等もコピーします。

これで利用できます。

おまけ

ファイルを開くダイアログ

    var dlg = new OpenFileDialog();
    dlg.Filter = "json(*.json)|*.json|All files(*.*)|*.*";
    dlg.CheckFileExists = false;
    if (dlg.ShowDialog() == DialogResult.OK)
    {
        //  ...
        MessageBox.Show(dlg.FileName);
    }

ファイルを保存ダイアログ

    var dlg = new SaveFileDialog();
    dlg.Filter = "json(*.json)|*.json|All files(*.*)|*.*";
    dlg.CheckFileExists = false;
    if (dlg.ShowDialog() == DialogResult.OK)
    {
        //  ...
        MessageBox.Show(dlg.FileName);
    }

参考

設定

scribble/README.md at master · i-saint/scribble · GitHub

ファイルを開くダイアログ

[Unity] OpenFileDialogをWindowsアプリ(exe)で使う

【Unity】PackageManagerでUpdateが適応されない

 結論

根本的な理由がわからなかったので、

キャッシュ消して再インストールしました。

 （普通の再インストールでは駄目だった）

概要

共同で作成しているプロジェクトで、

自分の所だけPostprocessing関係で例外が出まくる。

PackageManager確認したら最新じゃなかったので

最新版にUpdateしようと 

Updateボタンを押しても反映されませんでした。(2.0.7にならない)

jsonファイル等を触ってみたり色々試したけど解決できませんでした。

ネットにも情報がなかったりと解決策が見つからなかったので、

再インストールすることにしました。

（5.XX時代から上書きインストールを重ねていたフォルダ）

再インストール

普通にインストールしなおしだと解決しなかったので、

色々綺麗にしてインストールしなおしました。

手順

アンインストール以外にキャッシュ消したりしているので自己責任でお願いします。

アンインストール

Assetのキャッシュデータを削除

C:\Users\[USER_NAME]\AppData\Roaming\Unity\
C:\Users\[USER_NAME]\AppData\Local\Unity\

を削除（念のためリネーム）

再インストール

インストーラーでインストール。

インストール後

2.0.7になっていました。

【Unity】Unity1Weekに参加しました【ゆによんく】

１週間でゲーム作るジャム、unity1weekに参加しました。

Unity 1週間ゲームジャム | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

1週間でテーマに合わせたゲームを作るイベントです。

 月曜日にテーマ発表、日曜20:00に一斉公開。

前回は、体調不良（眼が凄いことになってた）ので断念。

今回は何とか参加できました。

今回のテーマは、「ギリギリ」です。

作ったもの 

画面はこんな感じ。

#unity1week 進捗。おこづかいギリギリの範囲でカスタマイズしてタイム競うやつ作ってます。
肝心のお店画面まだです。 pic.twitter.com/V4cmrV1MFu

— すし (@mamesiva64) 2018年6月8日

ここでプレイできます（PCのみ）

ゆによんく | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

動機

定期的にミニ四駆作りたい衝動がでるのですが、走らせるスペースがありません。

「せや、Unityで作ったらええんや。」

「ギリギリなんてこじつけや。」「わいはこれやりたいんや！」

ということで作り始めました。

作成時間はあんまり取れる予定なかったのですが、

プロトタイプはすぐにできたのでGO。

プロトタイプはすぐ作れた。wheelcoliderとprobuilder優秀すぎる。
物理の数値あんま理解してないけど。 pic.twitter.com/P0EUBQkbbu

— すし (@mamesiva64) 2018年6月8日

地獄の始まり。 

作り方

車の動き

Rigidbodyで頑張ろうとしたら

WheelColliderという便利なものがありました。

docs.unity3d.com

簡単に説明すると、トルクに値を入れると

自動車のタイヤのように勝手に進んでくれるColliderです。 

コース

最近無料になったProBuilderです。

Unity2018だと標準で入っています。（PackageManagerから追加）

チュートリアル途中までしかやってないので、

そんなに詳しくないですがコース作るぐらいはいけました。

以下で、いろいろ書いています。

alpacatech.hateblo.jp

カーブはアーチを組み合わせて作りました。

あとは、プレハブ化してミニ四駆のコースを組み立てる感じ。

欠点

これだと、つなぎ目に壁ができるので、

接続面を消さないとめり込んだ時壁に当たります。

消しても横の面は連続していないので、

頂点をつなぎ合わせる対応も必要。

※2018/06/14 追記

つなぎ合わせ作成プログラムできました。たぶん。

とりあえずSTAGE05-08として追加しました。

パーツのデータベース

G2Uというアセットを使いました。

GoogleSpredSheetに書いたことそのままアクセスできるので便利です。

説明、値段、重さ、空気抵抗、その他色々

こんな感じ。

string,int,float等、型も指定できるので、プログラムで使うときすごい楽。

読み直しが削除挟むので面倒ぐらい（よくわかってない）

参考

www.asset-sale.net

その他のアセット

タイトルロゴのアニメーション

ポストエフェクト。

ブルームかけたり、ジャギジャギ消去

終えて

つらかった事 

・謎の当たり判定。

結果がころころ変わったり、WebGLでもちょっと違ったり。

物理エンジンと仲良くなりたい。

・WebGLが動かなかった。

定期的にWebGL実行はチェックしていたのですが、

5時間前ぐらいから動かなくなりました。

急にOutOfMemoryみたいなエラーがたくさん出て（3種類ぐらい）

これがなかったら間に合っていたのに、

結果3時間超えの遅刻。くやしい。

解決方法は、

プロジェクト作り直したり、OS再起動で治りました。

なぜ発生したのかよくわからないまま解決（たぶん再起動）

反省

・アイコンの説明一切ない、何をしたらいいのかわからない。

あまりの投げっぱなしな作りに、楽しめる人がいるのか不安になったのですが

楽しんでくださる人がいたので安心しました。

けど、もう少し説明が必要だと思います。

良かったこと

・積みアセットのG2Uを活躍できた。

・物理とか色々詳しくなれた。

今回もたくさん経験値もらえました。

あとTwitterでいいねたくさんもらえました。

unityroomでプレイしてくれた方々にも好評価。

ありがとうございます。うれしい。

今後作りこむ（スマホで出す）なら

・説明追加。[？]ボタンで、各アイコン説明とか。

・チュートリアル。ローラつけるぐらい。

・カメラ処理を作る。

・効果音をあてはめる

・BGM数種類

・ポストエフェクト

・パーツ追加、値調整

重量級ボディが息してない

・コースの増加

ジャンプ台とかループするやつ作りたい。

・お気に入りパーツ組み合わせ記憶

・ベストタイム時のパーツも記憶

・各コースに目標タイムを設ける

*お金周りは迷っています。

・コースを走らせる毎に賞金がもらえる。

クリアする意義、実質お金無制限。

・パーツは買い切り

・ランキングは、無制限と1000円までの2種類

縛りプレイヤーも楽しめる。

・ゆるよんくに改名？

ユニティや、ミニ四駆ガチ勢に怒られるの怖いｗ

と色々やること出てきます。

 最後に

大変でしたが、

いろいろ勉強になったし楽しかったです。 

今までの積み重ねでだんだん効率よく作れるようになっているのを実感できました。

やっててよかったunity1week

またやりたいです。

やっぱり欲しいミニ四駆