配列を使ってみよう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2配列を使わずに3つの丸を制御しよう

2. 1 このレッスンの目標

このレッスンでは、配列について学びます。配列は変数をまとめて扱うことができます。 難しく感じるかもしれませんが、慣れると複数の図形を自由に制御できるようになります。ゲームづくりには欠かせない技術になるので、完全に習得できることを目指しましょう。

2. 2 配列を使う理由

多くのゲームは多数の図形が同時に動きます。動く図形ごとに変数を用意するのは、おすすめできません。例えばボール10個を別々のスピードで動かしたいとき、スピードの変数を10個宣言して、ランダムな値を代入するには、

var v1 = random(5);
var v2 = random(5);
var v3 = random(5);
...
...

var v10 = random(5);

としなければいけません。ボールが100個になったら…気の遠くなる作業ですね。配列を使うと、

var v = [];
for(i=0;i<10;i++){
    v[i] = random(5);
}

と書きます。100個の変数が必要であっても、i<10の部分をi<100と書き換えるだけです。それでは、実際にプログラムを作りながら、その便利さをつかみましょう。

2. 3 このレッスンですること

まず、円の拡大縮小のアニメーションをつくります。配列を使わずに処理を書くと、少し面倒です。が、今までの復習をかねて取り組みましょう。

次に配列を使って四角を拡大縮小させるアニメーションをつくります。配列を使えば、かなり簡単になることを感じられればOKです。

2. 4 写してみよう

//円と四角の最小サイズと最大サイズ
var minSize = 30;
var maxSize = 60

//円の変数
var e1Size;
var e2Size;
var e3Size;
var sp1=1;
var sp2=2;
var sp3=3;

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  
  //円の初期サイズ
  e1Size = minSize;
  e2Size = minSize;
  e3Size = minSize;

}

function draw() {
  background(220);
  
  //左上
  ellipse(100,100,e1Size,e1Size);
  e1Size += sp1
  if(e1Size >= maxSize || e1Size <= minSize){
    sp1 = -sp1
  }
  //左中
  ellipse(100,200,e2Size,e2Size);
  e2Size += sp2
  if(e2Size >= maxSize || e2Size <= minSize){
    sp2 = -sp2
  }
  //左下
  ellipse(100,300,e3Size,e3Size);
  e3Size += sp3
  if(e3Size >= maxSize || e3Size <= minSize){
    sp3 = -sp3
  }
  
}

コードが書けたら実行してみましょう。次のように3つの円が異なるタイミングで拡大縮小していればOKです。

2. 5 コードの解説

3つの円に共通する円の最大サイズと最小サイズ、3つの円で異なる位置と拡大縮小のスピードに関する変数を設定しています。この動きを実現するために変数が、8個必要になっています。

拡大縮小の処理はif文で、最大または最小になった場合にスピードにマイナス1をかけていること、rSize += spとしていることで実現されています。

チャプター3配列を使って3つの四角を制御しよう

配列を使うと、変数の数を種類ごとにまとめて管理することができます。今は3個で試していますが、配列を使うと100個にすることも簡単です。

3. 1 変更しよう

四角のサイズをeSize、拡大縮小のスピードをspという変数でまとめましょう。円のときは変数が6個であったことに対して、2個になります。

+ //四角
+ var rSize = [];
+ var rsp = [1,2,3];

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  

  //円の初期サイズ
  e1Size = minSize;
  e2Size = minSize;
  e3Size = minSize;

+  //四角の初期サイズ
+  for(i=0;i<3;i++){
+    rSize[i] = minSize;
+  }
}

  //左下
  ellipse(100,300,e3Size,e3Size);
  e3Size += sp3
  if(e3Size >= maxSize || e3Size <= minSize){
    sp3 = -sp3
  }
  

 + //四角
 + for(i=0;i<3;i++){
 +   rSize[i] += rsp[i];
 +   rect(300,100 + 100 * i, rSize[i], rSize[i]);
 +   if(rSize[i] >= maxSize || rSize[i] <= minSize){
 +     rsp[i] = -rsp[i];
 +   }
 + }
 
 }

コードが変更できたら実行してみよう。次のようになっていればOKだよ。

3. 2 コードの解説

配列を使って四角で同じ円と同じような動きを実現しています。配列を用いているため、rSizeとrspに四角の大きさ、スピードの情報をまとめることができました。 変数をまとめて扱える便利な道具であることが大切です。配列について、以下にて説明します。

配列の書き方

配列は複数の変数をまとめる役割を持っています。
配列は[]と角かっこで書きます。値（変数）はカンマ区切りで書くことができます。

var 配列の名前 = [値1,値2,値3,...]

次に、配列に値を代入します。3つの値をfor文を使って代入します。この方法を使えば100個になっても面倒ではありませんね。

配列とfor文

配列には、複数の値をまとめておくことができます。数が多くなっても、for文を使えば簡単に代入することができます。

for(i=0;i<配列に代入したい回数;i++){
配列[i] = 代入したい値
}

ここまでの処理で、各配列は次のようになっています。

rSize = [minSize, minSize, minSize];
rsp = [1,2,3];

これらを使って、次のように処理することが目標です。

右上にmiSize[1]描いて、rsp[1]で拡大縮小
右中にmiSize[2]描いて、rsp[2]で拡大縮小
右下にmiSize[3]描いて、rsp[3]で拡大縮小

for文を使って次のように書くことができます。

ここまで、変更ができたら実行してみましょう。四角形が3つ右に並んで拡大縮小していればOKです。

配列とfor文

配列には、複数の値をまとめておくことができます。数が多くなっても、for文を使えば簡単に代入することができます。

for(i=0;i<配列に代入したい回数;i++){
配列[i] = 代入したい値
}

次のレッスンでは、実際に大量の図形を動かすことに挑戦します。