LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

unityブロック崩し作成手順 体験版

Last updated at Posted at 2018-04-10

目的
初心者のunityに対する苦手意識の克服

初めに
まだunityのインストールをしていない人はこちらからインストールをお願いします。
https://7shi321.net/1925/

unityについての情報はこちらのまとめてあるサイトがお勧めです
https://www.sejuku.net/blog/6616#Unity

手順1
では早速始めていきたいと思います
unityを開いてください

https://gyazo.com/f6ca605d7c6ecd7052053187ea46ad42

今回は「break_out」と名付けます

手順2
まずはブロック崩しの外形を作っていきます。以下の画像のようになれば完了です

https://gyazo.com/d3c457a6439616d87df9bc89bb60c112

まず以下の動画のようにcubeを生成してください。方法はHierarchyビューのcreate->3Dobject->cubeで生成できます。

https://gyazo.com/e079cbddba3c622b0ac129ea5c32185c

同じ手順でplaneも生成します

https://gyazo.com/ab4a46ec4e149239324a5880e6395f51

次は以下の動画のようにcubeを複製します。複製の方法はcubeを選択した状態でctrl+Dで複製できます。(Macの場合はComand+D)

https://gyazo.com/50506b02945f56a501204cc91850e51d
ついでに見やすいようにplaneを下に入れ替えていますが、ドラッグアンドドロップで並べ替えの操作ができます。

ではいよいよそれぞれのオブジェクトの座標を変えて外形を作りましょう。
座標の変更は以下のように行います。

https://gyazo.com/11d22d855142ee27a186461e8e14ddad

変更するオブジェクは
MainCamera
cube
cube1
cube2
cube3
plane
の6つです

変更後の座標を下記の表に示したので以下の表のとおりに座標を変えてみてください。

MainCamera 
position : x 0、 y 10、 z -8
rotation : x 50、y 0、z 0
scale : x 1、y 1、z 1

cube
position : x 0、 y 0、 z -5
rotation : x 0、y 0、z 0
scale : x 10、y 1、z 1

cube1
position : x -5、 y 0、 z 5
rotation : x 0、y 90、z 0
scale : x 20、y 1、z 1

cube2
position : x 5、 y 0、 z 5
rotation : x 0、y 90、z 0
scale : x 20、y 1、z 1

cube3
position : x 0、 y 0、 z 15
rotation : x 0、y 0、z 0
scale : x 10、y 1、z 1

plane
position : x 0、 y 0、 z 5
rotation : x 0、y 0、z 0
scale : x 1、y 1、z 2

これでブロックの配置はできているはずです。一度下の動画のようにgameビューを確認してみてください。もしこのgameビューがない場合はunityの画面で上の方にあるwindow->Gameをクリックしてください。

https://gyazo.com/c53b6420c8c8c1f26c9dc7a4b58b1446

これで手順1は終了です

手順2
オリジナル性を出すため、外形に色を付けていきます。
色を付けるためには「material」というものを使用します。
まずは以下の動画の通りにmateralを生成します。

https://gyazo.com/fb44352a2e553d81da99dc8a085c9180

ここではとりあえずblueと名付けましょう

https://gyazo.com/985ef45181527b18e6e1fb32fe10cb4c

次の手順では以下の動画のように「blue」の色を変えていきます。
変える方法としてはまず「blue」を選択した状態でInspecterビューのAlbedoという部分に注目します。
この項目のスポイトの左側にある四角形の部分をクリックすることで画面左側にカラーパレットが出現するので、そこから変更することが可能です。

このmaterialは色以外にも質感などを表すことができ、オブジェクトにアタッチ(ドラッグアンドドロップ)することで適用できます。

試しにplaneに先ほど作ったmaterialをアタッチしてみましょう

https://gyazo.com/1830da447434a21fcad394a89094bae1

工夫すれば下のようにカラフルにすることも可能です

https://gyazo.com/ec6e1600aa3c7e94466c6bce58827109

手順3
ここからはブロック、プレイヤーバー、ボールの作成をしていきます。
まず、プレイヤーバー、ボールを作成するため、cube,sphereを生成します。

https://gyazo.com/ea4241a6e8b69e3bb1c64aa3050c2f4e

名前をそれぞれplayer,ballに変え、座標は以下のように変更します

