Processingでランキング画面を実装した話

こんにちは。トロです。

春休みに制作した「ねぎミク」という自作ゲームに、ランキング画面を実装しましたので、

その方法を記事にまとめておこうと思います。

ねぎミク : https://www.torosan-homepage.com/game-edit 良かったら見てくださいな。

※今回実装したランキング画面は、サーバと通信して…なんてたいそうな物ではなく、

テキストデータからランキング情報を読み込む→書き換えて表示→保存する の流れです。

ご了承ください。

開発環境:Processing 3.5.4

使用ライブラリなど:特になし

こんな感じの画面も作ります。

(色が変わってる文字はrandom()を使ってピカピカさせてます。)

では、コード。

まずは、変数を用意します。

String score_checker[];//スコアデータを読み込んで配列で管理するため
int check=0;//フラグみたいなもの。booleanでもいいかも？
String filename = "ranking.txt";//ランキングデータ

//以下、前の記事にも書いたけど今回も登場する変数
int score=0; //ゲームのスコア。獲得したスコアが代入される。

先にranking.txtを読み込む作業をしておきます。

void setup{
    score_checker = loadStrings(filename);
}

次に、ランキング画面を表示するかの処理を書きます。

私が作った場合のゲームの場合は、

「プレイヤーのスコアが、ランキング最下位のスコアより高かったら」

→「スコア画面を表示」という形にしています。

if(???){ //スコア画面を表示する前動作(ボタンを押すなど)の条件式
   if(score > int(score_checker[5]))){ //5位までのランキング
   //もし、scoreの値がランキングに記録されているスコアの5位の値より大きかったら
   return new ranking();
   //ランキング画面へ
   }else{
   return new title();
   //この辺の詳しい説明はこの記事下部の参考にしたものから
   }
}

ランキング画面へ推移するプログラムができました。

では、いよいよランキングを実装していきます！

まずはピカピカの処理！(ビジュアル大事)

//クラスやら関数やらの中に入る
push();//混乱防止
textSize(50);
fill(random(255),random(255),random(255))//文字を光らせる処理
text("NEW RECODE",width/2 ,height/2);
pop();//閉じる

では、ランキングのどの部分にscoreが入るのかを判定する処理

if(check == 0){//複数回やっちゃうのを防止(flag == true)とかでも
    //スコアが1位の記録を超えた時
    if(score > int score_checker[1])){
        for(int i=5; i>0 i--){
            if(int(score_checker[i]) < int(score_checker[1])){
              score_checker[i] = "";//下から1つ、順に空っぽにする
              score_checker[i] = score_checker[i-1];
              //最下位の1つ上から順番に下す。
              // 2位まで繰り返す
            }
            if(int(score_checker[i]) < int(score_checker[1])){
                score_checker[1] = str(score);
                //1位まで来たら、今回のスコアを代入
            }
        } //for end
    }//一位の時の処理終わり
    
    //スコアが2位以下〜5位
    if(score < int(score_checker[1])){
        for(int i=2; i<6; i++){
            if (score >= int(score_checker[i]) && 
                score <  int(score_checker[i-1])) {
                //2~5までで、合致する部分を見つける。
                for(int j=5; j>i; j--){
                    score_checker[j] = "";
                    score_checker[j] = score_checker[j-1];
                }//for end
                score_checker[i] = str(score);
            }//if end
        }//for end
    }//if end
  check++;//フラグを1にして複数回やるのを防止
}

長いね(笑)

コメントアウトで分かりやすくしたつもりですが……

分かりづらかったらゴメンネ……。

ではでは、画面に表示する部分を作っていきます！

(作ったものをそのまま書きますが、for文とかにしたほうが早そう笑)

fill(0);
if (score == int(score_checker[1])) {
    fill(random(255), random(255), random(255));
}
    text("1ST   " + score_checker[1] + " P", width/2, height/2-           
        height/4);

fill(0);
if (score == int(score_checker[2])) {
    fill(random(255), random(255), random(255));
}
    text("2ND  " + score_checker[2] + " P", width/2, height/2-
        height/8);
    
fill(0);
if (score == int(score_checker[3])) {
    fill(random(255), random(255), random(255));
}
    text("3RD  " + score_checker[3] + " P", width/2, height/2);
    
fill(0);
if (score == int(score_checker[4])) {
    fill(random(255), random(255), random(255));
}
    text("4TH  " + score_checker[4] + " P", width/2, 
        height/2+height/8);
        
fill(0);
if (score == int(score_checker[5])) {
    fill(random(255), random(255), random(255));
}
    text("5TH  " + score_checker[5] + " P", width/2, 
        height/2+height/4);

これで、ランキングを表示する画面を作る事が出来ました。該当するスコアも光ります！

(同点部分も光るようにしてます。やり込んだら理論値で埋まりそう…笑笑)

では最後に、ランキングを記録しておく処理を実装しましょう。

if(???){ //ボタンを押して、ゲーム終了とかスタートに戻ったりする処理

    for(int i=1; i<score.checker.length; i++){
        //ランキングを更新する処理
        print("");
        println(score_checker[i]);
        saveStrings(filename , score_checker);
    }
    
}//if end

以上です！

言語が変わったりしても、この方式は利用できると思うので、

色んなゲームにランキングを実装してみてください〜！

お読みいただきありがとうございました。

参考にしたもの

・http://www2.kobe-u.ac.jp/~tnishida/misc/processing-state.html 　

//状態遷移をクラスで記述するやり方

・https://codeaid.jp/processing-fileio/

//ファイルの入出力