可視化情報学会ワークショップ
チュートリアル1:
Unityハンズオンセミナー お手軽ビジュアリゼーション講座
ユニティ・テクノロジーズ・ジャパン
安原 祐二

本チュートリアルはUnity2018.3がインストール済みのPCの持参が必要です参考：Unityのインストール・アカウント作成• Unity の動作要件（いずれも厳しい制約ではなく、2016年以降に入手した機器であれば問題ないはずです）• Windowの場合は Windows 7 SP1+ または Windows 8, Windows 10, いずれも 64-bit であること• Mac の場合は macOS 10.11以降（OS X El Capitan以降）• Unity 2018.3 のインストール方法• インストールは、Unity Hub というランチャーをインストールしてから Unity Hub 経由でインストールするのが推奨されます。
• 手順： https://docs.unity3d.com/ja/current/Manual/GettingStartedInstallingHub.html• Unityアカウント作成方法• 初めての利用にはUnity起動時にアカウントが必要です。基本的には画面に従うことで完了します。なお、アカウント作成画面は英語になります。
• 手順：https://docs.unity3d.com/ja/current/Manual/GettingStarted.html

サンプルプロジェクトのダウンロード• ブラウザから以下の github にアクセスし、ダウンロードしてください• https://github.com/dsedb/VisualizationWorkshopTutorial• 容量は１M程度です

サンプルプロジェクトの開始• Unity Hub を起動• 「開く」から先ほど入手したサンプルプロジェクトを指定

シーンのロード• Project ウインドウから Scenes を選択し、SampleScene をダブルクリック• Hierarchyウインドウの内容から Scene のロードが正しく行われていることを確認

実行• 画面上部の再生ボタンを押す• Gameウインドウにて動作確認

サンプルプロジェクトの内容• 北米の男の子のファーストネームの記録の年代ごとの推移を可視化• 北米のSocialSecurityのサイト https://www.ssa.gov/oact/babynames/index.html から引用
• CSVに変換したものを読み込んでいる

可視化対象データの内容

John

89950

William84881

James54056• 10年ごとにファイルを分離

George47651• 上位の名前と総数を列挙

Charles46656

Frank30967

Joseph26292

Henry24139

Robert24074

Thomas23750

Edward23133

Harry

22649

Walter18185

Arthur

16180

Fred

15602

Albert

14375

Samuel9129

Clarence

8760

Louis8275• 時系列にスカラ値を持つデータならなんでも可視化できる• 近代の国民総生産の推移• 世界史の国別人口推移など

フォルダー構成

フォルダー名Assets
Library
Logs
Packages
ProjectSettings
Temp
UnityPackageManager

SCMに登録
yes
nono
yes
yesno
yes

備考
ユーザが構成する内容のエントリーポイント
各種中間ファイルのキャッシュなど
動作ログ
インポートするパッケージの記述
設定などを保持一時ファイル。Unityを終了すると自動で消滅する
Unityが使用※SCMはgitなどを指し、登録しないものは .gitignoreなどで除外する

Assetsフォルダ以下の構成

フォルダー名Prefabs
ScenesScripts
StreamingAssets
TextMesh Pro
Textures予約名かnonono
yesnono

備考
プレハブを格納シーンを格納C#スクリプトを格納
ランタイムにファイルアクセスが可能
TextMesh Proにより作られるリソース
テクスチャを格納※予約名でないものは名前を変えても動作する

Assetsフォルダ以下の構成

Prefabs 以下のファイル
プレハブが格納されている
elem : 円のプレハブ
the_name : 名前のためのテキストのプレハブ

プレハブはUnityの用語で、似た構成の物体を複数生成する際の元になるもの。オブジェクト指向っぽく言えば「クラスオブジェクト」に相当する。ここを編集することは複製元の編集の意味になる。

Assetsフォルダ以下の構成

Scenes 以下のファイル
シーンが格納されている。
SampleScene : 今回使用するシーン

ヒエラルキーのタイトルに一致している。
登場しているオブジェクトのリストがヒエラルキー。
ヒエラルキーを保存したものがシーン。

シーンをダブルクリックすることで、シーンをロードできる。
何か実験したいときは New Scene から新しいシーンを作り、保存してからSampleScene をロードすると元に戻る。

Assetsフォルダ以下の構成

StreamingAssets 以下のファイル
CSVファイルが格納されている。UnityはビルドしてWindowsアプリやMacアプリを作成でき、その際に自由に読み込めるファイルをバンドル（同梱）することができる。
Streaming Assets フォルダの下にあるファイルはバンドルされる。

Assetsフォルダ以下の構成

Text Mesh Pro以下のファイル
TextMesh Pro というテキストレンダリングモジュールをインポートした際に生成される。
内容を知る必要にせまられることはない。

Assetsフォルダ以下の構成

Textures以下のファイル使用するテクスチャ（画像）が格納されている。
Prefabs/elem の Sprite Renderer で指定されている。
circle128 : 白く塗りつぶされた円Assetsフォルダ以下の構成

