ゲーム作成のwebページでわからないところがある

Question

前提・実現したいこと

http://www.greenowl5.com/gprogram/processing/processing100
この方のサイトを参考にしてゲームを作りたい。でもオブジェクトが落ちてくる仕組みがわからない。
oy［i ］とはどういう意味か。何で落下してくるのか教えてください。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[y_waiwai]

質問文は編集できます
無駄に質問建てないで編集しましょう

[Exxxxx]

編集してあります

Answer 1

もうちょっと手前から話をしたほうがいいのかしら。もうご存知のこともあるかと思いますが。

アニメーションってのは、基本的には、何か画を描いて、少し違う画を描いて...という繰り返しをすると人間の目には連続して動いているように見える、というのが原理です。

コンピュータ上では、少しずつ違う画を描く作業をプログラムで制御してやります。

さて。コンピュータ画面は(というかテレビの画像などもですけれど)小さな点々の集合で出来ています。
とりあえずProcessingでは、ウインドウの左上を座標0,0として、右に行くと(1,0), (2,0),...と最初の数字が大きくなり、下に行くと(0,1), (0,2), ...という番号が振られています。size(320,240);したら、横は(0,y)～(319,y)、縦は(x,0)～(x,239)で76800個の点々があり、これをプログラムで操ることで画を描きます。これを一つ一つどうするか人間が考えていてはちょっとやってられないので、四角だったり丸だったり、そういう画が描ける命令を用意しています。
で、四角を描くものがrect()。()の中には、どの位置にどんな大きさで描くかの情報を書きます。指示の仕方はいろいろ変えられるのですが、通常は左上の角の位置と四角の幅、高さの4つの情報を与えます。

そうすると、例えば

size(400, 400);
rect(5, 40, 30, 30, 5);

と命令すると、こんな画が描けるでしょう。

そうしたら、今度は「変数」を使って

int oy=40;
size(400, 400);
rect(5, oy, 30, 30, 5);

でも同じ画が描かれることを確認してから、

int oy = 40 + 10;
size(400, 400);
rect(5, oy, 30, 30, 5);

int oy = 40 + 20;
size(400, 400);
rect(5, oy, 30, 30, 5);

と数字を変えていってみましょう。どうなりますか。四角が描かれる位置がだんだん下がっていきます。
この数字の変化を「プログラム」で自動的に起こしてやれば四角が落ちるアニメーションが出来るわけです。
(ここで、他の数字も色々変えてどうなるか見るのもいい実験です。以降も同様。ちょっと変えてみて、何が起こるか見てみましょう。画面をいじるプログラムでパソコンが壊れたりすることはないので、恐れる必要はありません。)

さて。Processingのプログラムは、先程のように命令をベタに書いていくことも出来ますが(Static mode)、setup()とかdraw()という「関数」を定義することにより出来ることが多彩になります(Active mode)。このときには、void setup(){ }の{ }の中に書かれた命令を一度だけ実行し、その後 void draw(){ }の{ }の中に書かれた処理を(とりあえず一秒に60回:変更可)繰り返し実行します。では、やってみましょう。

int oy = 40;
void setup(){
  size(400,400);
}
void draw(){
  rect(5, oy, 30, 30, 5);
}

これだと、oyの値は変わらないので、静止した四角が描かれますね。ではいよいよ

int oy = 40;
void setup(){
  size(400,400);
}
void draw(){
  rect(5, oy, 30, 30, 5);
  oy = oy + 2; //次回に備えて2増やす
}

としてみましょうか。'='は(しばしばプログラミング初心者を悩ませるのですが)学校で習ったような数学的な右辺と左辺が等しいという意味ではなく、左辺の変数に、右辺を計算した結果の値を設定する(代入する)という意味の記号です。なお、今の左辺の変数の値に何か足したものを新しく変数に設定するときにはProcessingでは'+='という記号で書くことが出来ます。これがoy += 2;。(もちろん、同類の-=とか*=, /=なんてのもあります。)
こうすると、1/60秒毎にoyの値が2ずつ増えて42,44,46,...と変化するのて、「落ちる」様子が見えると思います。ただし、これだと「残像」が残ってしまっていますので、前の画を消してやるようにしましょう。

int oy = 40;
void setup(){
  size(400,400);
}
void draw(){
  background(204); //指定した色で全面を塗りつぶす命令。204はデフォルトのグレー
  rect(5, oy, 30, 30, 5);
  oy = oy + 2;
}

ここまで来たら、以降はTN8001さんの解説に続く...

Answer 2

urlが途中で切れていますが みどりを救え２ 配列と関数の引数 | Processing入門 | プログラミングとゲームの杜 ですね。

まず配列もforも使わず落下物だけを素朴に書いてみます。

int oy0; // 一番左の落下物のY座標
int oy1; // ↑の右隣の落下物のY座標
int oy2;
int oy3;
int oy4;
int oy5;
int oy6;
int oy7;
int oy8;
int oy9; // 一番右の落下物のY座標

void setup() {
  size(400, 400);
  noStroke();

  oy0 = 40;
  oy1 = 40;
  oy2 = 40;
  oy3 = 40;
  oy4 = 40;
  oy5 = 40;
  oy6 = 40;
  oy7 = 40;
  oy8 = 40;
  oy9 = 40;
}