player
position : x 0、 y 0.5、 z -2
rotation : x 0、y 0、z 0
scale : x 2、y 0.5、z 0.5

ball
position : x 0、 y 0.5、 z 0
rotation : x 0、y 0、z 0
scale : x 0.8、y 0.8、z 0.8

このようになっていたら大丈夫です

https://gyazo.com/b8cb8ee361908c4609448c62f772ceb0

余裕のある方はここでボールとプレイヤーバーに色を付けておきましょう!

手順4
では次はブロックとボールに物理挙動を加えていきたいと思います
unityにおける物理挙動というのはrigidbodyというコンポーネントで制御します。コンポーネントとはゲームオブジェクトの機能的部品のことです。

使い方は以下の動画のようにオブジェクトにアタッチする形で使用します。
動画のようにballにrigidbadyを付けてみてください。また、rigidbodyのuse gravityのチェックは外してください。
rigidbadyをplayerに着けるてしまうと、ballがplayerに当たった時にplayerが飛んで行ってしまうので、今回はballだけにrigidbadyを着けましょう

https://gyazo.com/d77c5b6a028c5157a79d0df9b9942baa

また、constrainsのfreezePosition のyにチェックを入れます
こうすることで、y軸方向が固定されるので、飛んでいくバグがなくなります(これをやらないと、ボールが飛んでいくバグが発生してしまいます)

手順5
このままではボールが動いたときに摩擦を受けて止まってしまうので跳ね返りを調節する「phisics materal」というコンポーネントをballにアタッチします。

https://gyazo.com/56f8e8915501c8396d9d99075c1b8891

このphisics materalを編集します。以下の画面のように編集してください
これにより摩擦は0、跳ね返りが最大になります。

https://gyazo.com/679280c7dd70a21c5583377d86f50dae

手順6
溜まってきたmaterialたちをフォルダにまとめてしまいましょう。下の動画のようにmaterialという名前のファルダを製作し、その中にドラッグアンドドロップで入れ込めば完了です

https://gyazo.com/926392f1d51160a69fe6d798754763d0

手順7
ここからはスクリプトを編集しアタッチしていきます。これによりオブジェクトの制御が可能になります。
以下の動画のようにC#スクリプトを生成してください

https://gyazo.com/c94a12de275a7975faa2ba97e72e8837

このように二つのスクリプトが生成できたら完了です

https://gyazo.com/58b4a3559fb6ee3722e64e4bfe6fdc52

二つのスクリプトについて
それぞれ
ball
player
のスクリプトをダブルクリックで開いてください。
すると以下のような画面が開くと思います。

それぞれ初期に書かれている内容は消去してかまいませんので
以下の内容をコピー&ペーストで貼り付けてください。

ballスクリプト

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ball : MonoBehaviour {
    private Vector3 startPos;
    private bool stopGame;

    // Use this for initialization
    void Start () {
        startPos = transform.position;
        stopGame = true;
    }

    // Update is called once per frame
    void Update () {
        GameReset ();
        stratGame ();
    }

    void stratGame(){
        if (stopGame) {
            if (Input.GetKeyDown (KeyCode.Space)) {
                GetComponent<Rigidbody> ().velocity = new Vector3 (8f, 0f, 8f);
                stopGame = false;
            }

        }   
    }

    void GameReset(){
        if (transform.position.z <= -3f || Input.GetKeyDown (KeyCode.LeftControl)) {
            stopGame = true;
            transform.position = startPos;
            GetComponent<Rigidbody> ().velocity = new Vector3 (0f, 0f, 0f);
        }
    }

    void OnCollisionEnter(Collision other){
        if (other.collider.tag == "block") {
            Destroy (other.collider.gameObject);
        }
    }

}

playerスクリプト

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class player : MonoBehaviour {

    // Use this for initialization
    void Start () {


    }

    // Update is called once per frame
    void Update () {
        if (Input.GetKey (KeyCode.LeftArrow) && transform.position.x >= -3.3f) {
            transform.Translate (Time.deltaTime * -10f, 0, 0);
        }
        else if(Input.GetKey (KeyCode.RightArrow)&& transform.position.x <= 3.3f){
            transform.Translate (Time.deltaTime * 10f, 0, 0);
        }
    }
}

