Scratch

スクラッチプログラミング - 花火(はなび)のアニメーション

夜空(よぞら)にパッとひらくうちあげ花火(はなび)を Scratch でつくります。できるだけ簡単(かんたん)なスクリプトになるように、シンプルな点(てん)でつくる花火(はなび)のアニメーションです。

Pyxofy

14 Sep 2025 • 8 min read

花火(はなび)をうちあげよう

この記事(きじ)では、 Scratch (スクラッチ)のペンをつかった花火(はなび)のアニメーションを紹介(しょうかい)します。

今回(こんかい)つくるのは、単純(たんじゅん)な点(てん)で表現(ひょうげん)する花火(はなび)です。引数(ひきすう)のあるブロック定義(ていぎ)や、sin サイン・cos コサインなど、上級者(じょうきゅうしゃ)むけのブロックをつかいますが、ていねいに説明(せつめい)していきますので、ぜひ一緒(いっしょ)につくってみましょう。

サンプルプロジェクト

下(した)にあるのは、花火(はなび)のサンプルアニメーションです。記事(きじ)をよみすすめる前(まえ)に、花火(はなび)がうちあがる様子(ようす)をみておいてください。

花火(はなび)をえがく準備(じゅんび)

今回(こんかい)は花火(はなび)を「ペン」でえがくので、空(から)のスプライトを用意(ようい)してください。拡張機能(かくちょうきのう)のペンを追加(ついか)してから、ブロックをつなげていきましょう。

ペンをつかうときは、ペンをあげる・ぜんぶけすをつなげて、まっさらな状態(じょうたい)からはじまるようにします。

うちあげる

最初(さいしょ)にえがくのは、花火(はなび)がうちあがるときの線(せん)です。えがきはじめる前(まえ)に、ペンの設定(せってい)をしましょう。

ほそい線(せん)にしたいので、ふとさを 1 にします。
色(いろ)は白(しろ)です。
最初(さいしょ)は透明(とうめい)です。この後(あと)、うちあがるにつれてだんだんはっきりみえるようにしていきます。

次(つぎ)に、うちあげるうごきをブロック定義(ていぎ)でまとめていきます。ブロックをつくるときは、下(した)のように「引数(ひきすう)」と「ラベル」を追加(ついか)してください。

ブロック名(めい)：うちあげる：x
引数(ひきすう)：横(よこ)の位置(いち)
ラベル：、y
引数(ひきすう)：たかさ

ラベルの文字(もじ)は、ブロックの意味(いみ)をわかりやすくするためのものなので、追加(ついか)しなくても問題(もんだい)はありません。

では、ブロックを定義(ていぎ)していきましょう。

まっすぐ上(うえ)へ線(せん)をのばしたいので、むきを上(うえ)にします。
x 座標(ざひょう)は 横(よこ)の位置(いち)、y 座標(ざひょう)は一番下(いちばんした)です。
ペンをおろして、かけるようにします。

x 座標(ざひょう)の 横(よこ)の位置(いち) は、定義(ていぎ)ブロックの引数(ひきすう)の部分(ぶぶん)をドラッグ&ドロップしてくみあわせてください。この引数(ひきすう)にはいる具体的(ぐたいてき)な値(あたい)は、後(あと)で指定(してい)します。

つづけて、線(ぜん)を上(うえ)へのばしましょう。

うちあげるたかさは たかさ できめます。
上(うえ)へうごかしながら、だんだん線(せん)がはっきりみえるようにします。
うちあげおわったら、ペンをあげます。

以上(いじょう)で、うちあげる を定義(ていぎ)できました。

うちあげる には引数(ひきすう)をつかったので、このブロックをつかうときには引数(ひきすう)にはいる値(あたい)を指定(してい)します。

横(よこ)の位置(いち)をランダムにしたいので、引数(ひきすう) 横(よこ)の位置(いち) に乱数(らんすう)を指定(してい)します。
うちあげるたかさもランダムにしたいので、引数(ひきすう) たかさ にも乱数(らんすう)を指定(してい)します。

