Scratchでベクターに変換してもギザギザが残る理由
Scratchの「Convert to Vector（ベクターに変換）」は編集モードを変えるだけで、ビットマップをトレースしません。コスチュームの点を調べて修正方法を選び、読み込んだSVGを使用前に確認します。
目次
Scratchの**「Convert to Vector（ベクターに変換）」**ボタンは、ビットマップのコスチュームの輪郭をトレースしません。ラスターの図案をベクター編集モードへ持ち込みますが、1つの画像オブジェクトのまま残る場合があります。クリック後もPNGのコスチュームがギザギザに見えるのはそのためです。現在のScratchの描画エディターのソースは、この操作中にラスターオブジェクトを保持し、色の領域をパスとして再構築しません。
部分ごとに形や色を変えたいコスチュームには、新しく描いた、またはトレースしたベクター図形が必要です。意図的なピクセルアートなら、ビットマップを保つのが適切かもしれません。選択中のコスチュームを確認してから、プロジェクトに必要な再構築の程度を選びます。
ボタンで何が変わるのか
スプライトの**「Costumes（コスチューム）」タブを開き、調べたいコスチュームを選びます。変換ボタンは切り替え先のモードを示します。ビットマップモードでは「Convert to Vector（ベクターに変換）」、ベクターモードでは「Convert to Bitmap（ビットマップに変換）」**が表示されます。
モードを変えると編集ツールが変わります。キャンバス上のすべてのオブジェクトに編集可能な輪郭が付くという意味ではありません。ベクターのコスチュームは、自分で描いた図形とともにラスター画像を含められます。基本的な違いは、ラスター画像を含むSVGのガイドと同じです。
実験前に元のコスチュームのコピーを残します。特に、描いたベクター図案をビットマップに変換すると、形状がピクセルへ統合されます。その後戻しても以前の点は再作成されません。図形を取り戻したい場合は、元に戻す操作か保存した原版を使います。
3つの方法でコスチュームを確認する
境界ボックスだけではほとんど分かりません。画像にもベクター図形のグループにも付く場合があるためです。実際に編集したい部分を調べます。次の診断はロケットの例ですが、動物、バッジ、授業用アイコンでも同じように使えます。
- **輪郭を確認します。**複製したコスチュームで「Reshape（形を変える）」を選び、ロケットの尾翼の縁をクリックします。長方形の周囲のハンドルではなく、縁に沿う点を探します。グループ化されている場合は、選択して、利用可能ならUngroup（グループ解除）を使ってから部分を調べます。「Reshape（形を変える）」を正しく使えているか不明なら、図案の横に一時的な円を描き、ツールによる選択を比べます。
- **1色を確認します。**ロケットの先端を選び、「Fill（塗りつぶし）」を変えてみます。胴体や他の部分を変えず、その領域だけ色変更できますか。試した編集を元に戻します。画像が複数色でも、全体の選択では独立して編集可能な先端は得られません。
- **実際の表示場所で確認します。**エディター内のコスチュームと、プロジェクトで使うサイズでステージに表示した姿を比べます。輪郭の編集可能性と画面上の鮮明さは別の確認です。ステージの粗いプレビューだけでは、すでに有用なパスがある図案をトレースする十分な理由にはなりません。
| 分かったこと | 次に確認すること | 役立つ次の作業 |
|---|---|---|
| PNGから作ったコスチュームで、色の境界に点がない | 上に描いた新しい図形ではなく画像を調べているか | ビットマップの維持、描き直し、元画像のトレース |
| 図案がグループとして選択される | 利用可能ならグループを解除して構成部分を確認する | 再変換を考える前に既存の図形を編集する |
| 点のある部分と画像のままの部分がある | 編集が必要な領域を特定する | 残りが使えるなら、そのラスター領域だけを再構築する |
| 図形に点があるが、ステージだけで粗く見える | 目的の表示サイズと元のSVGを比較する | 図案を置き換える前に表示を調べる |
最後の場合は、より広いSVGのギザギザ表示の診断で、ファイル内容とアプリケーションの表示を分けて考えられます。
図案に合う修正を選ぶ
ピクセルがデザインの一部ならビットマップを保つ
小さなピクセルのキャラクターは、ファイルがベクターというだけで良いコスチュームになるわけではありません。段状の縁、小さい目、限られた色が意図したものなら、実際に使うサイズで判断します。元画像を保ち、実験中に何度もサイズ変更しないようにします。
個別の輪郭編集より質感が重要な写真や描いた背景にも、同じことがいえます。その細部を図形へトレースすると図案が変わります。SVG内で四角いピクセルを保つのは、シルエットを滑らかにするのとは別の作業です。ピクセルアート変換のガイドで、その選択を説明しています。
シンプルなコスチュームをScratchのベクターツールで描き直す
胴体、先端、窓、尾翼でできたロケットなら、各部分を別々に描くことで構造を直接制御できます。ベクターモードで新しいコスチュームを描き始めます。円、長方形、線、筆のツールで主要部分を作り、「Reshape（形を変える）」で輪郭を調整します。
大きなシルエットから内側へ作業します。目的のサイズで胴体がはっきり見えてから、小さな窓を加えます。尾翼を独立して動かす必要があるなら、別のオブジェクトとして残します。これはデザインの選択です。自動トレースは、後の編集でどの部品が必要かを決められません。
外部のベクターエディターで図形を作ることもできます。PinnguaqのオリジナルのScratch用ベクターアートのチュートリアルは、SVGの読み込み、構成部分の選択、塗り変更、要素の配置を実演しています。目指すのは、そうした編集可能な構造です。
ラスターだけなら適したクリップアートをトレースする
残したいフラットなイラストがすでにあり、すべての輪郭を描き直す必要がない場合、トレースが役立ちます。手持ちで最も明瞭なPNGやJPGを使います。この方法では、PerfectVectorが適したクリップアートをSVGパスとして再構築し、Scratchへ読み込む前に確認できます。元画像から編集可能な図形を復元するのが目的で、コスチュームには後で編集の確認が必要です。
トレースは見える領域に沿います。尾翼を複数の部分へ分けたり、個別に動かしたかった接触領域を結合したりする場合があります。小さい目、細い隙間、文字は特に注意してください。再構築の仕組みを知りたいなら、画像ベクター化の解説から始めます。
SVGを読み込み、コスチュームの中心を確認する
Scratchのコスチュームアップローダーは、SVGをベクター図案として受け付けます。スクリーンショットやPNGのプレビューではなく、ダウンロードしたSVGそのものを読み込みます。
- 既存のスプライトを選んで**「Costumes（コスチューム）」を開きます。コスチューム選択から「Upload Costume（コスチュームをアップロード）」を使い、元のものと並べてSVGを追加します。別のスプライトが欲しい場合は、「Upload Sprite（スプライトをアップロード）」**を使います。
- 読み込んだ図案を元画像と比較します。輪郭、部品間の隙間、目、背景を確認します。元データにすでにベクター図形があるなら、ラスターのプレビューをトレースせず、そのSVGを修正・再書き出しします。
- 輪郭と単色の確認を繰り返します。必要な部分を編集できると確認したら、試した編集を元に戻します。一時的な比較用図形を作業用コピーから除きます。
- コスチュームエディターの中心の十字に対する配置を確認します。関連するコスチュームでは、同じ視覚的な基準点を保ちます。ロケットなら胴体の中央などを使えます。必要に応じて図案を調整し、ステージで元のコスチュームと比較します。
- スプライトを動かさずに、元のものと置き換え用を切り替えます。意図しない位置のずれ、見た目のサイズ変更、背景長方形がないかを確認します。置き換えに満足するまで原版を残します。
Scratchはコスチュームごとに回転中心を保存します。コスチュームの読み込みコードは、中心が指定されない場合、レンダラーから取得します。見える図案を一致させることが読み込み確認の一部にすぎないのはそのためです。コスチューム中心に対する配置も、プロジェクトに合う必要があります。
よくある質問
「Convert to Vector（ベクターに変換）」でScratchのコスチュームのギザギザは減りますか？ ビットマップの輪郭をトレースしたり滑らかにしたりしません。編集モードは変わりますが、ラスターの図案は画像オブジェクトとして残る場合があります。編集可能な輪郭を作るには、描き直すか、トレースしたパスを含むSVGを読み込みます。
コスチュームを移動できても輪郭の形を変えられないのはなぜですか？ 画像オブジェクトの移動には、見える輪郭上の点は不要です。グループを選択していないかを確認し、「Reshape（形を変える）」で構成部分を調べます。ベクターモードに残るビットマップは、モードの変更で輪郭点を得ることはありません。
スプライトをトレースすれば、腕や脚などの可動部品が分かれますか？ そうなるとは考えないでください。トレースは見える領域を再構築するので、動かしたい部品と異なる場合があります。読み込んだ図形を調べ、必要に応じて構成部分を分離または描き直します。
参考資料
- Scratch Foundation：ビットマップ変換の実装 — ラスターを保持したベクター編集モードへの変換。
- Scratch Foundation：コスチュームファイルのアップローダー — SVGコスチュームのアップロードがベクターアセット形式を使うことの確認。
- Scratch Foundation：ベクターコスチュームの読み込み — 読み込んだコスチュームへ回転中心を設定する方法。
- Pinnguaq：Scratchでのベクターグラフィックアート — SVG読み込みと、個々の図形、塗り、配置の編集の実演。
コスチュームがフラットなラスターのクリップアートから始まり、編集可能な輪郭が必要なら、PerfectVectorで元画像をSVGへ変換してください。新しいコスチュームとして読み込み、輪郭1つ、色1つ、中心を確認してから原版を置き換えます。
