【Unity道場15】アセットストアマニアクス2016 冬の陣 に参加しました
- 参加したのでメモ(ˊ꒳ˋ*)
- 参加して良かった… PostProcessingStackは即座に使って行きたい
概要
- 紹介するアセットを組み込んだサンプルゲームを見ながら解説 (Vuforial以外)
- モバイルを想定したアドベンチャーゲーム
- ポイント&クリック (タップした所に移動)
- フィールド上のクリスタルを全部ゲットしたらクリア
Easy Touch
- ミッション: カメラの操作ができるようにしよう
- タップで移動
- スワイプでカメラ移動
- ピンチで拡大/縮小
次回のUnity道場はゲームを作りながらアセットストアの素敵なアセットを紹介していきます。まずはEasy Touchで簡単にスワイプやピンチズームを実装 #unity道場 pic.twitter.com/Ak9XRtUKF9
— Yusuke Ikewada (@ivoryfunc) 2016年12月1日
アセット
- https://www.assetstore.unity3d.com/jp/#!/content/3322
- 入力周りの痒い所に手が届くプラグイン
- EventSystemで出来ない事を軽々とやってのける
- EventSystemの拡張ではない
競合との比較
- Input.Touches / FingerGestures
- 下準備等せずに直ぐに使える
- Quick* コンポーネントが便利すぎる
- QuickTap / QuickDrag … etc
- 1つ購入するならこれが個人的にオススメ
メモ
- オブジェクトに付けるには「Quick*」コンポーネントを使う
- 画面全体にインタラクションを起こすにはデリゲートに追加
EasyTouch.On_Drag += OnCameraRotate;
- Gesture を利用可能 (移動距離等を検出可能
- UnityEditor上でもスマホの動作をシミュレート可能
- optionキーを押すともう一つの指を固定でシミュレート (ピンチ等)
- controlキーを押すともう一つの指を追従してシミュレート (2本指スワイプ等)
ProBuilder
- ミッション: ものを増やしてシーンを華やかにする
アセット
- https://www.assetstore.unity3d.com/jp/#!/content/3558
- SketchUpライクなモデリングツール
- 簡単なモデリングからレベルデザインまで
- モデリング知識が無くても直ぐに使える
- アーティストよりもむしろ、レベルデザイナー/プランナーさんに協力にオススメ
Pro vs Basic
- Basicは無料
- Proは面毎にマテリアルを指定出来る (素晴らしい)
- ProはUVが使える
- モデリング機能が充実
- ミラー/マージ/ループカット/サブディビジョン … etc
- ソースコードが公開されている
- .objファイルの書き出し
メモ
- リパブリックのプロトタイプもProBuilderで作っていた
Final-IK
- ミッション:ボタンを押すアニメーションを追加しよう
Final IKでランタイム上でIKを実現させ、ボタンを押すアニメーションをつけたり #unity道場 pic.twitter.com/0RLqBR88Di
— Yusuke Ikewada (@ivoryfunc) 2016年12月1日
アセット
- https://www.assetstore.unity3d.com/jp/#!/content/14290
- IKをランタイムで実現させる者
- IKとは?
- 先端を元にボーンを動かすもの
- 人はモノを取る時に肩肘手首指の関節を使うが、それらをどのくらい動かすか意識する事は無い
- IKも同様に、先端から順番に曲げる関節を決める方法 (逆はFK)
- ランタイム上でIKが必要な例
- 銃をターゲットの方向に正確に向ける
- 大きさのスケールする箱を抱えて運ぶ
- キャラクター同士が手を繋ぐ
実装
- 高機能のアセットだが、試すだけなら簡単
FullBodyBaipedIK
コンポーネントをPlayerにアタッチRightArm
を向ける位置 (Targetとなるオブジェクト) を選択PositionWeight
を上げるとTargetに向けて手を伸ばす
シネマティックイメージエフェクト
- ミッション: 視覚効果を与えて画面をリッチにしよう
アセット
- https://www.assetstore.unity3d.com/jp/#!/content/51515
- いわゆるポストエフェクト (Unity上ではImageEffect)
- 次世代の公式ポストエフェクト
- 定番のイメージエフェクトを網羅
- モバイルにも対応 (一部重い)
- VRにはちょっと難しいものが多い
- できればアセットストアではなく、Bitbucketから落として使おう
- 最新版はAssetStoreにはない
PostProcessingStack
- 本命はこっち
- コンポーネントを一つにまとめあげたもの
- まとめられた分、個々のモジュールのコストが安い
- コンポーネントの順番を気にしなくて良い
- パラメータがScritableObjectで管理して、状況に応じて入れ替える事がかな
公式イメージエフェクト
- 基本的にはPostProcessingStackを推奨
- シネマティックイメージエフェクト: 順番をあえて変えたい場合
- StandardAssetにある旧イメージエフェクト: 特殊なエフェクトを使いたいときのみ
- FishEye … etc
Depth Of Fieldを他の方法で実現
- LensAberrations
- Vignetteを有効にすれば似たような演出を作れる
- 重さが格段に違う
Shader Forge
- ミッション: 光るエフェクトのクオリティを上げよう
Shader Forgeでキラキラ光るエフェクトシェーダをサクッと実装 #unity道場 pic.twitter.com/1aH5aQ3PqH
— Yusuke Ikewada (@ivoryfunc) 2016年12月1日
アセット
- https://www.assetstore.unity3d.com/jp/#!/content/14147
- Vertex/Fragmentシェーダを手軽に書くことが出来る
- シェーダに関する知識が殆どなくても使える
- モデル用のみならず、2D/パーティクル/ポストエフェクトもいける
- リファランスが充実しており、情報量が多め
- カスタムCGINCが読み込めないのはちょっと残念
- ShaderForge入門はUnity道場で実施済み
TypefaceAnimator
- ミッション: UIテキストをアニメーション指せよう
Typeface Animatorで流れるようなテキストの動きをつけて #unity道場 pic.twitter.com/G3UkHA9O1x
— Yusuke Ikewada (@ivoryfunc) 2016年12月1日
アセット
- https://www.assetstore.unity3d.com/jp/#!/content/37445
- UI.Textをアニメーションさせるアセット
メモ
- 一旦Loopした上でゲームを実行して編集するのが良い
- 再生を止めると変更が破棄される
- CopyComponentしつつ停止後にPasteComponentValuesするのがオススメ
Text Mesh Pro
Text Mesh Proでフォントをロゴのように加工してみることも #unity道場 pic.twitter.com/S1E7Ib7zE3
— Yusuke Ikewada (@ivoryfunc) 2016年12月1日
アセット
- https://www.assetstore.unity3d.com/jp/#!/content/17662
- テキスト周りを大幅に強化
- uGUIのコンポーネントとして使うか、スプライトとして使うか選べる
- 拡大しても劣化しない
- テクスチャアトラスを補間してスムーズにレンダリングしているっぽい
- アトラスが小さいとがたがたになる
- Unity上でポリゴン生成している訳ではない
- 禁則処理/グラデーション/UVアニメーション/リッチテキスト機能 … etc
Vuforia
- https://www.assetstore.unity3d.com/jp/#!/content/74050
- マーカーベースのAR開発環境
- 最初にウェブサイトからディベロッパー登録/マーカー登録が必要
- 認識と追従性はかなり容易
- VuMark: ロゴの一部にバーコードを入れる等で特徴点が小さいものにも対応可能に
- TextRecognition: 文字認識機能もある
- 複数のマーカーの同時認識も可能
トピック
- Unityと正式にパートナーシップ締結を発表
- 2017年春にはUnityにインテグレートされる予定
- アセットストアからもDL可能になった
- ライセンスが変わった
- https://developer.vuforia.com/pricing
- 499ドルのワンタイム / 月額99ドル … etc
meetupCARTA #2 スマホゲームにおけるUI/UXデザインに参加しました
- 株式会社アマナイメージズさん主催の勉強会に参加したのでメモ
- PORTFOLIOやゲーム素材マーケットCARTAを運営する会社さん
なぜいまスマホゲームのUIUXに向き合うのか
自己紹介
- 鷲山 優作さん (株式会社サイバーエージェント UIUX Lab代表/株式会社グレンジ 取締役CCO)
- 代表作はポコロンダンジョンズ
1) 市場規模が大きく成長
- スマホゲーム市場は国内規模だけでもうすぐ1兆円規模
- 他の市場に比べて平等に開発チャンスを感じれる市場
- より大きなプロダクトの開発に携えるスマホゲームは良い
- 規模が大きいプロダクト: 良い事も悪い事も反応が大きい (分かりやすい)
2) スマホゲームの性質
- UIUXデザイン力を向上させるには試行回数が大事
- 試行回数が増える性質を備えている
- ゲームである: 設計段階で考慮する要件が圧倒的に多い
- BtoCである: ユーザからの直接的なフィードバック
- 運用が入る: リリース後も最適な形へと磨き上げられる
3) ゲームのノウハウを学習出来る
- コンシューマの時代から人が熱中するコンテンツのノウハウが数多く蓄積されてきた
ゲームニクス: ゲーム内にたまった5つの原則 (サイトウアキヒロ氏)
- ゲームニクスはおもてなしの文化
- さりげないおもてなし、和の心そのもの
- 1) 直感的で快適なインターフェイス
- 2) マニュアル不要のユーザビリティ
- 3) はまる演出
- 4) 段階的な学習効果
- 躓かないように、もしくは時にはわざと躓かせる
- 5) リアルとバーチャルのリンク
- リアルにどれだけバーチャルな部分をリンク出来るか
まとめ
- (1) 大きな市場で平等に勝負出来る
- (2) 試行回数を上げてUIUXデザイン力UP
- (3) ゲームに溜まる熱中するノウハウを吸収できる
- なぜいまスマホゲームのUIUXに向き合うのか?
- UIUXに関わる人が成長できる環境だから
シリーズを越えて試されるUIUX
自己紹介
- 坂本 康朗さん (株式会社モブキャストD3企画部 部長)
ゲームにおけるUIとは
- ユーザとゲームにおける接点/接触面
- これは決して視覚に限った話ではない
- 視覚/聴覚/触覚のアプローチ
あるゲーム開発を振り返って読み解くUIUX
- LUMINES PUZZLE×MUSIC
- 歴史あるタイトル
- ルミネス - Wikipedia
- 「かつてないほどの没入感あふれるプレイ感覚」
LUMINESシリーズのUX
- 視覚: ヴィジュアル/エフェクト
- 聴覚: サウンド/BGM/SE
- 触覚: 操作感
- パズルゲームだけど音楽を操作しているような感買
スマホで同じUXを実現する為に
- 1) 直感的な操作性を目指した画面の向きの変更
- どうやって画面の向きを決めているか?
- 最初は横画面で作っていた
- 前作以前のユーザの声 ... etc
- 最終的には実際のプレイ結果を元に調整して縦画面に
- スワイプとフリックの誤操作が肝だった
- 指の可動範囲と動く向きの考慮が出来ていなかった
- 大事なのは、想い通りの場所にブロックを動かせることだった
- スワイプとフリックの誤操作が肝だった
- 学び
- 過去の常識を疑う勇気
- ユーザが答えを知っているとは限らない
- UI(画面の向き含む)は操作性が最適である事が前提
- 2) 全てがサウンドに連動した演出
- ルミネスにおいてはサウンドは最も重要なUI
- 連動すると意味が生まれ、理解が進み、結果的に没入感が増す
- 1) 楽曲(BGM+SE)とその順序
- 楽曲にはストーリーがある
- メロディで盛り上がりを表現
- 2) SEとクォンタイズ
- 発音タイミングをBGMの店舗に合わせる補正機能
- 結果的に演奏している感を生み出すコアな部分
- 例: https://tonejs.github.io/examples/quantization.html
- 3) 楽曲に合わせたアニメーション
モブキャストのゲーム共通機能/資産
- Coffeeプロジェクト
- Common-Feature: 共通機能を研究開発するプロジェクト
- Untiyゲーム開発でよりよいものをより早く作る為の当たり前のものを用意する
- UIUXについてはデザイナではなく職種関係なく考えていく必要がある
- 当たり前の気持ち良さを提供したい
- 気持ち良さの感覚を揃えるために、基準のUIを作ってしまう
ゲーム開発にプロトタイピングが有用な件
自己紹介
- 楠 薫太郎さん(株式会社DeNA Games Tokyo デザイン部 部長 / クリエイティブディレクター)
プロトタイピングって?
- プロダクト開発に関わるメンバーの脳内イメージ/認識を共通化すること
- 脳みその中のイメージは人それぞれ
- 脳内イメージの共通かはプロダクト品質や開発スピードが向上
スマホゲーム開発って大変じゃない?
- コンテンツボリューム多い
- 画面遷移多い
- 仕様も複雑 (ユーザにとってではなく開発者にとって)
- 様々な機能が複雑に関係し合っている
- 運用をみこした設計も必要
- ...etc
なぜゲーム開発でプロトタイピングなのか
- 開発に参加している中で個人的に一番解決したかったポイント
- 企画/仕様: 資料上である程度認識が合う
- UI/インタラクション: 認識が合わない
- モノが無いとイメージ出来ないから
プロトタイピングツール
- AdobeXD: アドビの新しいUXデザインツール、Adobe XD (Preview 1) 登場!使い方をクイックに解説 | Adobe Creative Station
- prott: Prott - Prototyping tool for Web iOS Android apps
- Flinto: Flinto – App Prototyping Tools For Designers
- Origami: Origami Studio — Design Prototyping
- ... etc
プロトタイピングツールでできること
- 実際にタップした時のインタラクションを細かく実装できる
- 実機で手軽に確認できる
- 実機確認をエンジニア工数を使わずにデザイナー作業のみで完結できる
- UI設計に置いてもタップ領域や視認性等も同時に調整出来る
- ツール自体に様々なインタラクションのライブラリがある
プロトタイピングツール使用結果
- 考慮漏れを防ぐ事が出来た
- 実際にユーザが触る者に近いものを早く作れ、ブラッシュアップ工数捻出につながり品質向上
- 改善点の洗い出しが早くなり、開発スピード上がった
- 作業のやり直し、コミュニケーション工数の減少
ポイント
- 特性や影響範囲を見極めてプロトタイピングツールを使う必要がある
- インタラクションを多用する機能改修では有用
- 全体の遷移設計等はワイヤーフレームでカバー
スマホゲームUI/UXデザインの今とこれから (ディスカッション)
- Q. 楠さん: ゲームのプロトを最初の段階でも使った? 運用中だけ?
- タイミングの話、たまたまリリース後に注目した
- Q. 楠さん: デザイナーが主に使う?
- 企画の人がプリミティブなイメージで触るのもあり
- 直接グラフィックを触るデザイナーさんのほうがスピード上がりそう
- Q. 尖ってるアプリはある?
- 楠さん: モンスト幽幽白書でコラボ、CMのコラボ演出のUX
- 坂本さん: 遊具王デュエルリンクス、外国の人に見せると子供向き、30代(世代)の方がハマってる、懐かしめる要素が詰まってる
- 鷲山さん: 挑戦していると思うHIDE AND FIRE、白猫テニス、プレイ感が広がるタイトル
- Q. UIUX論の社内での布教
- 鷲山さん: スマホに限定すると今までの(FPからの)流れもある、ちゃんとUIUXやらないと通用しない時代になっている、会社向けにも重要性を発信する、開発プロダクトの底上げが出来る環境の整え
- 楠さん: UIUXそのものの布教はやってない、UIUXはなんであるのかを考えると、クオリティ向上が大本、本質として市場が大きい状態で勝てるように
- 坂本さん: モブキャスト、UIUXデザイナーという職種が無い、職種問わず(プランナー/デザイナー)考える
- Q. UIUXを考える人が社内にいる?
- 鷲山さん: UIデザイナーはいる、基本的には挙手制、やりたい領域が多い程接触する職種の人が増え、役割が多岐に渡る
- 楠さん: 鷲山さんの言う通り、やる領域が多く、組織やタイトルによって役割が違う、UIデザイナーを定義すると逆に出来なくなるリスクがある
- Q. 組織横断的なUIUXデザイナーの成果はどのように評価されている?
- 楠さん: 次からやろうと思っているのが今期の自信作、どういうコンセプトで何を達成したい為にやったのかというプレゼンと評価、アウトプットを見る仕組みを整える
- Q. 色々な人が絡んでいるので、どうその人の成果として見極めるか?
- 鷲山さん: 評価軸、事業成果と個人のスキル/アウトプット、技術が高いけど事業成果は低いから評価低いよね、みたいなことにならないように... 周りの評価も加味してあげる
- Q.今後この業界で活躍して行く上で大事なポイントは?
- 楠さん: プレゼン聞いててやられた「おもてなし」は大事、サービス精神、人を楽しませる事が大好きな人は成長/活躍出来るフィールド
- 鷲山さん: 括るのは難しい、非ゲーム業界から入ったのでこういうことやってないと作れないみたいなのはない、小さい頃や昔の幼少期の原体験、昔ながらの遊びに体験のベースが詰まってる、「ああいう体験に似てるよね」みたいなことを話せる人は向いている、開発は何作ってても大変なので挫けないやつ
- 坂本さん: 技術はやれば伸びる、興味が無いと伸びない、ゲームに対して興味が無い人はゲームは作れない、好きなジャンルや得意不得意あると思うけど何でも良い
- Q. プロトタイピング自体の動きに左右されないか、どこまで突き詰めればいいか
- 楠さん: 設計をどこで終わらせるかは難しい、メンバーや技術力にも左右、どこまでやるかを決めてやるだけなので開発メンバーと話す感じ
DCEXPO2016 に行ってきました
- 技術的なことは Qiita に、成果物やイベントについてはブログにと出し分けを始めました。
- ストックよろしくお願いします (宣伝)
- 久しぶりのブログです。DCEXPO2016の事前予約デー(10/27)にお邪魔して来たのでざっくり感想。
DCEXPO2016とは?
DCEXPO2016 | コンテンツ技術をテーマとした国際イベント
- デジタルコンテンツEXPOのこと
- コンピュータグラフィクスや3D、VR、インターフェースに関するイベント
- コンテンツが先行しているので技術詳しくなくても楽しめる
最初に感想
- 「技術が魅力的なコンテンツを支える」ということを身近なに体験できるイベントだった
- (自分の職能的にVR/ARとかモーショントラッキングとかあまり強い縁は無いのだけど) 最新鋭のエンタメはそういうの使ってより現実と空想の垣根を超えたコンテンツを (普及率はともかく) 僕達に押し付けてくれるので、見ておいて損は無かったなーというのは印象として持った
一部コンテンツを紹介
8k VRシアター
- HMDを使用しない新しいVR「8K:VR Theater」の第一作:サカナクションのVR映像「碧」を体験
- サカナクションのAOIのライブ/PVのような映像
- がまるで目の前に、ライブ会場の最前列で見ているように感じる
- (極端な言い方をすると動くフィギュアが目の前にある感覚)
- ヘッドマウントディスプレイ(HMD)無しで簡易的な3Dメガネのみで体験できる
- (これが重要で、簡単/疲れないっていうのがVRの垣根を限りなく下げている / VRよりもARに体験は近いかも)
- レーザーや立体音響等の演出が更に奥行きを表現している
- 音楽シーンやアニメ/演劇等の様々なシーンで活用出来そう
Qoncept 4D Tracker
Qoncept4DTracker 卓球のラリーのリアルタイム再現 #DCEXPO pic.twitter.com/bd1JeyGDcM
— 青木とと(ˊ꒳ˋ*) (@lycoris102) 2016年10月27日
- 卓球 (やバレーボール) のラリーのトラッキング/解析および再現
- スピン量や速度まで考慮したツール
- トレーニングへの活用から新しいスポーツ演出までカバー出来そう
Project Alice
ProjectAlice|VRFPSコンテンツで、銃にガジェットを(物理的に)アタッチするとショットが変わる的なやつ。銃やガジェットの位置をトラッキングしてて、HMD付けた状態でもちゃんとアタッチ出来たの凄かった。ちなみに二丁拳銃で左腕やや筋肉痛気味 #DCEXPO pic.twitter.com/31tX4Cjdyt
— 青木とと(ˊ꒳ˋ*) (@lycoris102) 2016年10月27日
- VRでFPSなコンテンツ
- 銃にアタッチメントを物理的に装着することで、ショットの種類が変わる
- 二丁拳銃も出来て、ファミ通Appの人も言ってるけど「男心をくすぐるコンテンツ」
- 他のプレイヤーの位置や銃、アタッチメントをHMD内でトラッキングしており、HMDを付けたままでも位置を認識できる
- HMD内で現実のものを認識出来る体験はリアリティを感じていいなぁ
- ただアタッチメントのほうが滅茶苦茶重くて、10分くらいの体験だったけど左腕筋肉痛に....
- 体験には整理券が必要だった
ハシラス | オムニジャンプ
ハシラス |オムニジャンプしたかったです!ツリバシコウカの方はVive付けさせてもらってちょっと見せてもらったけど、普通に踏み出せなかった…… (高所恐怖症) #DCEXPO pic.twitter.com/2Fy84gIXI2
— 青木とと(ˊ꒳ˋ*) (@lycoris102) 2016年10月27日
- 株式会社ハシラスという日本のVRコンテンツの先駆者によるコンテンツ
- サンシャインの上でやってるコンテンツもこの人達によるもの
- ガジェットを使った体験演出が得意なのだけど、今回はトランポリンを使ったコンテンツ
- 上から吊り下げたゴムを身体に装着し、跳躍力を高めながら減速を緩やかにし、安全性を担保しながら高く飛べる
- 更にHMD内では現実よりも高く飛んでいるように見せているため、脳はかなりの跳躍を感じる(らしい)
Unlimited Corridor (無限回廊)
- 自分の足でVR内を無限に歩き回れるシステム『無限回廊 – Unlimited Corridor』の動画が公開
- VR空間内で歩き回れる技術はViveが有名だがルームスケール (動ける領域) には限りがある
- しかし、このコンテンツは無限に歩き回れることが出来るのが特徴
- 「リダイレクテッド・ウォーキングとはHMDに表示する映像に補正を加えることで、実際には曲がって歩いているにもかかわらず、まっすぐ歩いていると感じさせる技術」
失禁体験装置
失禁体験整理券貰っちゃった/// pic.twitter.com/ioAbdR29B9
— 青木とと(ˊ꒳ˋ*) (@lycoris102) 2016年10月27日
- ニコニコ超会議辺りから非常にバズってたコンテンツ
- 「介護をする上で要介護者の気持ちが分かる」というコンセプトはかなり真面目で好感を抱く
- 最初に水を飲ませる導入、腹部への圧、生暖かさや濡れてる感触 (実際には濡れてない) 様々な仕掛けが再現率を非常に高めていた