WEBVTT

00:00:01.257 --> 00:00:03.709
Sprite Editor はアトラスやスプライトシートのように

00:00:03.709 --> 00:00:07.689
複数の要素を持つ画像を取得して個別の

00:00:07.689 --> 00:00:10.338
スプライトに分割するためのツールです

00:00:14.002 --> 00:00:16.277
この時 画像の Sprite Mode は必ず Multiple（複数）に

00:00:16.277 --> 00:00:18.277
指定しておきましょう

00:00:19.371 --> 00:00:21.371
これを Single に設定してしまうと

00:00:21.371 --> 00:00:24.443
Sprite Editor ウィンドウでは扱えなくなってしまいます

00:00:24.943 --> 00:00:29.033
スプライト / スプライトモード / スプライトタイプの詳細については

00:00:29.033 --> 00:00:31.033
下記リンク先の情報を参照してください

00:00:32.306 --> 00:00:34.679
Sprite Mode が Multiple に指定されていると

00:00:34.679 --> 00:00:37.000
Sprite Editor というボタンがインスペクターの

00:00:37.000 --> 00:00:39.000
テクスチャインポーターに表示されます

00:00:40.011 --> 00:00:43.300
このボタンをクリックして Sprite Editor を開きます

00:00:45.292 --> 00:00:47.445
なお Sprite Editor はこの他に メニュー操作

00:00:47.445 --> 00:00:50.452
Window > Sprite Editor でも開けます

00:00:52.665 --> 00:00:55.568
Sprite Editor ウィンドウは標準の Unity ウィンドウなので

00:00:55.568 --> 00:00:58.529
他のウィンドウと同様に扱ったりドッキングしたりできます

00:01:00.217 --> 00:01:02.536
Sprite Editor では目的の要素を

00:01:02.536 --> 00:01:04.673
クリック & ドラッグ操作で選択すると

00:01:04.673 --> 00:01:06.423
スプライトを作成できます

00:01:06.785 --> 00:01:10.531
ここで選択した矩形選択部分が独立したスプライトとして作成されます

00:01:11.445 --> 00:01:13.445
矩形選択の形はその矩形を

00:01:13.445 --> 00:01:15.445
クリック & ドラッグして自由に変更できます

00:01:16.567 --> 00:01:19.856
句形の内側をドラッグすれば位置の調整が可能で

00:01:20.605 --> 00:01:24.286
四隅をや四辺をドラッグすればサイズ変更が可能です

00:01:29.095 --> 00:01:31.095
またピボットポイントギズモをドラッグすれば

00:01:31.095 --> 00:01:33.318
スプライトのピボットポイントも変更できます

00:01:37.062 --> 00:01:39.981
スプライトの選択中には Sprite Editor 右下に

00:01:39.981 --> 00:01:41.981
Sprite パネルが表示され

00:01:41.981 --> 00:01:44.607
詳細を確認することができます

00:01:45.614 --> 00:01:47.614
Name はスプライトの名前

00:01:48.542 --> 00:01:51.731
名前は元画像の名前と

00:01:51.731 --> 00:01:54.364
スライスされた順番（0 スタート）を

00:01:54.364 --> 00:01:55.944
組み合わせて作られます

00:01:56.615 --> 00:01:58.203
Position は画像上でのスプライトの

00:01:58.203 --> 00:02:00.203
位置をピクセルで表示します

00:02:00.924 --> 00:02:04.153
X と Y はスプライトの始点を定義し

00:02:04.153 --> 00:02:06.153
画像の左下からスプライトの左下までの

00:02:06.153 --> 00:02:08.805
距離で示されます

00:02:09.606 --> 00:02:11.955
W と H はスプライトの

00:02:11.955 --> 00:02:13.955
始点からの幅と高さを示します

00:02:16.416 --> 00:02:18.416
Trim ボタンは要素周辺の

00:02:18.416 --> 00:02:20.306
余分なスペースを切り落とし

