スプライトの使い方 (Sprite) [Unity]

スプライト

• Sprite Creator： プレースホルダ―を作成する
• Sprite Editor： スライスを編集する
• Sprite Renderer： スプライトを描画するコンポーネント

公式サイト：

スプライト | Unity マニュアル [公式]

スプライトエディター (Sprite Editor)

ドキュメント：

スプライトエディター | Unity 2020.3 マニュアル [公式]

参考：

スプライト | yttm-work

スプライト／画像が1つまとめてあるやつを切り分ける方法 | Unishar

スプライトについて | ゲームの作り方！

Sprite Editor で Sprite が自動生成したポリゴンを削減したり透過部分に穴を開けたり | テラシュールブログ

1枚の画像を用途毎にサイズを指定して分割したい – Qiita

スプライトエディターの使い方 | Uinty 使い方ガイド

Sprite Editor の使い方 – Qiita

Sprite Editor でスライス | ひよこのたまご

Unity 2019.2 の Sprite Editor 立ち上げについて | SB クリエイティブ

設定

参考：

テクスチャで設定できる項目 | テラシュールブログ

Pixels Per Unit (PPU)

ドキュメント：

Sprite.pixelsPerUnit | Unity スクリプトリファレンス [公式]

参考：

pixelsPerUnit – 1ユニットのピクセル数 | ぺんごや

ゲームの画面／メインカメラサイズの選択と設定例 | sh1’s diary

What is the pixels to units property in Unity sprites used for? – Game Development Stack Exchange

Filter Mode

参考：

Sprite の Filter Mode | うにてぃブログ

描画順

描画順を変更する方法

3D の場合

• カメラの Depth
• カメラからの距離

2D の場合

• カメラの Depth
• Sorting Layer
• Order in Layer
• Z 値
• ScreenSpace – Overlay

参考：

Sprite とパーティクルとかモデルの描画順番について | テラシュールブログ

オブジェクトの描画順を変更する方法 | tama-lab

テキストをオブジェクトの後ろに表示する方法 3D編 | tama-lab

Sorting Group

• Sorting Layer
• Order in Layer

ドキュメント：

Sorting Group | Unity マニュアル [公式]

参考：

スプライトの描画順制御を楽にする Sorting Group | テラシュールブログ

Layer と Sorting Layer の違い – Qiita

Transparency Sort Mode / Transparency Sort Axis

参考：

スプライトの描画順を下にある物を手前にする | テラシュールブログ

9スライス

前提

パッケージマネージャーで、「Unity Registry」から「2D Sprite」パッケージをインストールする。

手順

1. プロジェクトウィンドウで対象の画像を選択する。
2. インスペクターで「Texture Type」を Sprite (2D and UI) に変更する。
3. 「Sprite Mode」を Single に変更し、「Mesh Type」を Full Rect に設定し、「Apply」ボタンを押して設定を適用する。
4. 「Sprite Editor」ボタンを押して、「Sprite Editor」ウィンドウを開く。
5. 上下左右の緑のドットをドラッグして、画像を9枚のスプライトに切り分ける。
6. 「Apply」ボタンを押して、設定を完了する。
7. ゲームオブジェクト追加メニューから「UI > Image」を選択して、UI 用の画像オブジェクトを追加する。
8. 「Image」コンポーネントで、「Source Image」に先ほどスライスした画像を割り当て、「Image Type」を Sliced に変更する。
9. 「Pixels per Unit Multiplier」を調節して、枠の幅を適切に設定する。
10. 「Rect Transform」で配置を調整する。

ドキュメント：

スプライトの 9 スライス | Unity マニュアル [公式]

参考：

uGUI と Image と Sprite とスライスについて | テラシュールブログ

Sprite で 9 Slice を使う | テラシュールブログ

スプライトマスク (Sprite Mask)

ドキュメント：

スプライトマスク | Unity マニュアル [公式]

参考：

SpriteMask で Sprite にマスクを掛ける演出が色々と面白い | テラシュールブログ

Sprite や Image で Mask を使う | kan のメモ帳

Mask Component on Gameobject with Text – Unity Answers

Sprite Renderer

ドキュメント：

Sprite Renderer | Unity マニュアル [公式]

テクスチャタイプ (Texture Type)

• Default
• Normal Map
• Editor GUI
• Sprite (2D and UI)
• Cursor
• Cookie
• Lightmap
• Single Channel

