めでたさ120%！ゲーム演出で使える紙吹雪エフェクトを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

 - 嬉しい演出でプレイヤーを祝おう！

今回作るのは紙吹雪エフェクトです。紙吹雪はめでたさを伝えるのに非常に適した演出です。ゲームクリア、ハイスコア更新、レベルアップなどの「良いこと」が起きたことをプレイヤーに十分に伝えることができます。

サンプルプログラムはこちら。

Confetti - OpenProcessing

 - クミタテ式プログラミングドリルとは？

クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワークのプログラムコーディングを学ぶ学習方法です。
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。

■[ここからスタート！]setupで画面を表示する

再生時に最初の1回だけ実行するsetupの枠組みを使って、画面の大きさを決める初期設定をしてあげましょう。

■drawで背景の色を変える

drawの枠組みを使って、1秒間に60回、停止するまでずっと実行されるようにしましょう。

■紙吹雪となる細長い四角形を表示する

背景の色は変更できましたか？
続けて四角形を1つ表示してみましょう。

■変数を使って紙を表示する

四角形を表示できましたか？
変数xとyを作りましょう。xは横の位置のこと、yは縦の位置のことです。

■四角形が回転しているように見せよう

横幅を変化させて回転しているように見せます。これによって紙の薄さを伝えることができます。
変数timeを用意して、自動的に加算させ、cosと併用して四角形の横幅を変動させます。これは、1から-1の範囲で値が波のように往復してくれるcosの性質を応用しています。

■色を変えよう

紙の回転はできましたか？
次は紙の色をカラフルなオレンジ色にしてみましょう。
RGB、それぞれを変数に持たせてfillに利用します。

■紙を傾かせよう

オレンジ色の紙ができましたか？
次は紙吹雪が風に流されているように見えるように、紙を少し傾けます。ここでは変数angleを用意して45度傾けるようにしてみます。
図形を傾ける時はtranslateを使う必要があります。

■紙が風に流されるようにしよう

紙の傾きはできましたか？
次は移動です。紙を動かして風に流されているように、左下へと移動させます。ここでは移動量を管理する変数dxとdyを用意します。

■マウスクリックしたところに紙吹雪を登場させよう

紙が風に流されるようになりましたか？
紙吹雪の色や傾き、移動量をランダムにして作り出す「createConfetti」というオリジナル命令を作ります。
createConfettiには、どこに出現させるかの引数パラメータを指定できるようにします。
マウスがクリックされた時、作ったcreateConfetti命令にマウス座標を伝えて紙吹雪を生成します。

ここから先は応用課題として、クミタテ式の設計図はありません。自分でアルゴリズムを考えて、プログラムコードにしてみましょう。

■応用課題1. translateの後始末

図形を回転させるために必要なtranslateですが、translateをしてしまうと座標軸が大きく変わってしまい、後の処理に影響を与えてしまいます。
そのため、使う前に下準備、使った後に後始末、をしてあげると良いです。

使うのは、pushとpop。（Javaであれば、pushMatrixとpopMatrixという命令になります）。
よくわからなければ、とりあえずtranslateする前と後で必要な処理があるんだなぁと思っておけばOKです。

// 使う前の下準備。デフォルトの座標軸を保存しておきます。
push();

translate(x, y);
rect(0, 0, 50, 10);

//使った後の後始末。保存しておいたデフォルトの座標軸に戻します。
pop();

■応用課題2. 配列やクラスを使って複数の紙吹雪を撒き散らそう

配列を使ってもよし、クラスを使ってもよし。
クラスの使い方がわからない人はこの、オブジェクト指向超高速入門をご覧になるときっとわかるはずです。
https://youtu.be/UrGwYUM1CJA

■応用課題3. マウスが押されている間、紙吹雪を撒き散らそう

マウスが押されたら1回だけではなく、押されている間中、紙吹雪を撒き散らそう。

- 動画で復習する

YouTube動画でクミタテ式を解説、実況プログラミングをしています。良かったらチャンネル登録もお願いします！