VRエンジン作成日記

ひたすらVRエンジンを作っていきます

UIのリファクタリング

Undo機能を追加しやすくするために、UI関連の機能をリファクタリングした。実行時の見た目は変わらないけど、コードの内容的には以前より見通しが良くなったように思う。また、レンダリングの処理を少し最適化した。シーン内にカメラがない時の処理を軽くしたのと、行列計算をいくつかGPU側で行うように修正した。

・関連するコミット

fix some ui problems · hikipuro/tea.js@67771ba · GitHub

 

Undo機能を追加しはじめた

Undo機能を追加し始めた。HTMLのテキストボックス単体で見るとUndo機能は最初から付いてるんだけど、エディタ全体で見ると、2つ以上の編集結果がUndoで繋がらないので自分で実装する必要がありそうだった。Undoできるようにしようと思うと、1つ1つのUI操作をコマンドとしてどこかに保存しておいて、後で再生するような仕組みが必要になる。編集後の値だけではなくて、編集前の値も保存しておかないとUndoできない。また、このUI要素が画面に出ていたら等の前提条件もチェックする必要がある。今のところ正常に動くまで実装しきれていない。

・関連するコミット

add undo function · hikipuro/tea.js@1204d33 · GitHub

 

レンダリング関連の問題を修正

レンダリング時にライトの色が適用されない、カメラのレンダリング順が設定できない等の問題があったので修正した。まだいくつか、画面クリアの必要がない箇所でクリアしていたりする問題が残っていそうだ。

・関連するコミット

fix light problems · hikipuro/tea.js@b2b298b · GitHub

 

カラーピッカーを修正

カラーピッカーを修正した。HTMLのinput type="color"のカラーピッカーだと、仕様上どうしても回避できないことがあるので (出現位置を指定できない、JavaScriptから閉じることができない等)、自分で実装することにした。今のところ、HTML標準のカラーピッカーよりも低機能になってしまったけど、後々修正していこうと思う。

あとはUI系のファイル構造を見直したり、テキストメッシュでフォントを指定できるようにしたりしていた。CanvasRenderingContext2D.fontで指定するフォントファミリー名は、HTMLのデフォルトフォント系の名前 (serif, sans-serif, monospace等) を指定する時はクォートで囲むと動かないらしい。

context.font = "'" + "sans-serif" + "'";

↑このように書くと機能しない。

context.font = "sans-serif";

↑こう書くと動く。

デフォルト以外のフォント名は、クォートがあってもなくても動くようだ。例えば

context.font = "'" + "MS ゴシック" + "'";

というのは大丈夫そう。デフォルトフォント系とそれ以外で動きが違うので、問題に気付くのが遅れてしまった。

developer.mozilla.org

・関連するコミット

fix color picker ui · hikipuro/tea.js@d670613 · GitHub

 

テキストメッシュのUIを修正

テキストメッシュの設定をUIで変更可能にした。あと、プロジェクトビュー用のファイル一覧を作り始めた。今日は特にこれといって書くことがなさそうだ。

・関連するコミット

fix some ui problems · hikipuro/tea.js@938e0ae · GitHub

 

ツリービューでドラッグ&ドロップ2

ツリービューのドラッグ&ドロップの機能を修正した。オブジェクトの隙間に他のオブジェクトを差し込むことができるようになった。また、ドラッグ時の画像を変えた。Drag and Drop APIのsetDragImage()にセットできるのはDOMに登録されていて、display: noneになっていないオブジェクトだけっぽかった。display: noneにすると、その要素の矩形領域の、今現在表示されている内容がドラッグ時の画像として使われてしまう。ドラッグ時の画像がDOMのどこかに登録されていて、かつ画面に表示されないとなれば、画面外の領域に要素を配置するしかない。とりあえずleft: -300pxのところに置いておいた。300ピクセル以上のドラッグ画像が使われると、画面内に出てきてしまいそうだ。

・関連するコミット

fix treeview drag · hikipuro/tea.js@4078ba9 · GitHub

 

ツリービューでドラッグ&ドロップ

ツリービューにドラッグ&ドロップの機能を追加した。まだ要素の隙間に移動することはできない。今のところ他の要素の子要素にする機能だけを実装している。他にはAdd Componentボタンをとりあえず機能するようにしたのと、Rectの入力欄等の使い勝手を修正した。

・関連するコミット

add drag drop to treeview · hikipuro/tea.js@aa0c112 · GitHub