子供プログラミング教室

【Macの方必見!】スクラッチでスプライトシートを使う方法【キャラクタ素材を使いたい!】

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

本記事は

はてな

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

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

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

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

 

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

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

スクラッチキャット

スクラッチキャット

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

 

「スクラッチでもっと他のキャラクタをゲームに使ってみたい!動かしてみたい!」

そんなお子さんの要望に応えることはできるのでしょうか?

 

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

 

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

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

 

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

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

出典:GitHub superpowers-asset-packs

アニメーションして動いているキャラクタが描かれています。

これ一枚の画像なんです。

 

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

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

 

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

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

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

 

オンラインプログラミング教室の比較はこちら→

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

 

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

切り分けるイメージ図

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

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

キャラクタ一枚ごとの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は無料で使えるドット絵作成サイトで有名です。

なお、本記事ではドット絵の作成についてはふれません。

 

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

ポイント

  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校をご紹介

 

-子供プログラミング教室