Programing > p5.js > p5.play.js
p5.play.jsは、p5.js用のゲームライブラリで、スプライトや衝突判定などをサポートしています。
パフォーマンスよりシンプルさを優先して作られており、3Dや物理エンジンはサポートしていません。
<!DOCTYPE html> <html> <head> <title>p5.play Example</title> <script src="lib/p5.js" type="text/javascript"></script> <script src="lib/p5.play.js" type="text/javascript"></script> <script src="sketch.js" type="text/javascript"></script> </head> <body> </body> </html>
function setup() { createCanvas(800,400); createSprite(400, 200, 50, 50); } function draw() { background(255,255,255); drawSprites(); }
いくつかやってみた。sketch.jsに、これを記述する。
マウスの位置に、スプライトで四角を描く。
var img; setup = function() { createCanvas(800,400); background(200); img = createSprite(400, 200, 50, 50); } draw = function() { img.position.x = mouseX; img.position.y = mouseY; drawSprites(); }
P5.PLAY.JSが、インスタンスモードで動くようになっていた!
// instance mode example var s = function(p) { var img; p.setup = function() { p.createCanvas(800,400); p.background(200); img = p.createSprite(400, 200, 50, 50); } p.draw = function() { img.position.x = p.mouseX; img.position.y = p.mouseY; p.drawSprites(); } } var myp5 = new p5(s);