p5.playの使い方を解説しております。
第1回の記事はこちらにありますのでご参照ください。
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の順番で実行されます。
それぞれの関数には役割があるので覚えておきましょう。
- preload関数(画像や音声の読み込み)
- setup関数(キャンバスの用意)
- 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();
}
実行すると、スプライトの色が変化している事がわかると思います。
次回は画像を適用する方法についてのお話になります。