Scratchを保存してファイルの中身を見てみる
せっかく作ったキャラクターなので保存します。そうすれば別のプロジェクトにも使えますしInkscape(インクスケープ)やイラストレーターで加工する事も出来ます。
スクラッチとイラストレーターとインクスケープはSVGファイルが扱えます
逆にイラストレーターやインクスケープで作ったファイルをスクラッチにアップロードするという方法もあります。
私は最初イラストレーターやインクスケープで作った物がスクラッチで使えると知りませんでしたが、この15時限で書くように保存のためにダウンロードしたクスラッチのファイルの中身を見て知る事が出来ました。
保存するとくっついて来る3つのファイルです。
-
- コスチューム(スプライトの一部):作った数だけファイルが増えます
- 音:プログラムしていなければ無い場合があります
- スクリプト(プログラム):これもプログラムしていなければ無い場合があります
10時限からの流れですと「コスチューム」のファイルだけなのですが、通常はプログラムを作る(そちらがメインですし)と思うので「スクリプト」と「音」も少し作りました。
スクラッチの保存とインクスケープやイラストレーターで加工する方法
書き出し(保存)
右下、保存したいスプライトの上で右クリックをします。
「書き出し」を選びます。
ファイルのダウンロードが始まります。
ここはパソコンの設定で色々だと思いますがダウンロード先に「令和うさぎ.sprite3」が出来ました。これは実は圧縮された状態で、先に説明した「コスチューム」「音」「スクリプト」など複数のファイルが入っています。なので中身を見てみます。
zipファイルに書き換えると中身が見れます
「令和うさぎ.sprite3」の「sprite3」を「zip」に書き換えます。”変更してもいいですか?”と聞かれるのでOKします。
するとお馴染みの圧縮ファイルのイラストになりました。これをダブルクリックで解凍します。「令和うさぎ」フォルダが出来てその中に(今回の場合)4つのファイルが入っていました。(「令和うさぎ.zip」は捨てても大丈夫です。)
4つのファイルを説明します。
●1番目に「音」ファイル(ニャーと鳴く音を付けたからです)
●2番目にスプライトの一部であるコスチューム(うさぎ)のファイル
●3番目にスプライトの一部であるコスチューム(ネコ)のファイル
●4番目にスプライトを動かしたりする命令のファイル(スクリプト)です。Atomなどのエディタで中身を見る事が出来ます。
※キャラクターのイラストのみ別プロジェクトで使いたかったりお友達に送ったりする場合は2番目や3番目を使います。
2番目うさぎと3番目ネコのファイルはAに対して1と2のコスチュームを作ったので2つダウンロードされました。(2のネコはデフォルトである物です)
Scratchを開いて「新しいプロジェクト」を作るとAのスプライトに対して1と2が用意されています。3、4と(ポーズを変えたりして)増やしたとしたら、ダウンロードされるコスチュームのファイル数も3、4と増えると言う訳です◎
4番目のファイル、こうゆう文字の羅列を見ると「あわわわ」となる(私はかつてそうでした)方も多いと思いますが、分かる文字を中に見付けてちょっとずつ解読出来るようになると面白くなります◎ Google翻訳で調べても。
少し脱線します。
インクスケープやイラストレーターで加工も出来ます
解凍したファイル(2番目、3番目)を見てお気付きの方もいるように、スクラッチで描いた物はインクスケープやイラストレーターで扱えます。2番目のうさぎをインクスケープで開いてみます。
インクスケープはイラストレータと同じような機能で無料でインストールして使えるソフトです。
ENBARQMENTのサイトでも「Inkscape1年生」で初心者用に解説しているので挑戦してみたい方はぜひ◎
Inkscapeで開いて加工した「令和うさぎ」。(”パスの統合”で2つのパーツを1つに)
この他にもScratchとは比べ物にならない数の便利なツールがあるので細かいイラストを早く正確に(丸を100個綺麗に並べるとか)と言う場合はInkscapeは便利です(その分設定や覚えるにはそれなりに時間がかかりますが)。
グラデーションは対応しきれない?
Scratchのグラデーションよりも複雑なグラデーションをInkscapeで作ったせいでしょうか、Scratchに戻した時左は正しく表示されませんでした。(顔も白黒のグラデーションにしていたのですがしばらく経ったらベタ塗りになっていました)今の所原因不明です。
2021年12月4日 追記
インクスケープで作ったグラデーションがスクラッチでは再現されなかった件ですが、
インクスケープで描いたオーベルチュールオオツノカナブンを保存して
スクラッチにアップロードした所ちゃんと再現され驚きました。いつから出来るようになったのでしょう、それとも前から出来てたまたまダメだったのか分かりませんが訂正して追記しておきます。
このグラデーションはインクスケープで7ヶ所ポイントを設定して色分け、明暗分けしています。左から光が当たっていると設定して、2が1番明るく5を1番暗くしています(6は要らなかったかもです)
1番左が1番明るい(1番右が1番暗い)訳じゃないんだね
難しい話は省きますが1は2より少し暗く、7は(6は無いとして)5より少し明るくすると立体的に見えるわよ◎
スクラッチで作れるのは2段階です。
Scratchのネコ(スプライト)はコードで描かれている
コードって、プログラミングで書くあのコード?
そうですあのソースコードです。確認してみます。
Scratchを開いて>「コスチューム」タブ>1のネコのコスチュームの上で右クリック(Macの場合)>書き出し を選んで「コスチューム1.svg」ファイルをダウンロードします。
ダウンロードしたファイルをwebブラウザにぐりっと持って行くと、
ネコが表示されますのでそのサイト上で右クリック(Macの場合)>「ページのソースを表示」で、
ネコのソースコードが表示されます。これだと分かりづらいですが、、
VSCodeなどのソースコードエディタ(編集ソフト)に同じファイル(コスチューム1.svg)を持って行くと同じソースコードが表示されます。同じなのですがこちらは(プラグインなどの設定で)実際の色が表示されたりするので分かりやすいです。
Scratchのネコは右の長さのコードで描かれていました。
色数が多かったり形状が複雑だとコードは長くなります。
↑上記のサイトで紹介したhand.svg(Inkscapeで描いたもの)は
この位のコードでした。
以上、スクラッチをデスクトップに保存し中身を見る、でした。
次回16時限では今回のようにデスクトップに保存したファイルをスクラッチの別のプロジェクトで使えるようにするアップロードをやります。
ENBARQMENT、
E-designのスクラッチページ