Hello! p5.js. - p5playで表示する。
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()"を使いますがこちらでは
を使って背景を描画させます。
この背景に図形を表示してみます。ここでがゲーム作成の時にキャラクターなどを示す"sprite"ということばを使って作っていきます。
たくさん、いろんなspriteを作るときはそれぞれ特有の名前をつけて区別します。まずその名前の宣言をします。
今はとりあえず一つなのでそのまま"sprite"という名前で宣言して使って行きます。
宣言の方法は
let sprite;
となります。"let"を前につけてその後名前をつけます。たくさん作りたい時はいろんな名前、わかりやすい名前をつけて区別します。
このつけた名前を変数といいます。プログラムするときにはこれは大事な考え方となります。
宣言した名前を使って新しいspriteを作ります。
sprite = new Sprite();
sprite.width = 50;
sprite.height = 50;
setup()の中に書いて実行すると表示されます。実行するたびに四角の色は変わって行きます。
色指定するときは
sprite.color = 'orange';
sprite.stroke = 'white';
他にもいろんな指定ができます。以下公式サイトの説明です。
この記事が気に入ったらサポートをしてみませんか?