Help us understand the problem. What is going on with this article?

Unity2D+NGUIでゲーム作るよ! その2 Spriteで画像表示

More than 5 years have passed since last update.

あけましておめでとうございます!
間を空けてしまいましたが2014年もつらつら書きます

いままで
Unity2D+NGUIでゲーム作るよ! その0
Unity2D+NGUIでゲーム作るよ! その1 Scene

2 Sprite

Unity3Dでバージョン4.3から2Dでの画像表示(Sprite)がサポートされました。
また、同時に1枚の画像から複数のSpriteを作成する「Sprite Editor」
複数のSpriteを1枚の画像(Sprite Sheet)に変換する「Sprite Packer」の機能が追加されています
(2014.1.8現在はSprite PackerはDeveloper Preview中..そしてProのみ..)

(※なんでわざわざ1枚の画像にまとめるのがいいの?と思う人はDrawCallの説明へ
http://docs-jp.unity3d.com/Documentation/Manual/DrawCallBatching.html

私個人は4.2.2までは
1. PNG画像をTexture形式で保持しておき、
2. Materialに貼り、
3. それを板ポリゴンに貼り、
4. ポリゴンを正面に向けて画像を表示
させていました。。が!Spriteがあればそんな手間は不要!ということで4.3からとても便利..!

2.1 Single Sprite

下記のicon.pngを貼り付けるテスト

icon.png
-icon.png-

  1. projectビューにドラッグ&ドロップします
  2. Inspectorで「Texture Type」を「Sprite」、「Sprite Mode」を「Single」にします
  3. 以下オプション項目指定
項目 意味
PackingTag (Sprite Packerでパックする際の)アトラス名
Pixels To Units ワールド座標(UnityのScene空間)で1に対応するピクセル数
Pivot 画像の座標を指定時に原点となる場所(Top Left, Centerなど..)
Filter Mode 画像を引き伸ばした時のフィルタ(そのまま,ぼかし表示など..)

4 Scene上にドラッグ

スクリーンショット 2014-01-09 3.07.14.png

おわり

2.2 Multiple Sprite

1枚の画像ファイルから複数のSprite作成も可能ということで、
下記のicon2.pngを貼り付けるテスt

icon2.png
-icon2.png-

  1. projectビューにドラッグ&ドロップします
  2. Inspectorで「Texture Type」を「Sprite」、「Sprite Mode」を「Multiple」にします
  3. ここで「Sprite Editor」をクリック。Spriteを作成します(後述)
  4. 分割後のSpriteをSceneにドラッグして完了
  5. ちなみに複数Spriteを選択してSceneにドラッグすると自動でパラパラ漫画(AnimatorとAnimationファイル)を作成してくれる!便利

スクリーンショット 2014-01-09 3.58.07.png

おわり

2.2.1 Sprite Editor

Multiple Spriteを作成の際、「Sprite Editor」というボタンがひょっこり現れます。
Sprite Editor左上の「Slice」をクリックすることでSpriteを分割できます。

スクリーンショット 2014-01-09 3.50.45.png

項目 意味
Grid 指定したx,yピクセルで分割
Automatic 自動分割
- 画像の上でグリグリやれば手動でも分割できます

Gridを使用する際は分割後パーツの大きさを揃えておく必要があります。
Automaticを使用する際はパーツのマージンを1pixel以上を取っておくと思い通りの分割ができますたぶん(個人的感想)

Applyするのを忘れずに。

つぎ

2.3 描画優先度

どの画像が手前に来るかはSprite Rendererの
「Sorting Layer」 > 「Order In Layer」 > Transform
によって決まります。
このため「座標として手前にあるオブジェクトがLayerとして奥にある」という表現も可能です。
(裏を返せば意図しない場合、そんな不具合も..)

例) Perspective/以下条件で表示

スクリーンショット 2014-01-09 3.39.34.png

オブジェクト Sorting Layer Order In Layer transform.z(※1)
Green Foreground(2) 0 0
Blue Background(1) 1 0
White Background(1) 0 -5
Orange Background(1) 0 0

※1 2D座標では、通常右方向にx座標,上方向にy座標があるためzが小さいほうが手前

2.4 C#スクリプトからSprite読み込み

2.4.1 静的に指定して読み込み

以下の様なスクリプトを作成してInspectorからアタッチできます(本当に読み込みだけのソース)

SpriteLoader
using UnityEngine;
using System.Collections;

public class SpriteLoader : MonoBehaviour
{
    [SerializeField]
    private Sprite sprite;

    [SerializeField]
    private Sprite[] sprites;
}

スクリーンショット 2014-01-09 4.41.44.png

2.4.2 動的に指定して読み込み

「Resources」という名前のフォルダ以下におくと以下のように読み込めます

SpriteLoader
//Single Sprite
Sprite sprite = Resources.Load<Sprite>("Resources/icon.png");

//Multiple Sprite
Sprite[] sprites = Resources.LoadAll<Sprite>("Resources/icon2.png");

Multiple Spriteは配列として読み込めるため、ゲームのスコアなどは0123456789と書かれた画像ファイルをMultiple Spriteで持つと便利です

2.x おまけ

Spriteは技術用語ですがもともとは妖精のこと。語源はSpiritus(スピリッツ)だそうです。という謎知識を手に入れたので書いておきます。

なかなかゲームにはいれませんが次はAnimationとMecanim..!

参考にしました

Unity4.3 新機能
http://japan.unity3d.com/unity/whats-new/unity-4.3

Unity/Texture
http://docs.unity3d.com/Documentation/Manual/Textures.html

Unity2DでサポートされたSpriteをResourcesから読む方法(Resources.LoadじゃなくてLoadAllだよ編)
http://d.hatena.ne.jp/murishinai/20131119/p1

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away