その78。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「ピクセル操作」の「砂嵐(カラー)を作ってみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
カラーの砂嵐が描画されたと思います。
/* * 定数 */ var SCREEN_WIDTH = 465; var SCREEN_HEIGHT= 465; tm.main(function() { // canvas インスタンス生成 var canvas = tm.graphics.Canvas("#world"); // 幅, 高さを指定 canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // 画面にフィットさせる canvas.fitWindow(); // ビットマップを取得 var bitmap = canvas.getBitmap(); for (var i=0,width=bitmap.width; i<width; ++i) { for (var j=0,height=bitmap.height; j<height; ++j) { // ピクセルをセット var r = tm.util.Random.randint(0, 255); var g = tm.util.Random.randint(0, 255); var b = tm.util.Random.randint(0, 255); bitmap.setPixel32XY(j, i, r, g, b, 255); } } // 描画 canvas.drawBitmap(bitmap, 0, 0); }
今回勉強するのは16~23行目になります。
16行目
canvasに描画されているビットマップの情報を取得し、「 bitmap 」という変数に格納しています。
17行目
「 for文 」といって繰り返し処理を行うときに使うものになります。
詳しくはコチラを参照してください。漫画と共に説明してありますのでわかりやすいです。
読んで頂いた上でサンプルのfor文がちょっと違うことに気がつくと思います。
「 width = bitmap.width 」この部分ですね。
16行目で取得したビットマップの横幅を「 width 」という変数に格納し、繰り返し上限値にしています。
上のサンプルを再生させたものであるならば「 i 」に1づつ足して0~465になるまで繰り返すということになります。
「 ++i 」で「 i 」に1づつ足すという意味になります。
ちなみに「 i++ 」でもOKです。
18行目
やっていることは17行目と同じです。
横幅が縦幅に変わっただけなんですが注意しないといけないのが17行目のfor文の処理内だということです。
横幅が1の時に縦幅は0~465まで繰り返し、横幅が2のときにまた、縦幅を0~465まで繰り返します。
横幅が465になるまで同じ事を繰り返します。
なんとなくイメージが沸いてきたでしょうか。
20~22行目
この3行の処理内容は同じものになります。
tmlib.js のランダムクラスを利用して0~255のランダム値を取得し「 r 」「 g 」「 b 」というそれぞれの変数に格納しています。
変数名からもわかるように色を決めるための数値ですね。
23行目
「 setPixel32XY( x, y, r, g, b, a ) 」でどこの座標に何色をセットするかを指示しています。
パラメータは下の表のようになります。
x | x座標 |
y | y座標 |
r | 赤(0~255) |
g | 緑(0~255) |
b | 青(0~255) |
a | 透明度 |
取得したランダム値を「 r 」「 g 」「 b 」それぞれに適用し色を表現しています。
透明度は255とそのまま数値で指示し、透明にさせないようにしてあります。
この段階ではまだ描画されていません。
描画の準備が終わった状態です。
28行目
ここで今まで準備したものを描画しています。
「 drawBitmap( bitmap, x, y ) 」についてはその76でも説明していますので復習も兼ねて確認してみてください。