まるお

Processingってどんなことができるんだろう？

コメ吉

ゲームも作れるみたいだね。

「ブロック崩しゲーム」にチャレンジしてみるね！

こんにちは。コメ吉です。

最近長男にProcessingを教えてもらっています。

今回はProsessingを利用してちょっとしたミニゲーム、「ブロック崩しゲーム」を作っていきたいと思います。以前にも紹介させて頂きましたが、この記事では、Processingの基本的なテクニックをゲーム作成を通じて学んでいきたいと思います。

Processing ゲーム作りに挑戦！ブロック崩しゲームで遊んでみた！

ブロック崩しゲーム

ブロック崩しゲーム

さっそく、「ブロック崩しゲーム」を作っていきますね。

Prosessingに関する基本的な知識については以下の本が分かりやすいかと思いますので、いきなりコードをみても分からない場合はご参照頂けると幸いです。

リンク

なお、Processingの導入、基本的な操作に関しては以下の記事にまとめていますのでご参照ください。

>プログラミングでデザインに挑戦!？　初心者でも取り組みやすいProcessingを体験！https://comekichi.com/2022/09/24/プログラミングでデザインに挑戦？%E3%80%80初心者でも/

まず、「ブロック崩しゲーム」の完成版のイメージですが、以下のようになります。

ブロック崩しゲームのルールとしては以下のようになります。

・ボールをバーで操作

・ボールがブロックに当たったらブロックが消え、ボールが跳ね返る

それでは始めていきましょう！

ゲーム画面を作る

最初にゲームを実行する画面を作っていきましょう。

以下のように入力します。

ゲーム画面の大きさはsizeという命令を使用することにより作成できます。

↓記述方法

Size(X座標, Y座標);

実行すると上のようにウィンドウが表示されます。

Void setupというものがありますが、このvoid setupの｛｝内に実行したい命令を書くと、実行ボタンが押されてから1回だけ命令を実行させることができます。

（ゲーム画面が何回も表示されたらパソコンの動作が重くなってしまうからです。）

続いて、ボールを操作するバー（細い四角形状のもの）を作っていきます。

先ほどのコードに以下のように入力します。

background(0);
rect(250, 420, 290, 10);

するとどうでしょう、四角形が表示されました！

四角形は命令はrect命令を使うことによって、表示させることができます」。

＊四角形の表示については以前のprosessingの紹介記事をご覧ください

でも今度は背景画面が黒く、今度はvoid drawというのが出てきました。

このvoid drawというのは、{}内に書かれた命令を実行ボタンが押されている限り常時実行するという命令なのです。

「あれ？でも　何回も表示させる必要なんかあるの？」と思う方もいるかもしれません。

今作ったバーはボールを操作するために動かせるようにするのですが、prosessingでは図形を動かそうとすると毎回上から図形が重なります。

↓こんな感じで重なります。

うすると、どこが本当のバーなのかが分かりにくくなってしまいますし、ちょっとカッコ悪いですよね。そこで、background命令を書くことによって、図形が上から書かれるたびに背景を色で塗りつぶして（今回は黒）重なっている四角形を隠してしまうのです。

これでバーの表示は終わったので今度はバーを動かしていきたいと思います。

Void setupの上に

int skx =250;

と入力し、先ほど書いたrect命令を

rect(skx, 420, 290, 10);

のように書き換えてあげます。実行してみても変わらないと思います。

先ほどとは違い今度は変数で文字を表示してあげました。

この「変数」とは何者だ？と思う方もいるかもしれませんが、この変数はいわば「数字を入れるハコ」です。箱には区別するために名前を付ける必要があります。その名前つけを

Void setupの前でやります。この名前つけをすることにより箱が一つ作られます。

Int sikaku =250;

この名前は基本的にアルファベットならば何でもokです。

また=250;　とありますが、これはsikakuという名前の箱に250という数字を入れるという意味なのです。この数値は命令によって何回でも書き換えることができますので、rect命令に数値を直接打ち込むより便利ですよ。

例えば、

Sikaku += 10;

