その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もおもしろいなー
