コンテンツにスキップ
プログラミング教材

1. プレイヤーをつくる

1. プレイヤーをつくる：Processingでフラッピーバード風ゲーム

1.プレイヤーをつくる

フラッピーバード風ゲームをつくっていきます。 この章では自分が動かすプレイヤーをつくっていきます。

フラッピーバードとは、2013年頃に世界中で流行したスマホゲームです。 鳥を操作して土管と土管の間をくぐり抜けるシンプルなゲームなのですが、あまりにも難しいことと、謎の中毒性から世界中で大ヒットしました。

Flappy Bird風ゲームのゲーム画面

図1：Flappy Bird風ゲームの例（参考画像）
出典：https://flappybird.io/ より引用（2026年4月28日閲覧）

シンプルで面白いことが保証されているフラッピーバードを参考に、Processingを使ってゲームプログラミングしていきます。

なお、現在本家フラッピーバードはAppStore上には存在せず、PC版のフラッピーバード風ゲームが存在しています。 フラッピーバードをプレイしたことがない人はまずはPC版のフラッピーバード風ゲームを一度プレイしてみると良いでしょう。

https://flappybird.io

1-1. 画面をつくる

基本となるゲーム画面をつくります。

setupとdrawを用意

void setup(){


}
void draw(){


}

setupは1回だけ実行されます。

drawはずっと繰り返し実行されます。1秒間に約60回のペースで実行されます。

img02.png

例えば、子供向けプログラミングソフト「Scratch」の例だと、「x座標を0、y座標を0にする」は1回だけ実行されます。 「ずっと」で囲まれた「10歩動かす」は繰り返し実行されます。

setupとdrawはまさにこのような関係です。

drawの中に書いたプログラムは、Scratchの「ずっと」のような存在と覚えておきましょう。

なお、この教材では、子供向けプログラミングソフト「Scratch」を使って、アルゴリズムを分かりやすく説明していますが、Scratchがわからなくても問題ないようにこの教材は作られておりますのでご安心ください。

画面を表示する

void setup(){
  size(600, 400);
}
void draw(){


}

setupの中に size(600, 400); という命令を書きました。

この命令は、「横幅600、縦幅400の画面をつくる」という命令になります。 size命令は必ずsetupの中で命令しないといけないというルールがあります。

実行ボタンを押して実行すると、長方形の画面が表示されたと思います。

img03.png

背景を黒色に塗りつぶす

void setup(){
  size(600, 400);
}
void draw(){
  background(0);
}

drawの中に background(0); という命令を書きました。

この命令は、「画面を指定された色（黒）で塗りつぶす」という命令になります。 「0」というのが黒色という意味になっています。ちなみに「255」とすると白色で塗りつぶすことになります。

ところで、backgroundはdrawの中に書きました。なぜdrawの中なのでしょうか？setupの中ではいけないのでしょうか？

drawは「ずっと」繰り返されると説明しました。 つまり、background命令をdrawの中に書くということは「ずっと黒色に塗りつぶす」ということになります。

簡単にいうと、一度表示したものを消すためにbackgroundで塗りつぶしています。 描いて消して、描いて消してをdrawの中で繰り返していきますので、drawの一番最初にbackground命令で塗りつぶしを入れています。

img04.png

1-2 四角形を表示する

四角形を表示するrect命令

void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  rect(100, 200, 50, 50);
}

drawの中に rect(100, 200, 50, 50); という命令を書きました。

これは

  • 「横100、縦200の位置に四角形を表示します」
  • 「大きさは横幅50、縦幅50で表示します」

という命令になります。

img05.png

四角形を動かすための変数を用意する

float x = 100;
float y = 200;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  rect(100, 200, 50, 50);
}

setupの上に、

float x = 100;

float y = 200;

と書きました。

これは変数と呼ばれ、数字に名前をつけておく機能です。

「x」とか「y」は名前ですので自由に名付けて良いのですが、一般的に、

  • 横の位置のことを「x」
  • 縦の位置のことを「y」

と呼びますので、わかりやすいようにみなさんも「x」と「y」を使いましょう。

変数の名付け方を「a」とか「b」とか「aa」とすると、あとで読み返したときに 「なんの数字だっけ？？？」 となります。

変数名は「分かりやすい名前にする」ことを覚えておいてください。

口に出して3回読みましょう。

  1. 「変数名は分かりやすい名前にする」
  2. 「変数名は分かりやすい名前にする」
  3. 「変数名は分かりやすい名前にする」

