Processingでゲームスタートのカウントダウンを作る

Processingでカウントダウンを作る プログラミング
Photo by Lukas Blazek on Unsplash

こんにちは、コンスキです。

Processingでゲームを作るときに、カウントダウン機能をつけたい時があると思います。

今回は、ゲームをスタートさせる時に表示させるカウントダウンの作り方をご紹介します。

紹介するコードを作る上で参考にさせていただいたコードがあるため、そちらの方の確認もしていただけたら嬉しいです。

完成形

次のようなカウントダウンを作ることができます。(注意:音が出ます

コード

次のpdeファイルを作成してください。

//------------ 音に関わる部分 ------------
import ddf.minim.*;
Minim minim;
AudioPlayer song;
float imgWidth;
float imgheight;
float initGain;
int shifGainCount = 0; //shiftGainを一回だけ実行するためのもの
//------------ 音に関わる部分 ------------

float alpha = 0.0F;   //alphaが0なら完に透明、255なら完全に不透明
boolean fadeMode;
PImage[] imgs;
int cnt = 0;  // 画像が完全に不透明である時間を制御するためのもの
int mcnt =0;  // 画像カウンタ

// 初期設定 
void settings() {
  size(800, 500);
}
void setup(){ 
  frameRate(60);
  imgs = new PImage[]{loadImage("1.png"),loadImage("2.png"),loadImage("3.png"),loadImage("Go!.png")};
  fadeMode = true; 

  minim = new Minim( this );
  song = minim.loadFile( "countDown.mp3" );
  initGain = song.getGain();
}

// 描画の記載
void draw() {
  song.play();
  background(0);
  if(mcnt <= imgs.length-1){
    execFade(imgs[mcnt]); 
  } else {
    for (PImage img : imgs) {
      img = null;
    }
    //カウンドダウンの最後の音はフェードアウトする
    if(shifGainCount==0) {
      song.shiftGain(initGain, -80, 1000);
      shifGainCount++;
    }
  }
} 

//引数にしている画像をFadeIn→何秒間か停止→FadeOutする処理
//FadeOutしたらmcntを1つ上げて、次の動画の処理を行えるようにする
void execFade(PImage img){
  imageMode(CENTER); //画像をウィンドの中心に設定しやすくするモード
  float imgWidth; //カウントダウンの画像の横幅
  float imgHeight; //カウントダウンの画像の高さ
  if(mcnt==3) {
    imgWidth = 481;
    imgHeight = 267;
  } else {
    imgWidth = 156;
    imgHeight = 219;
  }
  tint(255f,alpha); 
  image(img,width/2, height/2,imgWidth,imgHeight);
  // 秒数はFrameRateを考慮する必要があります。
  if (cnt >= frameRate*0.7) {
    fadeMode = !fadeMode;
    cnt = 0;
  }
  if (fadeMode) {
    // IN 
    if (alpha < 255.0F) {
      alpha = alpha + 22f;
      cnt = 0;
    } else {
      alpha = 255f; 
      cnt++;
    }
  } else {
    // OUT
    if (alpha > 0.0F) {
      alpha = alpha - 22f;
      cnt = 0;
    } else {
      println("next!!");
      fadeMode = !fadeMode;
      cnt =0;
      mcnt++;    // 次の画像に進むためのカウンタを+1
    }
  }    
}
void stop() {
  //音の後始末 
  song.close();
  minim.stop();
  super.stop();
}

画像ファイルと音声ファイルの準備

完成形と全く同じカウントダウンを作る場合は下のファイルを使ってください。

▼画像ファイル

▼音声ファイルです。

こちらの音声ファイルはOn-Jin ~音人~というフリー音楽素材サイトからダウンロードしたものです。

用意した画像や音声ファイルを「data」という名前のフォルダに入れてください。

そのdataフォルダを今回紹介したコード「CountDown.pde」が入っているフォルダへ入れてください。

フォルダの内容を示しまう

CountDown
├── CountDown.pde  //上で紹介したコード
└── data
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── Go!.png
    └── countDown.mp3

ここまで完了したら、「CountDown.pde」を実行させるとカウントダウンが表示されると思います。

参考にさせていただいたコード

今回紹介したコードはanadaさんのコードを参考させていただきました。

元のコードはこちらです。

非常にわかりやすくて、有用なコードを使わせていただいたことに対して、こちらでお礼を言わせていただきたいです。

本当にありがとうございます。

コメント

タイトルとURLをコピーしました