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

スプライト

• Sprite Creater：プレースホルダ―を作成する
• Sprite Editor
• Sprite Renderer

公式サイト：

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

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

参考：

スプライト | yttm-work

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

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

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

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

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

Sprite Editor の使い方 – Qiita

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

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

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

設定

参考：

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

Pixels Per Unit (PPU)

参考：

pixelsPerUnit (1ユニットのピクセル数) をおさらい | ぺんごや

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

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

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

参考：

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

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

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

Sorting Group

• Sorting Layer
• Order in Layer

参考：

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

Layer と Sorting Layer の違い – Qiita

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

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」で配置を調整する。

参考：

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

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

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

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

参考：

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

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

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

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 2018.4 マニュアル [公式]

ミップマップ (Generate Mip Maps)

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

参考：

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

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

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

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

Texture Type Advanced 解説 | 3D+

テクスチャ | Unity 2018.4 マニュアル [公式]

ドット絵を表示する

参考：

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

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

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

タイルマップ

参考：

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

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

参考：

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

アニメーションさせる

動画：

2D Animation in Unity

How to Setup Sprite Animation with Multiple Sprites

Sprite Animation Tutorial

参考：

Unity でスプライトアニメーションを作る – 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 で行う | テラシュールブログ

Unity Learn

Introduction to Sprite Animations | Unity Learn [Official]

チュートリアル

The Sprite Editor

Unity Creating New Sprites from Images

How to Combine Sprites in Unity!

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 でアニメーションを再生する | テラシュールブログ