ここまで言っても「aaa」とか「bbb」とか、意味不明な変数名を名付ける人がいます。 そういう人は「自分がわかってればいい」と言いますが、翌日には「なんの数字が入った変数だっけ？」と言い出します。言わんこっちゃないです。

そんな人のために「はじめて読む人に説明しなくてもわかってもらえるような名前をつける」も3回読みましょう。

  1. 「はじめて読む人に説明しなくてもわかってもらえるような名前をつける」
  2. 「はじめて読む人に説明しなくてもわかってもらえるような名前をつける」
  3. 「はじめて読む人に説明しなくてもわかってもらえるような名前をつける」

はい、明日の自分でもわかるように名付けましょうね！

長くなりましたが、「x」なら「横の位置の数字だな」、「y」なら「縦の位置の数字だな」というのが誰が見ても、明日の自分が見ても分かりやすいので、そうしてください。

変数を使って四角形を表示する

float x = 100;
float y = 200;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  // ここが変わった！
  rect(x, y, 50, 50);
}

rect(100, 200, 50, 50); となっていたところが、 rect(x, y, 50, 50); に変更になりました。

今までは、rect命令の横の位置に「100」、縦の位置に「200」を伝えていました。 今回は、rect命令の横の位置に「x」、縦の位置に「y」を伝えていますね。

これは、数字の代わりに、数字に名前をつけた変数を伝えています。

変数「x」は float x = 100; としていました。 つまり、変数「x」は「100」に名前をつけたものなんですね。

変数「y」は float y = 200; としていました。 つまり、変数「y」は「200」に名前をつけたものです。

よって、 rect(x, y, 50, 50);は rect(100, 200, 50, 50);と命令しているのと同じ意味になります。

Scratchで表現すると、

img06.png

「x座標を100、y座標を200にする」としていたところを、

img07.png

「x座標をx、y座標をyにする」に変更したことになります。

「同じ意味なら、わざわざ変数を使う必要なくない？」と思うかもしれませんが、 「変数は中の数字を足したり引いたりできる」という性質があり、この性質を使って四角形を動かすことができるのです。

1-3 四角形に重力を与える

下に落ちるにはどうしたらいい？

フラッピーバードは何も操作しなければ重力でどんどん下に落ちていきます。 同じように、プレイヤーとなる四角形が自動的に下に落ちるようにしましょう。

さて、どうしたら四角形は自動的に下に落ちるようになるでしょうか？

  1. 四角形は、変数「x」「y」の位置に表示されます。
  2. 変数「x」は大きければ大きいほど右に表示されます。
  3. 変数「y」は大きければ大きいほど下に表示されます。

ということは、変数「y」がどんどん大きくなれば、四角形は下に表示されるようになりそうですね。

まずはScratch的に考えてみましょう。

img08.png

「ずっと」のブロックの中身に注目してください。 「yを1ずつ変える」というブロックがあります。 変数「y」は、「ずっと」ブロックの前に200にされていますので、 200から、201,202,203…210といった具合にyの数字が変わっていき、 変数「y」がどんどん大きくなっていきます。

このScratchのように、Processingでもプログラムできれば良さそうですね。

「yを1ずつ変える」をプログラミングする

float x = 100;
float y = 200;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  // ここを追加した！
  y = y + 1;
  rect(x, y, 50, 50);
}

drawの中に、 y = y + 1; を追加しました。

変数「y」の数字は最初は200でしたが、 y = y + 1; つまり y = 200 + 1; となり、変数「y」の数字は201となります。

drawの中に書かれているということは、「ずっと」なので、 y = y + 1; がずっと繰り返し実行されます。

1回目のdrawは、 y = 200 + 1;

2回目のdrawは、 y = 201 + 1;

3回目のdrawは、 y = 202 + 1;

100回目のdrawは、 y = 299 + 1;

となり、変数「y」の数字はどんどん大きくなっていきます。 ちょうどScratchの下の例と同じようにプログラミングできましたね。

img09.png

実行ボタンを押して実行してみましょう。 四角形が徐々に下に落ちていきましたね！

落ちるスピードをどんどんはやくする

「四角形が下に落ちていく」をプログラミングしました。 ですが、落ちるスピードが一定で、重力感がないですね。

落ちるスピードがどんどんはやくなるようにしてみましょう。

どうしたら落ちるスピードがどんどんはやくなるようになるでしょうか？

