本記事は
- スクラッチでもっといろいろなキャラクター素材を使いたい！
- スプライトシートってどうやってスクラッチに取り込むの？
- Macでもスプライトシートを使いたいのに方法がわからない･･･
といったお悩みを解決します。
ゲームを作ったりプログラミング学習をはじめる時に利用されるスクラッチ。
最初は有名なスクラッチキャットを素材にしてプログラムを組むことになるかと思います。
でも使うキャラクターがスクラッチキャットだけだと飽きてしまいます。
実はスクラッチに限らずUnityなどでも使える著作権の無いキャラクター素材はたくさんあります。
でもそのキャラクター素材の大抵はスプライトシートという画像になっていることがほとんど。
スクラッチではそのまま使えません。
スプライトシートとはこんな感じのもの。
一枚の画像にアニメーションしているキャラクターが描かれています。
「この画像のキャラクター、スクラッチでどうやってつかえばいいの？」ここで悩んでしまいます。
本記事はスプライトシートからキャラクター素材をかんたんにスクラッチに取り込む方法を説明します。
とくにMacではスプライトシートの分割加工の方法が少ないので本記事で解決しましょう。
もしプログラミングで詰まっているなら、プログラミングスクールで学ぶこともおすすめです。
プログラミング作品の制作手法などクリエイティブに力を入れている教室があります。
スプライトシートからキャラクター素材を切り分ける方法
スクラッチではPNGという画像のファイルしか読み込みできません。
スプライトシートのキャラクターをスクラッチで動かしたり使いたい時は、キャラクター1枚ごとのPNG画像ファイルを小分けにして読み込む必要があります。
まずは欲しいキャラクターのスプライトシートをインターネットでダウンロードして準備しましょう。
そのあと次のような流れで作業します。
- 必要なツールを準備
- 画像加工ツールを使ってキャラクターから背景の色をとりのぞく
- PISKELでスプライトシートからキャラクター画像に分ける
- スクラッチに取り込む
１.必要なツールを準備
全部ブックマークに登録しておきましょう。
ユーザー登録などは要りません。全部無料でつかえます。
- PISKEL 無料ドット絵作成サイト
- Remove bg 背景透過の画像加工サイト 一番かんたん
- BANNER KOUBOU 背景透過の画像加工サイト 抜きたい色が指定できる
注意点としてPISKELはインターネットブラウザのSafariをサポートしていません。
ブラウザをグーグルクロームにしておくとよいです。
2.画像加工ツールを使ってキャラクターの背景をとりのぞく
まずはスプライトシートの背景をとりのぞきます。
背景をとりのぞかずにキャラクターをスクラッチに取り込むとおかしなことになります。
Remove bgだと画像ファイルをドラッグアンドドロップするだけでOKです。
冒頭の背景がまっくろのスプライトシートを例に簡単に説明します。
1.スプライトシートを準備します。
2.Remove bgのサイトをひらいて1.のスプライトシートをドラッグアンドドロップします。
3.すると、まっくろだった背景が消えますのでダウンロードをクリック。
4.背景がとりのぞかれたスプライトシートが手に入ります。
冒頭のスプライトシートの背景は真っ黒でしたが、この処理で背景をとりのぞくことができます。
これでキャラクターだけが際立つように加工できました。
なお、背景の色がいくつもあるとうまく加工できないときがあります。
その時はBANNER KOUBOUを使ってみましょう。抜きたい色を指定してとりのぞくことができます。
3.PISKELでスプライトシートからキャラクター画像に分ける
Piskelは無料で使えるドット絵作成アプリです。今回はドット絵を作成するためには使いません。
一枚のスプライトシートからキャラクターを切り分けてPNGのファイルにするために使います。
作業の内容を一覧にすると
- 背景をとりのぞいたスプライトシートを準備
- Piskelのサイトを立ち上げます
- 右はしっこのアイコンの一番下、「画像のインポート」をえらぶ
- 「画像を閲覧する」をクリックしてから1.で準備したスプライトシートをえらぶ
- Piskelにスプライトシートを読み込んで画像を分ける
- 5で分けた画像をまとめてダウンロードする
- ダウンロードしたZIPファイルを解凍して中身を確認して完了
作業内容が多くみえますが一度チャレンジしてみたら簡単ですよ。順番に説明していきます。
1.背景をとりのぞいたスプライトシートを準備
先ほど背景をとりのぞいたスプライトシートを準備します。
2.Piskelのサイトを立ち上げます
そのあと、右上の「スプライト作成」をクリック。
3.右はしっこのアイコンの一番下、「画像のインポート」をえらぶ
4.「画像を閲覧する」をクリックしてから1.で準備したスプライトシートをえらぶ
5.Piskelにスプライトシートを読み込んで画像を分ける
背景をとりのぞいたスプレットシートを読み込むと「インポートとマージ」画面になります。
「スプライトシートとしてインポート」をクリックしてチェックをいれます。
「フレームサイズ」と書かれた左が画像の横の長さ、右が画像の縦の長さになります。
＊ここから少し計算をします
スプライトシートには横に６キャラ、縦に７キャラありますので
横の長さ÷６＝１０７
縦の長さ÷７＝７１
でてきた数字を入れ直してあげると
こんなふうに画像に黄色いアミがかかりました。
右下の「次」をクリックします。
するとこんな画面になります。
左側に分けたキャラクターが表示されています。
6. 5で分けた画像をまとめてダウンロードする
右はしの「エクスポート」をえらび、「ジップ」タグの「ダウンロードZIP」をクリックします。
これでまとめてダウンロードできます。
7.ダウンロードしたZIPファイルを解凍して中身を確認して完了
ZIPという圧縮されたファイルがダウンロードできますので、ダブルクリックで解凍します。
無事スプライトシートがキャラクター1つ1つに小分けできました。
ファイル名の後が全部「.png」になっていますね。
これで完了です。
4.スクラッチに取り込む
最後にキャラクターに小分けされたPNG画像ファイルをスクラッチに取り込みます。
①「スプライトをアップロード」して
②「コスチュームをアップロード」すれば取り込み完了です。
こんなコードを使うと取り込んだキャラクターのアニメーションが確認できます。
まとめ
スプライトシートになっているキャラクター素材をスクラッチで使う方法について説明してきました。
もう一度おさらいすると
- 必要なツールを準備
- 画像加工ツールを使ってキャラクターと背景をとりのぞく
- PISKELでスプライトシートからキャラクター画像に分ける
- スクラッチに取り込む
といった流れで作業していきます。
Macのユーザーの方はスプライトシートの分割加工の方法が少ないのですがPiskelなら解決できます。
Piskelはスプライトシートの加工だけでなく、ドット絵を作るのも簡単にできるようになるので、一度はさわってみることおすすめです。
プログラミング学習や制作で迷っているときは、プログラミングスクールで基礎から体系的に学ぶとわかりやすく、スキルとしても身につきやすいです。各スクールはこちらで比較して整理しています。