のようにすると　sikakuの中の250という値に10が加算されて箱の中身は260になるという感じです。

ちなみに、この変数自体も何個も作ることができることも覚えておくといいでしょう。

ボールを作る

それでは次にブロック崩しの主人公ともいえるボールを作っていきます。

ボールは動かしたりするのでこんな時こそあの「変数」が有効です。

先ほど作った変数の下に　ボールのX座標　Y座標の値を指定するための

変数を作っていきます。

int posX = 151;
int posY = 201;

今回は英語の position(ポジション)から名をとってposX posYのようにでもしてみました。

続いて　void draw 命令の中に　円を書く命令を指定します（円は毎回動くので毎回表示させる必要がありますからね。）

  ellipse(posX, posY, 8, 8);

半径は８にしました。

それではさっそくボールを動かしてみましょう！！

まずボールがX座標Y座標に毎回どれだけ動くかを決める必要があるので、どれだけ動くかを決める変数を作る必要があります。

上のコードではボールは毎回x座標ｙ座標に5ずつ動くようになります。

次にvoid draw命令の中に

posX = posX + speedX; 
 posY = posY + speedY;

と打ち込みます　こうすることで posX　には毎回speedXの値posYには毎回speedYの値が加算されることができるのです。

間違って pox= speedx　と書かないようにしましょう。

そうするとspeedx（ここでは5の値）が　円のｘ座標に変わってしまいます。

ボールが表示されました。　しかし、今のままだとそのまま画面からはみ出してしまいます。

そこで以下のようにspeedX、 speedY　にマイナスをつけたものを入力することで、ボールの進んでいる向きを反対にできます。

  if(posX < 8 || posX > width-8 ){
          speedX =- speedX;
      }

      if(posY > height||posY<8){
          speedY =- speedY;
      }

すると、ボールが枠まで移動すると跳ね返るようになります！！

補足として、heightというのはウィンドウの縦の大きさでwidthはウィンドウの縦のサイズを意味します。（こうすることでいちいちウィンドウサイズを考えなくてよいのです。

それではバーをキーボードで操作できるようにし、ボールがバーに当たったら跳ね返るようになるプログラムを作ってみましょう。


void keyPressed(){
  
  if(key == 'd'){
   
    skx +=10;
  
    
}

  if(key == 'a'){

    skx -= 10;
  
   
  }
  
  
  if (skx > width-290){	
 
  skx -=10;
  }
    if (skx < 0){
 
  skx +=10;
    }
    
   
}

このコードでは条件分岐という命令を記述しました。

これを使用することによって、条件によって実行させたりすることができます。

書き方は以下の通りです。

If(条件)｛条件が満たされた場合に実行される命令｝

条件の書き方

a<b bがaより大きい

b aがbより大きい

a ==b aとbが同じ

a>=b　aはｂ以上

a<=b bはa以上

ちなみにb=a　としてしまうと　エラーになるので注意してください。

これを入力すると、dのキーでバーを右に(X座標を減少)、aのキーでバーを右に(X座標を増加)動かすことができます。

このvoid keyPressed　のカッコ内に実行したい命令を書くと、「指定したキー（パソコンのキーボードの）が押されたときだけ命令が実行されるようにする」ことができます。

例えば、「d」の文字があるキーを押したときは、変数skx（バーのX座標の数値が入っている変数）の数値に10を足すということができるのです。そしてバーがゲーム画面の左端もしくは右端に来た時にはそれ以上バーを動かさせないようにするプログラムも入れました。

実行してみると上のようになります。

＊ここまで書いたコード＊

int skx =250;
int posX= 100;
int posY =201;
int speedX =5;
int speedY =5;

void setup(){
size(700, 600);
  }



void draw(){
  background(0);
 
  rect(skx, 420, 290, 10);
   ellipse(posX, posY, 8, 8);
   posX = posX + speedX; 
 posY = posY + speedY;

 // a =mouseX;
 
 
  if(posX < 8 || posX > width-8 ){
          speedX =- speedX;
      }

      if(posY > height||posY<8){
          speedY =- speedY;
      }
}