まずここで気づいて欲しいのが「落ちるスピード」が「どんどんはやくなる」ということは、 「落ちるスピード」が「変化する」と言えるということです。

「変化する」ということは・・・？

そう、変数の出番です！

Scratchで「落ちるスピードがどんどんはやくなる」ようにする

まずはScratchで「落ちるスピード」の変数を表現してみましょう。

img10.png

「落ちるスピード」を表す変数「speed」を用意しました。 「ずっと」の前で「speedを0にする」としています。 この0は無重力な状態ということです。

次に、この「落ちるスピード」が「どんどんはやくなる」ようにしましょう。 「どんどんはやくなる」というのは「どんどん大きくなる」ということですね。

img11.png

「ずっと」のブロックの中の最初に、「speedを1ずつ変える」としています。

こうすることによって、変数「speed」は1,2,3…10とどんどん大きくなります。

これで「落ちるスピード」が「どんどんはやくなる」ができました。

しかし、まだ終わりではありません。

「落ちるスピード」と変数「y」がなんの関わりも持っておらず、 「yを1ずつ変える」の部分は変わっていません。

四角形を表示する変数「y」の数字を、 「落ちるスピード」と同じ分だけ大きくしなければいけません。 どうしたらよいでしょうか？

img12.png

「yを1ずつ変える」のところが、 「yをspeedずつ変える」に変更しました。

こうすることによって、 落ちるスピードである変数「speed」が大きくなれば変数「y」が増える数字も大きくなります。

drawが実行されるたびに、変数「y」はどういう数字になるか見ておきましょう。

drawspeed（落ちるスピード）y = y + speed
0回目0200
1回目1201
2回目2203
3回目3206
4回目4210

どうでしょうか？ 「yを1ずつ変える」ときとは違って、drawが実行されるたびに変数「y」の数字が大きく増えていますね。

このように、変数と変数をかけあわせることができること覚えておきましょう。

さぁ、ここまではScratchでの例でした。 Processingでプログラムを書いてみましょう。

Processingで「落ちるスピードがどんどんはやくなる」ようにする

Scratchでやってきたことを思い出しましょう。

img13.png

  1. 「speedを0にする」
  2. 「ずっと」のなかで「speedを1ずつ変える」
  3. 「ずっと」のなかで「yをspeedずつ変える」

この3つをやりました。 まずはProcessingで「//（スラッシュを二つ）」を使ってコメントとして書いてみましょう。

float x = 100;
float y = 200;
// 1.speedを0にする
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  // 2.speedを1ずつ変える
  // 3.yをspeedずつ変える
  rect(x, y, 50, 50);
}
  • 「speedを0にする」は「ずっと」のブロックの外にありましたので、drawの外に。
  • 「speedを1ずつ変える」「yをspeedずつ変える」は「ずっと」のブロックの中にありましたので、drawの中に。

頭が整理できたでしょうか？ このように、いきなりプログラミングするのではなく、コメントとして1ずつ何をすればいいのか書いておくと頭が整理できて、混乱しません。

では、コメントどおりにプログラミングしてみましょう。

float x = 100;
float y = 200;
// 1.speedを0にする
float speed = 0;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  // 2.speedを1ずつ変える
  speed = speed + 1;
  // 3.yをspeedずつ変える
  y = y + speed;
  rect(x, y, 50, 50);
}

このようになりました。 理解できましたか？ 理解できない場合は、1行目からゆっくりと読んで理解しましょう。

実行ボタンを押して実行すると、四角形が徐々に落ちるスピードがはやくなり、重力感のある動きになったと思います。

1-4 クリックしたら四角形に浮力（ふりょく）を与える

今のままでは落ちてしまうだけなので、四角形が上昇するように浮力を与えましょう。

上昇するとはどういうことか？アルゴリズムを考えよう

上昇するにはどうしたらいいでしょうか？

「落ちるスピード」と同じように変数を使うのかな？と思った人は成長してますね！

変数を使いますが、すでに用意した変数「speed」をそのまま使います。

変数「speed」は「落ちるスピード」ですよね。

「落ちるスピード」は「0,1,2,3…」と自動で大きくなっていき、 「落ちるスピード」にあわせて変数「y」の数字も大きくなっていきます。 そのため、四角形は落ちていくようになりました。

