オリジナル3D同人制作日記その2 「タイトル画面とUI」

160124_01_Title

<目次>

01.制作開始 → http://tofu.yakan.net/c160124/
02.タイトル画面とUI → この記事
03.ちっぱいと日焼けあととヘアー → http://tofu.yakan.net/c160304/
04.リアルタイムポーズエディターとオートリップシンク(マイクロビキニ添え)  →http://tofu.yakan.net/c160415/

 

■UI(ユーザーインターフェース)について

最初から正直に書いちゃいますとゲームを作る上で、一番苦手なのがUI作りです。
苦手というよりは、一番経験が少ないというのが正しいかもしれません。

同人誌を書いていた時もそうだったのですが、漫画の文法をまったくわからない状態で
漫画を描き始めたので、その時はひたすらいろんなエロ漫画を読みまくって、
自分がいいと思う表現を自分の中に消化して、それを自分なりに表現する、という感じでした。

UIも同じ感覚で、パッとみていい感じのUI、ダサいUIというのは瞬間的にわかるのですが、
いざ自分でオリジナルのUIを作るとなると、まったく作れないものです。
こういうUIいいんじゃない?と思って作ってみても、出来てみるとすごいダサかったりします。

これはもう単純にUIとUXの引き出しが少なすぎるのが問題だと思うので、
同人誌の時と同じで、いろんなゲームのUIを見まくって、こうするとよく見える、
こうするとダサくなるっていうのを自分なりに考えて、試行錯誤しながら作っていきました。

ちなみにスマホゲーだけですが、このブログがすごく参考になりました。

ゲームUIブログ → http://gameui.matme.info/blog/

 

■uGUIについて

現状ではUnityでGUIを作るには、uGUI(Unity UIとも呼ぶ)を使うのがベターだと思うのですが、
uGUIはUnity4.6で追加された機能なので、私はこれまで別にアセット(NGUIやButtoner)を使って、
UI制作をしていました。

なのでuGUIが追加されて一年以上経つのですが、未だにuGUIの使い方がよくわかってなかったので、
まずは一から勉強しなおしました。
uGUIの勉強には以下の2つの本を読みました。

51HWgaoP5UL._AA160_ 61U-lLvuxuL._AA160_

1. UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード 
2. uGUIではじめるUnity UIデザインの教科書-Unity5対応

ざっくりと読んでみた感想を言うと、1の本は実例に習ってuGUIの各コンポーネントの
使い方を覚えていくのが、よりわかりやすくてよかったですね。
2の本は各コンポーネントのパラメーターごとの意味が詳しく書いてあるので、
より深くuGUIを理解するのにはとても有用でした。

単純に使い方を覚えたい場合はどちらか1冊読めば十分uGUIを理解できると思います。
どちらもなか見検索に対応してるので、自分の好みに合いそうな方を読めば大丈夫だと思います。

 

■uGUIとPlaymakerの連携

本を読んでてわかったのですが、uGUIは簡単にボタンやスクロールバーなどのUIは作れるけれど、
それを制御するにはやはりスクリプトを書かなければなりません。(当たり前ですね)

じゃあ私の場合はスクリプトが書けないので、Playmakerと連携していくしかないのですが、
デフォルトの状態のPlaymakerだとuGUI用のPlayamakerアクションがありません。
なので、Playmakerの公式ページからuGUI用のアクションをダウンロードしてきます。

https://hutonggames.fogbugz.com/default.asp?W1192

上記リンクの「Package for uGUI Proxy With Full set of Actions」をクリックするとunitypackageファイル
がダウンロードされますので、それをプロジェクトにインストールすれば、uGUIアクションが追加されます。

ss160215_01

これでuGUIとPlaymakerが連携しやすくなりました。
アクションの他にも「Playmaker uGUI Component Proxy」など色々スクリプトも追加されていて、
スクロールバーの値を簡単に取得できたりします。詳しくは以下の動画を参照してください。

uGUIの他にもBlendShapeやMecanim、Shrunken、Unity2Dのアクションなどがあります。
あとサードパーティのアセットのアクションも各種用意されているので、
必要に応じてインストールしておくと、よりPlaymakerが快適になります。
このアクションの多さがPlaymakerの強みの一つですね。

https://hutonggames.fogbugz.com/default.asp?W714

 

■実際にゲーム内UIをつくってみる

とりあえずuGUIの使い方と、Playmakerとの連携方法はわかったので、
まずはデザインは考えずに、ゲーム画面上に実際にUIをつくってみました。

ちゃんと勉強したおかげでこれはサクッとできたので、ここからデザインを考えていきます。

メインメニュー画面では各イベントにシームレスに移行したかったので、
それ用のモーションを作って、こんな感じになりました。
(さらりと書いてますがここまでかなりの試行錯誤を繰り返しました・・・)

メニュー画面はちょっとハイカラですが、タイトルはシンプルにつくってみました。

ボタンをアニメーションさせるのはiTweenやDoTweenなどの、
Tween系アセットをPlaymaker内で使ってます。

 

■息抜き

この辺でちょっとUI作りに疲れてきたので、息抜きも兼ねてヘアのダイナミクス仕込んだり、
キャラを回転して観れるようにしたり、スク水を作ったりしました。

 

■お着替えモードの実装

作ったスク水はもちろんゲーム内で使うので、お着替えモードのUIをつくって、
実際に動かしてみました!(ここのUIもかなり試行錯誤しました・・・)

ツイートでも言ってますが、かなりゲームっぽくなってきました。

 

■おまけ

ちなみにUIのPlayamaker状態遷移はこんな感じです。
難しいことは一切やってなく、なるべくシンプルに作ってます。
(Unityエディター上で録画すると重くてちょっとカクカクしてます)

 

■UI制作もまだまだ続く

今日でちょうど制作開始から1ヶ月半となりました。
UI制作に苦戦しすぎて、予定よりちょっと遅れ始めてます・・・。

ただUIを作るのも、思い通りにならないもどかしさはありますが、
いい感じのUIが作れた時はすごく楽しいです。

まだ作るべきUIはたくさんあるので、楽しみながらちょっとずつ成長できればなー、
と思っています。

普段はこのTwitterアカウントで日々制作進捗をつぶやいていますので、
フォローしてもらえたら嬉しいです!
https://twitter.com/flashsky04

01.制作開始 → http://tofu.yakan.net/c160124/
02.タイトル画面とUI → この記事
03.ちっぱいと日焼けあととヘアー → http://tofu.yakan.net/c160304/
04.リアルタイムポーズエディターとオートリップシンク(マイクロビキニ添え)  →http://tofu.yakan.net/c160415/

関連記事

新作タイトル

Title_COMP_630

2015-7-31

中二病パラダイス

DLsiteランキング

DMMランキング

カテゴリー

ページ上部へ戻る
TOFU SOFTは3D同人エロゲ制作サークルです
あなたは18歳以上ですか?(Are you over 18?)