レッスン 23
クラスを学ぼう
クラスの考え方を用いてボールの落下アニメーションをつくります
チャプター1このレッスンのゴール
このレッスンで完成させるものを確認しよう
チャプター2クラスを定義しよう
2. 1 はじめに
このレッスンでは、クラスという考え方を学びます。クラスとは設計図のようなものです。
例えば、ゲームをつくる場合に、たくさんの図形が動いています。シューティングゲームの場合は少なくとも、自分（プレーヤ）と敵そして、弾(たま)があります。
特に敵は同じような動きをすることが多いですね。そのような場合、敵の数だけ変数を用意するのは大変です。配列もゲームの要素が多くなってくると複雑で分かりにくくなります。
そこでクラスの出番です。設計図を決めて、必要な機能があれば設計図に書き加えると、そこから作られるものに簡単に機能を追加できるようなイメージです。
2. 2 写してみよう
それでは、さっそくクラスをつくって、プログラムを書いてみましょう。
function setup() {
createCanvas(400, 400);
}
function draw() {
}
//ボールクラス
class Ball{
//初期の値
constructor(){
this.x = 200;
this.y = 200;
}
//表示のためのメソッド
show(){
ellipse(this.x, this.y, 30, 30);
}
}
この時点で実行しても、何も起こりません。まだ設計図であるクラスを書いただけだからです。
2. 3 コードの解説
ボールのクラスBallをつくりました。クラスとは、ボールの処理をまとめたものです。関数と似ていますが、区別しておきましょう。
関数とクラスの違い
簡単に書くと次の通りです。
- 関数
- プログラム中で何度も使う処理をまとめたもの
- クラス
- 「もの」をつくるための設計図のようなもの。変数や関数も含まれている。
クラスのつくり方
クラスの基本的なつくり方は次の通りです。
class クラス名{
constructor(){
//ここには、クラスからつくられるものの最初状態を書く（プロパティ）
}
メソッド名(){
メソッドの処理
}
}
初期の状態として、this.x = 200があります。これは、表示のためのメソッドshow()の中で、ellipse(this.x, this.y, 30, 30)のように使われています。
チャプター3クラスからボールの実体をつくり表示させよう
実際に設計図からボールをつくってみます。
3. 1 変更しよう
変更点は2行だけです。
function setup() {
createCanvas(400, 400);
}
function draw() {
+ var ballSimulation = new Ball(); //ボールクラスを実体化
+ ballSimulation.show(); //showメソッドを適用
}
//ボールクラス
class Ball{
//初期の値
constructor(){
this.x = 200;
this.y = 200;
}
//表示のためのメソッド
show(){
ellipse(this.x, this.y, 30, 30);
}
}
コードが書けたら実行してみましょう。円が描かれていればOKです。
3. 2 コードの解説
-
var ballSimulation = new Ball();
変数ballSimulationにBallクラスから新しく実体化した「もの」を代入しています。実体化したものをインスタンスといいます -
ballSimulation.show();
変数ballSimulationにshowメソッドを適用しています。メソッドとは関数と似たような意味で使われます。クラス（設計図）の中の関数をメソッドと呼ぶことが多いです。
メソッドの適用
show();というメソッドは、次のように書かれています。
//表示のためのメソッド
show(){
ellipse(this.x, this.y, 30, 30);
}
thisとは？
クラス内で現れるthisについて説明します。コンストラクタで書かれているthis.xは文字通り、「このエックス」とイメージしてください。この設計図からつくられたものは、全て最初「このエックス」を持っていることになります。
## 円を動かそう
次に書かれた円を動かしてみましょう。設計図に動く命令を書き加え、draw内でメソッドとして呼び出します。show();とmove();を使ってオブジェクトballSimulationに適用します。
### 変更しよう
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
var ballSimulation = new Ball(); //ボールクラスを実体化
ballSimulation.show(); //showメソッドを適用
+ ballSimulation.move(); //moveメソッドを適用
+ ballSimulation.show(); //showメソッドを適用
}
//ボールクラス
class Ball{
//初期の値
constructor(){
this.x = 200;
this.y = 200;
+ this.xspeed = 10;
+ this.yspeed = 0;
}
//表示のためのメソッド
show(){
ellipse(this.x, this.y, 30, 30);
}
+ //移動のためのメソッド
+ move(){
+ this.x += this.xspeed;
+ this.y += this.yspeed;
+ }
}
コードが書けたら実行しよう。円が動いて表示されていればOKだよ。
チャプター4重力の影響を設計図に書き加えよう
このチャプタでは、ボールの落下シミュレーションになるように、設計図に重力のような設定を書き加えていくよ。
4. 1 変更しよう
for文を使って、生成されたballsimulationに適用されているmoveメソッドとshowメソッドをそれぞれ10回繰り返す命令に変更しよう。背景もdraw内に書き加えよう。
function setup() {
createCanvas(400, 400);
}
function draw() {
+ background(220);
var ballSimulation = new Ball(); //ボールクラスを実体化
ballSimulation.show(); //showメソッドを適用
for(var step = 0; step < 10; step += 1){
ballSimulation.move(); //moveメソッドを適用
ballSimulation.show(); //showメソッドを適用
}
}
//ボールクラス
class Ball{
//初期の値
constructor(){
this.x = 200;
this.y = 200;
this.xspeed = 10;
this.yspeed = 0;
}
//表示のためのメソッド
show(){
ellipse(this.x, this.y, 30, 30);
}
//移動のためのメソッド
move(){
this.x += this.xspeed;
this.y += this.yspeed;
+ this.yspeed += 5
}
}
コードが書けたら実行してみよう。ボールが落ちるように描かれていればOKだよ。
4. 2 コードの解説
ボールクラスの移動のためのメソッドに重力の影響を書き加えました。それによりmoveのメソッドが実行されるたびに、ボールが重力の影響を受けたように移動するようになりました。
チャプター5配列でボールの数を100個にしよう
ボールの数を100個にしましょう。今回は設計図（クラス）に基づいて、ボールの実体を100個作る方法をとります。変数全てを配列にする方法ではないことに注意してください。
5. 1 変更しよう
function draw() {
background(220);
var ballSimulation = new Ball(); //ボールクラスを実体化
ballSimulation.show(); //showメソッドを適用
+ //配列を作成
+ var list_of_ballSimulation = [];
+ //配列の中にボールの実体を100個作成
+ for(var count = 0; count<100; count += 1){
+ list_of_ballSimulation.push( new Ball() );
+ }
+ for(var step = 0; step < 10; step += 1){
+ for( ballSimulation of list_of_ballSimulation){
ballSimulation.move(); //moveメソッドを適用
ballSimulation.show(); //showメソッドを適用
+ }
+ }
}
//ボールクラス
コードが書けたら実行してみよう。変化がありません。全く同じ場所に書かれているからです。次のチャプタで、ボールの設計図を書き換えて、ランダムな方向に飛んでいくように変更します。
5. 2 コードの解説
配列list_of_ballsimulationを作成して、その中にnew Ball()のインスタンスを100個実体化しました。その後、forの二重ループで各インスタンスに10回moveとshowのメソッドを適用しました。
全てに同じ動きが設定されているので、同じ所に重なって見えています。
チャプター6ボールの向きをランダムにしよう
ボールの最初の位置や動く速さを変更します。動く仕組みは設計図に集約されているので、このような変更も分かりやすく行えます。ついでに、ボールの大きさも少し小さくしましょう。
6. 1 変更しよう
ボールの動きの仕組みは同じなので、設計図を書き換えれば良いだけです。
//ボールクラス
class Ball{
//初期の値
constructor(){
this.x = 200 + random(-10,10);
this.y = 200 + random(-10,10);
this.xspeed = random(-30,30);
this.yspeed = random(-30,30);
}
//表示のためのメソッド
show(){
ellipse(this.x, this.y, 5, 5);
}
//移動のためのメソッド
move(){
this.x += this.xspeed;
this.y += this.yspeed;
this.yspeed += 5
}
}
コードが書けたら実行してみましょう。ボールが100個次のように四方八方に投げられていればOKです。
チャプター7色を変更しよう
色を変更します。これまでと同じように設計図を書き換えるだけです。
今回は、画面上全てのボールをランダムに変えるのではなく、表示されてから移動する間は一定の色である。つまり100個のボールそれぞれを塗り分けるようにしましょう。
7. 1 変更しよう
100個のボールは実体が作られるときに色が決まるようにしましょう。コンストラクタ内に、this.hueを宣言するとOKです。
まず、カラーモードをcolorMode(HSB)、線をnoStrok()に変更します。
function setup() {
createCanvas(400, 400);
colorMode(HSB);
noStroke();
}
次に、ボールクラスのコンストラクタ内で、初期値をthis.hueに設定して、表示の際に、this.hueで塗りを指定しましょう。
//ボールクラス
class Ball{
//初期の値
constructor(){
this.x = 200 + random(-10,10);
this.y = 200 + random(-10,10);
this.xspeed = random(-30,30);
this.yspeed = random(-30,30);
+ this.hue = random(0,60);
}
//表示のためのメソッド
show(){
+ fill(this.hue, 100,100);
ellipse(this.x, this.y, 5, 5);
}
//移動のためのメソッド
move(){
this.x += this.xspeed;
this.y += this.yspeed;
this.yspeed += 5
}
}
コードが書けたら実行してみよう。hueの値が0〜60の範囲内で、色が変化したボールが描かれていればOKです。
7. 2 コードの解説
色を変更しただけです。設計図であるBallクラス内に、this.hueをランダムで0〜60の範囲で値を設定し、showメソッド内で色を指定するためのthis.hueを用います。このようにすることで、Ballクラスから実体化されるたびに、色が指定されたボールが実体化して存在することになります。