暗闇を照らせ！ライティングで暗闇と光のゲーム演出を作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
この教材は期間限定で無料公開している教材です。
- 見えないものを見ようとして
今回作るのはライティング演出です。洞窟の中でたいまつをつけたような、サーチライトで照らしたような演出で、普段は見えないところを映し出すことで、プレイヤーにワクワク感を増幅させます。
デモアプリはこちらから。闇夜に紛れてお宝を盗み出す怪盗ゲームにしてみました。サーチライトを頼りにお宝を見つけよう。ただし、見つかってはいけないぞ。
- クミタテ式プログラミングドリルとは？
クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワークのプログラムコーディングを学ぶ学習方法です。
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。
- 動画を見ながら学習する
動画で実況プログラミングしながら解説しています。このテキストを見ながら動画と一緒に学ぶのがおすすめです。
■[ここからスタート！]setupで画面を表示する
再生時に最初の1回だけ実行するsetupの枠組みを使って、画面の大きさを決める初期設定をしてあげましょう。
■drawで背景の色を変える
drawの枠組みを使って、1秒間に60回、停止するまでずっと実行されるようにしましょう。
■マップチップとなる四角形を、とりあえず、1つ表示する
背景の色は変更できましたか？
続けて四角形を1つ表示してみましょう。
■繰り返し処理を使って、横一列にマップチップを敷き詰める
四角形を1つ表示できましたか？
この四角形をマップの最小単位、マップチップとして敷き詰めていきます。
続いて、繰り返し処理forを使って横幅いっぱいに四角形を敷き詰めていきます。
■縦にもマップチップを敷き詰める
横一列にマップチップを敷き詰められましたか？
続いて、縦にもマップチップを敷き詰めて、画面すべてをマップチップで敷き詰めます。
■透明度を使って、マップチップの明るさをコントロールする
fillには4つ目のパラメーター、アルファ値と呼ばれる透明度を指定できます。このアルファ値が0に近づくほど、透明に近づいていきます。
0.5となっている箇所を0〜1の値に変えて、透明度の動きを確認してみましょう。
■マウスとの距離から透明度を決定する
マウスとマップチップとの距離を計算して、近ければ近いほど不透明に、遠ければ透明度をアップして、ライティングっぽい演出に仕上げます。
ここから先は応用課題として、クミタテ式の設計図はありません。自分でアルゴリズムを考えて、プログラムコードにしてみましょう。
応用課題1. 照らすと文字が浮かび上がってくる演出を作ろう
単純な文字列だと少しずつ照らすことができないので、1文字ずつ分割すると良いぞ！
この記事が気に入ったらサポートをしてみませんか？