オンラインプログラミングスクール

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

スクラッチでスプライトシートアイキャッチ

本記事は

はてな

スクラッチでもっといろいろなキャラクター素材を使いたい!

スプライトシートってどうやってスクラッチに取り込むの?

Macでもスプライトシートを使いたいのに方法がわからない・・・

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

 

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

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

スクラッチキャット

スクラッチキャット

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

 

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

 

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

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

 

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

スプライトシートサンプル

出典:GitHub superpowers-asset-packs

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

 

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

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

 

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

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

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

 

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

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

 

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

切り分けるイメージ図

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

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

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

 

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

 

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

スプライトシートを使う方法

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

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

 

1.必要なツールを準備

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

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

ポイント

  • PISKEL  無料ドット絵作成サイト
  • Remove bg 背景透過の画像加工サイト 一番かんたん
  • BANNER KOUBOU 背景透過の画像加工サイト 抜きたい色が指定できる

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

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

 

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

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

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

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

 

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

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

スプライトシートサンプル

 

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

背景透過のアプリ使い方1

 

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

背景透過のアプリ使い方2

 

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

背景を抜いたスプライトシート

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

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

 

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

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

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

 

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

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

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

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

 

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

ポイント

  1. 背景をとりのぞいたスプライトシートを準備
  2. Piskelのサイトを立ち上げます
  3. 右はしっこのアイコンの一番下、「画像のインポート」をえらぶ
  4. 「画像を閲覧する」をクリックしてから1.で準備したスプライトシートをえらぶ
  5. Piskelにスプライトシートを読み込んで画像を分ける
  6.  5で分けた画像をまとめてダウンロードする
  7. ダウンロードしたZIPファイルを解凍して中身を確認して完了

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

 

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

 

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

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

 

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

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

スプライト作成のクリック

 

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

Piskelの使い方1

 

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

Piskelの使い方2

 

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

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

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

Piskelの使い方3

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

 

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

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

横の長さ÷6=107

縦の長さ÷7=71

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

Piskelの使い方4

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

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

 

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

Piskelの使い方5

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

 

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

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

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

Piskelの使い方6

 

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

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

Piskelの使い方7

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

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

これで完了です。

 

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

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

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

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

スクラッチに取り込む図

 

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

アニメーションのコード例

 

まとめ

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

もう一度おさらいすると

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

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

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

 

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

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

 

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

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

では、また。

 

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

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

 

-オンラインプログラミングスクール