見出し画像

Hello! p5.js. - p5playで表示する。

donguri

p5.jsのみの場合との違いも少し入れながらライブラリp5playを使ってみます。

このサイトを使って、indexhtmlを以下に置き換えて

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@latest/lib/p5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@latest/lib/addons/p5.sound.min.js"></script>
    <!-- planck -->
    <script src="https://cdn.jsdelivr.net/npm/planck@latest/dist/planck.min.js"></script>
    <!-- Version 3 of p5.play -->
    <script src="https://p5play.org/v3/p5.play.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
      
    <script src="sketch.js"></script>
  </body>
</html>

sketch.jsに実行コードを書いていきます、

まず書いているのが

function setup(){
    new Canvas(500, 500);
}

function draw(){
	background("silver");
}

p5.jsでは"createCanvas()"を使いますがこちらでは

new Canvas(500, 500);

を使って背景を描画させます。

この背景に図形を表示してみます。ここでがゲーム作成の時にキャラクターなどを示す"sprite"ということばを使って作っていきます。

たくさん、いろんなspriteを作るときはそれぞれ特有の名前をつけて区別します。まずその名前の宣言をします。

今はとりあえず一つなのでそのまま"sprite"という名前で宣言して使って行きます。

宣言の方法は

let sprite;

となります。"let"を前につけてその後名前をつけます。たくさん作りたい時はいろんな名前、わかりやすい名前をつけて区別します。

このつけた名前を変数といいます。プログラムするときにはこれは大事な考え方となります。

宣言した名前を使って新しいspriteを作ります。

sprite = new Sprite();
sprite.width = 50;
sprite.height = 50;

setup()の中に書いて実行すると表示されます。実行するたびに四角の色は変わって行きます。

色指定するときは

  sprite.color = 'orange';
  sprite.stroke = 'white';


他にもいろんな指定ができます。以下公式サイトの説明です。


この記事が気に入ったらサポートをしてみませんか？