Scratchを保存してファイルの中身を見てみる

せっかく作ったキャラクターなので保存します。そうすれば別のプロジェクトにも使えますしInkscape(インクスケープ)やイラストレーターで加工する事も出来ます。

INKSCAPE ダウンロードとインストール

 

 

スクラッチとイラストレーターとインクスケープはSVGファイルが扱えます

逆にイラストレーターやインクスケープで作ったファイルをスクラッチにアップロードするという方法もあります。

私は最初イラストレーターやインクスケープで作った物がスクラッチで使えると知りませんでしたが、この15時限で書くように保存のためにダウンロードしたクスラッチのファイルの中身を見て知る事が出来ました。

 


保存するとくっついて来る3つのファイルです。

    • コスチューム(スプライトの一部):作った数だけファイルが増えます
    • :プログラムしていなければ無い場合があります
    • スクリプト(プログラム):これもプログラムしていなければ無い場合があります

10時限からの流れですと「コスチューム」のファイルだけなのですが、通常はプログラムを作る(そちらがメインですし)と思うので「スクリプト」と「音」も少し作りました。

 

 

スクラッチの保存とインクスケープやイラストレーターで加工する方法

 

スクラッチで描いたイラストを書き出します。

書き出し(保存)

右下、保存したいスプライトの上で右クリックをします。

 

「書き出し」を選びます。

 

ファイルのダウンロードが始まります。

 

ここはパソコンの設定で色々だと思いますがダウンロード先に「令和うさぎ.sprite3」が出来ました。これは実は圧縮された状態で、先に説明した「コスチューム」「音」「スクリプト」など複数のファイルが入っています。なので中身を見てみます。

 

 

zipファイルに書き換えると中身が見れます

「令和うさぎ.sprite3」の「sprite3」を「zip」に書き換えます。”変更してもいいですか?”と聞かれるのでOKします。

 

するとお馴染みの圧縮ファイルのイラストになりました。これをダブルクリックで解凍します。「令和うさぎ」フォルダが出来てその中に(今回の場合)4つのファイルが入っていました。(「令和うさぎ.zip」は捨てても大丈夫です。)

 

4つのファイルを説明します。
●1番目に「音」ファイル(ニャーと鳴く音を付けたからです)
●2番目にスプライトの一部であるコスチューム(うさぎ)のファイル
3番目にスプライトの一部であるコスチューム(ネコ)のファイル
4番目にスプライトを動かしたりする命令のファイル(スクリプト)です。Atomなどのエディタで中身を見る事が出来ます。

※キャラクターのイラストのみ別プロジェクトで使いたかったりお友達に送ったりする場合は2番目や3番目を使います。

4番目のファイル、こうゆう文字の羅列を見ると「あわわわ」となる(私はかつてそうでした)方も多いと思いますが、分かる文字を中に見付けてちょっとずつ解読出来るようになると面白くなります◎ Google翻訳で調べても。

 

 


少し脱線します。

インクスケープやイラストレーターで加工も出来ます

解凍したファイル(2番目、3番目)を見てお気付きの方もいるように、スクラッチで描いた物はインクスケープやイラストレーターで扱えます。2番目のうさぎをインクスケープで開いてみます。

 

インクスケープはイラストレータと同じような機能で無料でインストールして使えるソフトです。

INKSCAPE ダウンロードとインストール

ENBARQMENTのサイトでも「Inkscape1年生」で初心者用に解説しているので挑戦してみたい方はぜひ◎

 

Inkscapeで開いて加工した「令和うさぎ」。(”パスの統合”で2つのパーツを1つに)

この他にもScratchとは比べ物にならない数の便利なツールがあるので細かいイラストを早く正確に(丸を100個綺麗に並べるとか)と言う場合はInkscapeは便利です(その分設定や覚えるにはそれなりに時間がかかりますが)。

 

 

Scratchのグラデーションよりも複雑なグラデーションをInkscapeで作ったせいでしょうか、Scratchに戻した時左は正しく表示されませんでした。(顔も白黒のグラデーションにしていたのですがしばらく経ったらベタ塗りになっていました)今の所原因不明です。

 

Scratchのネコ(スプライト)はコードで描かれている

コードって、プログラミングで書くあのコード?

そうですあのソースコードです。確認してみます。
Scratchを開いて>「コスチューム」タブ>1のネコのコスチュームの上で右クリック(Macの場合)>書き出し を選んで「コスチューム1.svg」ファイルをダウンロードします。

 

ダウンロードしたファイルをwebブラウザにぐりっと持って行くと、

 

ネコが表示されますのでそのサイト上で右クリック(Macの場合)>「ページのソースを表示」で、

 

ネコのソースコードが表示されます。これだと分かりづらいですが、、

 

VSCodeなどのソースコードエディタ(編集ソフト)に同じファイル(コスチューム1.svg)を持って行くと同じソースコードが表示されます。同じなのですがこちらは(プラグインなどの設定で)実際の色が表示されたりするので分かりやすいです。

Scratchのネコは右の長さのコードで描かれていました。

色数が多かったり形状が複雑だとコードは長くなります。

Inkscape はコードで描かれている?

↑上記のサイトで紹介したhand.svg(Inkscapeで描いたもの)は

この位のコードでした。

 

 


以上、スクラッチをデスクトップに保存し中身を見る、でした。

次回16時限では今回のようにデスクトップに保存したファイルをスクラッチの別のプロジェクトで使えるようにするアップロードをやります。

 

Scratchにファイルをアップロードする方法

ENBARQMENT、
E-designのスクラッチページ