コスチュームをファイルに保存:Scratch 3.0 & 2.0

Scratch 3.0とScratch2.0それぞれで、コスチュームをファイルに保存する方法を説明します。

【目次】
1.コスチュームとは
2.Scratch 2.0でコスチュームをファイルに保存する方法
3.Scratch 3.0でコスチュームをファイルに保存する方法
3.1.そのコスチュームを含むスプライトを保存
3.2.Scratch 3.0から保存するファイルは圧縮ファイル
3.3.圧縮ファイルの中の個々のファイルについて
4.おまけ1:svgファイルをMicrosoft Wordで表示する方法
5.おまけ2: Scratch 3.0 でコスチュームをファイルに保存する例
6.本当のおまけ:Scratch 3.0 で背景の絵のファイルや音のファイルの保存は?

1.コスチュームとは

子ども向けプログラミング言語 Scratchでは、絵を動かしたり音を出したりするプログラムを簡単に作ることができます。

Scratchの絵のデータは、大きく分けて2種類あります。
Scratchの用語で、1つは背景、もう1つはコスチュームと呼ばれます。
コスチュームは、ステージの中で動かしたり、変化させたりするスプライトと呼ばれるものの絵のデータです。

スプライトは、コスチュームと、音と、スクリプト(スプライトを制御するために順序立てて並べた命令の集合)とで構成されます。
コスチュームは、1つのスプライトに1つ以上必要です。
1つのスプライトについて、音もスクリプトも、それぞれ0個以上複数持つことが可能です。
ちなみに、スプライトは、1つのプログラムに 0個以上複数作ることが可能です。

Scratch 3.0が2019年1月3日(日本時間)にリリースされましたが、2019年1月現在、Scratch 2.0もオフラインエディターは提供中ですし、もちろん、多くの皆様はScratch 2.0をまだまだ活用中だと思います。
そこで、Scratch 3.0とScratch 2.0のそれぞれでコスチュームをファイルに保存する方法を、今回は説明することにします。

2.Scratch 2.0でコスチュームをファイルに保存する方法

Scratchの最新バージョンの1つ前のバージョンであるScratch 2.0のオフラインエディターには、スプライトのコスチュームペインから、コスチュームの絵のデータだけを画像ファイルとして保存する機能があります。

具体的には Scratch 2.0でコスチュームをファイルに保存するには、
A) あるコスチュームを保存したい、あるスプライトについて、まず、 Scratch 2.0のオフラインエディター画面左下のスプライトリストの、そのスプライトのサムネイルをクリックして対象にします。
B) 対象のスプライトのコスチュームペインを表示するため、エディター画面中央上部のコスチュームタブをクリックします。
C) コスチュームペインで対象にしたいコスチュームのサムネイルをクリックします。
D) そのサムネイルの上で右クリックし、表示された[ローカルファイルに保存]をクリックします。
E) 保存先を選択する画面が出てくるので、保存先のフォルダを選択しファイル名を決め、必要なら入力し直してファイル名を変更してから、[保存]ボタンをクリックします。

例えば、新規作成のとき、デフォルトで用意されている、ねこのスプライトのはじめのコスチュームをファイルに保存してみます。
A) スプライトリストのねこのスプライトのサムネイルをクリックします。

A
A

B) ねこのスプライトのコスチュームペインを表示するために、[コスチューム]タブをクリックします。

B
B

C) コスチュームペインではじめのコスチュームのサムネイルをクリックします。

C
C

D) そのサムネイルの上で右クリックし、表示された[ローカルファイルに保存]をクリックします。

D
D

E) 保存先を選択する画面が出てくるので、保存先のフォルダを選択しファイル名を決め、必要なら入力し直してファイル名を変更してから、[保存]ボタンをクリックします。

E
E

Scratchのペイントエディターで、そのとき対象となっているコスチュームがベクターモードの画像ならば、ペイントエディター下部に[ビットマップに変換]ボタンが表示されています。
コスチュームがベクターモードで作成されたものであれば、保存されるファイルの拡張子は svgになります。

Scratchのペイントエディターで、そのとき対象となっているコスチュームがビットマップモードの画像ならば、ペイントエディター下部に[ベクターに変換]ボタンが表示されています。
コスチュームがビットマップモードで作成されたものであれば、保存されるファイルの拡張子はpngになります。