00:02:20.306 --> 00:02:22.978
無駄のないきっちりとした矩形を作ります

00:02:25.334 --> 00:02:27.334
Pivot はスプライトのピボットポイントを定義します

00:02:27.986 --> 00:02:30.291
ドロップダウンには四隅や各四辺の中央が

00:02:30.291 --> 00:02:32.995
既定の設定として用意されています

00:02:34.269 --> 00:02:36.269
Custom はカスタムピボットポイントを

00:02:36.269 --> 00:02:38.890
Custom Pivot で数値指定する時に使用します

00:02:40.496 --> 00:02:42.300
Sprite Editor の上部にはこの他にも

00:02:42.300 --> 00:02:43.859
次のようなツールが揃っています

00:02:44.552 --> 00:02:46.203
Slice メニュー

00:02:46.896 --> 00:02:48.896
Revert および Apply ボタン

00:02:49.672 --> 00:02:51.672
RGB アルファトグルボタン

00:02:52.683 --> 00:02:54.683
ズームスライダー

00:02:56.550 --> 00:03:00.140
Slice メニューは画像から自動的にスプライトを

00:03:00.140 --> 00:03:02.785
切り出して作成する時に使用します

00:03:03.731 --> 00:03:07.018
種類は Automatic と Grid の 2 種類です

00:03:07.960 --> 00:03:10.499
Automatic はアトラスのように 大きさの

00:03:10.499 --> 00:03:12.499
異なる要素を切り出す時に最も有効です

00:03:13.648 --> 00:03:15.648
画像中の要素検出は周囲の

00:03:15.648 --> 00:03:17.939
空白スペースに基いて自動的に行われます

00:03:18.659 --> 00:03:20.896
このため 各スプライトはトリムされた

00:03:20.896 --> 00:03:22.146
状態となります

00:03:23.065 --> 00:03:26.301
Automatic を選択した場合 Minimum Size は

00:03:26.301 --> 00:03:29.123
各スプライトの最小サイズを定義します

00:03:30.051 --> 00:03:32.697
この値を大きくしすぎると 最小サイズを満たさない

00:03:32.697 --> 00:03:34.697
小さな要素が並んでいるような場合に

00:03:34.697 --> 00:03:36.780
ひとつの大きなスプライトとして

00:03:36.780 --> 00:03:38.780
検出されてしまう可能性があります

00:03:39.667 --> 00:03:41.667
Pivot は画像からスライスされる

00:03:41.667 --> 00:03:43.585
全スプライトのデフォルトピボットポイントを

00:03:43.585 --> 00:03:45.115
設定します

00:03:46.085 --> 00:03:49.644
Sprite パネルと同じくここでもドロップダウンから

00:03:49.644 --> 00:03:52.683
四隅や各四辺の中央が既定値として用意されています

00:03:54.689 --> 00:03:57.750
カスタムピボットポイントを設定する場合はスプライトのスライスが終わってから

00:03:57.750 --> 00:03:59.750
スプライトを選択して Sprite パネルから

00:03:59.750 --> 00:04:01.750
ピボットポイントを変更するか

00:04:01.750 --> 00:04:04.054
エディター上で直接調節します

00:04:05.645 --> 00:04:07.825
Method は既存のスプライトを Sprite Editor ウィンドウで

00:04:07.825 --> 00:04:10.060
どう扱うかを指定するオプションです

00:04:10.988 --> 00:04:13.334
Delete Existing は既存のスプライトをすべて

00:04:13.334 --> 00:04:15.705
新規スプライトで置き換えます

00:04:16.649 --> 00:04:18.842
Smart は既存のスプライトを保持・調整しながら

00:04:18.842 --> 00:04:21.329
スプライトの新規作成を試行します

00:04:22.240 --> 00:04:24.240
Safe は既存のスプライトに一切

