- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] > p5.play.js
[[Programing]] > [[p5.js]] > p5.play.js
#title("はじめよう、p5.play.js")
p5.play.jsは、p5.js用のゲームライブラリで、スプライトや衝突判定などをサポートしています。
パフォーマンスよりシンプルさを優先して作られており、3Dや物理エンジンはサポートしていません。
#contents
* 公式サイト [#g9f5dd1a]
-[[p5.play - a game library for p5.js:http://p5play.molleindustria.org/]]
-[[Example:http://p5play.molleindustria.org/examples/index.html]]
-[[リファレンス:http://p5play.molleindustria.org/docs/index.html]]
* はじめ方 [#gfbe93cb]
+ テキストエディタを用意する
+ p5.jsを[[ダウンロード:http://p5js.org/download/]]する
+ p5.play.jsも[[ダウンロード:http://p5play.molleindustria.org/]]する
+ 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ファイルを開く
* サンプル [#r0294f9d]
いくつかやってみた。sketch.jsに、これを記述する。
** マウスで描く [#dc5b7510]
マウスの位置に、スプライトで四角を描く。
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();
}
** インスタンスモードのサンプル [#g5653ab8]
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);
* 参考になる [#m62add73]
-[[Space invaders game made with p5.js and the p5.play library - YouTube:https://www.youtube.com/watch?v=XHAsp17oyP0]] インベーダーというよりアステロイド
-[[p5.jsで作るゲーム開発超入門！100行以内で「ブロック崩し」に挑戦してみる！ : うえぶはっく:http://webhacck.net/archives/896790.html]]
* 関連ページ [#g3b86914]
-[[p5.js]] 簡単な説明
-[[p5.turtle.js:http://ycatch.github.io/p5.turtle.js/index.ja.html]] p5.jsのためのタートルグラフィックプログラムを作ってみた
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
