以下の内容はhttps://appgameui.hatenablog.com/entry/2025/07/12/134908より取得しました。


「トライブナイン」与ダメの表示がxyz軸を基準にデザインされている

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

今回は「トライブナイン」の与ダメのアニメーションをご紹介します。
取り上げられることは少ないし、いざ作ろうと思うと悩みそうな部分かな、という印象です。

以下、目次です。

 

与ダメのアニメーションが気持ち良い!

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「トライブナイン」のバトルを見ていて気づいたのですが、与ダメの表示アニメーションがなんだか気持ち良いし、分かりやすい!

よく見ると、xyzを軸に見せ方を変えていました。
以下、詳細です。

通常の与ダメは「上下に揺れる」

通常の与ダメ演出は上下に揺れます。
つまり、「y軸方向」のアニメーションを軸にデザインされています。

   
◆◆◆◆◆◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆

▲通常の与ダメ演出

ちなみに上下に揺らしている理由は与ダメが消える際の演出合わせだと推測します。
表示されるときの動きと、消えるときの動きを合わせた方が、視線の流れが自然になり不用意に誘導されなくて良いよね、という感じです。

あとは「大体のゲームは上下に動かしますし…」という、開発やユーザーの慣れも少なからず影響されているのかな、と。

 

クリティカルな与ダメは「ズーム」

クリティカルな与ダメ演出はズームが用いられています。
つまり、「z軸方向」のアニメーションを軸にデザインされています。

   
◆◆◆◆◆◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆

▲クリティカル時の与ダメ演出

見た感じ300%近くまで拡大しているのかな…。一瞬だけ大きく表示して止めていますね。ズームはシルエットが変化するので目に留まりやすいです。

 

連携時の与ダメは「右からスライドイン」

連携時の与ダメ演出は右からスライドインする演出です。
つまり、「x軸方向」のアニメーションを軸にデザインされています。

   
◆◆◆◆◆◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆

▲連携時の与ダメ演出

連携時はカメラが主に左右に大きく動きます。
カメラの動きと与ダメのアニメーションの方向を合わせることで、全体的に気持ちの良い見た目の演出に繋がっていると感じます。

 

以上です。
与ダメの表示パターンを複数用意する場合、どのような場面でどのような見せ方にするか悩むこともあるのかな、と思います。
与ダメの表示をデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
もし良かったら話のネタ程度に他の方に紹介していただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「トライブナイン」のガイドラインを確認したところ、以下の記載がありました。

ガイドラインに沿って活動いただければ、YouTube、Twitch、X、Facebook、お客様ご自身のウェブサイト、またはその他の動画共有サイトで、ゲームの攻略・紹介・実況・解説動画を投稿していただくことが可能です。また、配信や投稿できる範囲に制限は設けませんので、ゲーム全編を配信・投稿することが可能です。

ゲーム『トライブナイン』配信・投稿ガイドライン - 【公式】トライブナイン / TRIBE NINE

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

トライブナインのコンテンツ利用ガイドラインです。2025年4月19日版です

 

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ




以上の内容はhttps://appgameui.hatenablog.com/entry/2025/07/12/134908より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14