void keyPressed(){
  
  if(key == 'd'){
   
    skx +=10;
  
    
}

  if(key == 'a'){

    skx -= 10;
  
   
  }
  
  
  if (skx > width-290){
 
  skx -=10;
  }
    if (skx < 0){
 
  skx +=10;
    }
    
   
}

ブロックを作る

それではどんどん行きましょう！

次にボールを操作できるようにするためボールがバーに接触したら跳ね返るようにし、ブロック崩しのブロックも作ってしまいましょう。

以下のコードをvoid drawの中に入力するとバーの上でも跳ね返り、ブロックを作ることもできます。

Void setupの上に書くもの

float [] xsta = new float[50];
float [] yList = new float[50];

void setupの中に書くもの

  int honkex =0;
  int honkey =0;
for(int i =0; 50>i; i++){
   xsta[i] = 70*honkex;
   honkex+=1;
     if(honkex==10){
     honkex =0;
     }
     
     yList[i]=honkey;
     if(i==0){
     honkey =0;
     }
     
     
       if(i>=9){
     honkey =35;
     }
       if(i>=19){
     honkey =70;
     }
       if(i>=29){
     honkey =105;
     }
       if(i>=39){
     honkey =140;
     }
     
println(xsta);
}

void drawの中に書くもの

int skh = skx+290;
if(posY >400){
        if(posY<420){
          if(posX<skh){
            if(posX>skx){
              speedY =- speedY;
          }
        
        }
        
       }
     }

for(int i =0; 50>i; i++){
       rect(xsta[i], yList[i], 70,35);
     
       
       }

しかしさっきと違って「配列」で四角形を描きました。

この配列は何簡単にいうと「変数の集合体」なのです。今回みたいな場合、四角形を設置する場所を指定するための変数を作ろうとすると　５×10で50個と、とても多くなってしまいそれを設置するためだけに途方もない時間を使ってしまいます。そこで配列を使うことで指定した個数だけ変数を一括して非常に短時間で作ることができてしまうのです。

配列の名前は基本的に文字ではなく0から数字で名づけられます。

配列の書き方

Float [] 配列名 =new float[変数の個数]

配列に代入するデータは stringだと文字、intだと数値 floatだと小数点付きの数値を代入できます。

＊Honnkex honkey　という名前の変数名がありますが、これらは配列に座標を代入するときにｘ座標ｙ座標ともに指定した番号に設置するためのものです。ちなみにこれがないと今回のブロック崩しでは四角形が正確な位置に表示されません。

配列に数値を代入する場合はfor文という繰り返し命令がお勧めです。For文の書き方としては、

for( int i =0; 繰り返したい階数==i; i++){

繰り返したい命令}

のように書くだけでokです。　iとありますが、この文字は何でもいいです（半角で）

＊申し訳ありませんが、for文の詳しい解説は割愛させていただきます。

ここまで書いたコード

int skx =250;
int posX= 100;
int posY =201;
int speedX =5;
int speedY =5;
float [] xsta = new float[50];
float [] yList = new float[50];


void setup(){
size(700, 600);

    int honkex =0;
  int honkey =0;
for(int i =0; 50>i; i++){
   xsta[i] = 70*honkex;
   honkex+=1;
     if(honkex==10){
     honkex =0;
     }
     
     yList[i]=honkey;
     if(i==0){
     honkey =0;
     }
     
     
       if(i>=9){
     honkey =35;
     }
       if(i>=19){
     honkey =70;
     }
       if(i>=29){
     honkey =105;
     }
       if(i>=39){
     honkey =140;
     }
     
println(xsta);
}
  }



void draw(){
  background(0);
  

   for(int i =0; 50>i; i++){
       rect(xsta[i], yList[i], 70,35);
     
       }
  rect(skx, 420, 290, 10);
   ellipse(posX, posY, 8, 8);
   posX = posX + speedX; 
 posY = posY + speedY;

 // a =mouseX;
 
 
  if(posX < 8 || posX > width-8 ){
          speedX =- speedX;
      }

      if(posY > height||posY<8){
          speedY =- speedY;
      }
}

