【Scratch3.0】じぶんで透過GIFアニメーションを作って、使おう ※Windows限定記事

# はじめに

* 本記事は、Windows環境で作業をされる方向けに記述しています。

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

# ことはじめ

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

https://ja.scratch-wiki.info/wiki/GIFアニメーション

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

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

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

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

# ScreenToGifだけで出来る

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

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

https://www.screentogif.com/

## 使い方

起動すると、次の起動画面が表示されます。
![スクリーンショット 2021-03-06 174410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/9ec0be12-2e2a-4e7b-f847-b1210fbabcad.png)

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

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

[Rive](https://rive.app/)の場合、こんな感じ。 ※Riveは無料で使えるアニメーション制作Webサービスです。
![スクリーンショット 2021-03-06 175538.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/33f18283-e90d-f654-8e70-1ba26a3feae3.png)

あとは、右下の <font color="DarkRed">●</font> ボタンを押せば、録画が始まるので、次の手順で録画します。

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

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

録画を停止すると、エディター画面が表示されます。
![スクリーンショット 2021-03-06 180701.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/043bea95-d3b1-5f7a-60d5-3825da423f4d.png)

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

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

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

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

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

保存するには、エディター画面上部にある「名前を付けて保存」ボタンをクリックします。
![スクリーンショット 2021-03-06 181455.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/19bd8dc7-21be-7012-3ece-58c260529991.png)

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

#### ファイルタイプ

![スクリーンショット 2021-03-06 181736.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/3b0f52cb-ce98-e7dd-8b15-981b256a2de4.png)

* `Gif` を選択します。

#### エンコーダー

![スクリーンショット 2021-03-06 181958.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/b4c1104e-95cd-f553-d4f8-08ab4b27e818.png)

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

#### Gif オプション

![スクリーンショット 2021-03-06 182235.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/c648112d-6df9-11d1-448f-217f3287f0db.png)

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

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

![スクリーンショット 2021-03-06 183046.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/e3b2bad8-12cb-0017-8d75-e18da7285147.png)

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

#### 保存

![スクリーンショット 2021-03-06 183749.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/546e6e32-bdee-7f1c-6c03-4a4d3b353ab2.png)

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

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

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

[GIFアニメーション - 日本語 Scratch Wiki](https://ja.scratch-wiki.info/wiki/GIFアニメーション)

# さいごに

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

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

## おまけ１

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

* [ふうせんショット2 on Scratch](https://scratch.mit.edu/projects/497401181/fullscreen/)

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

## おまけ２

Rive の使い方は、[旧バージョンのRive](https://flare.rive.app/) ですが、以下の記事に簡単にまとめてありますので、興味あればご覧ください。

[【はじめてのRive】Flutterに2Dアニメーションスプラッシュスクリーンを導入する手順 - @kami_teru](https://qiita.com/kami_teru/items/740c348e8c198856f66c)