初心者のためのゲームプログラミング入門

プログラミングとゲームの杜

初心者のためのプログラミング入門 & ゲームプログラムの作り方入門

Processing 入門

7.アニメーションしよう

 

アニメーションというとテレビのアニメを思い浮かべる人もいるでしょう。
ここで覚えることはイメージと違うかもしれません。
しかし、根本的なしくみは同じなのです。

 

 

アニメーションの基本 その1

まずは次のプログラムを入力しましょう。
mouseX と mouseY の XY は大文字なので注意してください。

 

processing アニメーションのしくみ

 

setup() や draw() の後ろにあるのは波かっこ {} です。
大抵、Enter キーの横にあると思います。

 

波かっこでくくる

 

それでは実行してみましょう。
実行して開いたウィンドウのところにマウスカーソルを持っていき
適当に動かしてみてください。
次のように円が描かれると思います。

 

マウスカーソルの下に円を描く

 

 

もう1度、プログラムを見てみましょう。
setup() の波かっこ {} の中に書いた命令は1回だけ実行されます。
初期処理などはここに書きます。
draw() の {} の中は毎フレーム実行されます。

 

draw 関数で毎フレーム処理が行われる

 

draw() の中にある ellipse で円を描いてます。
そのとき、mouseX と mouseY を使ってマウスカーソルの座標を取得し、
その位置に円を描いているのでマウスの動きと連動するのです。

 

Processing でアニメーションさせるとき、setup() と draw() を使う方法が
一般的です。
draw() の中で絵を描きかえ、絵が動いているように見せます。

 

 

フレームレートとは

フレームレートとは簡単に言えば、1秒間に画像を描きかえる回数です。
もし1秒間に10回、画像を描きかえているならフレームレートは 10 ということに
なります。

下のページでフレームレートに関する簡単な説明をしています。
別の言語環境のものですが基本的なところは同じです。

[ フレームレートを変更する ]

 

 

Processing の場合、フレームレートの設定により draw() の実行回数が
変わってきます。
次のように frameRate を使ってフレームレートを変更してみます。

 

フレームレートを変更する

 

実行してみると違いがはっきりと分かるでしょう。
フレームレートを 10 にしたので1秒間に 10 回 draw() が実行されます。

 

フレームレートは指定しないと 60 です。
しかし、描画するものが沢山あったり、パソコンのスペックが足りなかったりすると
60 回描画されないこともあります。
処理が間に合わず描画回数が不安定になった時は、フレームレートを下げてみるもの
いいと思います。

 

 

マウスカーソルの座標を調べる方法

アニメーションとは関係ないのですが・・・
マウスカーソルの座標を調べる方法について説明します。

次のように println の行を追加してください。

 

マウスカーソルの座標を取得する

 

 

実行してみると次のように座標が表示されます。
mouseX と mouseY の内容は1フレームごとに更新されます。

 

カーソル座標を表示する

 

以前にも説明しましたが、座標の原点は左上になっています。
カーソルの位置と数値を見ながら、本当にそうなのか確認してみましょう。

 

 

アニメーションの基本 その2

次のように draw() の内容を変更してください。
println は削除して backgroud を追加します。
background を使って背景を黒 (0,0,0) で塗りつぶします。

 

アニメの基本は上書き

 

 

実行してみましょう。
カーソルを動かすと白い円が付いて回ります。

 

白い円がカーソルに付いてまわる

 

 

これが Processing のアニメーションの基本となります。
つまり、描画したものを新しい描画で上書きするのです。

今回の場合
全体を黒く塗りつぶす → 白い円を描く → 全体を黒く塗りつぶす → 白い円を描く →(略)
これを繰り返しているだけです。

 

 

次のようにプログラムを変更してください。

 

カーソルの左右でパッドを動かす

 

実行するとカーソルの左右にあわせて四角も左右に動きます。
これはブロック崩しゲームのラケットの動きですね。
Y座標は固定してX座標のみ利用するだけの簡単なプログラムです。

新しい描画で上書きする、これが基本となります。