2012-2-21

はじめよう、p5.play.js

※「catch.jp-wiki」から移動したページです。

p5.play.jsは、p5.js用のゲームライブラリで、スプライトや衝突判定などをサポートしています。

パフォーマンスよりシンプルさを優先して作られており、3Dや物理エンジンはサポートしていません。

公式サイト

はじめ方

テキストエディタを用意する
p5.jsをダウンロードする
p5.play.jsもダウンロードする
p5.jsとp5.play.jsは、libフォルダに入れておく
こんなHTMLファイルを用意する

<!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>

sketch.jsを作って、こんなコードを記述する。これは、HTMLファイルと同じフォルダに置く

function setup() {
    createCanvas(800,400);
    createSprite(400, 200, 50, 50);
}

function draw() {
    background(255,255,255);  
    drawSprites();
}

HTMLファイルを開く

サンプル

いくつかやってみた。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);

参考になる

Space invaders game made with p5.js and the p5.play library - YouTube インベーダーというよりアステロイド
p5.jsで作るゲーム開発超入門！100行以内で「ブロック崩し」に挑戦してみる！ : うえぶはっく

catch.jp blog