p5.js マリオみたいなゲームを作ろうその5(p5.js)
今回は画面を自機を中心にカメラをスクロールさせます。割と簡単に実装できますが、今回説明するものが多いです。今回のやったものはおそらくUnityで再現しても使う機会はなさそうですが、覚えておいて損はないと思います。
※自機が横からブロ...
p5.js
p5.js p5.js マリオみたいなゲームを作ろうその４(p5.js)
今回は敵を動かします。ちゃちゃっと作るつもりが、敵に落下判定も付けることになったので、時間が掛かってしまいました。それではsprite.jsから見ていきます。あまり変わってないように見えますが、敵クラスにspeed、directionを追...
p5.js マリオみたいなゲームを作ろうその３(p5.js)
今回は敵を出します。でも今回は動きません。とりあえず上からぶつかったら消滅、それ以外からぶつかったら自機が死ぬという処理を作ります。あと、インベーダーゲームと同じ様に自機、敵、そしてブロックをクラスで管理します。それではやっていきましょう...
p5.js マリオみたいなゲームを作ろうその２(p5.js)
今回はキャラクターがブロックの上に乗るようにします。ブロックは地面と同じ当たり判定を使います。ブロックは動的配列で宣言して複数作れるようにします。その為、前回と地面の処理が少し違うので注意してください。
let player;
le...
p5.js マリオみたいなゲームを作ろうその１(p5.js)
今回からマリオみたいなアクションゲームを作ります。playerの中身はx,y,w,hはプレイヤーの描写に使います。vyはジャンプする値。isJumpingはジャンプフラグです。
let player;
function setup...
p5.js 背景を動かそう(p5.js)
今回は背景を動かします。
この画像は仮の背景画像です。自分のゲーム作る際は素材を用意しましょう。
let bgImg;
let bgY = 0;
function preload() {
// 背景画像を読み込む...
p5.js Re:ゼロから始めるゲームクリア画面とゲームオーバー画面(p5.js)
今回はゲームクリア画面とゲームオーバー画面からゲームを再開する処理を書きます。ただ、割と書き換えています。書き換えるところを抜粋して書きます。
function draw() {
if (gameState === "start"...
p5.js スタート画面を作る(p5.js)
今までゲームスタート画面を作り忘れていたのでここで作り方を教えます。
let gameState = "start"; // ゲームの状態を保持する変数
function draw() {
background(220);
...
p5.js キーボード長押し(p5.js)
今回は若干番外編みたいな感じです。今までのキーボード操作は一回押すだけの操作でしたが、今回は長押しです。
let x = 100; // 初期位置
function setup() {
createCanvas(400, 40...
p5.js 三角関数を使ってみよう(p5.js)
今回は三角関数を使ってみます。これを利用してゲームの動きの幅を増やしましょう。
三角関数 sin() と cos() を使うことで、円周上の動きを再現できます。これにより、物体を円形に動かすことができます。これを利用してシューティン...