[Unity初心者] まずは簡単なルーレットを作ってみよう!回転させるためにC#スクリプトも用意するので勉強になります!

2019年6月13日

Unity

Unityのインストールが終わり、ここからが楽しいところです。

とはいっても、画面がゴチャゴチャしていていちいち項目の説明を見ていくのは面倒くさい・・笑

とりあえず、簡単なものを作って感動するところからスタートしましょう!!

今回は画像を使った2Dルーレットを開発することにしました!(勉強用のため、一部プログラムも入れてます)

Unity ルーレット

※ Unityの環境準備が整っている状態でのスタートになります。

ルーレットの素材をダウンロード

今回は、ささっとゲームを作ってみたかったので、無料イラストのルーレットを “イラストAC" からダウンロードしました。

フリー素材のルーレット

ルーレット盤と針は別でほしかったので画像編集ソフトで別々にします。

お試しなのでどんな画像を使っても結構ですよ!

プロジェクトを作成する

プロジェクトを新たに作成します。

テンプレートは “2D" を選択してください。

Unity 新規プロジェクト

ルーレット盤と針を配置する

画像ファイルを"プロジェクト"へドラッグ&ドロップで移動させる

用意した画像ファイル(ルーレット盤と針)をドラッグ&ドロップでUnity画面下 “プロジェクト" に入れます。

Unityに画像をドラッグ&ドロップ

画像を"シーン"へ配置し微調整する

“プロジェクト" 内に用意したルーレット盤と針を “シーン" と表示された部分に配置していきます。

※ Android開発用の枠を選んでしまっていたため縦長ですが、そこは無視してもらって結構です

ドラッグ&ドロップの移動でOKです!

Unity 画像を配置する

位置を微調整する

すごく綺麗に配置したい場合、右側の “インスペクター" 項目内になる “位置" で調整してみましょう!

“X" と “Y" を 0 にすると画面の真ん中に移動します。

針をルーレット盤の上に移動させる

ルーレット盤と針を配置したのは良いものの、針がルーレット盤の下に表示され隠れてしまうことがあります。

重ねる場合、どちらを上にするか指定しなければいけません。

“インスペクター" 項目内になる “レイヤーの順序" をルーレット盤を0、針を1にしてみましょう。

これで針が上に表示されます!

画像(ルーレット盤)を回すプログラムを用意する

C#スクリプトを用意する

画面下 “プロジェクト" 項目にある “作成" ボタンを押し、"C#スクリプト" を選択しましょう。

ルーレット盤や針の画像ファイルとは別で “C#" と表示されたファイルが作成されます。

ファイル名が決めれるので “RouletteController" としてください。

スクリプトファイルを用意する

Microsoft Visual Studioでコードを用意する

C#スクリプトファイル “RouletteController" をダブルクリックしましょう。

“Microsoft Visual Studio" が起動します。

Microsoft Visual Studio

ここに以下の文をコピペ、もしくは差分を見て手書きでコードを書いてください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class RouletteController : MonoBehaviour
{
    // 追加
    float speed = 0;
    // Start is called before the first frame update
    void Start()
    {
    }
    // Update is called once per frame
    void Update()
    {
        // 追加
        if (Input.GetMouseButtonDown(0))
        {
            this.speed = -100;
        }
        transform.Rotate(0, 0, this.speed);
        this.speed *= 0.96f;
    }
}

主にやっている内容は

  • マウスの左クリックで右回転スタート
  • 徐々に減速

の2つになります。

この辺りのコードは追々勉強していけば良いですよ!

あとはCtrl+S等、作成したコードを保存しましょう。

ルーレット盤の画像と画像を回すスクリプトを紐づける

作成したC#スクリプトファイルを左項目 “ヒエラルキー" にあるルーレット画像(今回の場合、roulette)にドラッグ&ドロップします。

画像とスクリプトの紐づけ

すると、"roulette"を左クリックしたときに右項目 “インスペクター" に

  • トランスフォーム
  • スプライトレンダラー
  • Roulette Controller (Script)

とスクリプトファイル “Roulette Controller (Script)" が紐づいていることが確認できます!

これでルーレット盤と回転させるスクリプトが紐づきました!

テスト実行してみる

これで全ての準備が整いました!

“シーン" 上にある再生ボタン▶を押し、ルーレットをクリックしてみてください。

クルクルと回転しますよー!

Unity ルーレット

やったーっ!!

シーンやプロジェクト、インスペクターなどなど細かい項目が多く、スクリプトファイルの用意など、ちょっとしたゲームを作るだけでも結構大変だな・・・と感じつつも、頑張ったぶん、動いてくれた充実感は大きいですね!

初めは簡単なものからしか作れません。ここからステップアップして、どんどん新しいことにチャレンジしていきましょう!!

以上、Unityを使ったルーレットゲームの作成でした!

↓ クリックしてもらえると頑張れます

PVアクセスランキング にほんブログ村