ゲーム開発を受注しようぜ＜その５＞

前回:http://qiita.com/muzudho1/items/44e66663be3323e556c9

![20170615a1.png](https://qiita-image-store.s3.amazonaws.com/0/159417/31e9d346-cadf-296c-14dc-03bbde68d9d7.png)

この画面に　６つのものを置いていきたい。

- ダッシュ・ボタン
- タックル・ボタン
- メニュー・ボタン
- ＨＰゲージ
- スペシャル・ゲージ
- スコア

ダッシュ、タックル、メニューの画像は　ここから切り抜くか。
![20170615a2.png](https://qiita-image-store.s3.amazonaws.com/0/159417/20d09c6e-ebe4-6f99-c96a-65cd0c462e1e.png)

ＨＰゲージ、スペシャルゲージは　黒、赤、黄のタイルを引き延ばして使うか。
![20170615a3.png](https://qiita-image-store.s3.amazonaws.com/0/159417/69d9c568-af96-569a-4c98-1cfd7f2ac622.png)

スコアは　テキスト表示でいいのではないか。

この中で一番実装が簡単なのは　スコア　だろうか。ひよこのたまごに解説がある。

# スコアの表示を置く

「【Unity開発1】uGUI(Text)でスコアを表示！【ユニティちゃん縦スクロール5】」ひよこのたまご
http://hiyotama.hatenablog.com/entry/2015/04/27/060000

![20170615a4.png](https://qiita-image-store.s3.amazonaws.com/0/159417/64a41faa-d172-cba8-30e7-c364cd26393b.png)

数字を設定するスクリプトは　後回しにしよう。

# タップボタンを置く

「Unityでタップ処理を実装する｜動画あり」クリアメモリ
http://www.clrmemory.com/unity/use-tap-function/

ボタンは UI の画像じゃなくて　スプライトとして置いた方がいいのか？

![20170615a5b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/cf329710-b0bd-ad15-ff65-b42b4c439576.png)

2Dオブジェクトのスプライトとして　ゲームオブジェクトを配置すると
小さくなりすぎてしまう。

![20170615a6.png](https://qiita-image-store.s3.amazonaws.com/0/159417/107149e6-05e9-eaf9-23b2-ed24697c27b9.png)

素直に UI の Button を置くのが良さそうだが、スクリプトで制御できるだおるか？

![20170615a7.png](https://qiita-image-store.s3.amazonaws.com/0/159417/d9a4c265-ad42-0ed4-319f-1aae0810ebad.png)

ただ置くだけなら　画面端をアンカーにして TransformのPos X, Pos Y にプラスマイナスを入れて相対位置を指定して　できるが……。

スクリプトを付けるのは後回しにして　次は　バーを置いてみたい。

# バーを置く

ひよこのたまごを参考にする。

「【Unity1】ボタン長押しでゲージ(uGUIのImage)を溜め、ジャンプ力アップ！【ユニティちゃん縦スクロール9】」
http://hiyotama.hatenablog.com/entry/2015/04/28/140000

![20170615a8.png](https://qiita-image-store.s3.amazonaws.com/0/159417/d7416d0e-f840-22a5-843a-8b623c87442a.png)

バーを置くだけなら　こんな感じだが。
UI 関係は UI のゲームオブジェクトを Canvasの下に置くのがいいのか。

# ジャンプボタンを実装できるだろうか？

2Dコライダーで当たり判定を付けるといいらしい。

サークル・コライダーは　楕円にできない。
カプセル・コライダーは　カプセル型だ。
ポリゴン・コライダーは　線を引くのが大変すぎる。

レイキャストで　当たってくれないものか？

「RayCastその4、Raycastを2Dで使う【Unity】」(:3[kanのメモ帳]
http://kan-kikuchi.hatenablog.com/entry/RayCast4

ボタンの形ではなく、矩形で当たってしまうようだが、
画面をタップする用途はボタンを押すことなのだから、問題ないだろう。

Canvasに置いた UI は UIレイヤーに設定されているので、

![20170615a9b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/7d872fdd-101c-2fa9-4f06-b7831d1a97d9.png)

```C#
            //レイヤーマスク作成
            int layerMask = LayerMask.NameToLayer("UI");
```

と書いてみる。

レイキャストを飛ばすかどうかより、ボタンだから　そもそも　タップできるのでは？

「uGUI ボタンのクリックイベントを取得する」
http://qiita.com/norioc/items/f9820e90c74d9dce7f89

ボタンごとにクラス・ファイルを作るか？
設計図の書き直しになって大変だ。

```JumpButton.cs
using UnityEngine;

public class JumpButton : MonoBehaviour {

	// Use this for initialization
	void Start () {
		
	}
	
	// Update is called once per frame
	void Update () {
		
	}

    public void OnClick()
    {
        Debug.Log("ジャンプボタンをクリックした");
    }
}
```

![20170615a10b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/13f18e51-8bbb-58ff-3e80-e0dbfce70a5b.png)

ドラッグ＆ドロップするというのが　分かりにくい。

![20170615a11b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/a554d51d-a0f4-ce63-c3e4-c8f99308130a.png)

反応するようだ。これでいいか。

# バーのスクリプトを調べよう

また　ひよこのたまごに戻る。

「【Unity1】ボタン長押しでゲージ(uGUIのImage)を溜め、ジャンプ力アップ！【ユニティちゃん縦スクロール9】」
http://hiyotama.hatenablog.com/entry/2015/04/28/140000

Rect Triangle コンポーネントの width を増減させることで　バーを表現しているらしい。

今は 400 px だが、HP は例えば 0 ～ 100 のように別に持っておいて
width は 4 倍するみたいなコードがいるかもしれない。

- Width

Unityエディター上で　バーを配置したわけだが、
ゲーム開始時に　もともとの　Width　は width_cache プロパティに退避するなどして、バーは　伸びたり縮んだりするようにする。

全体は省くが、

```C#
    // Update is called once per frame
    void Update () {

        #region テスト・コード
        // とりあえず、どんどんメーターが減っていくコードを書いてみる。
        if (0<rectTransform_cache.sizeDelta.x)
        {
            rectTransform_cache.sizeDelta = new Vector2(rectTransform_cache.sizeDelta.x - 1.0f, rectTransform_cache.sizeDelta.y);
        }
        #endregion
    }
```

こう書いてしまうと 不便だ。HPと、バーの長さは別だ。

全部は載せないが、

```C#
    // Update is called once per frame
    void Update () {

        #region テスト・コード
        // とりあえず、どんどんメーターが減っていくコードを書いてみる。
        if (0<value)
        {
            Add(-1);
        }
        #endregion

        // 内部データと表示データが合っていない場合、表示データを更新する
        if (dirty)
        {
            rectTransform_cache.sizeDelta = new Vector2(rectTransform_cache.sizeDelta.x * value / maxValue, rectTransform_cache.sizeDelta.y);
            dirty = false; // (2017-06-15 Add)忘れていたので追記
        }
    }
```

増減したいのは HP なはずで、バーの長さではないはずだ。

![20170615gif2.gif](https://qiita-image-store.s3.amazonaws.com/0/159417/e8f52e46-91d6-3fbf-5773-4cf7389c9376.gif)

まあ、バーが動くということが分かればいいか。

バーの減りが　加速的でなんかおかしいな。

```
        if (dirty)
        {
            rectTransform_cache.sizeDelta = new Vector2(widthMax_cache * value / maxValue, rectTransform_cache.sizeDelta.y);
            dirty = false; // (2017-06-15 Add)忘れていたので追記
        }
```

こうなんじゃないか。

![20170615gif3.gif](https://qiita-image-store.s3.amazonaws.com/0/159417/f2a3213f-fcbc-e3b4-1a6d-7afa3f7a0cce.gif)

加速度がかかってない。やっぱりこうだ。

# スコアも動くようにしよう

ひよこのたまご　も読み直す。

「【Unity開発1】uGUI(Text)でスコアを表示！【ユニティちゃん縦スクロール5】」ひよこのたまご
http://hiyotama.hatenablog.com/entry/2015/04/27/060000

![20170615gif4.gif](https://qiita-image-store.s3.amazonaws.com/0/159417/e82c54de-8860-37ff-64bb-09e372ab9448.gif)

バーが作れるなら　スコアも考え方は同じだな。
width を変えるか text を変えるかぐらいの違いで。

# ジャンプボタンも動くようにしよう

どうやったらジャンプするのか？
プレイヤーの　Rigidbody2D.Y に数字を増やしておけば飛んでくれるが。

![Payload Too Large]()

ここで画像アップロード容量上限。

![Payload Too Large]()

これが出てくると、どう対応するのがいいのか。

「Qiita初投稿時、![Payload Too Large]()のエラーがよく出る」
http://qiita.com/genshun9/items/9e54325bf2dd3de2f99f

この人は　そのルールをどこで知ったんだ？

「初めてQiitaに投稿すると1ヶ月の画像アップロード制限が2MB→100MBにアップします」
http://blog.qiita.com/post/75674629515/image-capacity-expansion

すると 100M とかすぐ行ってしまうなあ。

自分のブログで続けるしかないか。


ジャンプボタンはできた。

# まとめ

これ以上の作業は　提出が間に合わなくなるので、今週分の作業をまとめることにする。

**設計書を作ること** が要件にあるので作る。

- HpBar クラス追加
- JumpButton クラス追加
- MenuButton クラス追加
- Score クラス追加
- SpecialBar クラス追加
- TackleButton クラス追加

PlantUML図は　１枚の大きな画像にすると収まらないので分割する。

    設計図_クラス図(分割3b).pu
        →H,J,M,Pへ。

    設計図_クラス図(分割3S)_0616.pu
        →SとTへ。

![Payload Too Large]()

画像が載らない。他の記事を削除しないと
ダメか。

まず Git Hub にソースを上げる。

.gitignore ファイルで Libraryフォルダーを弾いているつもりなんだが、
キャッシュ・ファイルをアップロードしようとしてしまう。
手作業で削除。