Unityでゲーム制作① ゲーム画面の作成【クラックのススメ2】
前回
Unityでゲーム制作① アイデア出し【クラックのススメ1】 - カルバンスブログ
みなさんこんにちは!
前回の続きから,ということでUnityで作って行きます!
まず作って行くのはこのWindowsのようなmac OSのようなよくわからないデスクトップ画面です。
アイデアシートの一部です
uGUIのbuttonやimageを利用してゲームのガワを作っていきます。 その後で,スクリプトを書いてゲームの機能を付け足して行く感じですね。
Unityを起動して,newから新しいプロジェクトを作成していきます! ちなみに開発環境はこんな感じです。
- mac OS High Sierra 10.13.3
- Unity Personal 2017.3.1f1
- MonoDevelop
新しい世界に降り立った
エディタの入れ直し
ここで何気なくMonoDevelopを開こうとしたrionoに悲劇が襲いかかる!!
あまりにも無慈悲
何回か再インストールしてみたものの,一度Unityプロジェクトを閉じたあとまた開こうとするとこのメッセージが... 対処法はないのかとネットで調べて見ましたが特になく,こんな記事を見つけました。
...。何とも言えない気持ちのなか,MonoDevelopと双極を成す(?)Visual Studioをインストールすることに。 (この時点で結構な時間が経ってます)
さよならMonoDevelop
はい。
- mac OS High Sierra 10.13.3
- Unity Personal 2017.3.1f1
MonoDevelop→ Visual Studio
uGUIとは?
気を取り直して!UnityのUIツールuGUIでゲームの画面を作っていきます。
uGUIはUnity5くらいから導入され,しっかりした機能とその使いやすさが特徴です。 またuGUIを利用する大前提として,CanvasとEventSystemを追加しなければなりません。
追加は右クリックかCreateボタンから
textやimage,buttonを追加したときでも自動的にCanvasとEventSystemは追加される
uGUIはこのCanvas上で配置などを行います。そして重要なのが,Canvas上にあるものは直接カメラに映らないということです。
真ん中がSceneウィンドウ,右がGameウィンドウ
上の写真を見る通り,実際のカメラにはbuttonは写っていませんが,Gameウィンドウには写っていることがわかります。
作成したUIの位置はCanvasの白く囲まれた部分とGameウィンドウが対応しています。
UI限定で考えるとCanvasの白枠 = ゲーム画面 です。
ここら辺は,実際にUIの位置を動かすと感覚的に理解できると思います。
Webサービスのウィンドウ作成
やっとまともな制作に入ります!
まず作るのはWebサービスのウィンドウを作っていきます。
主なイラストはフリー素材を拝借するとして,閉じるボタンなどの小物はなかったり,お気に召さなかったり,ということが結構あるので自分で作ってしまいます。
図形の組み合わせなので絵心のない私でも作れるはず!
というわけで今回使うソフトは,Pixenというドット絵ソフトです。
なかなか高性能でmac対応というのが高ポイント。
最新の有料版と型落ちした無料版などがあるみたいですが,今回は無料版を選択
サクッと
次に作った絵をプロジェクトに持っていきます。ちなみにフォーマットはPNGにしました。
画像などのインポートはドラック&ドロップが一番簡単です
作った画像はそのままでは使えないので設定を変更します。
具体的にはTextureTypeをSprite(2D and UI)に変更。こうすることで,画像をUIで利用できます。
Spriteを選択してApply
SpriteはUIや2Dゲームを作るときの画像の形式,と覚えておけば大丈夫なはず... !
あとはImageをCanvasの子供にして,InspectorウィンドウからSource imageを変更してあげるとうまくいきます。
Kitts
これを...
こうじゃ
てってれー٩(๑òωó๑)۶
UIのサイズが崩れないようにする
いまの状態で,Gameウィンドウの大きさを変えたり,最大化したりするとUIの位置が変わって表示されてしまいます。
私も今までこれに結構悩まされてUIは苦手意識があったのですが,解決策を見つけました。
なんか違う...
全然違う...
その方法は,Scene上にあるCanvasを選択して,InspectorウィンドウのUI Scale Modeを,
Constant Pixel Size → Scale With Screen Size
に変更するだけです。
こんなものがあったなんて
たったこれだけでUIのサイズや位置がウィンドウサイズに自動で最適化してくれるなんて,嬉しい限りです!
文句なし
完璧
というわけで,ウィンドウのガワを作ってみました。
それっぽい
中のデザインはこれから考えて行く予定です。
Twitter風にするのか,某掲示板風にするのか,はたまた。
次回は,サーバー監視カメラとドック?タスクバー?の部分と,余裕があればエラー探しの部分を詰めていきたいと思います。
次回の目標
ではまた(´ ω `)ノシ