タイトル画面の作り方

タイトル画面とゲーム画面

ゲームを作ったらタイトル画面も作りたくなるよね！ここではタイトル画面の作り方を伝授するぞ！

学べること

関数

まずはゲーム画面

つくるもの

今回はゲームを作ることが目的ではないので、もぐら叩き的なシンプルなゲームを考えてみるぞ！

四角形をクリックしていこう

ソースコード

float x;
float y;
void setup(){
  size(600, 400);
  // 四角形の位置のランダム化
  x = random(width);
  y = random(height);
}
void draw(){
  background(0);
  rect(x, y, 50, 50);
}
void mousePressed(){
  // 当たり判定
  if(mouseX > x && mouseX < x + 50 && mouseY > y && mouseY <  y + 50){
  // 当たったら新しい場所に四角形を表示
  // 四角形の位置をランダム化
   x = random(width);
   y = random(height);
  }
}

注目して欲しいこと

「四角形の位置のランダム化」が、setupの中と、mousePressedの中に二つ存在するよね？こういった処理はひとつにまとめることができるんだ！それが関数だよ！

関数を作ろう

四角形の位置をランダム化する処理を「リセット」として、「reset」という名前の関数を作るよ！

void reset(){
   x = random(width);
   y = random(height);
}

関数を使おう

関数は作っただけでは意味がないぞ！作った関数を「呼び出す」必要があるんだ！

float x;
float y;
void setup(){
  size(600, 400);
  // reset関数を呼び出す
  reset();
}
void draw(){
  background(0);
  rect(x, y, 50, 50);
}
void mousePressed(){
  if(mouseX > x && mouseX < x + 50 && mouseY > y && mouseY <  y + 50){
   // reset関数を呼び出す
   reset();
  }
}
void reset(){
   x = random(width);
   y = random(height);
}

まとめ

関数の作り方はわかったかな？つまりは処理をひとつにまとめるに便利なものと覚えておこう！

タイトル画面を作ろう！

では本題に戻るぞ！このゲームにタイトル画面をつけてみよう！ここでも関数を使うんだ！

ゲーム部分を関数にする

まずはゲーム部分を関数にするぞ！

void draw(){
  game();
}
void game(){
  background(0);
  rect(x, y, 50, 50);
}

gameという関数を作って、drawの中で呼び出しているぞ！

タイトル部分を関数にする

次にtitleという関数を作ろう！

void draw(){
  title();
  // game();
}
void title(){
  background(0);
  textAlign(CENTER);
  text("Mogura Tataki", width/2, height/2);
}

title関数を作って、drawの中でtitle関数を呼び出しているぞ！

タイトル画面からゲーム画面へ遷移しよう！

title関数とgame関数ができました。 drawの中でtitle();とすればタイトル画面が表示され、game();とすればゲーム画面が表示されます。あとはdrawの中で、どちらの関数を呼び出すかを決めてあげればOKです。どちらの関数を呼び出すかを判別するために、「gamen」という変数を用意してみます。

int gamen = 1;
void draw(){
  if(gamen == 1){
    title();
  }
  if(gamen == 2){
    game();
  }
}

gamen変数が1ならtitle関数を呼び出し、gamen変数が2ならgame画面を呼び出すようにします。

gamen変数は初期値が「1」なのでtitle関数が呼び出され、タイトル画面が表示されます。

gamen変数を「2」に変えればゲーム画面に切り替わるはずです。

gamen変数を2に切り替えよう

ではEnterキーを押した時に変数を切り替えてあげましょう！

void keyPressed(){
 if(keyCode == ENTER){
  gamen = 2;
 }
}

完成！

画面の切り替えができたでしょうか？

float x;
float y;
int gamen = 1;
void setup(){
  size(600, 400);
  reset();
}
void draw(){
  if(gamen == 1){
    title();
  }
  if(gamen == 2){
    game();
  }
}
void title(){
  background(0);
  textAlign(CENTER);
  text("Mogura Tataki", width/2, height/2);
}
void game(){
  background(0);
  rect(x, y, 50, 50);
}
void keyPressed(){
 if(keyCode == ENTER){
  gamen = 2;
 }
}
void mousePressed(){
  if(mouseX > x && mouseX < x + 50 && mouseY > y && mouseY <  y + 50){
   reset();
  }
}

void reset(){
   x = random(width);
   y = random(height);
}