Step 03：HTMLでUIを作成する
改めて下記のエクステンションのフォルダを見てみると「index.html」というファイルがあります。
C:/Users/%USERNAME%/AppData/Roaming/Adobe/CEP/extensions/"IDと同じフォルダ"
これを好みのWebブラウザで開いてみると......。
どこかで見たボタンとメニューが表示されます（笑）。
実はCC以降のエクステンションのUIはHTML5で作成されています。そしてBracketsの真骨頂は右上のイナズママーク⚡で開かれたUIはリアルタイムで変更ができるということです。
基本的には「index.html」とcssフォルダ内のデータ、特に「styles.css」を調整するだけでUIを変更することができます。
これを初めて作ったころの筆者はMELしか経験がなく、HTMLでHPを作ったこともなくCSSと言う存在も知りませんでした。......今もそんなに詳しくは知らないのですが（汗）。そんな筆者でもHTMLやCSSの本を片手にこんなメニューが作れました。
ちなみにBracketsで作ったUIの初期状態には弱点があり、普通のチェックボックスやラジオボタンは初期状態では表示されません。これは「topcoat-desktop-dark.min.css」ファイル内で非表示になるように設定しているからです。
作り始めた当時はCSSの知識が乏しかったのですが、そこはピンチをチャンスと捉えて白黒反転するチェックボックスを用意し、視覚的に選択できるように作りました。これは直感的にメニューが作れてリアルタイムで試せたことが大きく、これこそ筆者がエクステンションとBracketsを推す大きな理由のひとつです。
HTMLの作り方は世にあふれているので細かいUIの作り方について僕から伝えることはありません。皆さん、楽しんでUIを作ってください。
おまけ：アーティストと協力したUIの工夫
ここからは、アーティストと相談したからこそ進化した部分の紹介です。
1：ボタン位置の工夫
筆者のツールを作るときの癖なのですが、処理の流れに合わせて上流に設定やメニューを置き、最後に実行ボタンを置きがちでした。しかし、アーティストの意見を聞いた今では、上の方に実行ボタンを置いています。この結果、普段はあまり触らない設定を隠してウィンドウを小さくすることができるようになり、ウィンドウにはめ込んで常に表示していても邪魔にならずに使えるようになりました。
これは筆者自身目から鱗で、ツールは使う側の意見を聞くべきだと改めて考えさせられました。
2：保存場所の進化
保存場所は、最初は「同じフォルダ」か「任意のフォルダ」の2択しかありませんでした。しかし、COYOTEスタジオでは多くのプロジェクトでSourceimagesフォルダ内のPSDフォルダに作業中のPSDを入れています。
「同じフォルダ」では毎回完成テクスチャを手動で移動する、「任意のフォルダ」ではマップやキャラクターを変えるたびに設定を変更するのは大変でした。なので、第3の選択肢として「ひとつ上のフォルダ」の選択肢を追加しました。保存のたびにフォルダ選択やファイルの移動がなくなって好評です。
また、上記のフォルダ構成が使えないプロジェクトからの要望で「任意のフォルダ」の履歴を表示する機能を追加しました。こちらはチェックのため複数のプロジェクトを行き来するリーダーアーティストに好評です。
TAの理想のUIとアーティストの理想のUIには意外と乖離があります。UIの設計段階から、実際に使うアーティストの意見を聞くのもありだと思います。
外側のUIについては以上です。中身の処理については、次回「スクリプトで処理の内容を作ろう」に続きます。ではまた次回。今宵はここまでに致しとうござりまする。
Profile.
-
-
中林伸和 / Nobukazu Nakabayashi（COYOTE 3DCG STUDIO）
ゲーム開発会社にてマップデザイン、レベルデザイン、エフェクト作成など様々な経験をする中でMELと出会い、DCCツール作成の面白さに目覚めてテクニカルアーティストに転身。現在は株式会社クリーク･アンド･リバー社 COYOTE 3DCG STUDIOにて、Mayaに限らずPhotoshopやMotionBulderのグラフィックソフト、Unityなどのゲームエンジンと言語にとらわれずユーザーフレンドリーのツール開発に従事
