あけましておめでとうございます。
本年もアウラをどうぞよろしくお願い申し上げます。
皆様、年末年始はどのようにお過ごしでしたでしょうか。
私は、せっかく頂けた長期休みなんだから何か実のあることをしたい！と考えた挙句、ゲーム作ってました（何故）
ひょんなことから、デジタルアートを作れるプログラミング言語「Processing」を知り、更にProcessingをJavaScriptに移植した「p5.js」を知りました。
楽しそうだし勉強にもなるし一石二鳥！とウキウキ触ってみると、これが結構楽しいのです。
お前、最近画像やらデジタルアートネタばっかりじゃないかと思ったそこのアナタ、私もそう思います。
でも、仕方がないんです。遊びがい学びがいのあるものに出会ってしまったら、堪能したくなるのが人の性（開き直り）
今回は何も凝ったことはしないので、HTMLは必要最低限だけでOK。bodyの中も空っぽです。
次に、p5.jsを読み込みます。
公式サイトにダウンロード版とCDN版がありますが、今回はCDNで。
後は、作っていくjsファイルを用意して読み込めば準備は完了です。
|
1 2 |
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script> <script src="script.js"></script> |
次に、jsファイルの中身を作っていきます。
p5.jsで最も基本になる関数が2つあります。
「setup」という、最初に1回だけ呼ばれる関数。表示エリアの作成や全体に共通する設定を書きます。
それから「draw」という、1フレーム（1/60秒）ごとに実行される関数です。描画される内容を書いていきます。
これらを記述します。
|
1 2 3 4 5 6 7 8 9 |
//最初に1回だけ実行 function setup(){ } //1フレームごとに実行 function draw(){ } |
この中に、処理を書いていきます。
まずは図形でも、と言いたいところですが、先にそれらの配置場所が必要です。
setup内にて、キャンバスを作成します。
|
1 2 3 4 |
function setup(){ //キャンバスを作成 createCanvas(600,425); } |
createCanvas(横幅,高さ)で、好きなサイズのキャンバスを作成できます。
この時点でキャンバスは作られていますが、色がついていないので分からないですね。
背景色を設定してみます。
|
1 2 3 4 5 6 |
function setup(){ //キャンバスを作成 createCanvas(600,425); //背景色 background(0); } |
仮で黒にしました。
白黒のような、RGBすべてが同じ色については、0や255だけでOK。
では、図形を書きます。今回は丸。
fill関数で色を設定します。緑にしてみました。
|
1 2 3 4 5 6 7 8 9 10 |
function setup(){ //キャンバスを作成 createCanvas(600,425); //背景色 background(0); //オブジェクトの色 fill(0,255,0); //キャンバスの中心に直径100pxの丸を描画 ellipse(width/2,height/2,100); } |
ellipse(左からの距離,上からの距離,大きさ)を指定することで、キャンバス内に丸が表示されました。
丸は円の中心部分を基準に配置されるので、width/2（横幅の半分）とheight/2（縦幅の半分）、つまりキャンバスの中央に、100pxの丸が描かれています。
先ほどはsetup内に記述したので、ページを読み込んだ際に表示されたものがそのまま表示されっぱなしです。
丸をdrawの中に書いてみると
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function setup(){ //キャンバスを作成 createCanvas(600,425); //背景色 background(0); } function draw(){ //オブジェクトの色 fill(0,255,0); //キャンバスの中心に直径100pxの丸を描画 ellipse(width/2,height/2,100); } |
同じですね。
丸の表示位置にrandom関数（乱数を作成してくれる関数）を使ってみたいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function setup(){ //キャンバスを作成 createCanvas(600,425); //背景色 background(0); } function draw(){ //オブジェクトの色 fill(0,255,0); //キャンバスの中心に直径100pxの丸を描画 ellipse(random(width),random(height),100); } |
凄まじい勢いで丸が画面のいたるところに出現しています（凝視してると目が疲れるので、あんまりじっくり見ないでくださいね～）
draw内に記述すると、「キャンバス内のランダムな位置に緑の丸を描く」という命令が1/60秒ごとに実行されるため、このような動きになります。最初に記述したとき、全く動いていないように見えていたのも、実は同じ場所にずっと描かれ続けていたのです。面白いでしょ？
これを応用すると、こんなこともできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function setup(){ //キャンバスを作成 createCanvas(600,425); //背景色 background(255); //図形の線無し noStroke(); } function draw(){ //オブジェクトの色をランダム（透明度70） fill(random(255),random(255),random(255),70); //キャンバスの中心に直径100pxの丸を描画 ellipse(random(width),random(height),random(100)); } |
背景を白に変えて、出現位置、大きさ（100未満）、色をランダムにしています。ついでに、noStroke関数で線を消しています。
更に、こんなことも。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function setup(){ //キャンバスを作成 createCanvas(600,425); //図形の線無し noStroke(); } function draw(){ //背景色 background(0); //オブジェクトの色をランダム（透明度70） fill(random(255),random(255),random(255),70); //キャンバスの中心に直径100pxの丸を描画 ellipse(random(width),random(height),random(100)); } |
自分で作っといて何ですが、落ち着かなさ過ぎてイラっとしますね。
上の白背景バージョンとの違いは、背景色もdraw内に記述している点。背景を黒にする命令が1フレームごとに実行されているので、丸が描かれては背景色で塗りつぶし…を繰り返しているため、丸が出たり消えたりしています。
p5.jsには便利なライブラリがたくさん用意されています。その中のひとつが「p5.play.js」です。
p5.playライブラリは、ゲーム等の作成に便利な機能を提供してくれます。
組み込み方は、公式サイトからダウンロードして、HTMLファイルに記述すればOK。
解凍したフォルダの「lib」フォルダ内に「p5.play.js」があるので、適当な場所に置いてやります。
|
1 2 3 |
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script> <script src="p5.play.js"></script> <script src="script.js"></script> |
p5.playライブラリには、スプライトというゲーム等のオブジェクト（キャラクターやアイテム等）を作ることができる機能があります。
スプライトを使うと、アニメーションの表示、オブジェクト同士の衝突等を実現できるのです。
オブジェクト同士の衝突 → ぶつかったものを押し出したり消したりできることが分かり、これはもしやアレが自作できるのでは？と思いました。
衝突して消えるとくれば………そう、懐かしのブロック崩し！（他のゲームを連想した方スミマセン）
思い立っていろいろ調べてみると、参考サイトが結構あります。
なけなしの知識をひねり回し、調べまくって完成したのがこちら。
なんとなんと、我ながら生意気にもそれっぽく出来ているではありませんか。
クリックしてみると…
ボールが跳ねてるブロックが消えてる！
自分で作ったので、ボールの速度も跳ね返りの角度もバーの操作感も思いのまま！
俺様の、俺様による、俺様のためのブロック崩しの誕生です！
そのわりにすぐゲームオーバーになるのは、プレイヤースキルが原因です(笑)
恥ずかしいですが、作ってみたコードを晒しておきます。いつか誰かのお役に立てば幸い。
結構長いので、CodePenを初利用。
まだまだ無駄だらけとは思いますが、とりあえず今の自分にできる範囲の結果です。
でも、これだけの記述で必要最低限の機能を備えたゲームが作れるってすごくないですか？
もっと精進すれば、ステージを複数用意したり、ボールの速度をステージごとに変えたりも出来ると思うので、チマチマ改良していけたらいいなと思います。
いつかバージョンアップした高機能（？）なブロック崩しをご覧いただける日が来るかも…ご期待ください！
