カルバンスブログ

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
次回の目標

ではまた(´ ω `)ノシ

Unityでゲーム制作① アイデア出し【クラックのススメ1】

みなさん初めまして!

この度,「春休みだし,ちゃんとゲーム作るか。ついでにブログも」という軽い気持ちでブログを始めた,rionoです。
これから,よろしくお願いします!

さて,みなさんは毎年1月にIGDA主催で開催される,Global Game Jamをご存知でしょうか?
以下のリンクからドゾー(ちなみに,全世界で制作されたゲームは全てソースコードなどをダウンロードしたり,プレイすることができるようになっています)

globalgamejam.org

詳細については省きますが,毎年多くのクリエイターが参加しており,世界的なイベントとなっています。
実は私が所属している団体も毎年サテライト会場として開催しているんですが,今回は私情によりゲームは作れず運営として参加しました。 ゲームは作れず運営として参加しました。(大事なので2回)

そして今は超絶暇な春休み!ゲームを作らない理由がありませんね!!
実際はMHWをしすぎてるので,逃げ道を作らないようにブログ書いてます。

というわけで,GGJの代わりに春休みでゲームつくっちゃおーー!というのがこの記事の主題です。

イデア出し

では今回のGGJのテーマが何だったかというと,

TRANSMISSION

です。

まずはマインドマップとEMS FrameWorkを使って,どんなゲームを作るか決めて行きます。

f:id:riono210:20180323013650j:plain:w500
今回TRANSMISSIONから連想したもの

マインドマップは多くの方が知っているように,TRANSMISSIONから連想したものをどんどん書いて行くという手法です。
このマインドマップから連想できたものを元に,EMS FrameWorkという手法をとります。

EMS FrameWork とは

簡単に説明すると,「〇〇をして(手段)、××するゲーム(目的)
というように作るゲームがどういったものかが明確にわかります。

例えば...

パズドラ→ パズルを組んで,モンスターを倒すゲーム
スプラトゥーン→インクを飛ばして,陣地を取り合うゲーム
黒猫のウィズ→クイズを解いて,敵を倒すゲーム

みたいな感じです。

そして私が考えたのは次のようになりました!(字が汚いのはご愛嬌ということで...)

f:id:riono210:20180323020159j:plain:w600
EMS FrameWorkで出たアイデア

そしてこの中から作ってみたいと思った4つがこちらです!

  • 壊れたメールを受け取って直し,ちゃんと送信するゲーム
  • モールス信号で呪文を唱え,魔女を倒すゲーム
  • パソコンを操作して,404などのエラーをコンプするゲーム
  • 電圧を操作して磁界を操り,電波を阻止するゲーム

イデアとしてはまだ荒削りで,正直面白いの?といったものも含まれていますね。 ここから,さらにアイデアを固めていきます。

プランニングシート

ここで,とある場所から拾ってきたプランニングシートを参考に4つがどんなゲームか,というのを書いていきます。

  • 壊れたメールを受け取って直し,ちゃんと送信するゲーム f:id:riono210:20180323021350j:plain
    タイトル: スレ修正職人

これは,文章が壊れたというのはそのままに,有名なコピペやネタを穴埋めクイズにしました。
複数あるパネルをドラック&ドロップで埋めて,修正ボタンで回答します。
また一定数正解するとステージクリアとなり,ステージが進むと問題が難しくなります。
問題はイキリトだったりちょっと話題になったC言語Hello World!を出そうかなと考えたり。

Cr on Twitter: "私の環境だとこれ完全に文字化けしてるんだけど、この状態で普通に内容が理解できてしまってヒトのパターン認識怖い… "

  • モールス信号で呪文を唱え,魔女を倒すゲーム f:id:riono210:20180323022249j:plain
    タイトル:モールスマジック

こちらは,モールス信号のようなものでキャラクターを操作して敵を倒すという風になりました。
3×3マス内を敵の攻撃を避けつつモールス信号のようなもの(重要)で移動と攻撃をします。
また,3つの行動まで同時にできる点と,魔法にはMPを消費する点があります。
信号(呪文)に関しては,16通りくらい作ろうかなとか,3つの行動を組み合わせて大魔術を打てたらなと考えてます。

  • パソコンを操作して,404などのエラーをコンプするゲーム f:id:riono210:20180323023222j:plain
    タイトル:クラックのススメ

こちらは最初から考えていたのとあまり変わらず,画面内のパソコンを操作してhttpステータスの400番台と500番台をコンプリートしよう,というゲームです。いわゆる,探しものゲームに似ているんじゃないでしょうか。
最初は機内モードボタンなどでクライアントエラー(400番台)しか取ることができませんが,ある程度エラーを集めると鍵がかかっていたファイルがアンロックされて,ウィルスだったり物理的にサーバーを攻撃できたりとしていきます。

  • 電圧を操作して磁界を操り,電波を阻止するゲーム f:id:riono210:20180323024020j:plain
    タイトル:電界コイル

最後は,電波を阻止ではなく電子を届けるという内容になりました。
常に一定の力が働いているコンデンサーの中を,電子に力を加えることができるコイルを操ってゴールまで届けます。
レミングの法則だったり,右ねじの法則などからアイデアがきてますね。
何かのアニメタイトルに似ているような気がしますが,気のせいです。

制作するゲーム

というわけでこの4つの中から制作するゲームは...

クラッカーのススメ

に決定しました!!ヾ(⌒▽⌒)ゞ

次回からは本格的にUnityで作って行きます!

参考

どうやってもゲームのアイデアになるEMS Frameworkの紹介 | 元もじぴったんプロデューサーの生の知恵ブログ