スクラッチでスプライトシートを使う方法【Macでも分割できる！】

本記事は

といったお悩みを解決します。

ゲームを作ったりプログラミング学習をはじめる時に利用されるスクラッチ。

最初は有名なスクラッチキャットを素材にしてプログラムを組むことになるかと思います。

スクラッチキャット

でも使うキャラクターがスクラッチキャットだけだと飽きてしまいます。

実はスクラッチに限らずUnityなどでも使える著作権の無いキャラクター素材はたくさんあります。

でもそのキャラクター素材の大抵はスプライトシートという画像になっていることがほとんど。

スクラッチではそのまま使えません。

スプライトシートとはこんな感じのもの。

出典：GitHub　superpowers-asset-packs

一枚の画像にアニメーションしているキャラクターが描かれています。

「この画像のキャラクター、スクラッチでどうやってつかえばいいの？」

ここで悩んでしまいます。

本記事はスプライトシートからキャラクター素材をかんたんにスクラッチに取り込む方法を説明します。

とくにMacではスプライトシートの分割加工の方法が少ないので本記事で解決しましょう。

ぜひ最後まで読んでみてください。

オンラインプログラミング教室の比較はコチラ

【徹底比較】おすすめの小学生オンラインプログラミング教室8校をご紹介

スプライトシートからキャラクター素材を切り分ける方法

スクラッチではPNGという画像のファイルしか読み込みできません。

スプライトシートのキャラクターをスクラッチで動かしたり使いたい時は

キャラクター1枚ごとのPNG画像ファイルを小分けにして読み込む必要があります。

まずは欲しいキャラクターのスプライトシートをインターネットでダウンロードして準備しましょう。

そのあと次のような流れで作業します。

順番に説明していきます。

１.必要なツールを準備

全部ブックマークに登録しておきましょう。

ユーザー登録などは要りません。全部無料でつかえます。

※注意点としてPISKELはインターネットブラウザのSafariをサポートしていません。

ブラウザをグーグルクロームにしておくとよいです。

2.画像加工ツールを使ってキャラクターの背景をとりのぞく

まずはスプライトシートの背景をとりのぞきます。

背景をとりのぞかずにキャラクターをスクラッチに取り込むとおかしなことになります。

Remove bgだと画像ファイルをドラッグアンドドロップするだけでOKです。

冒頭の背景がまっくろのスプライトシートを例に簡単に説明します。

1.スプライトシートを準備します。

2.Remove bgのサイトをひらいて1.のスプライトシートをドラッグアンドドロップします。

3.すると、まっくろだった背景が消えますのでダウンロードをクリック。

4.背景がとりのぞかれたスプライトシートが手に入ります。

冒頭のスプライトシートの背景は真っ黒でしたが、この処理で背景をとりのぞくことができます。

これでキャラクターだけが際立つように加工できました。

なお、背景の色がいくつもあるとうまく加工できないときがあります。

その時はBANNER KOUBOUを使ってみましょう。

抜きたい色を指定してとりのぞくことができます。

3.PISKELでスプライトシートからキャラクター画像に分ける

Piskelは無料で使えるドット絵作成アプリです。

今回はドット絵を作成するためには使いません。

一枚のスプライトシートからキャラクターを切り分けてPNGのファイルにするために使います。

作業の内容を一覧にすると

作業内容が多くみえますが一度チャレンジしてみたら簡単ですよ。

順番に説明していきます。

1.背景をとりのぞいたスプライトシートを準備

先ほど背景をとりのぞいたスプライトシートを準備します。

2.Piskelのサイトを立ち上げます

そのあと、右上の「スプライト作成」をクリック。

3.右はしっこのアイコンの一番下、「画像のインポート」をえらぶ

4.「画像を閲覧する」をクリックしてから1.で準備したスプライトシートをえらぶ

5.Piskelにスプライトシートを読み込んで画像を分ける

背景をとりのぞいたスプレットシートを読み込むと「インポートとマージ」画面になります。

「スプライトシートとしてインポート」をクリックしてチェックをいれます。

「フレームサイズ」と書かれた左が画像の横の長さ、右が画像の縦の長さになります。

＊ここから少し計算をします

スプライトシートには横に６キャラ、縦に７キャラありますので

横の長さ÷６＝１０７

縦の長さ÷７＝７１

でてきた数字を入れ直してあげると

こんなふうに画像に黄色いアミがかかりました。

右下の「次」をクリックします。

するとこんな画面になります。

左側に分けたキャラクターが表示されています。

6. 5で分けた画像をまとめてダウンロードする

右はしの「エクスポート」をえらび、「ジップ」タグの「ダウンロードZIP」をクリックします。

これでまとめてダウンロードできます。

7.ダウンロードしたZIPファイルを解凍して中身を確認して完了

ZIPという圧縮されたファイルがダウンロードできますので、ダブルクリックで解凍します。

無事スプライトシートがキャラクター1つ1つに小分けできました。

ファイル名の後が全部「.png」になっていますね。

これで完了です。

4.スクラッチに取り込む

最後にキャラクターに小分けされたPNG画像ファイルをスクラッチに取り込みます。

①「スプライトをアップロード」して

②「コスチュームをアップロード」すれば取り込み完了です。

こんなコードを使うと取り込んだキャラクターのアニメーションが確認できます。

まとめ

スプライトシートになっているキャラクター素材をスクラッチで使う方法について説明してきました。

もう一度おさらいすると

1. 必要なツールを準備
2. 画像加工ツールを使ってキャラクターと背景をとりのぞく
3. PISKELでスプライトシートからキャラクター画像に分ける
4. スクラッチに取り込む

といった流れで作業していきます。

Macのユーザーの方はスプライトシートの分割加工の方法が少ないのですがPiskelなら解決できます。

Piskelはスプライトシートの加工だけでなく

ドット絵を作るのも簡単にできるようになるので、一度はさわってみることおすすめです。

以上、「スクラッチでスプライトシートを使う方法【Macでも分割できる！】」でした。

最後まで読んでいただきありがとうございます。

では、また。

オンラインプログラミング教室の比較はコチラ

【徹底比較】おすすめの小学生オンラインプログラミング教室8校をご紹介