はじめよう、p5.play.js

Programing > p5.js > p5.play.js

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乖笆柒で≈ブロック束し∽に末里してみる— : うえぶはっく

↑

簇息ペ〖ジ †

p5.js 词帽な棱汤
p5.turtle.js p5.jsのためのタ〖トルグラフィックプログラムを侯ってみた