ベクターモードは、絵をどうやって描いたかの情報を文字で管理するモードです。
例えば、内側が青く塗りつぶされた四角形の図は、ベクターモードでは、四角形であるという情報、四角形を描くための情報(例えば、四角形の対角の2点の座標と四角形の外枠の線の太さとその色の情報)、四角形を塗りつぶすための情報(塗りつぶすか否かの情報とその色の情報)が文字で管理されます。
絵はビットマップモードよりベクターモードで作った方が滑らかな線になり、特にベクターモードは拡大縮小後も図の美しさをキープできます。
ビットマップモードは、点々の集合で絵や写真のデータを扱うモードです。

自分でコスチュームを作成する場合は、ペイントエディターで、どちらのモードで作成するかを選べます。
ペイントエディター下部にあるボタンが[ビットマップに変換]ボタンになっている場合はベクターモード、[ベクターに変換]ボタンになっている場合は、ビットマップモードのときです。
必要ならモードをこのボタンで切り替えることで、モードを選びます。
モードは、絵の作成途中でも、いつでも、切り替えられます。
なお、私は、絵を作るなら、画像がきれいな、ベクターモードの方をお勧めします。

また、カメラで作ったコスチュームは自動的にビットマップモードになります(後でベクターモードに変えることもできますが、変える利点はないと思います。)。

svgファイルは、ベクターモードの内容を保存するのに適した、文字で画像を作る情報を持つファイルです。

pngファイルは、ビットマップモードの内容を保存するのに適した、点々で画像を作る情報を持つファイルです。
点々で画像を作る情報を持つファイル形式は他にもいくつかありますが、他の多くのファイル形式がその絵の情報を長方形の土台となる領域に乗せて持つのに対し、pngファイルは、その絵の情報だけ(土台は透明)を持ちます。
要は、そのファイルの図を何かの図の上に貼ったとき、pngファイルの場合は、中の図の形だけが貼り込まれるのに対して、他の多くの形式のファイルの場合はその絵を含む長方形の土台ごと貼り込まれます。

3.Scratch 3.0でコスチュームをファイルに保存する方法

先にご紹介したとおり、Scratch 2.0は、1つのコスチュームを1つのファイルに保存する単独の機能を持っています。
一方、Scratch 3.0は、その機能を持っていません。
Scratch 3.0は、保存機能として、プログラムを保存する機能と、スプライトを保存する機能のみを持ちます。
そこで、これらを利用して、コスチュームの保存も行います。

その手順の概要は、プログラムか(コスチュームを含む)スプライトをファイルに保存した後、その中から目的のコスチューム単独の情報を探し出して、わかりやすい名前を付けて、扱いやすい場所に保存し直す、という流れになります。

例えば、ご自身のお子様がScratch 3.0で作ったコスチュームがとても芸術的だったとき、これから説明する手順でそのコスチュームの絵を保存すれば、他のソフトでも利用できるようになります。

3.1.そのコスチュームを含むスプライトを保存

コスチュームはスプライトの一部であり、スプライトはプログラムの一部です。
Scratch 3.0で保存できるものはスプライトとプログラムです。
スプライトのファイルからでも、プログラムのファイルからでも、同様の方法でコスチュームのファイルを切り分けられます。
ただ、プログラムのファイルには他のスプライトも含めた全部の情報が含まれます。
プログラムのファイルにある情報の集合はとても大きいのに対して、そのコスチュームの情報が入った1つのスプライトのファイルにある集合は小さく扱いやすいので、スプライトのファイルから操作する方をお勧めします。

そのため、説明も、ファイルにしたいコスチュームが入っているスプライトのファイルを保存するところから行います。

<スプライトをファイルに保存する方法>
A) あるコスチュームを含む、あるスプライトをファイルとして保存するために、 Scratch 3.0のエディター画面右下のスプライトリストの、そのスプライトのサムネイルの上で右クリックします。
B) 表示された[書き出し]をクリックします。

