< Return to Video

The Sprite Editor - Unity Official Tutorials

  • 0:01 - 0:04
    Sprite Editor はアトラスやスプライトシートのように
  • 0:04 - 0:08
    複数の要素を持つ画像を取得して個別の
  • 0:08 - 0:10
    スプライトに分割するためのツールです
  • 0:14 - 0:16
    この時 画像の Sprite Mode は必ず Multiple（複数）に
  • 0:16 - 0:18
    指定しておきましょう
  • 0:19 - 0:21
    これを Single に設定してしまうと
  • 0:21 - 0:24
    Sprite Editor ウィンドウでは扱えなくなってしまいます
  • 0:25 - 0:29
    スプライト / スプライトモード / スプライトタイプの詳細については
  • 0:29 - 0:31
    下記リンク先の情報を参照してください
  • 0:32 - 0:35
    Sprite Mode が Multiple に指定されていると
  • 0:35 - 0:37
    Sprite Editor というボタンがインスペクターの
  • 0:37 - 0:39
    テクスチャインポーターに表示されます
  • 0:40 - 0:43
    このボタンをクリックして Sprite Editor を開きます
  • 0:45 - 0:47
    なお Sprite Editor はこの他に メニュー操作
  • 0:47 - 0:50
    Window > Sprite Editor でも開けます
  • 0:53 - 0:56
    Sprite Editor ウィンドウは標準の Unity ウィンドウなので
  • 0:56 - 0:59
    他のウィンドウと同様に扱ったりドッキングしたりできます
  • 1:00 - 1:03
    Sprite Editor では目的の要素を
  • 1:03 - 1:05
    クリック & ドラッグ操作で選択すると
  • 1:05 - 1:06
    スプライトを作成できます
  • 1:07 - 1:11
    ここで選択した矩形選択部分が独立したスプライトとして作成されます
  • 1:11 - 1:13
    矩形選択の形はその矩形を
  • 1:13 - 1:15
    クリック & ドラッグして自由に変更できます
  • 1:17 - 1:20
    句形の内側をドラッグすれば位置の調整が可能で
  • 1:21 - 1:24
    四隅をや四辺をドラッグすればサイズ変更が可能です
  • 1:29 - 1:31
    またピボットポイントギズモをドラッグすれば
  • 1:31 - 1:33
    スプライトのピボットポイントも変更できます
  • 1:37 - 1:40
    スプライトの選択中には Sprite Editor 右下に
  • 1:40 - 1:42
    Sprite パネルが表示され
  • 1:42 - 1:45
    詳細を確認することができます
  • 1:46 - 1:48
    Name はスプライトの名前
  • 1:49 - 1:52
    名前は元画像の名前と
  • 1:52 - 1:54
    スライスされた順番（0 スタート）を
  • 1:54 - 1:56
    組み合わせて作られます
  • 1:57 - 1:58
    Position は画像上でのスプライトの
  • 1:58 - 2:00
    位置をピクセルで表示します
  • 2:01 - 2:04
    X と Y はスプライトの始点を定義し
  • 2:04 - 2:06
    画像の左下からスプライトの左下までの
  • 2:06 - 2:09
    距離で示されます
  • 2:10 - 2:12
    W と H はスプライトの
  • 2:12 - 2:14
    始点からの幅と高さを示します
  • 2:16 - 2:18
    Trim ボタンは要素周辺の
  • 2:18 - 2:20
    余分なスペースを切り落とし
  • 2:20 - 2:23
    無駄のないきっちりとした矩形を作ります
  • 2:25 - 2:27
    Pivot はスプライトのピボットポイントを定義します
  • 2:28 - 2:30
    ドロップダウンには四隅や各四辺の中央が
  • 2:30 - 2:33
    既定の設定として用意されています
  • 2:34 - 2:36
    Custom はカスタムピボットポイントを
  • 2:36 - 2:39
    Custom Pivot で数値指定する時に使用します
  • 2:40 - 2:42
    Sprite Editor の上部にはこの他にも
  • 2:42 - 2:44
    次のようなツールが揃っています
  • 2:45 - 2:46
    Slice メニュー
  • 2:47 - 2:49
    Revert および Apply ボタン
  • 2:50 - 2:52
    RGB アルファトグルボタン
  • 2:53 - 2:55
    ズームスライダー
  • 2:57 - 3:00
    Slice メニューは画像から自動的にスプライトを
  • 3:00 - 3:03
    切り出して作成する時に使用します
  • 3:04 - 3:07
    種類は Automatic と Grid の 2 種類です
  • 3:08 - 3:10
    Automatic はアトラスのように 大きさの
  • 3:10 - 3:12
    異なる要素を切り出す時に最も有効です
  • 3:14 - 3:16
    画像中の要素検出は周囲の
  • 3:16 - 3:18
    空白スペースに基いて自動的に行われます
  • 3:19 - 3:21
    このため 各スプライトはトリムされた
  • 3:21 - 3:22
    状態となります
  • 3:23 - 3:26
    Automatic を選択した場合 Minimum Size は
  • 3:26 - 3:29
    各スプライトの最小サイズを定義します
  • 3:30 - 3:33
    この値を大きくしすぎると 最小サイズを満たさない
  • 3:33 - 3:35
    小さな要素が並んでいるような場合に
  • 3:35 - 3:37
    ひとつの大きなスプライトとして
  • 3:37 - 3:39
    検出されてしまう可能性があります
  • 3:40 - 3:42
    Pivot は画像からスライスされる
  • 3:42 - 3:44
    全スプライトのデフォルトピボットポイントを
  • 3:44 - 3:45
    設定します
  • 3:46 - 3:50
    Sprite パネルと同じくここでもドロップダウンから
  • 3:50 - 3:53
    四隅や各四辺の中央が既定値として用意されています
  • 3:55 - 3:58
    カスタムピボットポイントを設定する場合はスプライトのスライスが終わってから
  • 3:58 - 4:00
    スプライトを選択して Sprite パネルから
  • 4:00 - 4:02
    ピボットポイントを変更するか
  • 4:02 - 4:04
    エディター上で直接調節します
  • 4:06 - 4:08
    Method は既存のスプライトを Sprite Editor ウィンドウで
  • 4:08 - 4:10
    どう扱うかを指定するオプションです
  • 4:11 - 4:13
    Delete Existing は既存のスプライトをすべて
  • 4:13 - 4:16
    新規スプライトで置き換えます
  • 4:17 - 4:19
    Smart は既存のスプライトを保持・調整しながら
  • 4:19 - 4:21
    スプライトの新規作成を試行します
  • 4:22 - 4:24
    Safe は既存のスプライトに一切
  • 4:24 - 4:27
    変更を加えず 新規スプライトを作成します
  • 4:29 - 4:32
    各オプションを正しく設定したら Slice ボタンをクリックすると
  • 4:32 - 4:35
    画像が個別スプライトにスライスされます
  • 4:36 - 4:39
    スライスした後は各スプライトが個別に編集可能になります
  • 4:41 - 4:44
    なおスプライトシートは全要素が同一サイズであることを
  • 4:44 - 4:47
    前提として作成されているものなので
  • 4:47 - 4:50
    Slice Type を Automatic にしてしまうと
  • 4:50 - 4:52
    各スプライトの細かな差異と
  • 4:52 - 4:54
    周辺の空白スペースの変化により
  • 4:54 - 4:57
    スプライトが均一に切り出されない可能性があります
  • 4:58 - 5:02
    このため均一要素を含むスプライトシートの場合には
  • 5:02 - 5:04
    Slice Type を Grid にします
  • 5:06 - 5:09
    Pixel Size はグリッドの大きさをピクセル単位で指定します
  • 5:10 - 5:13
    Pivot は画像からスライスされる
  • 5:13 - 5:16
    全スプライトのデフォルトピボットポイントを指定します
  • 5:16 - 5:19
    カスタムピボットポイントを設定する場合はスプライトのスライスが終わってから
  • 5:19 - 5:22
    スプライトを選択して Sprite パネルから
  • 5:22 - 5:25
    ピボットポイントを変更するか エディター上で直接調節します
  • 5:26 - 5:28
    各オプションを正しく設定したら Slice ボタンをクリックすると
  • 5:28 - 5:31
    画像が個別スプライトにスライスされます
  • 5:32 - 5:35
    スライスした後は各スプライトが個別に編集可能になります
  • 5:36 - 5:39
    スライスを完了して内容を保存するには
  • 5:39 - 5:41
    Apply をクリックします
  • 5:41 - 5:44
    変更内容を破棄する場合には Revert をクリックします
  • 5:46 - 5:48
    RGB アルファトグルスイッチは Sprite Editor 上での
  • 5:48 - 5:52
    表示をカラー画像とアルファチャンネル表示で
  • 5:52 - 5:54
    切り替えることで細部を確認しやすくして
  • 5:54 - 5:57
    エッジの手動調整を支援します
  • 5:58 - 6:01
    ズームスライダーは画像のズーム制御に使用します
  • 6:04 - 6:06
    画像の編集が正常に完了して
  • 6:06 - 6:08
    変更が適用されると
  • 6:08 - 6:10
    Project ウィンドウでアセットが更新されます
  • 6:12 - 6:15
    その後は新しいスプライト / スプライト群は
  • 6:15 - 6:17
    画像の下に子 / 子のグループとして
  • 6:17 - 6:19
    表示されます
  • 6:19 - 6:22
    Project ビューでサムネイルを表示中に子項目を
  • 6:22 - 6:25
    表示したい時は下向き矢印をクリックしてください
  • 6:27 - 6:30
    子項目はそれぞれ画像の中の使用可能なスプライトを示します
  • 6:31 - 6:33
    これらスプライトはプロジェクト内で
  • 6:33 - 6:35
    個別に使用することも グループ化して
  • 6:35 - 6:37
    たとえばキャラクターを構成したり あるいは
  • 6:38 - 6:41
    アニメーションとして使ったりできます
Title:
The Sprite Editor - Unity Official Tutorials
Description:
more » « less
Video Language:
English
Duration:
06:46

Japanese subtitles

Revisions

Our website uses cookies for analysis purposes.