注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

UIデザイン ゲームの作り方を実体験から紹介

  • 2020年6月1日
  • 2020年9月9日
  • Adobe XD

UIデザインの知識を用いたゲームの作り方を個人的にまとめて紹介します。

この記事では主に

taku

・UIデザインの設計図はどんな感じなのか?

・UIデザインでゲームを作る一連の手順は?

といった疑問を解決できます。

 

なので

UIソフトでゲームを作ってみたい

という方はこの機会に是非一読してみてください!!

 

気になる箇所がありましたら、目次からジャンプしてもらうと効率的かと思います。

それでは始めていきましょうか。

※使用するソフトは「Adobe XD」です。本格的なゲーム製作というよりは、UIデザインの使用をメインとします。

ゲームの仕様を決める

UIデザインを始める前に、まずはどんなゲームにするかの仕様を決めていきます。

ざっくりと

どこに、何を配置するのか

を決めて仕様書を作っておくと、AdobeXDへデザインとして描き起こすときに楽になるので、オススメです。

*イメージ図↓

GAME-UI-Blueprint

 画面のアートボードサイズは「1136×640」としました。

あくまでも設計イメージなので、ここでは大体こんな感じという軽い感じで問題ないと思います。

 

UIデザインの派生をイメージする

Overallview

ある程度「仕様書」がイメージできたら、仕様書に沿ってAdobe XDでアートボードを作成し、UIデザインをしていきます。

*素材や細かな設定などについては後述

 

上図のように、ベースとなるUIデザインが完成すれば、あとはコピペでアートボードを複製していき、ボタンに応じた各種パターンの画面に手直しをしましょう。

 

Adobe XDではヘッダーの「プロトタイプ」から各図形にアクションをつけることでゲームの操作感を追加します。

actionpatern

アクションは各図形の+ボタンからドラッグして、対象のアートボードへドロップすれば設定が可能です。

また、アクションメニューから

アクションメニュー一覧

移動先

アニメーションの設定

イージングの設定

デュレーションの設定

ができるため、画面切り替え時間なども各アートボードによって設定を変えると味の出るゲームを作れると思います。

 

また、これは自分の失敗談ですが、Adobe XDへ「PNG」形式で画像を読み込むときに、余白が大きすぎると、その余白を含めた図形がアクションの設定範囲となってしまい、上手くアクションを適用できないことがあります。

Effect-Explanation

このような場合の改善策としては

余白を最小限にトリミングする

同じ図形を用意して、「塗り、線」の設定をなしにする

の2パターンがあります。

*他の方法もあれば教えてください。( ̄▽ ̄)

 

素材をXDへ読み込むときに上記のことに気を付けてUIデザインを進めていくと、いざアクションをつけようとした時にトラブルが生じることが少なくなると思うので先に紹介しておきました。

 

実際にゲームのUIデザインをしてみる

それでは、上記のことを念頭に置いて実際にゲームのUIデザインをしていきましょう。

ゲームのUIデザインで使用する素材を調達する

まずは仕様書に沿って、素材を作成および調達していきます。

今回は僕は、敵キャラクターは「ぴぽや倉庫」さんから、その他はすべて自作して素材を揃えました。

 

ぴぽや倉庫

 

特にゲームのUIデザインをする上でキャラクター素材は必須レベルなので

ゲーム素材 無料

というキーワードで検索をかけると、アイコン・キャラクター素材のまとめサイトがヒットするので、そちらから各自作成するUIデザインにあった素材をDLしてみてください。

 

また、素材を作成する場合はPhotoshopやIIlustratorを使って作成するのが手っ取り早いと思います。

今回使用した背景素材はPsで作成したので、興味のある方は下記記事も是非参考にしつつ、背景を作成してみてください。

*作成にはPhotoshopおよびペンタブを使用しています。

デジタルイラスト 雲の加筆で空、夕日、夜空を作ってみた

 

素材の作成、調達はDLやPs、Aiでの作成以外にも、Adobe XDで作成することもあります。

XDの「デザイン」から長方形ツールや楕円形ツールを使って

簡単なパーツ

文字入れ

はXDを使った方が早いので、凝ったデザイン以外は基本XDで作ってしまいましょう。

 

各種パターンに応じたUIデザインを設計する

素材の調達、作成ができたら、いよいよ各種パターンの設計に入ります。

今回は

・GAME OVERパターン3種

・CLEAR!!パターン1種

の計4パターンを紹介します。

 

GAME OVERパターン 1

UIdesign-GAME-Sword

パターン1で使用するアートボード数は計5つです。

ですが

ベースとなるアートボード

 

GAME OVERアートボード

 

コンティニューアートボード

の3つはどのパターンでも共通になるので、実際に作成するのは

ボタンクリック後の画面

攻撃画面

の2種類になります。

 

ボタンクリック後の画面は、ベースとなるアートボードを複製して、クリックしたボタンの上に、同じ大きさの図形を重ね「色:黒 / 不当明度:60」程度にするとクリック後のボタンを作成することができます。

ボタンクリック後、どのような演出にするかは各自オリジナリティを持って作成すると愛着がでますよ(´・ω・)

 

GAME OVERパターン 2

UIdesign-GAME-Heal

こちらもパターン1と基本的には同じです。

戦闘シーンのエフェクトをアクションに応じて変えるだけです。

ここでは「ヒール」のエフェクトを作成するためにPhotoshopでキラメキブラシを使用しました。

ブラシのDLは「Fbrushes」などブラシパターンをDLできるサイトを活用すると良いでしょう。

 

Fbrushes

 

GAME OVERパターン 3

UIdesign-GAME-Magic

こちらも特にパターン1、2と変わりません。

ボタンにあったエフェクトを追加しましょう。

 

CLEAR!!パターン 1

UIdesign-GAME-SP

先ほどのGAME OVERパターンとは違い、CLEAR!!パターンの作成も行います。

クリア後はコンティニュー画面の文字を

もう一度あそぶ

 

終了する

といった具合に変えただけです。

細かく設定したい方は、とことん突き詰めてもらえれば良いと思います。

 

ゲームのメニューをデザインする

UIdesign-GAME-Option

またメニューウィンドウも作成しておくと、ゲーム感を引き立たせることができます。

今回は「ミッション一覧」などを記載しました。

メニューウィンドウ作成で気を付けることは

ウィンドウを閉じるボタンの視認性

だと個人的に思います。

これは個人的な意見ですが、あるゲームをしているときに

taku
メニューウィンドウってどこで閉じるの?

と一瞬戸惑ったことがありました。

 

ほんの少しの戸惑いですが、ユーザーにとっては

使いにくい、見にくいアプリ

という印象を与えかねません。

 

なのでUIデザインの原理原則に最新の注意を払いつつでデザインする必要があると実感しています。

皆さんも気を付けてみてはいかがでしょうか。(あくまでも個人的な一意見ですが)

 

~さいごに~

世間一般でいうクソゲーを作成しましたが、こうやって設計していくんだな!という段階や、素材づくりの楽しさに気づけたのは良かったと思います。

SDキャラクターなどは自分で描いたものを使ってみるのも、愛着が湧くものですね。

UIデザインでゲーム制作を紹介しましたが、参考になれば幸いです。

お疲れ様でした。

UIdesign-gamecreate-xd
学びに関する情報をチェック!