みつまめ杏仁スマートフォン用の表示で見るみつまめ杏仁アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。UI9メッセージは立木坂から届いたものだった。一時的にチームから捨てられたという表現をしていたが、まぁアイツのデフォルトの物言いなので無視しつつ、やり取りしていると、どうもスタンプの絵を描く仕事を請けたらしい。プロデューサーの手の速さに若干の不気味さを感じる。良いものにしたいという気持ちで動く分にはプロジェクトチームのメンバーとして当然だ。プロデューサーという立ち位置が個人的にあまり好きになれない。プロデューサーの職分というより、たまたまそこにいる人間との相性な気もするが。仕様決定の場に不在なことが多いのもあって、どうしても現場からの距離を感じざるを得ないし、外から中をつついてかき混ぜてくるような印象しか持てないのは、個人的すぎる感傷が由来なのは分かっているつもりだ。今のところ、この心象を変えてくれるほどの出会いは無い。プロデューサーと仲良くなればいいだけの話だと言われてしまったら、言い返せるほど経験値が高くないし、まぁ人見知りだから仕方がない。いうことにしておこう。プロデューサーのことはさておき、立木坂はスタンプの仕様を教えろと言ってきた。仕様もなにも自分もさっきスタンプ機能追加の件を聞いたばかりだと返したら、(立N)じゃあ表示サイズと、種類を教えてください・・・コイツ人の話聞かないやつだな・・・(自分)まだ決めてない(立N)何にも決まってないのに何を描いたらいいんですか?(自分)訊かれても困る(立N)うーん、とりあえず猫でも描いて癒されます(自分)じゃそれ(立N)はーいという流れになった。なんかアヤフヤなままで不安しかないが、出来に関してはこちらから依頼したわけではないので、いったんモックの完成を目指そう。やることは増えたが素材を用意する手間は省けたのはありがたい。絵の内容はまた別途すり合わせの時間をとればいいだけのことだ。後でスケジュールの確認もしなきゃな。ここまでできたけど、なんか忘れてるものがないか、ラフはどんな感じだったかな。自分のコメントに色を付けるのは簡単だ。ストラクチャから値を引き出せるようにしたから、すでに要領は得ている。サブメニュー表示はちょっと重めなのと、レイアウトが安定してからにしたい。いえ、これは少々作り替えが必要だな。現状、フキダシWidgetは必要最小限のサイズでしか表示していない。ノードを使って左右にレイアウトしている。2つ左右に分割するか、3フキダシの方に追加するか。今思いつくのはこの3つ。>の専用Widgetを作り、フキダシ追加に合わせて一緒に追加。Y方向にマイナスマージンの値を入れれば実現できそうだ。フキダシの高さが可変なので、値を調整してやる必要がある。2は左右が独立することになるため、同じ高さを維持できさえすれば、シンプルなつくりが期待できるが、2つのVerticalBoxにアクセスすることになるので、その切り替えがちょっと面倒な印象。3は、フキダシWidgetのレイアウトをいじるだけで解決できそうなので、今のしくみから大きく変わることはない。左右の振り分けではなく左右反転になる。あとは、スクロールアウトした際の処理だけど、1と2、どちらも別々のWidgetが追加されているので、画面から消すときに常に2つづつ消すことになる。これはチャットのUIだ。時系列で過去から現在にかけてリニアに並んでいる。余計な要素は入れない方が、サーバーとの差分が無い分シンプルに管理できるはず。発言順がそのまま表示順になっていた方がチェックがラクだし、なにより表示する側の都合でしかないのに、システム側に表示側の都合に合わせろというのは、後々のことを考えると経験から言ってリスクである可能性が高い。ここは3のフキダシWidgetに手を加える方法で進めていこうと思う。やることは今のレイアウトにパーツを追加することと、フキダシのサイズ可変に同調できることがゴールだ。左右反転については、フキダシWidgetの中でやってるので、むしろレイアウトWidgetでやってる左右振り分けが不要になるはずだ。縦方向の可変イメージはこんな感じ。テクスチャを作ってインポートする。これをキャンバスに配置するわけだけど、まぁ試しながらやってみるか。仕様と、アンカーのストレッチに悩まされつつ、1時間ほど試行錯誤を繰り返してようやくなんとかなった。フキダシの下敷き画像は、親のキャンバス(CanvasPanel_Container)にサイズ依存していたので、SizeBox以下とフキダシの下敷き画像を、新しく追加したキャンバスパネル(CanvasPanel_fukidashiBody)でくるむことで、階層的に一段下げた。くるむことで位置を確保。一瞬あきらめかけたけどなんとかなった。あとは、レイアウトWidgetの方を編集。フキダシWidgetを追加する関数のところで左右振り分けの処理をバッサリ。やってノードが減ってスッキリすると気持ちがいい。何度も再生して、そのたびに落胆してきたので、感動するより安堵の溜息が出る。この辺はもっといろんなUIを作って経験を積むしかないなと改めて思う。あとは、自分のコメントに色を付ける処理か。これは、判定するのは表示側ではないのと、作るとなっても大してコストがかからないので、後回しにしよう。それより真ん中のテキスト入力部分が見た目に重いので、ホバー処理を入れてみたい。普段アルファ値で薄くなってて、カーソルが乗ったらハイライトする。管理してるから、そこでホバーの判定を取ってもいいけど、すでにEventTickでスクロールの制御をしてるから、今はまだあまり複雑にはしたくない。テキスト入力Widgetの方でやるか。