簡単なスロットゲームの作り方(2D) 前編

この記事はUnityのバージョンが「Unity2017」用の記事です。

※「Unity2017」以前のバージョンではSprireMaskの機能が存在しないため、この手順通りでは作成出来ませんのでご注意下さい。

 

 お盆休みも終わりましたが、みなさんいかがお過ごしでしょうか。

 

 唐突ですが今回はUnityで「簡単なスロットゲームの作り方(2D)」について書いていこうと思います。

 

最後までいくとこんな感じのゲームが出来ます。

(8/30追記:URLが間違っていたので修正しました)

スロットゲーム(サンプルプロジェクト) | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

 

 長くなりそうなので3つの記事に分割します。

 

 スロットマシンといえば個人的に、ポケモンタマムシシティのゲームコーナーが印象深いです。ポリゴンをゲットしたくてずっとやっていた気がします。

ポケモンBW以降はゲームコーナが廃止されてしまいました。少し寂しいですがしょうがないですね...

 

 

では本題に、

 

 

1.用意するもの

  • スロットの絵柄の画像(4〜8種類くらい)
  • スロットマシンの枠画像(下記)

以上。

 最低限必要なのは(Unity本体とかを除けば)これだけです。

 

 今回、スロットの絵柄については「いらすとや」様の画像を使用させていただきました。

www.irasutoya.com

 

 スロットマシンの枠画像は以下の画像を保存してお使い下さい(超低クオリティですいません...)。

もちろんご自分で用意した画像でも大丈夫です。(この記事では256×256のサイズの画像を使用しています。)

f:id:y9fav:20170818204101p:plain

 

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にスロットマシンの枠画像に変更。

f:id:y9fav:20170818205120p:plain

 

 (4)Maskの子要素にSpriteを作成します。spriteの設定は以下の通りです。

Speiteの設定 : 名前を"BackGround"、Spriteに先程と同じスロットマシンの枠画像を設定。

f:id:y9fav:20170818210243p:plain

 

(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に変更

 ⑤プレハブ化する。

  この手順を全ての絵柄画像の設定が終わるまで繰り返します。

f:id:y9fav:20170818215625p:plain

 

   サイズの調整が終わったら 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」にしました。)

ボタンの設定は以下の画像のようにして下さい。

f:id:y9fav:20170818222613p:plain f:id:y9fav:20170818222633p:plain

f:id:y9fav:20170818222646p:plain

 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です。

f:id:y9fav:20170818224430p:plain

 

 準備編はこれで以上になります。

 

 次の記事では実際にコードを記述してゲームを完成させていきます。

 後編の記事については後日書きたいと思います。

(8/20追記:後編の記事を追加しました。)

y9uni.hatenablog.com

 

 

 

 最後までお読み頂きありがとうございました。