ここで1つ注意してほしいのは、クラスの名前とスクリプトの名前が同じになるようにコピー&ペーストしてください。ここを間違えるとエラーが起きてしまい、ゲームを実行できなくなってしまいます。

以下の画像のようになっていたらOKです。

https://gyazo.com/2b1051770dc7f5d813fec8da720e4a1c

https://gyazo.com/fb5a1e7f24831110fc8d574e3f825cb0

では、この出来上がったスクリプトをball、playerに適用していきます。

以下のようにアタッチすることで適用できます

https://gyazo.com/95a691d000a8050c74ae195aa33f544c

ここで一度ゲームをプレイして確認してみましょう!
以下のように▶のプレイボタンを押すことでプレイできます。
また、スクリプトでスペースキーを押すとballが発射する操作を記述しているのでゲームが開始したらスペースキーを押してみてください!(▶ボタンが青くなったらゲーム開始になります)

https://gyazo.com/f6fdf1abd379a199f54cacc2a919c0d3

では最後にブロックを配置していきますが、その前にHierarchyビューを整理しましょう!
以下の図のようにHierarchy->create->Create Emptyでからのゲームオブジェクトを生成し、cubeたちを入れ込みましょう。入れ込んだらこのゲームオブジェクトの名前はstageに変更します。(名前の変更は対象のオブジェクトを右クリックで変更可能です)

https://gyazo.com/3854c78fc9f627c12f49d1ea4e1e62f2

以下の図のようになればOKです。
https://gyazo.com/b4ddb72f727a72d3134e22276d9661b1

ではブロックを配置していきましょう
以下の動画のように4つのcubeを生成し、座標を変更します。
cubeを複製するときはctrl + dで複製できます。

https://gyazo.com/924c19bc66d168b0b1d19be670ad68a4

座標はこちら

cube
position : x -3、 y 0.5、 z 12
rotation : x 0、y 0、z 0
scale : x 1.5、y 0.5、z 0.5

cube(1)
position : x -1、 y 0.5、 z 12
rotation : x 0、y 0、z 0
scale : x 1.5、y 0.5、z 0.5

cube(2)
position : x 1、 y 0.5、 z 12
rotation : x 0、y 0、z 0
scale : x 1.5、y 0.5、z 0.5

cube(3)
position : x 3、 y 0.5、 z 12
rotation : x 0、y 0、z 0
scale : x 1.5、y 0.5、z 0.5

以下の画像のようになったらOKです

https://gyazo.com/bf9aba93a0421dba71923ce2af1db63a

次の手順ではタグの変更を行います。
ballスクリプト上でballがblockタグのついているオブジェクトに衝突したとき、blockを消去するというプログラムを書いているためこの操作を行います。
以下の動画のようにまずEdit->projectSetting->Tags and Layerをクリックしてください

https://gyazo.com/8e9cd16a4b00f301ce53656253f38f7a

次に以下の動画のようにblockという名前のタグを作成します。

https://gyazo.com/230b4e970ad7bff562e37e69353a9a17

最後に配置したcubeのタグをすべて以下の動画の手順で「block」に変更します

https://gyazo.com/8fa65a09b88ce2774a5f0757caaab981

この操作を4つのcubeに適用したら、ここで一度プレイします。

https://gyazo.com/fb558da4ddc9953ec742486f013019c4

するとこのようにballがblockに衝突したときにblock消えるようになりました。

https://gyazo.com/0935db4903db19e4964b2730a598be34

次が最後の手順です。以下の動画のようにblockをctrl + dで複製し、block(1)からblock(3)の座標を以下のように変更します。

https://gyazo.com/105ee5b9da8f64a8c232c716faf09362

block
position : x 0、 y 0、 z 0
rotation : x 0、y 0、z 0
scale : x 1、y 1、z 1

block(1)
position : x 0、 y 0、 z -2
rotation : x 0、y 0、z 0
scale : x 1、y 1、z 1

block(2)
position : x 0、 y 0、 z -4
rotation : x 0、y 0、z 0
scale : x 1、y 1、z 1

block(3)
position : x 0、 y 0、 z -6
rotation : x 0、y 0、z 0
scale : x 1、y 1、z 1

以上で手順は終了です。これで以下のようなブロック崩しができていると思います

https://gyazo.com/5ba1d46dfd40c98d44ffc0b901aab276

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up