Programing > p5.js > p5.play.js

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

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

公式サイト

はじめ方

  1. テキストエディタを用意する
  2. p5.jsをダウンロードする
  3. p5.play.jsもダウンロードする
  4. p5.jsとp5.play.jsは、libフォルダに入れておく
  5. こんな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>
  6. sketch.jsを作って、こんなコードを記述する。これは、HTMLファイルと同じフォルダに置く
    function setup() {
     createCanvas(800,400);
     createSprite(400, 200, 50, 50);
    }
    
    function draw() {
     background(255,255,255);  
     drawSprites();
    }
  7. 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);

参考になる

関連ページ

  • p5.js 簡単な説明
  • p5.turtle.js p5.jsのためのタートルグラフィックプログラムを作ってみた

  トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-10-10 (月) 00:24:18 (716d)