ブロックをつくるときにラベルを追加(ついか)しておいたので、「x 座標(ざひょう)と y 座標(ざひょう)を乱数(らんすう)にする」ということがわかりやすいですね。もしラベルがなかったら下(した)のようになるので、パッとみただけでは、なにが乱数(らんすう)になるのかよくわかりません。

うごきをたしかめよう

では、緑(みどり)の旗(はた)をおしてここまでのうごきを確認(かくにん)してみましょう。ステージの下(した)から、線(せん)が上(うえ)へのびるようになりました。

うちあげられるようになったら、今度(こんど)は花火(はなび)をえがいていきます。

花火(はなび)のペン

花火(はなび)をえがくための、ペンを設定(せってい)しましょう。

ふとさと色(いろ)を乱数(らんすう)にして、花火(はなび)のサイズや色(いろ)がランダムになるようにします。
さきほど、うちあげるときの色(いろ)は白(しろ)にしました。白(しろ)は「あざやかさ」が 0 の色(いろ)のため、このままつかうと色(いろ)がでません。「あざやかさ」を 100 にして色(いろ)がでるようにします。
うちあげるときに変化(へんか)させた透明度(とうめいど)は、花火(はなび)をえがくときは 0 にして、ハッキリえがかれるようにします。

花火(はなび)をつくる

今回(こんかい)つくる花火(はなび)は、記事(きじ)の最初(さいしょ)に紹介(しょうかい)したサンプルのように、点(てん)で円(えん)をえがきます。うちあげた線(せん)の終点(しゅうてん)を中心(ちゅうしん)にして、点(てん)を円形(えんけい)に配置(はいち)するために、sin サイン・cos コサインのブロックをつかいます。

sin サイン・cos コサインについては以下(いか)の記事(きじ)で解説(かいせつ)しているので参考(さんこう)にしてください。

花火(はなび)をつくるためのスクリプトを、ブロック定義(ていぎ)でまとめていきましょう。

「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックをいれてブロックをつくります。引数(ひきすう)として、次(つぎ)の４つを追加(ついか)してください。

中心(ちゅうしん) X、中心(ちゅうしん) Y：花火(はなび)の中心(ちゅうしん)の位置(いち)を指定(してい)する引数(ひきすう)
半径(はんけい) x、半径(はんけい) y：花火(はなび)のおおきさを指定(してい)する引数(ひきすう)

これらの引数(ひきすう)を sin サイン・cos コサインのブロックにくみあわせて、花火(はなび)の点(てん)をえがく位置(いち)を指定(してい)します。

花火(はなび)の点(てん)は、10こつくります。
x 座標(ざひょう)と y 座標(ざひょう)を、sin サイン・cos コサインできめます。
点(てん)をえがきます。
角度(かくど)を変化(へんか)させて、点(てん)の位置(いち)が一周(いっしゅう)するようにします。

ペンをおろす と ペンをあげる を連続(れんぞく)でつかうと、点(てん)をえがけます。点(てん)はペンのふとさのサイズになるので、ペンがふとければふといほど、おおきなまるい点(てん)になります。

また、今回(こんかい)は花火(はなび)の点(てん)を10こにしたので、角度(かくど)を 36 ずつかえながら 10 回(かい)くりかえしました。もっと花火(はなび)の点(てん)をふやしたい場合(ばあい)は、角度(かくど)を 18 ずつかえながら 20 回(かい)くりかえす、などにしてみてくださいね。

以上(いじょう)で、花火(はなび)をつくる を定義(ていぎ)できました。

花火(はなび)がひらく

点(てん)をえがけるようになっただけでは花火(はなび)にならないので、花火(はなび)がひらくように、この点(てん)をうごかします。

「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックはいれずに、開花(かいか) というブロックをつくってください。また、以下(いか)４つの変数(へんすう)も用意(ようい)します。

中心(ちゅうしん) X、中心(ちゅうしん) Y：花火(はなび)の中心(ちゅうしん)の位置(いち)を指定(してい)する変数(へんすう)
半径(はんけい) x、半径(はんけい) y：花火(はなび)のおおきさを指定(してい)する変数(へんすう)

