「tmlib.js 怒濤の 100 サンプル!!」を試す その86

その86。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「図形(上級)」の「たくさん図形を描画してみよう(四角形)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
様々な色の四角形が描画されたと思います。

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
var SHAPE_NUM    = 64;
var SHAPE_SIZE   = 64;

tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 黒でクリア
canvas.clearColor("black");

// ブレンドを乗算に設定
canvas.globalCompositeOperation = "lighter";

// 描画
for (var i=0; i<SHAPE_NUM; ++i) {
var x = tm.util.Random.randint(0, canvas.width-SHAPE_SIZE);  // X 座標値
var y = tm.util.Random.randint(0, canvas.height-SHAPE_SIZE); // Y 座標値
var hue = tm.util.Random.randint(0, 360);                    // 色相
var color = "hsl({0}, 50%, 50%)".format(hue);

// 塗りつぶしスタイルを設定
canvas.fillStyle = color;
// 塗りつぶし描画
canvas.fillRect(x, y, SHAPE_SIZE, SHAPE_SIZE);
}
});

今回からの「図形(上級)」というカテゴリは今まで勉強したものを元に作成するプログラムです。
ゲームなんかをを作る前段階という感じですね。

6行目

SHAPE_NUM 」という変数を定義し、「 64 」という数値を設定しています。
これは四角形を何個作るのかを決める数値です。

7行目

SHAPE_SIZE 」という変数を定義し、「 64 」という数値を設定しています。
こちらは作成する四角形の大きさを決める数値です。

21行目

透明度・合成」というカテゴリで勉強した合成タイプの設定をしている行になります。
その56で勉強した合成タイプを指示しています。

24行目

他のサンプルでも登場したfor文です。
繰り返し処理を行うものでしたね。
ですのでこの行を簡単に訳すならば
– 「 i 」を「 0 」と定義し、「 i 」が「 SHAPE_NUM 」の数値なるまで処理を繰り返しなさい –
という感じです。細かく説明はこちらを参照してください。
SHAPE_NUM 」は6行目で定義した「 64 」という数値が適用されますので64回for文内の処理が繰り返されるということになります。

25行目

コメントにX座標値とあるように「 x 」という変数に座標を格納しています。
この行はちょっとわかりづらいのですが、tmlib.jsでランダムクラスというものが定義されておりそのクラスを用いて乱数を取得しています。

tm.util.Random.randint(0, canvas.width-SHAPE_SIZE)

tm.util.Random.randint(min, max) 」で最小値と最大値を指定して乱数を取得することができます。
これをサンプルであてはめてみると最小値は「 0 」ですが、最大値が「 canvas.width-SHAPE_SIZE 」となっており慣れないと理解しづらいかと思います。
わかってしまえば単純で画面の横幅から7行目で定義した四角形の大きさを引いているだけです。
canvas.width 」で横幅から「 SHAPE_SIZE 」を「 」で引き算します。
何故引いているのかというと四角形を描画した際に画面外や見切れたような描画を避けるためです。
何度リロードしても絶対外に描画されませんので試してみて下さい。
画面端にピッタリというのはありますけどね。

26行目

こちらも25行目と処理内容は同じです。
ただ25行目はX座標を決めていましたが、こちらはY座標だという違いだけです。

27行目

この行も基本的には25、26行目と同じで最小値と最大値を指定して乱数を取得しています。
0~360と決まっているので計算せずに値を直接指示しています。
コメントに色相とある通リ色を決める数値になります。

28行目

27行目て取得した色相の値を利用してHLSによる色を設定し「 color 」という変数に格納しています。
色の設定に続いて「 .format(hue) 」とありますが、これはformatの前に「 {} 」で括られている部分にformatの括弧内の変数を当てはめるというtmlib.jsのメソッドです。
文章だとイマイチわかりづらいのでリファレンスからサンプルを引用します。

 document.write("{0} + {1} = {2}".format(5, 10, 5+10)); // "5 + 10 = 15"
 document.write("rgb({r}, {g}, {b})".format({ // "rgb(128, 0, 255)"
 r: 128,
 g: 0,
 b: 255
 }));

上記の1行目の書き方を利用していることがわかりますね。
テキストとして出力するものの中に値や変数を使うことができて便利です。
従来のというかJavaScriptそのものではテキストの部分、変数の部分とわけて記述しないといけないのでよく見間違いをする僕としては大助かりなメソッドです。

31行目

28行目で決定した色等をここで設定しています。
設定だけで描画はまだしていません。

33行目

この行でやっと四角形を描画しています。
25、26行目でランダム値を取得した座標と定数で定義した四角形の大きさの値をパラメータとして指示し描画しています。
ここまでがfor文内の処理で1回ごとの流れになります。
終わったらまた24行目に戻り「 i 」の値が上限値に達するまで繰り返されます。

簡単なことをやっているようで実は準備が色々必要で、面倒だけどあーでもないこーでもないと考えるのが楽しかったりします。
enchant.jsも面白かったけどtmlib.jsもおもしろいなー


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です