Unity お・と・な のLT大会 2016で1年のふりかえりをしました
Unity お・と・な のLT大会
2016作ったコンテンツの一部を紹介
Bound×Boundary
PLAY: Unity WebGL Player | BoundBoundary (音注意)
- 1月の社内ゲームジャムでの成果物
- 2人プレイの引っ張りゲー
- 相手の軌跡に反発するのが特徴
- OnCollisionEnter時の座標を配列に保持し、EdgeCollider2Dに適応
- GGJと社内行事が被って行けなかった悔しさから作った
- ゲームとしては今ひとつ
- 先行圧倒的有利ゲー
仕返しスナイパー★
RhythmicalCreation
PLAY: Unity WebGL Player | RhythmicalCreation (音注意)
- 第5回サウンドゲームジャム成果物
- またLudumDare#35 (テーマ: Shapshit) 提出作品
- Compo: Audio部門で2位を獲得
- これは個人的にもかなり嬉しい出来事で自信に繋がった
- @geekdrums さんの MusicEngine を使用している
- 雰囲気は気に入っているが、判定周りの実装を雑にやってしまったのが残念
GATE OF LUMINOUS FIELD
- 現在作っているゲーム
- 社内のUnityアプリコンテスト向けに制作しているゲーム
- コンセプトは位置情報×ゴルフ
- GoMAPアセットを使用して地形を生成、座標と天気や住所APIを使って現実感を高める工夫
- 以下の記事でも少し実装について触れている
今年を振り返ってみて
- 成果物のクオリティも去年より向上した
- 技術的にも出来る事が増えていて嬉しい
- いままで学習して来た成果が徐々に実り始めている
- 2014年にUnity本格的に使い始めたけど、社内で触ってる人は殆ど居なかった
- 自分に合ってたんだろうなぁ、と思う
- いままで学習して来た成果が徐々に実り始めている
- ただし、まだまだ突き抜けてないというのを今日のLT大会で感じた
- 他の人の突き抜けたトークから考えると、場違いだったレベル
- 自分には沼 (専門分野) が無い
- 人の想像を超えた驚きを提供出来ていない
- 社内でもUnityに関する知識が徐々に普及し始め、アドバンテージではなくなった
- けど、興味がある分野が特に存在する訳ではない
- 長所や成長点を自分自身で見いださないと、どんどん立ち位置が厳しくなって行く
- 来年こそ、自分がどの方面で活躍したいか、いい感じに定めて行けるといいんだけどなぁ
最後に
- 今年のLT大会、恐ろしく面白かった...
- 運営の皆さんありがとうございました!
- 来年も何卒よろしくお願い致します。
【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つの原則 (サイトウアキヒロ氏)
ゲームニクス理論 from TANREN Inc.
www.slideshare.net
- ゲームニクスはおもてなしの文化
- さりげないおもてなし、和の心そのもの
- 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. プロトタイピング自体の動きに左右されないか、どこまで突き詰めればいいか
- 楠さん: 設計をどこで終わらせるかは難しい、メンバーや技術力にも左右、どこまでやるかを決めてやるだけなので開発メンバーと話す感じ