【Unity道場 2016】モダンなUIの提案と実装 後編

2016.4.28 unity 道場 モダンなUIの提案と実装（後編） ユニティ・テクノロジーズ・ジャパン 池和田 有輔

unity 道場 セッションで使われているデータ https://github.com/unity3d-jp/DojoUI1

サンプルプロジェクトについて unity 道場 ワールドマップ パーティエディット キャラクター詳細 バトル COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

イラストについて unity 道場 セッションで使用するイラストの著作権は制作者である平岡久典氏（オインクゲームズ所属）に帰属します イラストの商用利用や転用は原則禁止ですが、今回内容を画像化・動画化し、ブログやTwitter、その他 SNSで公開することは問題ありません。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

平岡さんの作品 unity 道場 dreeps 伝説の旅団 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

使用したアセット unity 道場 DOTween いわゆるトゥイーン系ライブラリ C#の拡張メソッドにより、自然な記述が可能 transform.DOMoveX(4, 1).SetEase(Ease.InOutQuint).OnComplete(()=>MyCallback(someParam)); パンチング、シェイク、ジャンプなどの面白い系の機能が豊富 パフォーマンスもいい感じ COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

作ったアセット unity 道場 Typeface Animator テキストをアニメーションさせるプラグイン 文字の出方をいい感じにしてくれるよ！ イケてない点：プリセットイージングがない 5ドル Image Deformer (仮) サブサーフのようにUIのメッシュを分割して有機 的なアニメーションを行うことができる 現在超α版です COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

オーバービュー unity 道場 データはとりあえずUIManagerコンポーネントにもたせている。 4つのコンテンツの切り替えは全てアクティブでコントロール コンテンツの親にはCanvas Groupコンポーネントを使う 子オブジェクトのインタラクションを切ったり、レイキャスト をきったりを一括でコントロール可能 トランジション中はすべてのボタンを無効にするなどのこ とが簡単に行える このプロジェクトでもやるべきですが、やってません UIManagerのCurrent Content Categoryで最初に出すべきコンテン ツを切り替え可能 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

World Map unity 道場 スクロールはScroll Rectを素直に使っています。 シンボルをクリックした時のアニメーションはトゥイーン このくらいはトゥイーンが楽だよね COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Party Edit unity 道場 リストのパラパラした動きは単純にX軸のローテーション 閾値を超えるとティーンして表示しているだけ パースペクティブにすることが必須なので、Canvasはカメラ による描画 カードを上下スワイプでScroll Rectによるスクロール 左右だとIDragHandlerによるドラッグ 両者が同時に行われると、著しく操作性が下がるので、タッチ から最初の動きでどちらかをロックしている。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Party Edit unity 道場 右スワイプでテキストがゆらゆら揺れる 前述したTypeface Animatorを使用 定数値による同一アニメーションなのはイマイチ 一定量の右スワイプでアクティベートされ、それがわかるように 座標が右にずれ、背景をオレンジに変化 アクティベートから戻る場合は「もういちど右スワイプさせる べき派」と「視覚的に今度は左にしたほうが自然じゃね？派」 がいることが分かったので、どちらの操作でも可能にした COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Party Edit unity 道場 アクティベートすると上部のリストに選択したキャラが追加、 そしてエフェクトが再生 パーティクルとUIを絡めるのはとても楽になった。 Sorting Layerでざっくり Order in Layerで細かく COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Party Edit unity 道場 キャラクターが3体揃うと右下にバトルボタンが出現 前述したDeformer + パーティクルを使用 細かいことだけど、ランダムで煙の形状が違うものが出るよ うになっている（そうしないとかなりイマイチ） Deformerははっきり言って超重いので、必要ないときは Subdivideごとアクティブを切っておいたほうがいい。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Party Edit unity 道場 ヘッダのハンバーガーメニューは飾り 下に引っ張るとテキストの表示が「Release To Return」 に切り替わり、この状態で離すとマップ画面に戻る 背景が歪むのもDeformerを使っている。 テキストのアニメーションがあると、文字が変わったこ とを知らせやすいので、Typeface Animatorで波打つよう な動きを入れている。 戻るボタンを用意せず、「引っ張って離して戻る」仕様は、一部のアプリに取り入れられ てはいるものの、そこまでメジャーではないので導入は慎重に そしてスクロールを余儀なくされるので、この場合は少し不適切かもしれない。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Character unity 道場 キャラクター詳細画面も「画面を引っ張って離して戻る」ように なっている。 少々わかりにくいが、引っ張るとキャラクターも拡大するように なっている この辺りは自然に見せるというよりも遊び要素の意味が強い COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Battle unity 道場 シンプルなオートバトル 味方のHPがゼロになっても死んだりしない（デモなので） オープニングとリザルトのUIはタイムラインを使いたかったので Animationコンポーネントを使った。 変数のコントロールができるとか良いところもあるよ！ あと「イージングのコピペさえできれば・・」と100回くらい思いました COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

コラボレートのフィードバック unity 道場 キャラクターデザイン＋バトル背景：平岡さん 地図やエフェクトのデザイン＋実装：自分 意識したのは「アートワークの抽象度」です。 絵をもとに、UIやエフェクトの部分ではどのくらいの線や色を必 要とするのか、という視点でバランスをとりながらやった。 あとは「崩し」が欲しかったのであえて特徴的で外したフォント を入れてみたり。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

unity 道場 今後、Unity道場とコラボレーションしたいという方も大募集です！

unity 道場 Thank You!

会場のレイアウト変更にご協力ください。 unity 道場 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN