はてなブックマーク

施策が決定し、画面の内容が決まっていくことで必要な演出が入る場所が見えてきます。 この時やることは、2つあります。 ・演出必要箇所の把握、洗い出し ・工数出し 演出箇所の把握、洗い出し 演出がどこに入るのか、画面の流れはどうなるのかを把握しておきましょう。 まだデザインされた画面ができていないと思うので、演出ボリュームは見えにくいかと思いますがその中でもわかる範囲で必要演出洗い出しを行います。 ・画面遷移_in/out ・レベルアップ演出 ・ゲージ演出 ・カウントアップ…etc… 洗い出しても、演出数は増えることもよくあるので参考程度に洗い出します。 工数洗い出し 必要な演出箇所がわかったら、どのくらい工数が発生するか考えます。 僕の場合は作業工数が1人日の場合、動作確認、FB対応、バッファと合わせて工数2〜2.5人日に盛ることもあります。 慣れている作業なら問題ないのですが、あまり作業し

UIデザイナーの方がUIアニメーションや遷移アニメーション、レベルアップアニメーション(総合してUI演出と呼ぶ)などをつけることもあると思いますが、UI演出をやったことがない方が初めて演出をつけようと思った場合、何をすればいいか迷うかと思い...

Blenderで3Dメッシュを作り、AfterEffectsで連番テクスチャを作り、Photoshopで画像を一枚にまとめてUnityで表現する流れをまとめてみました。 細かい画面の説明はせずに流れを書いていきます。 まずはBlenderの準備編になりますが、インストール編が不要な方はタイトル欄から好きな項目へショートカットできます。

ゲームの演出はユーザーを楽しませるために必殺技やカットイン、進化、ガチャ演出などでなるべく派手にしようと暗い空間に光をつけて視覚に訴えようとします。 そんな演出でやってはいけないのがコントラストの強い点滅になります。 この光の点滅は光過敏性発作、いわゆるポケモンショック（今の人たちは知らないかも・・・？）で、体調不良に陥る可能性があります。 ポケモンショックによって体調不良を訴える人が出たため、テレビ業界では点滅のガイドラインが入り、コンシューマーゲーム業界ではゲーム冒頭に注意喚起の文言が入りました。 しかし、スマホアプリでは規制がないため、作り手が意識して過剰な点滅を表現しないようにする必要があります。 光過敏性発作を避けるために 脳への強い光刺激によって起きるため、演出制作時に以下の項目に注意して作るとよいです。 光の点滅が一秒間に3回を超えてはいけない（1/3秒に一回まで）鮮やかな赤

円を描くアニメーションでSimulation SpaceをLocalかWorldで全く違う見え方になります。 Simulation Spaceは親オブジェクトにパーティクルの追従をするかどうかで、Localは追従し、Worldは追従しない状態です。 アニメーションをつけるときは追従をOff（World）にすることで自然な演出をすることができます。 筆文字 emissionのrate over distanceを10にして、Size over Lifetimeでサイズを縮小させていくことで筆のようなアニメーションにすることができます。 消えていくときにアルファでフェードアウトもさせるとより自然です。

パーティクル自体はこれでまずはできました。 ここから色々な項目をいじってパーティクルの制御を行います。 機能を知る パーティクルの機能は凄くたくさんあるため、まずはよく使う機能だけをまとめてみました。 初めは赤以外の箇所をいじってみてパーティクルの理解を深めるのが良いかと思います。

まず先にUI演出と書いていますが、UIアニメーションとUI演出の二つ違いを書いておきます。（UI演出という言葉を勝手に作っているので自分の解釈の説明です） ・UIアニメーション ユーザーの知りたい機能や視線の誘導、快適さを追求する動き ・UI演出 世界観のようにゲーム自体の表現や期待感のようなユーザーの感情を動かす動き ゲームはアプリと違い、機能性だけを追求するものではないため、UI演出が大切になります。 アプリはユーザーへ快適と便利を提供しますが、ゲームはエンターテイメントを提供するものでアプリとは仕様が全く異なります。 だからこそ、機能重視のUIアニメーションはとても大事ですが、UI演出もゲームにとってはとても大事な存在になっています。 最近までNG系UIアニメーションなどでわかりやすくシンプルにしていくことを書いていましたが、この記事では演出もゲーム作りの一つで大事な要素ということに

