gracetory’s blog

東池袋にある合同会社グレストリのエンジニアブログです

【Unity】プレハブでSpriteAtlasを扱う

f:id:gmatsu:20180507162633j:plain

皆さんこんにちは。

GWは連日外出でクタクタのgmatsuです。

娘を連れて動物園、公園に行ったり、友達とBBQやったり色々充実したGWとなりました。

気温は温かい…というより暑過ぎたくらいでしたね。

なんとか熱中症にはならずに済みました笑

そういえば最近の休日は、娘を練習台にカメラの練習をしています。

娘が産まれたタイミングで記録用に一眼レフを買ったんですが、これがまた難しいですね汗

カメラの使い方は説明書を見れば分かるんですが、センスの関わる所がとても難しい。

というか自分のセンスの無さを改めて実感させられました笑

幸いにも撮影に詳しい友人が居たので色々教えてもらっていますが、まだまだ練習は必要そうです。

あとレンズが高い!

こればかりはどうにもなりませんが、色んなレンズを買い揃えて行きたいと思ってます笑

さて、今回は前回の記事の続きとなります。

前回の記事は↓です。

techblog.gracetory.co.jp

今回の内容は、前回の記事に処理を付け加えた物になりますので、サンプルを使用される方は前回の記事から読むようにして下さい。

ちなみにサンプルは下記に置いてます。

github.com

今回やりたいこと

SpriteAtlasを使用して、インタンス化したプレハブに画像を指定する。

実行環境

Mac mini (Late 2014)

MacOS Sierra (10.12.2)

Unity (2017.1.1f1)

SpriteAtlasとは

docs.unity3d.com

kan-kikuchi.hatenablog.com

SpriteAtlasに関しては公式、有志の方が解説して下さっている通りで、早い話が画像をパッキング(1つにまとめる)して扱いましょうってことです。

パッキングには次の様なメリットがあります。

・メモリの節約

・描画回数の減少

以前は外部のフリーソフト等を利用しなければパッキング作業が難しかったのですが、Unity自体にパッキングする機能が備わった事でとても楽になりました。

1つの画像ファイルに自力で画像をまとめて描いていた頃が懐かしい…。

それではまずSpriteAtlasを用意する事から解説していきます。

手順1. SpriteAtlasの用意

Projectで右クリック>Create>Sprite Atlasで作成します。

今回はSpriteAtlasを「Resources/Sprites/Atlas/」に設置しました。

今回はChipという名前にしています。

f:id:gmatsu:20180507162859p:plain

次にSpriteAtlasとしてまとめる画像を選択します。

画像1つ1つを指定する事もできますが、ディレクトリ丸ごと指定も出来ます。

「Objects for Packing」に「Assets/Sprites/Parts/Chip/」をドラッグすれば指定すればOKです。

f:id:gmatsu:20180507162959p:plain

どのようにまとめられたかは「Pack Preview」をクリックで確認する事が出来ますよ。

f:id:gmatsu:20180507163024p:plain

手順2. SpriteAtlasをインスタンス化したプレハブに設定

これで準備が整いました。

後はインスタンス化したプレハブにSpriteAtlasをスクリプトから指定してみましょう。

Chip.csを追加し、プレハブにAddComponentしました。

f:id:gmatsu:20180507165913p:plain

初期化する為のinitメソッドを作成し、ここでプレハブにSpriteAtlasを設定しました。

// Assets/Scripts/Game/Chip.cs

using UnityEngine.U2D;  // SpriteAtlasの使用にはUnityEngine.U2Dが必要です

public void init(string file_name)
{
    // 画像設定
    SpriteAtlas chip_atlas = Resources.Load<SpriteAtlas>("Sprites/Atlas/Chip");
    this.GetComponent<SpriteRenderer>().sprite = chip_atlas.GetSprite(file_name);

    // ソート順
    this.GetComponent<SpriteRenderer>().sortingOrder = 1;
}

LoadメソッドでSpriteAtlasをロードし、取得したSpriteAtrasからGetSpriteメソッドを使用して1つの画像を取得します。

GetSpriteの引数には画像名を指定します。

拡張子も何も入りませんので、画像の名前を指定して上げましょう。

ここで指定する画像名はSpriteAtlasファイルの名前ではなく、パッキングした画像の名前になります。

今回のサンプルでは、

・SpriteAtlasファイル

Chip
・パッキングした11つのファイル(拡張子書いてないけどホントは.png)

chip_0
chip_1
chip_2
chip_3

上記でいうパッキングした方の画像ですね。

こちらのGetSpriteメソッドに指定します。

こうして得た1つの画像をプレハブに設定する事で、画像設定が行われます。

あとはChipManagerのcreateメソッドを次の様に変えればOK。

private void create() {
    // プレハブ取得
    GameObject chip = (GameObject)Resources.Load("Prefabs/chip");

    // 座標
    Vector2 pos;

    // 各チップのインスタンス化と初期化
    pos.x = 0.0f;
    pos.y = 150.0f;
    _chip[0] = Instantiate(chip, pos, Quaternion.identity);
    _chip[0].GetComponent<Chip>().init("chip_1");

    pos.x = 0.0f;
    pos.y = 0.0f;
    _chip[1] = Instantiate(chip, pos, Quaternion.identity);
    _chip[1].GetComponent<Chip>().init("chip_2");

    pos.x = 0.0f;
    pos.y = -150.0f;
    _chip[2] = Instantiate(chip, pos, Quaternion.identity);
    _chip[2].GetComponent<Chip>().init("chip_3");
}

インスタンス化後に引数に画像名を指定した状態でinitメソッドを呼び出し、内部で画像の設定を行っています。

さっそく実行してみましょう。

f:id:gmatsu:20180507175622p:plain

表示された!

前回何も表示されなかった事がウソのようです笑

今回も配列やらファイルやら繰り返しの処理を使用していないので、そこはよしなに修正してあげて下さい。

これにてプレハブの利用に関する記事は終わりとなります。

2回に渡りお付き合い頂きありがとうございました。

次回はタップ処理の実装を行ってみたいと思います。

★2018/06/04公開 次はタッチ処理について書いてます ↓↓↓

techblog.gracetory.co.jp