ドキュメント：

テクスチャのインポート設定 | Unity マニュアル [公式]

参考：

Unity のテクスチャタイプと設定 | ゲームの作り方！

ミップマップ (Generate Mip Maps)

「Generate Mip Maps」を有効にすると、段階的に粗いテクスチャを自動的に生成して画面上の表示サイズに合わせて滑らかに補間して効率的な表示を行う。敢えてドット絵調のスプライトやテクスチャをくっきり表示したい場合を除いて、通常は有効にしておく。

ドキュメント：

テクスチャのインポート設定 | Unity マニュアル [公式]

参考：

uGUI で画像がぼやけて表示される時の対処とミップマップの仕様の話 | プログラミングで世界を変える

ミップマップとテクスチャフィルタリングの概要／設定方法と処理負荷のお話 | LIGHT11

Sprite の Filter Mode | うにてぃブログ

テクスチャの設定について | ゴイサギ日記

Texture Type Advanced 解説 | 3D+

ドット絵を表示する

リンク：

2D アートアセットの解像度選択 | Unity Blog [公式]

参考：

ドット絵がぼやけてしまう問題を解決する方法 | コガネブログ

スプライト端の謎の線／ゴミ／ちらつきの修正方法 | エフアンダーバー

タイルマップ

ドキュメント：

タイルマップ | Unity 2020.3 マニュアル [公式]

アイソメトリックタイルマップ

ドキュメント：

スプライトのインポートと準備 | Unity マニュアル [公式]

アニメーションさせる

動画：

2D Animation (Brackeys)

How to Setup Sprite Animation with Multiple Sprites (Jason Weimann)

Sprite Animation (Game From Scratch)

参考：

スプライトアニメーションを作る – Qiita

2D のスプライトアニメーション再生方法まとめ 前編 – Qiita

2D のスプライトアニメーション再生方法まとめ 後編 – Qiita

アニメーションを作って再生してみよう | Unishar

2D アニメーションの作り方／Animator Controller／Animation Clip の切り替え | ひよこのたまご

プレイヤーのスプライトアニメーションの作り方 | Unity でゲームを作ろう！

スプライトアニメーションの再生速度がやたらと早い時の対処 | テラシュールブログ

2D の Sprite Animation をプレビューする裏技 | テラシュールブログ

複数の画像を合成する／まとめる

• TexturePacker

参考：

create a single sprite using multiple sprites / merge multiple sprites into single sprite – Unity Forum

combine x sprites into one – Unity Forum

combine sprites – Stack Overflow

How to join sprites in Unity – Stack Overflow

How to combine sprites into one – Stack Overflow

How can I merge multiple sprite into one sprite or texture using Unity3d? – Game Development Stack Exchange

コード：

Merging multiple textures / sprites into one texture – Unity Forum

ビルボードとして表示する

参考：

2D billboard sprites clipping into 3D environment – Unity Forum

How I can create an sprite that always look at the camera? – Unity Answers

パーティクルで使う

参考：

パーティクルのテクスチャアニメーションを Sprite で行う | テラシュールブログ

左右反転させる

参考：

Mirroring an animation – Unity Forum

Unity Learn

Introduction to Sprite Animations | Unity Learn [Official]

チュートリアル

Sprite Editor (Official)

Unity Creating New Sprites from Images (Leon Marsden)

How to Combine Sprites! (PhillDev)

TexturePacker

公式サイト：

TexturePacker – Create Sprite Sheets for Your Game! | CodeAndWeb [Official]

入手：

TexturePacker Importer | Unity Asset Store [Official]

フォーラム：

TexturePacker Importer – Sprite Sheet Generator & Sprite Mesh Optimizer | Unity Forum

参考：

Unity で TexturePacker を使う方法 – Qiita

TexturePacker でパッキングしたテクスチャを Sprite Renderer や uGUI の Image で使用する | コガネブログ

TexturePacker の使い方 | bravesoft blog

TexturePacker のあれこれ | WonderPlanet Developers’ Blog

TexturePacker | Webdelog

TexturePacker and Unity – Sprite Sheets and Normal Maps | CodeAndWeb [Official]

Simple Animation

リポジトリ：

Unity-Technologies/SimpleAnimation: A simple Animation Component that leverages Playable Graphs – GitHub

参考：

Simple Animation – さよならステートマシン／旧 Animation っぽい API でアニメーションを再生する | テラシュールブログ