[Unity]ルーレットの配置から背景色の指定までの工程について

ゲームを作成するための流れをある程度固めたところで、実際にプロジェクトを作成していきます。

前回の投稿から結構時間が経過してしまいましたが、思い立ったらすぐにゲーム制作に取り組みたいところです。そうじゃないと何やっていたのか忘れてしまいがちですしね。

スポンサーリンク

Unityを起動してプロジェクトを作成する

プロジェクトを作成しないことには何も始まりません。

unityでは3Dゲームも作成することが出来ますが、今回は2Dで作っていきます。

プロジェクトに追加する素材について

一番大事な事を忘れていました。

素材がないことにはゲームを作ることは出来ません。

ネット上にあるフリー素材を使っても良かったのですが、オリジナリティを出したかったので自分で素材を作ることにします。素材といってもルーレットと針ぐらいです。

ペイントで素材を作る

これくらいの素材ならペイントでも十分ですね。アート級の素材を作る場合は専用のソフトが必要になると思いますけど。

ただ、そういった素材作りが苦手だという方向けにアセットストアという無料で素材をダウンロードすることが出来るスーパーマーケットが用意されています。

かなりたくさんの種類がありますので、初心者にとっては凄くありがたいですね。

ペイントでルーレット素材を作成中

とりあえず私は、上の画像のようにルーレットの土台を作ってみました。

6マス用意しましたが、このままだと色で区分されているだけで何の意味も持ちません。

ペイントで作成したルーレット素材

どうしようか非常に悩みましたが、北斗の拳が好きなこともあり、マスの数がちょうど6マスだったので「南斗六聖拳」の宿星をそれぞれのマスに追加しました。

慈母がピンクなのは分かるけど、それ以外が色とかみ合っていなくてごめんなさい。

ペイントで作成した針素材

針素材の作成時間に至っては30秒もかからないうちに完成。

針自体に工夫できることがあるか考えましたが、特になかったのでこのままでOK。

目的は、どのマスを指しているのか分かるようにすることですからね。

作成した素材をプロジェクトに追加する

さっそく作り立ての素材をプロジェクトに追加していきます。

プロジェクトウィンドウに、先ほど作ったルーレットと針の画像をドラッグ&ドロップします。

unityエディタでシーンビューにルーレットを配置

追加してシーンビューで確認したところで気がついたんですが、画像が透過pngになっていない!

ゲーム自体に大きな支障はないかもしれませんが、このままだと見栄えが悪いので透過pngを作成することにします。

作成した素材を透過pngにする

Windows10を利用している方なら、ペイント3Dで簡単に透過pngが作れます。

ペイント3Dで透過pngを作成

ペイント3Dを起動して、マジック選択をクリック。

これで、縁取りしてくれるので完了をクリックします。

後はこの画像をコピーして、メニューから新規作成を選択し、コピーした画像を貼り付けてキャンパスタグから「透明なキャンパス」をオンにすればOK。

透過pngになるので画像を保存します。

透過png画像をプロジェクトに追加する

本題に戻って透過pngに変身した新たな画像をプロジェクトウィンドウにドラッグ&ドロップします。

シーンビューに配置された透過pngのルーレット

これで、見た目がスッキリしました。やはり背景の色は統一したほうが見栄えがいいですね。

素材を作成する場合は、透過pngを作るようにする。

Android用に動作するための設定を行う

今回は、Androidで動作するゲームを作るのでその設定を行っておきます。

まずは、どのプラットフォームに対してビルドするのかを設定します。

左上の「File」から「Build Settings」をクリック。

androidに対してビルドを行う設定

「Android」を指定して「Switch Platform」ボタンをクリック。

これで、Android用にビルドできるようになりました。

iOS向けのゲームを作りたい場合は、同じように「iOS」を選択すれば良いってことですね。

シーンを保存する

ここまで準備が出来たらシーンを作成して保存しておきます。

「File」から「Save Scene as」を選択することでシーンを保存できます。

これから本格的にゲームを作っていく中で、定期的にシーンを保存することを忘れないようにしないといけません。

ポケモンでも、ジムリーダー戦前にはセーブしますよね?それと同じような作業をゲーム作成中でも行っていきます。

シーンが保存できたかどうかは、プロジェクトウィンドウにて確認。unityのアイコンが表示されていればちゃんと保存できている状態です。

作業中は定期的にセーブする事を忘れないようにする!

シーンにオブジェクトを配置する

シーンビューにルーレットの画像を配置して、インスペクタータブから座標を指定します。

ヒエラルキーウィンドウからルーレットを選択してインスペクターの数値をいじります。

ルーレットのインスペクター

ポジションにてXとYを0にしました。

Zにも0が入っていますが、2Dゲームですので基本的に位置に影響を与えることはありません。ただし、Zに「-10」より小さい数値を入れてしまうとゲームが画面に映らなくなってしまいます。

これは、シーンを撮影するカメラの位置が「Z = -10」に置かれているからです。ですから、2Dゲームを作る際には、Z座標を「0」にしておきます。

XとYを0にすることで、中央にルーレットを配置することが出来ます。

針の配置について

次に、針の配置です。

先ほどと同じように、針の画像をシーンビューに持っていきインスペクターから座標を指定します。

さっきと同じようにXとYに0を指定すると重なってしまうので、Yを「4」程度にします。

ルーレットのシーンビューとゲームビューでの見え方

すると、いい感じになりましたね。

ちなみに、数値を指定しなくてもシーンビューからマウスでも微調整が出来ます。デザイン重視で細かく座標を指定したい場合は、マウスを使った方がいいかも。

ゲームビューでの見え方も悪くないですね。ちょっとゲームっぽくなってきた。

背景の色を変えたい

このままだと背景が青色なので、もうちょっと柔らかい色に変更したいところ。

カメラのインスペクターから、「Back ground」のカラーバーをクリックすることで背景の色を変更できます。

背景色を黄色に変更されたゲームビュー

色合いのセンスがあまりない私ですが、明るめにしてみた。

義星のマスとやや被っているのが気になりますが、青よりはましですね。

指定した色ですが、カラーコードでは「F3F3BF」ですね。カラーコードが使えるので細かく色の指定が出来ます。

背景の色は、ゲームのレイアウトを決める上でも非常に重要なポイントだと思います。見た目という点でも大事なのでじっくり時間をかけて、なぜその色じゃないとダメなのか考えながら決めたいですね。

まとめ

unityエディタに画像をアップして配置するだけで、思った以上にゲームっぽくなります。

ただし、今回のようにスムーズに作業が進まず途中で素材作りの為に本題から脱線するような事がゲームを作成していく中でよくあります。

ゲームを作る前に頭の中で計画していた通りに作業が進まない事が多いわけですね。

実際にゲーム作りに励んでいると、あれが必要だとか、大事な忘れ物をしていたとか気づかされていくことがあり、その1つ1つの問題を解決していくことでクオリティの高いゲームが出来るものだと感じますね。

次からはもっと本格的な作業として、スクリプトを組んでいきます。

スクリプトを組まずとも、ここまでの状態に仕上げることが出来るのもunityの魅力ですね。