Packages以下のファイル
Unityのパッケージマネージャでパッケージをインポートすると生成されるファイル群が格納されている。
Package Manager UI
TextMesh Proがインポートされていることが確認できる。
内容を知る必要にせまられることはない。

シーンの構成
ポーズボタンで再生を止める

ヒエラルキーのオブジェクトをクリックするとシーンビュー上でハイライトされる

インスペクタで情報を確認できる

カメラをクリックした場合

シーンの構成

Main Camera
画面に表示するための仕組み
背景色などを変えられる
UI（テキストなど）を含まない設定になっている

シーンの構成

data_visualizer
マネージャ的な存在
DataVisualizer.cs に記述されたC#スクリプトを持つ
概念上のオブジェクトなのでTransform の Position, Rotationなどに意味はない

シーンの構成wall, wall (1), wall (2), wall (3)Box Collider 2D を保持することで壁を実現する。
ボールが外に逃げないように壁になっている

シーンの構成

Canvas
UIを管理する。UI要素を作成すると自動的に作成され、UI要素はこの下に格納される。
今回は文字表示がUI要素になっている

シーンの構成

EventSystem
UI要素を追加するとCanvasと同時に自動的に作成される。
機能としてはキー押し下げなどを扱うが、通常意識する必要はない

シーンの構成

John_M
プレハブの elem から生成されたオブジェクト。
インスペクタの中を elem と比較すると同じ構成になっているのがわかる。
John_M以下のオブジェクトはすべて、プレハブelemから生成されたもの。

elem プレハブのコンポーネント群
Inspector ウインドウの Open Prefab を押すとScene ウインドウおよび Hierarchy ウインドウが編集モードに入る

編集モードから復帰するにはこれらのボタン

elem プレハブのコンポーネント群

Transform
すべてのオブジェクトが持つ、オブジェクトの位置・回転を保持するelem プレハブのコンポーネント群

Sprite Renderer
二次元のオブジェクトを描画するコンポーネント。
Sprite : テクスチャ
Color : 色Filp : 反転
Material : 素材。シェーダを自作する場合はマテリアルの作成が必要などなど

elem プレハブのコンポーネント群

Circle Collider 2D
円形のコライダーコンポーネント。衝突判定用のエリア指定となる。
壁や浮力に反応する計算に使用される。

elem プレハブのコンポーネント群

Rigidbody 2D
剛体シミュレーションのコンポーネント。
質量などが定義される。動きに影響のあるDragなどの値を保持。

elem プレハブのコンポーネント群

Element (Script)
Element.cs を保持することを示す。

Unityのプログラム
詳細な解説はソースコードのコメントを参照のこと。

Unityのプログラム:DataVisualizer.cs

MonoBehaviourを継承

オブジェクトに追加するにはMonoBehaviourである必要がある。

Unityのプログラム:DataVisualizer.cs

オブジェクトを参照

public で宣言することで、インスペクタから他のオブジェクトを参照することができる。

Unityのプログラム:DataVisualizer.cs

特殊関数：Awake

AwakeはUnityによりオブジェクト生成直後（すなわち再生直後）に呼ばれる。
ここでは乱数のシードを設定。

Unityのプログラム:DataVisualizer.cs

特殊関数：Start

StartはUnityによりUpdateループ（後述）の直前に一度だけ呼ばれる。
ここではデータを読み込む。

Unityのプログラム:Data.cs

Data.cs

Unity固有の特徴はなく、一般的なC#プログラム。
CSVをパースしながら読み込む。

Unityのプログラム:Element.cs

Element.cs

ボールごとの動作を記述。

Unityのプログラム:Element.cs

特殊関数：Update

Unityにより毎フレーム（1/60秒周期などで）呼ばれる。

改造してみよう• 年代ごとに４秒待つところを短くしてみよう→DataVisualizer.csを修正• girls のデータを表示してみよう→Data.csを修正• 半径に値を入れているので面積比例に直してみよう→Element.csを修正• 動きを修正してみよう• 浮力をやめたらどうなる？
• 生成地点を画面中央にするには？
• 重力を無効にしたらどうなる？
• AddForceで引力を働かせてるコードを変えてみよう• Mathf.Lerpでボールが膨らむ遷移のコードを変えてみよう（遅くするなど）

改造してみよう

浮力を無効にするにはwater オブジェクトを削除すればよい。

削除すると元に戻せなくなると心配な場合
Inspectorでチェックを外すとそのオブジェクトが「存在しない」と同義になる。

改造してみよう

ボールの重力を無効にするには前述のプレハブの編集にてelemの編集画面にし、Gravity Scale を 0 にする。

本資料：
http://dsedb.sakura.ne.jp/doc/tutorial-yasuhara.pdf

補足資料：
http://dsedb.sakura.ne.jp/doc/tutorial-supplement-yasuhara.pdf

デモ動画：
https://youtu.be/Bj7sMynJS60

記事：
https://qiita.com/yuji_yasuhara/private/9c9f621d0dc16d8773a8