void draw() {
  background(0);

  oy0 += 2;
  if (oy0 > height) oy0 = 40;
  oy1 += 2;
  if (oy1 > height) oy1 = 40;
  oy2 += 2;
  if (oy2 > height) oy2 = 40;
  oy3 += 2;
  if (oy3 > height) oy3 = 40;
  oy4 += 2;
  if (oy4 > height) oy4 = 40;
  oy5 += 2;
  if (oy5 > height) oy5 = 40;
  oy6 += 2;
  if (oy6 > height) oy6 = 40;
  oy7 += 2;
  if (oy7 > height) oy7 = 40;
  oy8 += 2;
  if (oy8 > height) oy8 = 40;
  oy9 += 2;
  if (oy9 > height) oy9 = 40;


  fill(255, 0, 0);
  rect(5, oy0, 30, 30, 5); // X座標,Y座標,幅,高さ,角のまるみ X座標は端にくっつかないように5pxあける Y座標はoy0の値
  rect(45, oy1, 30, 30, 5); // X座標は↑の落下物が幅30pxなのでそれにくっつかないように10pxあける Y座標はoy1の値
  rect(85, oy2, 30, 30, 5);
  rect(125, oy3, 30, 30, 5);
  rect(165, oy4, 30, 30, 5);
  rect(205, oy5, 30, 30, 5);
  rect(245, oy6, 30, 30, 5);
  rect(285, oy7, 30, 30, 5);
  rect(325, oy8, 30, 30, 5);
  rect(365, oy9, 30, 30, 5);
}

落下する仕組みはわかりましたでしょうか。
毎フレームoy0～oy9が2ずつ増えていき、画面外に出ると40に戻しています。

それにしても同じような処理をoy0～oy9分だけ書いており面倒です。
第一段階としてoy0～oy9を配列にまとめます。

int[] oy = new int[10]; // 落下物のY座標のあつまり

void setup() {
  size(400, 400);
  noStroke();

  oy[0] = 40; // 一番左の落下物（番号は0）のY座標
  oy[1] = 40; // ↑の右隣の落下物（番号は1）のY座標
  oy[2] = 40;
  oy[3] = 40;
  oy[4] = 40;
  oy[5] = 40;
  oy[6] = 40;
  oy[7] = 40;
  oy[8] = 40;
  oy[9] = 40;
}

void draw() {
  background(0);

  oy[0] += 2;
  if (oy[0] > height) oy[0] = 40;
  oy[1] += 2;
  if (oy[1] > height) oy[1] = 40;
  oy[2] += 2;
  if (oy[2] > height) oy[2] = 40;
  oy[3] += 2;
  if (oy[3] > height) oy[3] = 40;
  oy[4] += 2;
  if (oy[4] > height) oy[4] = 40;
  oy[5] += 2;
  if (oy[5] > height) oy[5] = 40;
  oy[6] += 2;
  if (oy[6] > height) oy[6] = 40;
  oy[7] += 2;
  if (oy[7] > height) oy[7] = 40;
  oy[8] += 2;
  if (oy[8] > height) oy[8] = 40;
  oy[9] += 2;
  if (oy[9] > height) oy[9] = 40;


  fill(255, 0, 0);
  rect(5, oy[0], 30, 30, 5);
  rect(45, oy[1], 30, 30, 5);
  rect(85, oy[2], 30, 30, 5);
  rect(125, oy[3], 30, 30, 5);
  rect(165, oy[4], 30, 30, 5);
  rect(205, oy[5], 30, 30, 5);
  rect(245, oy[6], 30, 30, 5);
  rect(285, oy[7], 30, 30, 5);
  rect(325, oy[8], 30, 30, 5);
  rect(365, oy[9], 30, 30, 5);
}

変数の宣言（int oy0;等）の10行を1行にまとめられましたが、たいしてうれしくありません。[]の分だけ逆に面倒に見えます^^;

配列はforと組み合わせて初めて力を発揮します。
[0]等の番号を変数で指定できるのです。

int[] oy = new int[10];

void setup() {
  size(400, 400);
  noStroke();

  for (int i = 0; i < 10; i++) {
    oy[i] = 40;
  }
}

void draw() {
  background(0);

  for (int i = 0; i < 10; i++) {
    oy[i] += 2;
    if (oy[i] > height) oy[i] = 40;
  }

  for (int i = 0; i < 10; i++) {
    fill(255, 0, 0);
    rect(i * 40 + 5, oy[i], 30, 30, 5); // i*40+5は5,45,85,125,165,...の変化の法則からiを使って表現できるように逆算します
  }
}

ほぼ参考コードと同じになりました。
oy[0]～oy[9]の数字部分をforループの変数iで置き換えています（iは0～9まで10回ループします）
冗長だったコードが非常にコンパクトになりました。

配列やforは躓きやすいところですが、逆に解説記事も非常に多いので「java 配列 for」等で検索してみてください。

Comments

[Exxxxx]

なるほど。
再度お尋ねしたいのですが、
oy［0］+=2ってどういうことですか？
あとその下のif文もわかりません

[TN8001]

まず
oy0 += 2;
if (oy0 > height) oy0 = 40;
は理解できていますか？

変数oy0の値を2増やす（oy0が40だったら42になる）
もしoy0の値がウィンドウ高さ（400）を超えていたら、oy0を40にする。
ですね？

oy[0] += 2;
if (oy[0] > height) oy[0] = 40;
は変数oy0の代わりに変数の集まり（配列）の1番目（番号では0）に、全く同じことをしています。
つまり変数oy0～oy9が、配列のoy[0]～oy[9]に置き換わっただけです（2個目のコード）

それに何の意味があるのかは、3個目のコードの通りです。

[Exxxxx]

教えてくれてありがとうございます。
+2する理由教えてください。

[TN8001]

＋２するのは落としたいからです
Y座標が増えると下にずれます。
なぜ2なのかは作者に聞いてみないとわかりません^^;
＋１でも＋３でもいいんです
変えるとどうなるか試してみてください^^