void keyPressed(){
  
  if(key == 'd'){
   
    skx +=10;
  
    
}

  if(key == 'a'){

    skx -= 10;
  
   
  }
  
  
  if (skx > width-290){
 
  skx -=10;
  }
    if (skx < 0){
 
  skx +=10;
    }
    
   
}

だいぶコードの量が長くなってきましたね。それでは最後に当たり判定を作っていきましょう。

for(int i=0; 50>i; i++){
     
     if(posX>xsta[i]&&posX<xsta[i]+70&&posY>yList[i]&&posY<yList[i]+35){
     
     xsta[i] = 10000000;
     speedY =-speedY;
     }
     
    if(posX+20==xsta[i]&&posY>yList[i]&&posY<yList[i]+35){
     
     speedX=-speedX;
     println("help");
    xsta[i] = 10000000;
    break;
     }
     
     if(posX-20==xsta[i]+70&&posY>yList[i]&&posY<yList[i]+35){
     
     speedX=-speedX;
      xsta[i] = 10000000;
      println("help");
      break;
     
     
     }

以下のようになったら成功です！！

～最後に～

今回はブロック崩しゲームを作ってきました。少しわからないところがある方もいるかもしれませんが、最初はそのまま書き写しでもokです。また、アレンジしてみるともっと面白いゲームができるかもしれないのでぜひやってみてください。

↓今回記述したソースコード

int skx =250;
int posX= 100;
int posY =201;
int speedX =10;
int speedY =10;
float [] xsta = new float[50];
float [] yList = new float[50];


void setup(){
size(700, 600);

    int honkex =0;
  int honkey =0;
for(int i =0; 50>i; i++){
   xsta[i] = 70*honkex;
   honkex+=1;
     if(honkex==10){
     honkex =0;
     }
     
     yList[i]=honkey;
     if(i==0){
     honkey =0;
     }
       if(i>=9){
     honkey =35;
     }
       if(i>=19){
     honkey =70;
     }
       if(i>=29){
     honkey =105;
     }
       if(i>=39){
     honkey =140;
     }
     
println(xsta);
}
  }

void draw(){
  background(0);
  int skh = skx+290;

   for(int i =0; 50>i; i++){
       rect(xsta[i], yList[i], 70,35);
       }
  rect(skx, 420, 290, 10);
   ellipse(posX, posY, 8, 8);
   posX = posX + speedX; 
 posY = posY + speedY;
  if(posX < 8 || posX > width-8 ){
          speedX =- speedX;
      }
       for(int i=0; 50>i; i++){
     if(posX>xsta[i]&&posX<xsta[i]+70&&posY>yList[i]&&posY<yList[i]+35){
     
     xsta[i] = 10000000;
     speedY =-speedY;
     }
     
    if(posX+20==xsta[i]&&posY>yList[i]&&posY<yList[i]+35){
     
     speedX=-speedX;
     println("help");
    xsta[i] = 10000000;
    break;
     }
     if(posX-20==xsta[i]+70&&posY>yList[i]&&posY<yList[i]+35){
     speedX=-speedX;
      xsta[i] = 10000000;
      println("help");
      break;
     }
   }
    if(posY >400){
        if(posY<420){
          if(posX<skh){
            if(posX>skx){
              speedY =- speedY;
            }
          }
        }
      }
}

void keyPressed(){
  
  if(key == 'd'){
    skx +=10;
}

  if(key == 'a'){

    skx -= 10;
  
  }
  
  if (skx > width-290){
  skx -=10;
  }
    if (skx < 0){
  skx +=10;
    }
}

最後までお読み頂きありがとうございます。

以下、コメ吉の記事になりますので、ご興味があればぜひご覧下さい。

>>プログラミング就職サポートをしてくれる！？ ITエンジア志望必見のスクールのご紹介！https://comekichi.com/2023/04/02/プログラミング-就職サポートをしてくれる！？-it/

>>hsp 文字や図形の表示にチャレンジ！コード、座標の使い方も確認！https://comekichi.com/2023/03/18/hsp-文字や図形の表示にチャレンジ！コード、座標/