製作に至るまでの経緯
先日Netflixで「STEINS;GATE」というアニメを見た。秋葉原が舞台で、大学生の主人公がタイムマシンを開発〜というような感じの内容のものである。
その中で登場するのが「ダイバージェンスメーター」と呼ばれるニキシー管で作成されたメーターである。
実際のニキシー管はとても綺麗で以下のようなものである。
今回はこのニキシー管風の時計アプリを作成していく
使用ツール
今回は以下のツールを使用していく。
・Unity 2019.2
・Blender
・Photoshop
モデリング
まずはニキシー管を作成していく。基本的なパーツは以下に分けられる
・ニキシー管(ガラス部分)
・数字プレート(Unityでテキストで作成してもよかった気もする)
・網目上の金属プレート
作成したものが以下
ニキシー管
ガラス部分としたの金属部分を作成。アルファ値を下げてガラス感を出す。
数字プレート
0から9までを作成重なって配置する。(かなり手間だった泣)
網目状金属プレート
実際のニキシー管ではこれがなんの役に立っているかは知らないが作成
(信じられないくらい手間で泣きそうだった泣いてた)
今回は全てtexturefunでテクスチャを拝借した。(無料で良いテクスチャがたくさんあるおすすめ)
合わせて配置
Unityで配置
配置して点滅ようの数字を複製したり、ライトで色を変えたりと調整してオブジェクト側の準備は完成。
時計プログラム
今回一番困ったのが時計の表示方式である。
文字型で宣言したhour変数にSystem.DateTime.Now.Hour.ToString();のような形で取得した時間、分、秒をテキストに入れれば終わりだったのだが今回は見た目を重視したためテキストではなく鉄の質感を表現した数字プレートをどうしても使用したかったのだ。プログラミングの知識もあまりないためかなりの大苦戦であった。
時刻表示に使う桁数は全部で6桁。
時間で2桁、分で2桁、秒で2桁である。
時間の表示
表示、非表示する数字プレートは配列でSize指定してインスペクターから取得した。
string hour; で宣言
hour =System.DateTime.Now.Hour.ToString();
基本的にif文で時刻に合わせて表示する数字プレートを制御しようと考えていたがString変数では数値として使えない!!解決策はint型に変換することとわかった。
//Parseメソッドでstring型をint型に変換↓
Hour = int.Parse(hour);
これで二桁目の数字表示はなんとかなる。
10未満であれば0を表示。10以上20未満であれば１を表示。というようにしていくだけなのだ。(二桁目は0、1、２しかないしね！！)
問題は１桁目をどうやって出すかだった。しかしこれは「剰余」10で割った余りを計算すれば良い。intに変換したHourが仮に21だったとする。この１桁目は1になるわけだ。これを数式で出すと以下となる。
h1 = Hour % 10;
あとはif文で表示を切り替えるコードを書けば良い。
7だったら7のプレートを表示というようなとても簡単なコードを書いた。
分、秒も似た異様なコードを作成し用意した。(一つのスクリプトにまとめるとうまく動かなかったので時、分、秒ごとにスクリプトを用意した。)
時計機能完成
世界線移動機能
世界線移動？なにそれ？と思う人も多くないと思う。ぜひ「STEINS;GATE」を見て欲しい。何いってるかわかるから。
実際の機能としては画面をタップすることでランダムで数字を生成し、それに合わせてメーターの値が変動するだけの簡単使用である。
AR機能
ARKITを使用してニキシー管時計を現実に配置できるようにしてみた。
