Unityで電光掲示板を作り、STYLYへアップロードする

2018年07月24日 2018年11月26日

Unity上で電光掲示板を作成し、STYLYへアップロードするまでの手順を解説していきます。 ※サンプルプロジェクトはこちらから：https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/Denkou

1 環境
2 空間にUIを配置
3 UIに動きをつける
4 テキストのクリッピング
5 アニメーションの調整 : テキストが外側から現れるようにする
6
7 STYLYへのアップロード

環境

Unityバージョンは以下をご覧ください
STYLY Plugin for Unity DOWNLOAD
STYLYプラグイン (https://styly.cc/download/?lang=ja)

空間にUIを配置

まず最初に、3D空間に浮かぶUIを作るまでの手順を解説します。

Canvas作成

まず最初に、Canvasを作成します。作成したCanvasは名前を変更してDenkouにします

UIを空間に配置する

CanvasのRenderModeをWorldSpaceにしますデフォルトだと画面に張り付くUIになってしまいますが、 CanvasのRenderModeをWorldSpaceにすることで空間に配置されるUIになります

UIのサイズ調整

サイズが大きすぎるのでDenkouのScale値をXYZそれぞれ0.01にします

UIの位置調整

Pos X = 0 Pos Y =0に設定します。 0以外の値が入っていると、STYLYへアップロードした際に実際の位置と表示の位置がズレる恐れがあります

Imageを作成

Imageの大きさ設定

ImageのWidth=500, Height=100に設定

Imageの位置設定

ImageのPosX=0, Pos=0に設定し、原点に合わせておきます。 0以外の値が入っていると、STYLYへアップロードした際に実際の位置と表示の位置がズレる恐れがあります

ImageのColorを黒にする

ImageのColorを黒くします。まずはImageのColorの部分をクリックします色のウィンドウが現れるので色を黒くします。ここまでを終えると、UIは以下のような見た目になります

Text作成

Textを作成し、Imageの中に入れます

Textの色の設定

TextのColorを白っぽい黄色にします

文章に合わせてTextが伸び縮みするようにする

ContentSizeFitterを追加し、Vertical/HorizontalをそれぞれPreferred Sizeに設定範囲外にはみ出たテキストは通常は表示されませんが、 ContentSizeFitterを付けることによってテキストに合わせて範囲を調整してくれるようになります。

Textを左寄せにする

TextのAnchorを(Middle-Left)に設定し、Pivot X = 0に設定します。位置を調整するため、PosX=0　PosY = 0 にします。 AnchorとPivotをこのように設定することで、テキストが左寄せ(左から始まり右へ伸びていく)になります

Textを大きくする

Textが小さすぎるので、TextのScaleをX=4, Y=4, Z=4に設定し、４倍の大きさにします。

文章を入れる

今回は次のテキストを入れます・寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝るところに住むところやぶら小路のぶら小路パイポパイポパイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナーの長久命の長助

フォントの設定

TextのFontがAriralになっているので、別のフォントに置き換えます。今回はフリーのフォントNotoSansCJKjp-Regularを設定しました。

フォントを設定する理由

Unityのデフォルトのフォントデータには日本語が含まれていないため、ブラウザ上で日本語を表示できないという不具合があります。そのため、日本語に対応したフォントデータを自分で用意する必要があります。

UIに動きをつける

UIの動き(アニメーション)をつくるまでの手順を解説します。

Animationウィンドウを開く

メニューのWindows -> Animationをクリック Animationウィンドウが出現します。

アニメーションデータの作成

HierarchyウィンドウでDenkouを選択している状態でAnimationウィンドウのCreateボタンを押します。 Animation作成ウィンドウが出るので、Denkouという名前にして保存します。 Animation関連データが作成されます。

録画モードにする

Animationウィンドウの赤い丸ポチをクリックし、録画モードを開始します。録画状態になると以下のようにウィンドウが赤くなります。

Textの位置を登録

今回はTextを左方向へ移動させるようにアニメーションさせます。録画状態でテキストのPosXを右クリックし、AddKeyを選択します。 AddKeyをクリックするとAnimationウィンドウにキーが追加されます。

Text位置をアニメーションで変化させる

アニメーションの設定

フレーム数 = 600でのPosX = -10000を設定します。このように設定することで、PosX = 0にあったTextが600フレームかけて PosX = -10000まで移動するようになります。

アニメーションの確認

再生ボタンを押すとアニメーションが確認できます。

アニメーションのカーブをまっすぐにする

アニメーションカーブは最初は曲線

アニメーションのキーを追加時、デフォルトでは曲線になっています。今回はこのカーブを直線にしたいと思います。

曲線にする

アニメーションキーを二つ同時に選択した状態で、 BothTangent->Linear を選びます。直線になります。

テキストのクリッピング

最後に、テキストをクリッピングして黒い板の外側にはみ出た部分のテキストを非表示にしたいと思います今回はImageの中にあるテキストをImageでクリッピングします。

Imageを選択し、Maskを追加

Imageをクリックして選択し、AddComponentボタンをクリックします。 Maskを選択します。 Maskコンポーネントを追加すると、テキストがクリッピングされ、黒い板の外側にあるテキストが非表示になります。

再生すると電光掲示板の完成

アニメーションの調整 : テキストが外側から現れるようにする

現在、テキストがx=0から始まっているため、アニメーションループ時にテキストがいきなり出てきてしまうという不自然なものになっています。アニメーションを修正し、テキストが板の外から入ってくるようにします。

Animationウィンドウを開く

メニューのWindows -> Animationをクリック

xの修正

白い線を0秒の位置に合わせた状態で、x=1000を設定します。

完成

アニメーションを再生すると、テキストが画面の外から現れるようになります。

STYLYへのアップロード

作成した電光提示版をSTYLYへアップロードする手順を解説します。

DenkouのLayer変更

LayerがUIになっているので、Defaultへ変更します Layerクリックします Defaultを選択しますウィンドウが出てくるので、「Yes Change Children」ボタンを選択します STYLYへアップロードする場合、レイヤーをDefaultに設定しておく必要があります。

UIのPrefab化

DenkouをクリックしたままProjectウィンドウへドラッグ＆ドロップします。

ドラッグ＆ドロップするとPrefabが作成されます

PrefabをSTYLYへアップロードする

Prefabを右クリックして、STYLY/Upload Prefab to STYLYを選択するとアップロードが始まります。 Fontデータなどの重いデータが使われている場合、アップロードに時間がかかります。気長に待ちましょう。 Upload succeededと出ればアップロード完了です。

アップロードしたデータをSTYLY上で確認する

styly へアクセスし、STYLY Editorを開きます。 Asset->3D Models->My Modelsを見ると、先ほどアップロードしたDenkouがあります選択するとDenkouを配置できます。サンプルプロジェクトはこちらから：https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/Denkou