みつまめ杏仁スマートフォン用の表示で見るみつまめ杏仁アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。ブループリント10翌日は晴れて澄んだ青空が広がっていた。抱えた屈託が全て溶けてクリアになるようなそんな色。こんな青空を見ていると、どこか遠くに行きたくなる病が発症しそうになる。なんとかチャット画面のモックがそれとなく出来上がってきたのを思い出し、続きを作らないといけない使命感をサルベージしながら移動。今日は少し早く着いたのでいつもよりフロアは静かだった。PCを起動しUE4のエディタが開くまでの間に昨日帰ってから頭の中で考えていた構造を思い出す。テキスト入力を左右に分離させたバージョンを作るにあたって、用意するWidgetはいくつか考えてみた。最初、左右反転した見た目になるのであれば、フキダシWidgetのように、片側だけ作って2個置けば?というアイデアが浮かんだ。片方でテキスト入力中、もう一方は触ることができない状態にする必要がある。2つが同時にアクティブになることはない。左右の入力Widget間で相互にやり取りするのはとても面倒だ。いって親のレイアウトWidget経由も手間が増えるだけでまどろっこしい印象。ここは一つのWidgetにキャンバスパネルによって左右2つの入力部分を管理するのがよさそうだと思い至った。親のレイアウトWidgetで受け取る際にバインドしている処理も変えなくても済む。今のテキスト入力Widgetを複製して、これを改造していこう。コンテンツブラウザからテキスト入力Widgetを複製する。使えそうなパーツは流用する。入力用の下敷きは、いまのフキダシと同じテクスチャにして調整。ボタンは一つだけでいいので片方を消す。テキスト入力は1行入力だからMultiLineじゃないやつに差し替える。大きさはフキダシの許容文字数分横に伸ばしておいてっと・・・こんなもんかな。顔アイコンは適当なやつをセットしておこう。入力開始ボタンのテクスチャはこんな感じでいいかな。パーツの調整に手間取ったが、なんとか整った。このテキスト入力で必要な「状態」は3つ。テキスト入力中ユーザーがコメントを入力中はこの状態。[DEFAULT]入力する前の状態。+ボタンが表示される。[N/A]反対側で入力を行っている間の状態。見た目に存在感を弱く。CanvasPanelの透明度を変えるとラクチン。ヒエラルキーはこんな状態。反対側も同じ構成になるので、キャンバスパネルを一つ追加してある。見た目にシンメトリーになるように調整。アクティブと、見た目にこの3つの状態を遷移させるためにアニメーションを使って切り替える。切り替わると味気ないので、入力開始と終了時くらいは短いながらもアニメーションを作ってみよう。状態遷移のイメージはこんな感じになると思う。この遷移イメージを元に、左と右それぞれにアニメーションを用意する。待機と非アクティブについては、状態の記憶として利用するので、尺は不要。位置にバシっと確実に状態を切り替えるためのキーを打つだけでいい。これをブループリントの方で組んでいこう。OnClickイベントが有効だ。そこへアニメーションの再生ノードをつなぐ。右側のクリックも同じ要領で、再生するアニメーションが変わる。Buttonコンポーネントは、画面に表示されている間はクリックを受け付けてくれる。するキーを打っておくと必要なクリックを防ぐことができて安全。Animationノードは、再生のトリガーでしかないので、再生を開始したらすぐに次のノードに処理が流れてくれる。基本的に終わりを待ってくれないので、終わってから何かする場合だけ、特別な処理が必要になる。次は投稿の処理だけど、送信ボタンが無いので何をトリガーにしようか。Enterキーを判定するイベントがあったはず。