ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「N-INNOCENCE-(エヌ・イノセンス)」キャラの向きとスキルカットイン中のキャラの向きが一致しているため、映像的な違和感が少ないデザイン

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

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

 

今回は「N-INNOCENCE-(エヌ・イノセンス)」(以降、エヌイノ)からキャラのスキルカットインのデザイン事例をご紹介します。キャラのスキルカットインは多くのゲームに見られるため、デザインの引き出しを増やしたい際の参考にしやすいのかな、と思いました。

以下、主な特徴です!

 

キャラクターの向きに合わせてカットインの向きも変わる

「エヌイノ」の場合、キャラクターの向きに合わせてスキルカットインの向きも変わります。キャラクターの向きとスキルカットインの向きが一致しているため、映像的な違和感が少ないように感じました。

f:id:appgameui:20230628101641p:image

アニメーションで見るとこんな感じです。

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

まずは右向きから。ちなみに右向きが正位置です。

 

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

次に左を向いている時です。
このスキルはキャラクターが敵に向かって飛び掛かる演出であるため、向きが一致していることでより自然に見えると思います。

 

f:id:appgameui:20230708160734p:image

ちなみにキャラデザとしてはこんな感じです。比較的左右対称のデザインです。

 

デザインも反転する

さきほど紹介したキャラクターは比較的左右対称のデザインでした。
ただ、ゲーム内には左右非対称のデザインのキャラクターもいます。

f:id:appgameui:20230708160642p:image

例えばこの「ファーヴニル」というキャラクターは左腕に特徴があります。
こういった左右非対称のキャラクターの向きを反転させた場合、デザインが維持されるのか気になるかと思います。

 

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

実際の映像がこちらです。まずは右向きから。
左腕に特徴があるデザインですね。

 

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

そしてこちらが左向きのスキルカットインです。今度は右腕に特徴があるデザインになっています。

 

f:id:appgameui:20230708162047p:image

他のキャラクターも見てみましょう。
この「アテナ」というキャラクターは右手に槍を、左手には盾を装備しています。

 

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

まずは右向きのスキルカットインから見てみます。イラストと同じく右手に槍、左手に盾を装備しています。

 

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

次に左向きです。
やはりデザインは反転し、左手に槍、右手に盾を装備しています。

このように「エヌイノ」のスキルカットインの場合、キャラクターの向きが反転すると鏡に映ったようにデザインも左右反転されていました。


以上です。
スキルカットインをデザインする際の参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

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

「N-INNOCENCE-(エヌ・イノセンス)」のガイドラインを確認したところ、以下の記載がありました。

3.動画サイトやSNS等における動画、静止画の利用について

動画、静止画の公開については、「4.禁止事項」の内容を守っていただく事で当社の許可なく使用可能です。

4.禁止事項

当社ゲームを二次利用・二次創作するにあたり、下記の通り禁止事項を設けさせていただきます。
(1)公序良俗に反する内容
(2)当社ゲームのイメージを逸脱する、当社ゲームのイメージを損なう内容
(3)コラボレーション作品など、版権が当社に帰属しないものの利用
(4)ゲーム性を持った二次創作物の制作、及び公表
(5)当社及び第三者の権利を侵害したり、またはその恐れがあるような内容
(6)当社ゲームで個別に禁止されている利用方法
(7)通常プレイ以外の方法で撮影や抽出された動画や静止画の利用
(8)その他、当社が不適切と判断した内容

二次利用|ASOBIMO GAMES | アソビモ株式会社

 

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

エヌイノセンスのコンテンツ利用ガイドラインです画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