レッスン25 プレイヤーとして画像を表示しよう | レーシングゲーム開発 | ゲーム開発で学ぶプログラミング

プレイヤーとして画像を表示しよう

好きな画像をアップロードしてゲーム画面に表示する方法を解説します。

今回のレッスンでは、これまで赤い四角形だったプレイヤーを、車の画像に変更したいと思います。

まず、オンラインエディタに画像をアップロードしましょう。
下の画像をダウンロードしてください。
（画像を右クリックして「名前を付けて画像を保存」でダウンロードできます）

次に、オンラインエディタ上で、次のボタンをクリックしてください。

ファイルエクスプローラーアイコン

このボタンは青い四角で囲った位置にあります。

ファイルエクスプローラーアイコンの位置

「スケッチファイル」 と書かれている文字の右側のアイコンをクリックして、
「ファイルアップロード」 をクリックしてください。

ファイルアップロード

ファイルをアップロードできる画面が出てくるので、先ほどダウンロードした車の画像をアップロードしてください。

アップロードが完了すると、以下のように 「car.png」 が表示されていると思います。

ファイルエクスプローラー

以上で画像ファイルのアップロードは完了です。
続いてコードを変更していきます。

画像の変数を用意します。
エディタの一番上の行に、次のコードを追加してください。

let playerImage;

次に、 setup 関数を次のように変更してください。

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  textAlign(CENTER, CENTER);
  imageMode(CENTER);
  playerImage = loadImage('car.png');
  resetGame();
}

以下のコードを追加しています。

imageMode(CENTER);
playerImage = loadImage('car.png');

これで、座標を中心として画像が表示される設定になり、
変数 playerImage に画像がセットされました。

最後に、drawPlayer 関数を次のように変更してください。

function drawPlayer() {
  image(playerImage, mouseX, mouseY, 30, 30);
}

これで、変数 playerImage に格納されている画像が表示されるようになりました。

それではゲームを起動してみましょう。

プレイヤー画像

プレイヤーとして、車の画像が表示されるようになりました！

let gameState = "start";
let score = 0;
let roads = [];
let playerImage;

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  textAlign(CENTER, CENTER);
  imageMode(CENTER);
  playerImage = loadImage('car.png');
  resetGame();
}

function draw() {
  updateGame();
  drawGame();
}

function resetGame() {
  score = 0;
  createRoads();
}

function createRoads() {
  roads = [];
  for (let i = 0; i < 21; i++) {
    roads.push({
      x: 200,
      y: 20 * i,
    });
  }
}

function updateGame() {
  if (gameState === "start" || gameState === "gameover") {
    return;
  }
  updateRoads();
  detectGameover();
  score++;
}

function updateRoads() {
  for (let i = 0; i < roads.length; i++) {
    roads[i].y += 1;
    if (roads[i].y >= 410) {
      roads[i].x = 200 + 100 * sin(score * 0.01);
      roads[i].y = -10;
    }
  }
}

function detectGameover() {
  let gameover = true;
  for (let i = 0; i < roads.length; i++) {
    let distanceX = abs(mouseX - roads[i].x);
    let distanceY = abs(mouseY - roads[i].y);
    if (distanceX <= 75 && distanceY <= 10) {
      gameover = false;
    }
  }
  if (gameover) {
    gameState = "gameover";
  }
}

function drawGame() {
  background(0);
  drawRoads();
  drawPlayer();
  drawScore();
  if (gameState === "start") {
    drawStart();
  } else if (gameState === "gameover") {
    drawGameover();
  }
}

function drawRoads() {
  fill(255);
  for (let i = 0; i < roads.length; i++) {
    rect(roads[i].x, roads[i].y, 150, 20);
  }
}

function drawPlayer() {
  image(playerImage, mouseX, mouseY, 30, 30);
}

function drawScore(){
  fill(255, 0, 0);
  textSize(15);
  text(score, 320, 30);
}

function drawStart() {
  fill(255, 0, 0);
  textSize(30);
  text("レーシングゲーム", 200, 200);
  textSize(15);
  text("タップしてスタート", 200, 250);
}

function drawGameover() {
  fill(255, 0, 0);
  textSize(30);
  text("ゲームオーバー", 200, 200);
  textSize(15);
  text("タップしてリスタート", 200, 250);
}

function mousePressed() {
  if (gameState === "start") {
    gameState = "play";
  }else if (gameState === "gameover") {
    resetGame();
    gameState = "play";
  }
}