Scratch 3.0のScratch Desktop(=オフラインエディター)を使用しているとき、[書き出し]をクリックすると、[名前を付けて保存]ウィンドウが表示されるので、そこで、適当なフォルダに適当な名前を付けて保存します。
Scratch 3.0のオンラインエディターを使用しているとき、[書き出し]をクリックすると、そのファイルの保存先は、使用中のブラウザのダウンロードファイルの保存先の設定に従います。
そのブラウザがダウンロード時に保存先のフォルダを選択できる設定になっていれば、[名前を付けて保存]ウィンドウが表示されるので、そこで、適当なフォルダに適当な名前を付けて保存します。
そのブラウザがダウンロード時に保存先のフォルダを選択できる設定になっていなければ、そのブラウザのダウンロード時のデフォルトの保存先に設定されているフォルダに、自動で保存されます。
自動で書き込まれたスプライトのファイルの名は、[スプライト名]に拡張子[sprite3]が付いたものです。
例えば、スプライトリストのサムネイルで確認できるスプライト名が「スプライト1」のとき、書き出しによってスプライトの内容が保存されたファイルのファイル名は、「スプライト1.sprite3」です。
使用しているブラウザによりますが、Scratch 3.0のオンラインエディターでファイルの操作を行うと、そのブラウザのダウンロードのときと同じふるまいになるので、例えば、Google Chromeを使っている場合は、下図のように、書き出し直後、ブラウザ下方にファイル名「スプライト1.sprite3」が表示されることがあります。

3.2.Scratch 3.0から保存するファイルは圧縮ファイル

Scratch 3.0で保存すると、スプライトのファイル(拡張子sprite3)も、プログラムのファイル(拡張子sb3)も、実は、複数のファイルを集めて1つのファイルにした圧縮ファイルです。

圧縮ファイルなので、スプライトのファイルの、ファイル名の拡張子の部分を「sprite3」から「zip」に変え、そのファイルをzipファイルとしてダブルクリックして解凍すれば、スプライトを構成するすべてのコスチュームの画像ファイル、 音のファイル、 そしてスクリプトのファイルが得られます。

同様に、プログラムのファイルのファイル名の拡張子の部分を「sb3」から「zip」に変え、そのファイルをzipファイルとしてダブルクリックして解凍すれば、プログラムを構成するすべてのステージとスプライトそれぞれについて、構成するすべての画像ファイル、音のファイル、そして、スクリプトのファイルが得られます。

3.3.圧縮ファイルの中の個々のファイルについて

スプライトファイルや、プログラムファイルを解凍して得られる個々のファイルの名称は、 拡張子以外は 人間が理解できない記号の羅列です。

拡張子から判断できることは、画像ファイルであれば拡張子 svg かpng、音のファイルであれば拡張子 wav、スクリプトのファイルであれば 拡張子 json です

また 拡張子 png の画像ファイルは ビットマップモードのデータを保存したもので、拡張子 svg の画像ファイルは ベクターモードのデータを保存したものです

自分が保存したいコスチュームの画像ファイルを、この圧縮ファイルを解凍した中から見分ける方法は、以下のとおりです。

    1. 解凍して得られたファイルに画像ファイルが1つしかなかったら、
      • その1つが、保存したいコスチュームの画像ファイルです。
    2. 解凍して得られたファイルに画像ファイルが複数あるとき、
      • 自分がファイルとして保存したいコスチュームをペイントエディターで確認し、ビットマップモードのコスチュームならpngファイルを、ベクターモードのコスチュームならsvgファイルを、解凍したファイルの中から分類してコピーするか切り出しを行い、別の適当なフォルダに保存します。
      • 分類したファイルの中身を、1つ1つソフトを使って表示して、保存したいコスチュームと同じ図かどうか目で見て確認します。svgファイルなら、Microsoft Wordや無料で配布されている図を扱うソフトのInkskapeなど、pngファイルならWindowsにもともと入っているフォトなどのソフトで表示して確認できます。

最後に、保存したかったコスチュームのファイルを見つけたら、拡張子はそのままにして、他の部分をわかりやすいファイル名に変え、必要なら、保存先のフォルダも移動します。

4.おまけ1:svgファイルをMicrosoft Wordで表示する方法

svgファイルは、Microsoft Wordでは、文書に追加する画像ファイルとして扱うことができます。
もし、svgファイルがzipファイルの中にあるものなら、コピーするか切り取って、別の場所に保存してから、Wordの文書に追加します。
ちなみに、svgファイルがzipファイルの中にあるままWordの文書に追加しようとすると、うまくいきません。
svgファイルをWordの文書に追加してその図が表示されると、目で見てどんな図なのかを確認することができます。

Word 2016で、文書の中にsvgファイルの図を挿入する方法は、以下の手順です。

A) Wordの文書の中の、図を挿入したい位置にカーソルを合わせます。
B) [挿入]メニューをクリックし、[画像]をクリックします。
C) [図の挿入]が開くので、挿入したいsvgファイルのあるフォルダを選択し、そのsvgファイルをクリックしてから、[挿入]ボタンをクリックします。

