カルバンスブログ

Unityでのゲーム制作全般(イラスト・BGMは除く)をやってます。イベント参加・運営について書くかも?

Unityでゲーム制作① ゲーム画面の作成【クラックのススメ2】

前回

Unityでゲーム制作① アイデア出し【クラックのススメ1】 - カルバンスブログ


みなさんこんにちは!

前回の続きから,ということでUnityで作って行きます!

まず作って行くのはこのWindowsのようなmac OSのようなよくわからないデスクトップ画面です。

f:id:riono210:20180327015007j:plain:w500
イデアシートの一部です

uGUIのbuttonやimageを利用してゲームのガワを作っていきます。 その後で,スクリプトを書いてゲームの機能を付け足して行く感じですね。

Unityを起動して,newから新しいプロジェクトを作成していきます! ちなみに開発環境はこんな感じです。

f:id:riono210:20180327014750p:plain:w500
新しい世界に降り立った

エディタの入れ直し

ここで何気なくMonoDevelopを開こうとしたrionoに悲劇が襲いかかる!!

f:id:riono210:20180327020115p:plain
あまりにも無慈悲

何回か再インストールしてみたものの,一度Unityプロジェクトを閉じたあとまた開こうとするとこのメッセージが... 対処法はないのかとネットで調べて見ましたが特になく,こんな記事を見つけました。

kan-kikuchi.hatenablog.com

...。何とも言えない気持ちのなか,MonoDevelopと双極を成す(?)Visual Studioをインストールすることに。 (この時点で結構な時間が経ってます)

f:id:riono210:20180327021126p:plain:w500
さよならMonoDevelop

はい。

uGUIとは?

気を取り直して!UnityのUIツールuGUIでゲームの画面を作っていきます。

uGUIはUnity5くらいから導入され,しっかりした機能とその使いやすさが特徴です。 またuGUIを利用する大前提として,CanvasEventSystemを追加しなければなりません。

f:id:riono210:20180327221823p:plain:w500
追加は右クリックかCreateボタンから

f:id:riono210:20180327222528p:plain:w500
textやimage,buttonを追加したときでも自動的にCanvasとEventSystemは追加される

uGUIはこのCanvas上で配置などを行います。そして重要なのが,Canvas上にあるものは直接カメラに映らないということです。

f:id:riono210:20180327224602p:plain
真ん中がSceneウィンドウ,右がGameウィンドウ

上の写真を見る通り,実際のカメラにはbuttonは写っていませんが,Gameウィンドウには写っていることがわかります。
作成したUIの位置はCanvasの白く囲まれた部分とGameウィンドウが対応しています。

UI限定で考えるとCanvasの白枠 = ゲーム画面 です。

ここら辺は,実際にUIの位置を動かすと感覚的に理解できると思います。

Webサービスのウィンドウ作成

やっとまともな制作に入ります!

まず作るのはWebサービスのウィンドウを作っていきます。
主なイラストはフリー素材を拝借するとして,閉じるボタンなどの小物はなかったり,お気に召さなかったり,ということが結構あるので自分で作ってしまいます。

図形の組み合わせなので絵心のない私でも作れるはず!

というわけで今回使うソフトは,Pixenというドット絵ソフトです。
なかなか高性能でmac対応というのが高ポイント。

f:id:riono210:20180327231508p:plain:w500
最新の有料版と型落ちした無料版などがあるみたいですが,今回は無料版を選択

f:id:riono210:20180327232614p:plain:w500
サクッと

次に作った絵をプロジェクトに持っていきます。ちなみにフォーマットはPNGにしました。

f:id:riono210:20180327233100p:plain:w500
画像などのインポートはドラック&ドロップが一番簡単です

作った画像はそのままでは使えないので設定を変更します。
具体的にはTextureTypeをSprite(2D and UI)に変更。こうすることで,画像をUIで利用できます。

f:id:riono210:20180327234333p:plain:w500
Spriteを選択してApply

SpriteはUIや2Dゲームを作るときの画像の形式,と覚えておけば大丈夫なはず... !

あとはImageをCanvasの子供にして,InspectorウィンドウからSource imageを変更してあげるとうまくいきます。

f:id:riono210:20180327235149p:plain:w500
Kitts

f:id:riono210:20180327234950p:plain:w500
これを...

f:id:riono210:20180327234953p:plain:w500
こうじゃ

f:id:riono210:20180327235320p:plain:w500
てってれー٩(๑òωó๑)۶

UIのサイズが崩れないようにする

いまの状態で,Gameウィンドウの大きさを変えたり,最大化したりするとUIの位置が変わって表示されてしまいます。
私も今までこれに結構悩まされてUIは苦手意識があったのですが,解決策を見つけました。

f:id:riono210:20180328012823p:plainf:id:riono210:20180328013016p:plain

なんか違う...

f:id:riono210:20180328012928p:plain:w500
全然違う...

その方法は,Scene上にあるCanvasを選択して,InspectorウィンドウのUI Scale Modeを,
Constant Pixel Size → Scale With Screen Size
に変更するだけです。

f:id:riono210:20180328014410p:plain:w500
こんなものがあったなんて

たったこれだけでUIのサイズや位置がウィンドウサイズに自動で最適化してくれるなんて,嬉しい限りです!

f:id:riono210:20180328014016p:plainf:id:riono210:20180328014113p:plain

文句なし

f:id:riono210:20180328014124p:plain:w500
完璧

というわけで,ウィンドウのガワを作ってみました。

f:id:riono210:20180328014738p:plain:w500
それっぽい

中のデザインはこれから考えて行く予定です。
Twitter風にするのか,某掲示板風にするのか,はたまた。

次回は,サーバー監視カメラとドック?タスクバー?の部分と,余裕があればエラー探しの部分を詰めていきたいと思います。

f:id:riono210:20180328015447j:plain:w500
次回の目標

ではまた(´ ω `)ノシ