では「落ちるスピード」を「マイナス」にしたらどうなるでしょうか？ ここでは仮に「落ちるスピード」の元々の数字を「-10（マイナス10）」としてみましょう。 「落ちるスピード」は「1ずつ変わる」のはそのままで、 変数「y」がどのように変化するのかみてみましょう。

drawspeed（落ちるスピード）y = y + speed
0回目-10200
1回目-9191
2回目-8183
3回目-7176
4回目-6170

drawが繰り返し実行されるたびに、変数「y」が小さくなっていますね。 変数「y」が小さくなっているということは、表示する縦の位置がより上になっているということです。

また、drawが実行されるたびに、落ちるスピードがどんどん大きくなるので、変数「y」が小さくなる量も減ってきています。 drawが11回目になれば「落ちるスピード」は「マイナス」から逆転し、1になります。 「落ちるスピード」が「プラス」になれば今まで通り、四角形は下に落ちていきます。

このように、変数を「プラス」にしたり「マイナス」にしたり、「変数と変数をかけあわる」ことによって、自然な動きを表現することができます。

これはプログラミングの考え方というよりは「アルゴリズム」の考え方です。

数字をどう扱えば自分がやりたい動きに近づけるか（アルゴリズム）を考えて、 プログラミングはそのアルゴリズムをコンピュータに実行させるということです。

同じシューティングゲームでも、ゲームルールが変われば（アルゴリズムが変われば）、プログラミングの仕方は変わってきます。

プログラミングでわからないことがあれば、

  • アルゴリズムがわからないのか
  • アルゴリズムをプログラミングする方法がわからないのか

自分の中で整理して考えましょう。

Scratchでプログラミング

アルゴリズムの説明をしました。 「落ちるスピード」を「マイナス」にすることで浮力になる、ということがわかりました。

まずはScratchでプログラミングしてみましょう。

img14.png

「このスプライトがクリックされたとき」のイベントを作成し、 その中で「speedを-10にする」をつくりました。

実際には「マウスがクリックされたとき」なのですが、Scratchに用意されていなかったため、 意味が近い「このスプライトがクリックされたとき」を代用しています。

こうすることによって、マウスがクリックされたときに、変数「speed」が「マイナス」に逆転して、浮力がうまれます。

「マウスがクリックされたとき」をプログラミングする

「マウスがクリックされたとき」をProcessingでやるには、setupとdrawに続いて「mousePressed関数」を使います。

void setup(){
  // 1回だけ実行される
}
void draw(){
  // ずっと繰り返し実行される
}
void mousePressed(){
  // マウスがクリックされたときのプログラムを書く
}

もう一度Scratchの画面を振り返りましょう。

img14.png

「クリックされたとき」にやっていることは「speedを-10にする」ですね。

では、Processingでコメントで書いてみましょう。

float x = 100;
float y = 200;
float speed = 0;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
// mousePressed関数を追加
void mousePressed(){
  // speedを-10にする
}

mousePressed関数を追加しました。

mousePressedの中に「speedを-10にする」をプログラミングすれば良いのですが、 書き方はわかるでしょうか？

void mousePressed(){
  speed = -10;
}

はい、こうですね。 「マイナス」にしたい場合は、そのまま単純に「-10」とすればOKです。

実行画面を押して実行してみましょう。 黒い画面をクリックするたびに少しジャンプし、次第にまた下に落ち出します。 フラッピーバードのような基本的な動きができましたね！

おまけ

ここまでプレイヤーとなる四角形の動きを作ってきました。

みなさんのプログラムコードはどうなっていますか？

こうなっていませんか？

悪い例1:「変数名が意味わからん」

float a = 100;
float aa = 200;
float b = 0;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  b = b + 1;
  aa = aa + b;
  rect(a, aa, 50, 50);
}
void mousePressed(){
  b = -10;
}

上の例だと意味が分かりにくいです。はじめて読む人に説明しなくてもわかってもらえるような名前をつけるようにしましょう。

悪い例2:「ぐちゃぐちゃ」

float a = 100;
float aa = 200;
float b = 0;
void setup(){
size(600, 400);
     }
     void draw(){
 background(0);
       b = b + 1;
      aa = aa + b;
    rect(a, aa, 50, 50);
      }
      void mousePressed(){
     b  = -10;
           }

どうすか？上の例、めちゃくちゃみづらいですよね。 間隔はきちんと取らないととっても読みづらくなります。 読みづらくなってしまった時は、

Processing > 編集 > 自動フォーマット

からきれいに整えましょう！