p5.playをやる記事#03_p5.playの基本

8403 ワード
p5.js JavaScript p5.play 初学者向け JavaScript テキストリンク

前回の記事 | 次回の記事

p5.playの使い方を解説しております。
第1回の記事はこちらにありますのでご参照ください。

p5.playの基本

p5.playを利用するとどんな事が出来るのでしょうか？
その答えは、"公式サイト"にあります。

p5.play

公式サイトの上部メニューにある"Examples"をクリックする事で、
サンプルプログラムを確認する事ができます。
(眺めているだけでワクワクしますよ!!)

それともう一つ、"Reference"にはp5.playで使われている関数やパラメータ等の詳細を確認する事ができます。("辞書"の様に使います)
p5.playに慣れると、こちらを参考にしながら開発を進めていく事になります。(勿論英語です!!)

基本テンプレート

p5.playを始めるにあたって、3つの関数を覚えておく必要があります。

function preload(){
   // 1, 画像や音声の読み込み
}

function setup(){
   // 2, キャンバスの用意
}

function draw(){
   // 3, キャンバスの表示と更新
}

この3つの関数は、1,2,3の順番で実行されます。
それぞれの関数には役割があるので覚えておきましょう。

  1. preload関数(画像や音声の読み込み)
  2. setup関数(キャンバスの用意)
  3. draw関数(キャンバスの表示と更新)

手始めにsetup関数とdraw関数に必要な処理を実装してみます。

function preload(){

}

function setup(){
   createCanvas(windowWidth, windowHeight);// 1, キャンバスを用意します
   frameRate(32);// 2, フレームレートを指定します(1秒間に32回更新をします)
   noSmooth();// 3, ドット絵がパリッと表示されます(個人的にオススメ!!)
}

function draw(){
   background(0);// 4, 背景を真っ黒にします
}

実行すると、キャンバスは真っ黒な状態です。
ここまでは、p5.jsの記述方法と変わりませんね。

スプライトを作って表示する

createSprite関数は、スプライトを作る時に使います。(遂にきた!!)
引数にはそれぞれ下記の様に値を指定します。

createSprite(x座標, y座標, 横幅, 高さ);

drawSprites関数は、スプライトを表示する関数です。
この関数が実行されるタイミングでスプライトが表示されます。

drawSprites();

具体的に実装をするとこの様になります。

function preload(){

}

function setup(){
   createCanvas(windowWidth, windowHeight);
   frameRate(32);
   noSmooth();
   let spr = createSprite(width/2, height/2);// 1, スプライトを作る
}

function draw(){
   background(0);
   drawSprites();// 2, スプライトを表示する
}

実行すると下記の様に、キャンバスの中央にスプライトが現れます。

表示されるスプライトの色は自動で決まります。
自分で色を指定したい場合は、
スプライトのshapeColorにcolorオブジェクトを設定します。

スプライト.shapeColor = color(赤, 緑, 青);

全体のコードは下記の様になります。

function preload(){

}

function setup(){
   createCanvas(windowWidth, windowHeight);
   frameRate(32);
   noSmooth();
   let spr = createSprite(width/2, height/2);
   spr.shapeColor = color(255, 255, 255);// RGB値で色を指定する事ができます
}

function draw(){
   background(0);
   drawSprites();
}

実行すると、スプライトの色が変化している事がわかると思います。
次回は画像を適用する方法についてのお話になります。

前回の記事 | 次回の記事

おまけ動画(こちらもよろしくお願いします)