Ribbon：パーティクルパーティクルをつなげるように線が伸びる Particles：発生源からパーティクルに追従する線が伸びる Mode：Ribbon Ribbon Count パーティクルを繋ぐリボンの数

最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい

こちらの3つのアニメーションはボタン押下後に小中大のウインドウを表示させていますが、大きさによってアニメーションを変化させています。 小さいものほど動きは早く、大きいものほど動きは遅くすることでより自然なアニメーションに見せることができます。 この動きがもし逆だった場合はどう見えるのかが下の画像になります。 小さいウインドウの動きはゆっくりに見え、少し鈍い感じを覚えます。 大きいウインドウでは素早く動くため視覚への負荷が大きく、衝撃、緊急性があるように見えます。 より良いアニメーションは現実の動きに近いアニメーションが自然に感じられるため、現実世界と同じように大きいものはゆっくり動き、小さいものは素早く動くことで自然な体験を得ることができます。 それでもユーザーへの待機時間を減らすためになるべく早くアニメーションを終わらせたい場合は途中から再生させることをお勧めします。

意識していること 飽きさせない これ！ 動きは見ていて工夫させないと飽きます。 主に、同じような場面、動き、スピードが続くと退屈に感じてしまうので、少しでもその感情をなくすために様々なところに変化をつけ、見ていて飽きないようにしていきます。 飽きさせないために何をするかですが、緩急、粗密、ジャンプ率、明暗に変化を加え、印象を変えて飽きさせないようにします。 緩急でメリハリ

UI演出という言葉はブログタイトルにもありますが、表現をUIアニメーションでもなく、UIモーションでもなく、UI演出と表現しているのは、「演出」は様々な効果を加え、ユーザー（見ている人）を楽しませるためのものだと思っているからです。 ゲームではUIに動きを入れるだけでなく、エフェクトやSE、表現方法で楽しさと快適さ、没入感を提供しているため、総合してUI演出と自分は呼んでいます。 演出はユーザーの体験をより良くするために必要ですが、使い方を間違えると「演出はいらない」「スキップさせて」とユーザーは思ってしまいます。 演出がもっさりしていたり、長かったり、作り手側が無駄に意味のない演出を取り入れた、または気持ちの良い動きを追求しなかった結果、ユーザーに演出は必要ないと思われてしまうことになります。 今回はそんな演出がもたらす役割を記事として書きました。 UI演出の役割として6つ挙げてみました

スクロールは当たり前のように気持ちの良い動きがゲームでは表現されていますが、それはちゃんと調整された物で、もし調整がない場合は上の画像のように重くて硬く、気持ちよい感じは皆無になってしまいます。 指を離した後にピタッと止まるのは現実ではありえない動作で、不自然な動きを見せられているため、見ていて気持ち良い動きにはならず、認識とのギャップでストレスが強くかかります。 調整を入れてみたもの 慣性の法則を入れることで自分の指で自然に操作している感じを入れました。 さらにオーバーシュートを追加することで柔らかさを表現し、より自然に見えるようにしています。 指にしっかり追従し、離したあとも思ったように動く動作を入れることで気持ちよさを表現しています。 あとは調整して触って調整して触っての繰り返しになるかと思います。 その他の印象付ける動き スクロールは調整さえ済めば他の要望はないですが、ちょっと見せ

ダイアログはボタン押下時、別画面へ遷移はせずに別ウインドウが飛び出す演出で、ソーシャルゲームではよく使われます。webのダイアログでは広告が主流で嫌われているみたいですが、ゲームではお知らせや注意させる動きで使われることが多いです。 ゲーム内でのダイアログの役割 ・説明/詳細 チュートリアルでの説明やアイテム、キャラの詳細など、より詳しい情報の表示 ・確認事項 報酬受け取り時に何を受け取ったのか確認や、ユーザー資産を使用する時の確認など OKボタン、はい、いいえ、など ・システムメッセージ サーバー通信エラーやメンテナンス入りなど注意を促すもの ・お知らせ アプリ起動後のウェブを介したお知らせ系 ダイアログ時の背景変化 ダイアログはウインドウだけではなく、背景もどう表現するか決める必要があります。 背景を暗くするのか、白くするのか、ぼかすのか、最近は背景にゲームの特色となる記号を入れること