花火(はなび)をひらく前(まえ)の、中心(ちゅうしん)の位置(いち)とおおきさを指定(してい)しましょう。

花火(はなび)の中心(ちゅうしん)は、うちあげおわったときの位置(いち)になるようにします。
最初(さいしょ)のおおきさは、10 にします。これは、中心(ちゅうしん)からの距離(きょり)です。

ここまでで、花火(はなび)を開花(かいか)させる準備(じゅんび)ができました。

ペンでつくる花火(はなび)を開花(かいか)させるためには、「けす」と「花火(はなび)をつくる」をくりかえします。くりかえす回数(かいすう)は、花火(はなび)がひらくおおきさになります。

花火(はなび)をつくる の引数(ひきすう)の部分(ぶぶん)に値(あたい)を指定(してい)しましょう。つかうのは、さきほどつくった変数(へんすう)です。

今回(こんかい)は、定義(ていぎ)ブロックの引数(ひきすう)とそれに対応(たいおう)する変数(へんすう)を、おなじ名前(なまえ)にしました。まぎらわしくかんじる場合(ばあい)は、引数(ひきすう)と変数(へんすう)がことなる名前(なまえ)でも問題(もんだい)はありません。

さて、このままでは、おなじところに点(てん)が50回(かい)えがかれるだけです。えがく位置(いち)を変化(へんか)させて、花火(はなび)がひらいていくようにしましょう。

点(てん)をうごかすためには、半径(はんけい)の値(あたい)をすこしずつおおきくします。
同時(どうじ)に透明度(とうめいど)も変化(へんか)させ、花火(はなび)がひらくにつれて点(てん)がきえるようにします。

以上(いじょう)で、花火(はなび)がひらくうごきができました。 ずっと の中(なか)につなげておきましょう。

花火(はなび)の音(おと)

最後(さいご)に、花火(はなび)の音(おと)です。Scratch には花火(はなび)の音(おと)がありません。「音(おと)をえらぶ」の中(なか)から適当(てきとう)な音(おと)をえらんで、花火(はなび)の爆発音(ばくはつおん)をつくってみましょう。

今回(こんかい)は、「Crunch」という音(おと)をえらんで、花火(はなび)の音(おと)になるように編集(へんしゅう)します。

「おそく」を４回(かい)ほどクリックして、音(おと)をひくくします。
音(おと)の波(なみ)の最初(さいしょ)のところから、へこんだところまでをドラッグで選択(せんたく)して、削除(さくじょ)します。
音(おと)をあまりおおきくしたくないので、「ちいさく」を２回(かい)ほどクリックします。

これで、花火(はなび)の爆発音(ばくはつおん)ができました。この音(おと)は、花火(はなび)がひらくときにならしたいので、定義(ていぎ)開花(かいか) の下(した)にブロックを追加(ついか)してください。

スクリプト完成(かんせい)

花火(はなび)のアニメーションが完成(かんせい)です。

Scratch の Pyxofy ページへいって、実際(じっさい)に花火(はなび)のアニメーションをためしてみてください。Scratch 花火のアニメーション by Pyxofy

「きょうからはじめるスクラッチプログラミング入門」by Pyxofy

Pyxofy から Scratch の基本をまとめた電子書籍を出版しました。
Apple Books・Kindle でご購入ください。

特設ページはこちら

まとめ

今回(こんかい)は、Scratch のペンをつかって花火(はなび)のアニメーションをつくりました。

花火(はなび)は、単純(たんじゅん)な点(てん)で表現(ひょうげん)し、まるい形(かたち)をつくるために、sin サイン・cos コサインのブロックをつかいました。引数(ひきすう)をもつブロック定義(ていぎ)や、sin サイン・cos コサインなどは、一見(いっけん)むずかしくかんじるかもしれませんが、今回(こんかい)のスクリプトは比較的(ひかくてき)シンプルなので、つかいかたの練習(れんしゅう)になったのではないでしょうか。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです！

LinkedIn でシェア

X (Twitter) でシェア

SNS で Pyxofy とつながりましょう！ LinkedIn・ Threads・Bluesky・ Mastodon・ X (Twitter) @pyxofy・ Facebook