5.おまけ2: Scratch 3.0 でコスチュームをファイルに保存する例

例えば、Scratch 3.0で新規作成した直後のプログラムの、ねこのスプライトをファイルに保存すると、その圧縮ファイルの中に、図のファイルは、2つのコスチュームのファイルがそれぞれ1つずつあるはずです。
ねこのスプライトをファイルに保存し、解凍して、ねこのスプライトのはじめのコスチュームのファイルを見つけ、そのファイルの名前をそれなり(「ねこ1」に拡張子が付いたファイル名にします)に変えて保存してみたいと思います。

Windows10のPCで、ブラウザはGoogle Chrome、ファイル操作はエクスプローラを使って、上記の操作をしてみます。

まず、次の手順で、ねこのスプライトのコスチュームの図のファイルのモードを確認します。
⓵Scratch 3.0で新規作成した直後のプログラムで

➀

➁画面右下のスプライトリストのねこのサムネイルをクリックして選択し、

➁

⓷画面左上の[コスチューム]タブをクリックして、コスチュームペインを表示し、

⓷

⓸ねこの2つのコスチュームそれぞれについて、サムネイルをクリックして、ペイントエディター下のボタンが[ビットマップに変換]か[ベクターに変換]かを見てモードを確認します。

④-1
④-1
④-2
④-2

今回は、どちらのコスチュームも、[ビットマップに変換]ボタンがあるので、これらのコスチュームはベクターモードで作られており、スプライトやプログラムをファイルに保存し、それを解凍したとき、これらの絵のファイルは、svgファイルで出来上がるはずということがわかりました。

次に、スプライトをファイルに保存し、その中の図のファイルから、ねこのスプライトのはじめのコスチュームの図のファイルを探し、拡張子以外の部分が「ねこ1」というファイル名に変えます。

➄画面右下のスプライトリストのねこのサムネイルを右クリックし、表示された中の[書き出し]をクリックして、スプライトをファイルに保存します。

➄

⑥保存先のフォルダは、Google Chromeの下に表示されたファイル名で、上向きの印をクリックして表示された[フォルダを開く]のフォルダの下です

⑥-1
⑥-1

([フォルダを開く]をクリックすると、エクスプローラが起動され、そのフォルダの下が表示されます)。

⑥-2
⑥-2

⑦エクスプローラで、そのファイルの拡張子「sprite3」を「zip」に変え、

⑦

⓼圧縮ファイルとしてそのファイルをダブルクリックして実行して解凍します。

⓼-1
⓼-1
⓼-2
⓼-2

⑨解凍して得られたファイルの中の、④のモードに対応した拡張子(今回はsvg)のファイル(上から2番目と3番目)を(あとでWordで表示して見るために)コピーして、

⑨

⑩適当なフォルダ(今回は[ダウンロード]フォルダ)に保存することで、圧縮ファイルから独立したファイルにしておきます。

⑩

⑪そのファイルを図として表示できるソフト、今回はWordで、図を表示して目で確認するので、Wordを開き、[挿入]メニューをクリックします。

⑪

⑫⑩の1番目のsvgファイルを図として挿入します。
[画像]をクリックし、そのファイルを選択して、[挿入]ボタンをクリックします。

⑫-1
⑫-1
⑫-2
⑫-2

⑬⑩の2番目のsvgファイルを図として挿入します。
図以外の白い部分をクリックしてから、[画像]をクリックし、そのファイルを選択して、[挿入]ボタンをクリックします。

⑬-1
⑬-1
⑬-2
⑬-2

⑭絵から、1番目のsvgファイルがはじめのコスチュームの、2番目が次のコスチュームのファイルであることがわかりました。
当初の目的どおり、1番目のsvgファイル(ねこのスプライトのはじめのコスチュームのファイル)のファイル名を、エクスプローラから「ねこ1.svg」に変更します。

⑭-1
⑭-1
⑭-2
⑭-2

6.本当のおまけ:Scratch 3.0 で背景の絵のファイルや音のファイルの保存は?

お気づきのとおり、Scratch 3.0 では、背景のファイルも、ステージやスプライトの音のファイルも、コスチュームのファイル同様の方法で、プログラムのファイルやスプライトのファイルから取り出して、1つのファイルとして保存することができます。

コメントを残す