はじめに

本記事は、Windows環境で作業をされる方向けに記述しています。
本記事では、Scratch3.0に取り込むことを目的としたGifアニメーションの作り方を説明します。
やり方はいろいろあるはずなので、この内容はその中の一つとして理解していただければと思います。

ことはじめ

Scratch3.0は、次のWikiにも書かれているとおり、Gifアニメーションの取り込みに対応しています。

しかし、透過GIFアニメーションを作る敷居がそもそも高い・・・ということはありませんか？

昨今、無料で利用できるWebサービスも登場してきており、アニメーションを作ること自体の敷居は下がったかと思います。

だけど、透過GIFアニメーション形式で出力できなかったり。Scratchに取り込むからには、四角形のアニメーションだと勝手が悪いですよね。やはり背景部分は透過したい。

そこで。
何かしらの手段で作ったアニメーションを、Scratch3.0に読み込める透過GIFアニメーションに変換する手順をやってみたので共有したいと思います。

ScreenToGifだけで出来る

ScreenToGifは、画面の一部を録画したものを、透過GIFアニメーション形式で保存することができるフリーウェアです。

公式サイトから入手することができます。(Windows版のみ)

使い方

起動すると、次の起動画面が表示されます。

録画するためには、「レコーダー」をクリック。

すると中が抜けたウィンドウが表示されるので、この抜けた部分に、録画したいアニメーションが入るようにウィンドウを重ねます。

Riveの場合、こんな感じ。 ※Riveは無料で使えるアニメーション制作Webサービスです。

あとは、右下の ● ボタンを押せば、録画が始まるので、次の手順で録画します。

ScreenToGif録画ウィンドウの下部でフレームレート fps を調整する。18fps～24fpsくらいがおすすめ。（大きいほどなめらかになります）
ScreenToGif録画ウィンドウの右下の録画 ● ボタンを押す。
アニメーションを再生する。
ScreenToGif録画ウィンドウの右下の停止 ■ ボタンを押す。

録画後、エディター画面で不要なフレームを落とす

録画を停止すると、エディター画面が表示されます。

画面下部に並んでいるのが、一つ一つのフレームです。

アニメーションを開始してから、録画ボタンを押すまでに少し時間がかかったりしますよね。
またアニメーションが終了してから、停止ボタンを押すまでにも少し時間がかかったりします。

そこでこの編集画面で、余計に録画してしまった部分（フレーム）を削除する作業を行います。
画面下部のフレームを範囲選択して、Deleteキー押せば簡単に削除することができます。

透過GIFアニメーション形式で保存する

あとは、透過GIFアニメーション形式で保存するだけです。

保存するには、エディター画面上部にある「名前を付けて保存」ボタンをクリックします。

するとエディター画面右側に、「名前を付けて保存」パネルが表示されましたね。ここで設定を調整していきます。

ファイルタイプ

Gif を選択します。

エンコーダー

ScreenToGif の Neural network を選択します。
好みでエンコーダーを選んでも構いません。アニメーションがきれいに出る組み合わせを見つけてみましょう。

Gif オプション

色数 は256を選択します。
Use a global color table は選択しなくても構いません。
ループ型 Gif は Scratchで利用するには関係のない設定なので、デフォルトのままで大丈夫です。
Enable transparency は選択してください。 ここが透過GIFアニメーションを作るポイント。
Select which color to display as transparent も選択してください。
色 で、透過したい背景色を選択してください。
未変更ピクセルの検出 は特にアニメーションが変にならない限り、選択しておくと良いです。

Gif オプション - 透過したい色の選択

色の設定で、カラーの部分をクリックすると、色セレクター画面が表示されます。
「調べたい色へこのマークをドラッグして下さい」の上にあるマークを、エディター画面上の画像の上にドラッグ＆ドロップすれば、色を選択できます。

保存

保存オプションと保存先を任意で設定し、「保存」ボタンを押すと、透過GIFアニメーションを保存することができます。

保存した透過GIFアニメーションをScratch3.0に読み込ませる

以下の wiki の記事の通りに、やってみましょう。

GIFアニメーション - 日本語 Scratch Wiki

さいごに

探してみると意外と見つからない、透過GIFアニメーションの作り方。
この記事がどなたかのお役に立つことができれば、幸いです。

あと、もし、もっと良いやり方があるよ！という方、ぜひぜひコメントにてご教授いただけると助かります！

おまけ１

この記事の画像に映っていたアニメーションは、ここで使っています。

ふうせんショット2 on Scratch

ふうせんを割れた時、そのアニメーションが動きます😁

おまけ２

Rive の使い方は、旧バージョンのRive ですが、以下の記事に簡単にまとめてありますので、興味あればご覧ください。

【はじめてのRive】Flutterに2Dアニメーションスプラッシュスクリーンを導入する手順 - @kami_teru