00:04:24.240 --> 00:04:26.685
変更を加えず 新規スプライトを作成します

00:04:28.909 --> 00:04:31.944
各オプションを正しく設定したら Slice ボタンをクリックすると

00:04:31.944 --> 00:04:34.695
画像が個別スプライトにスライスされます

00:04:35.963 --> 00:04:39.232
スライスした後は各スプライトが個別に編集可能になります

00:04:41.486 --> 00:04:44.094
なおスプライトシートは全要素が同一サイズであることを

00:04:44.094 --> 00:04:46.784
前提として作成されているものなので

00:04:46.784 --> 00:04:49.508
Slice Type を Automatic にしてしまうと

00:04:49.508 --> 00:04:52.352
各スプライトの細かな差異と

00:04:52.352 --> 00:04:54.352
周辺の空白スペースの変化により

00:04:54.352 --> 00:04:57.161
スプライトが均一に切り出されない可能性があります

00:04:58.371 --> 00:05:01.777
このため均一要素を含むスプライトシートの場合には

00:05:01.777 --> 00:05:03.777
Slice Type を Grid にします

00:05:05.948 --> 00:05:09.202
Pixel Size はグリッドの大きさをピクセル単位で指定します

00:05:10.489 --> 00:05:13.151
Pivot は画像からスライスされる

00:05:13.151 --> 00:05:16.136
全スプライトのデフォルトピボットポイントを指定します

00:05:16.136 --> 00:05:19.235
カスタムピボットポイントを設定する場合はスプライトのスライスが終わってから

00:05:19.235 --> 00:05:21.595
スプライトを選択して Sprite パネルから

00:05:21.595 --> 00:05:24.956
ピボットポイントを変更するか エディター上で直接調節します

00:05:25.926 --> 00:05:28.340
各オプションを正しく設定したら Slice ボタンをクリックすると

00:05:28.340 --> 00:05:30.895
画像が個別スプライトにスライスされます

00:05:32.017 --> 00:05:35.341
スライスした後は各スプライトが個別に編集可能になります

00:05:36.199 --> 00:05:38.990
スライスを完了して内容を保存するには

00:05:38.990 --> 00:05:40.990
Apply をクリックします

00:05:41.421 --> 00:05:44.454
変更内容を破棄する場合には Revert をクリックします

00:05:46.487 --> 00:05:48.487
RGB アルファトグルスイッチは Sprite Editor 上での

00:05:48.487 --> 00:05:51.587
表示をカラー画像とアルファチャンネル表示で

00:05:51.587 --> 00:05:54.146
切り替えることで細部を確認しやすくして

00:05:54.146 --> 00:05:56.849
エッジの手動調整を支援します

00:05:57.929 --> 00:06:01.418
ズームスライダーは画像のズーム制御に使用します

00:06:03.589 --> 00:06:05.589
画像の編集が正常に完了して

00:06:05.589 --> 00:06:07.589
変更が適用されると

00:06:08.089 --> 00:06:10.494
Project ウィンドウでアセットが更新されます

00:06:12.164 --> 00:06:14.566
その後は新しいスプライト / スプライト群は

00:06:14.566 --> 00:06:17.082
画像の下に子 / 子のグループとして

00:06:17.082 --> 00:06:18.579
表示されます

00:06:19.292 --> 00:06:21.833
Project ビューでサムネイルを表示中に子項目を

00:06:21.833 --> 00:06:24.676
表示したい時は下向き矢印をクリックしてください

00:06:26.639 --> 00:06:30.136
子項目はそれぞれ画像の中の使用可能なスプライトを示します

00:06:30.981 --> 00:06:32.662
これらスプライトはプロジェクト内で

00:06:32.662 --> 00:06:35.459
個別に使用することも グループ化して

00:06:35.459 --> 00:06:37.459
たとえばキャラクターを構成したり あるいは

00:06:38.139 --> 00:06:40.776
アニメーションとして使ったりできます