横スクロールゲームを作る-2

前回は楕円がジャンプする機能を実装しました
processing-p5.hateblo.jp

今回は楕円ではなく，ドット絵がシャンプできるようにしてみましょう

まずはGoogle検索で「Chrome t rex」を画像検索し，恐竜のpngファイルを取得しました
もし画像ファイルが必要であれば，下のファイルを使用してください

これ

次に，processingのコードが格納されているフォルダの中に「data」フォルダを新たに作成し，その中に先ほどのpngファイルを保存しましょう

これで事前準備は完了です
今回のコードは以下のようになります

PImage rexImage;
float gravity = 1; // 下向きの重力加速度
Player rex;

void setup(){
  size(600,200);
  background(255);
  frameRate(60);
  imageMode(CENTER);
  rexImage = loadImage("trex.png");
  rex = new Player();
}

void draw(){
  background(255);
  line(0, 0.8*height, width, 0.8*height); // 地面
  rex.update();
}

void keyPressed(){
  if(key==' '){rex.jump();} 
}

class Player{
  float py; // 位置
  float vy; // 速度
  float spotHeight = 0.7*height; // 基準点
  boolean isGrounded; // 地面に接地しているか
  
  Player(){
    py = spotHeight;
    vy = 0;
    isGrounded = true;
  }
  
  // function
  void update(){
    vy += gravity;
    py += vy;
    if(py>=spotHeight){
      isGrounded = true; // Playerの位置が0.75*heightであれば接地しているとする
      py = spotHeight;
    }
    image(rexImage, 50, py, 60, 60);
  }
  
  void jump(){ 
    if(isGrounded){ // 地面に接地しているときだけjumpできる
      isGrounded = false;
      vy = -14;
    }
  }
}

コードのほとんどの部分は前回のものと同じです
前回と異なる部分だけを抜き出してみましょう

PImage rexImage;

void setup(){
  imageMode(CENTER);
  rexImage = loadImage("trex.png");
}

class Player{
  
  void update(){
    // 位置や速度を更新し，描画する
    image(rexImage, 50, py, 60, 60);
  }

}

Processingのアプリ上でpngやjpgなどの画像ファイルを呼び出したいときは，上述のとおり，まずはdataフォルダ内に画像ファイルを保存します
コード上で画像ファイルを呼び出すときには，画像をPImageクラスのオブジェクトとして呼び出すことになるので，まずはPImage型の変数を用意しています

PImage rexImage; // PImage型の変数を宣言

次に，loadImage()関数を用いて，dataフォルダに保存した画像を読み込ませます
読み込ませた画像データは，image()関数を用いることで描画できるようになります

rexImage = loadImage("trex.png"); // 画像データの読み込み
image(rexImage, 50, py, 60, 60); // 画像データの表示

なお，trexが走るときの画像とジャンプするときの画像を別々に読み込ませてやることで，
キャラクターに走るアニメーションをつけてやることができます

このとき，画像読み込みとPlayerクラスの記述は下のようになります

PImage rexJmpImg, rexRunImg1, rexRunImg2;
rexJmpImg = loadImage("trex.png");
rexRunImg1 = loadImage("trex_run1.png");
rexRunImg2 = loadImage("trex_run2.png");

class Player{
  PImage rexImg;
  float py; // 位置
  float vy; // 速度
  float spotHeight = 0.7*height; // 基準点
  boolean isGrounded; // 地面に接地しているか
  
  Player(){
    py = spotHeight;
    vy = 0;
    isGrounded = true;
  }
  
  void update(){
    vy += gravity;
    py += vy;
    if(py>=spotHeight){
      isGrounded = true; // Playerの位置が0.75*heightであれば接地しているとする
      py = spotHeight;
    }
    // 動きにアニメーションをつける
    if(isGrounded){
      if(frameCount%10>0 && frameCount%10<6) rexImg = rexRunImg1;
      else rexImg = rexRunImg2;
    }
    else rexImg = rexJmpImg;
    image(rexImg, 50, py, 60, 60);
    // ellipse(45, py, 20, 0.25*height);
  }
  
  void jump(){ 
    if(isGrounded){ // 地面に接地しているときだけjumpできる
      isGrounded = false;
      vy = -14;
    }
  }
}

走るアニメーションに用いたpngファイルは下の２つです

今回は画像データを読み込んでゲーム上に表示する方法を紹介しました
次回は障害物が横スクロールで現れる機能を実装したいと思います