p5.js

今回は画面を自機を中心にカメラをスクロールさせます。割と簡単に実装できますが、今回説明するものが多いです。今回のやったものはおそらくUnityで再現しても使う機会はなさそうですが、覚えておいて損はないと思います。 ※自機が横からブロ...

今回は敵を動かします。ちゃちゃっと作るつもりが、敵に落下判定も付けることになったので、時間が掛かってしまいました。それではsprite.jsから見ていきます。あまり変わってないように見えますが、敵クラスにspeed、directionを追...

今回は敵を出します。でも今回は動きません。とりあえず上からぶつかったら消滅、それ以外からぶつかったら自機が死ぬという処理を作ります。あと、インベーダーゲームと同じ様に自機、敵、そしてブロックをクラスで管理します。それではやっていきましょう...

今回はキャラクターがブロックの上に乗るようにします。ブロックは地面と同じ当たり判定を使います。ブロックは動的配列で宣言して複数作れるようにします。その為、前回と地面の処理が少し違うので注意してください。 let player; le...

今回からマリオみたいなアクションゲームを作ります。playerの中身はx,y,w,hはプレイヤーの描写に使います。vyはジャンプする値。isJumpingはジャンプフラグです。 let player; function setup...

今回は背景を動かします。 この画像は仮の背景画像です。自分のゲーム作る際は素材を用意しましょう。 let bgImg; let bgY = 0; function preload() { // 背景画像を読み込む...

今回はゲームクリア画面とゲームオーバー画面からゲームを再開する処理を書きます。ただ、割と書き換えています。書き換えるところを抜粋して書きます。 function draw() { 　if (gameState === "start"...

今までゲームスタート画面を作り忘れていたのでここで作り方を教えます。 let gameState = "start"; // ゲームの状態を保持する変数 function draw() { background(220); ...

今回は若干番外編みたいな感じです。今までのキーボード操作は一回押すだけの操作でしたが、今回は長押しです。 let x = 100; // 初期位置 function setup() { createCanvas(400, 40...

今回は三角関数を使ってみます。これを利用してゲームの動きの幅を増やしましょう。 三角関数 sin() と cos() を使うことで、円周上の動きを再現できます。これにより、物体を円形に動かすことができます。これを利用してシューティン...