簡単なスロットゲームの作り方(2D) 前編
※この記事はUnityのバージョンが「Unity2017」用の記事です。
※「Unity2017」以前のバージョンではSprireMaskの機能が存在しないため、この手順通りでは作成出来ませんのでご注意下さい。
お盆休みも終わりましたが、みなさんいかがお過ごしでしょうか。
唐突ですが今回はUnityで「簡単なスロットゲームの作り方(2D)」について書いていこうと思います。
最後までいくとこんな感じのゲームが出来ます。
(8/30追記:URLが間違っていたので修正しました)
スロットゲーム(サンプルプロジェクト) | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう
長くなりそうなので3つの記事に分割します。
スロットマシンといえば個人的に、ポケモンのタマムシシティのゲームコーナーが印象深いです。ポリゴンをゲットしたくてずっとやっていた気がします。
ポケモンBW以降はゲームコーナが廃止されてしまいました。少し寂しいですがしょうがないですね...
では本題に、
1.用意するもの
- スロットの絵柄の画像(4〜8種類くらい)
- スロットマシンの枠画像(下記)
以上。
最低限必要なのは(Unity本体とかを除けば)これだけです。
今回、スロットの絵柄については「いらすとや」様の画像を使用させていただきました。
スロットマシンの枠画像は以下の画像を保存してお使い下さい(超低クオリティですいません...)。
もちろんご自分で用意した画像でも大丈夫です。(この記事では256×256のサイズの画像を使用しています。)
2.作り方(準備編)
では実際に作っていきます。
(1) 新規プロジェクトを作成してください
(Project name:任意 3D/2D:2D Location:任意の場所)
(2)「用意するもの」で用意した画像をプロジェクトにインポートして下さい。(Asset->Import New Asset)
(3) 2D Object->Sprite Mask でSprite Maskを作成し、以下のように値を変更して下さい。
Sprite Maskの設定 : 名前を"Mask"、Scaleをx=2,y=2、Spriteにスロットマシンの枠画像に変更。
(4)Maskの子要素にSpriteを作成します。spriteの設定は以下の通りです。
Speiteの設定 : 名前を"BackGround"、Spriteに先程と同じスロットマシンの枠画像を設定。
(5)絵柄画像のサイズ合わせをします。絵柄画像のサイズをスロットマシンの枠画像のサイズの大体1/3くらいになるようにします。
私は以下のやり方でやりました。(もっといい方法あるかも)
①BackGroundのScaleをx=0.3,y=0.3に変更
②Maskの子要素にSpriteを作成し、Spriteに絵柄画像を設定。名前を数字にする(1つ目の画像は"1"、2つ目の画像は"2"...)
③SpriteのサイズをBackGroundのサイズと同じくらいになるように調整する。
④Positionが(0,0,0)、Order in Layerを1、Mask InteractionをVisible Inside Maskに変更
⑤プレハブ化する。
この手順を全ての絵柄画像の設定が終わるまで繰り返します。
サイズの調整が終わったら BackGroundのサイズをx=1,y=1に戻しておいて下さい。
(6)Maskの子要素に空のGameObjectを3つ作成し、それぞれ以下のように設定します。
1つ目:名前「Reel_L」、Position(-0.9, 0, 0)
2つ目:名前「Reel_C」、Position(0, 0, 0)
3つ目:名前「Reel_R」、Position(0.9, 0, 0)
(7)ボタンを3つ作成します(UI->Button)。
名前はなんでも大丈夫ですが、自分で分かりやすい名前にしてください。
(私は「StopButton_L」,「StopButton_C」「StopButton_R」にしました。)
ボタンの設定は以下の画像のようにして下さい。
StopButton_L:Pos(-90, -180, 0) Width,Height=70 Interactable=false
StopButton_C:Pos(0, -180, 0) Width,Height=70 Interactable=false
StopButton_R:Pos(90, -180, 0) Width,Height=70 Interactable=false
(8)StopButtonの子要素のTextの内容を"Stop"に変更
(9)StopButtonのいずれかを複製(Duplicate)し、以下のように設定を変更します。
Buttonの設定:名前「PlayButton」、PosX=200,PosY=0、Interactable=true
(10)PlayButtonの子要素のTextの内容を"Play"に変更
Gameビューに切り替えて以下の画像のようなレイアウトになればOKです。
準備編はこれで以上になります。
次の記事では実際にコードを記述してゲームを完成させていきます。
後編の記事については後日書きたいと思います。
(8/20追記:後編の記事を追加しました。)
最後までお読み頂きありがとうございました。