お絵かきの基礎1
今までレベルがどうであれ、ちょっと堅苦しすぎで退屈な講座ばかりでした。
重要なポイントが詰まってはいますが、この先もこういうのばかりだと、
ウィンドウやマルチメディア(画像や音楽等)迄の道のりが果てしなく長く感じます。
そこでこの章は、特別企画(ウソ)で「お絵かきの素『描画』について」をテーマにします。
キャラクター(文字)ばかりではつまらないのでグラフィカルにしてみましょう。
まず、文字にも当てはまることですが、
単調なものの中から一際目を惹かせる要素である「色」について説明しましょう。
前章までにウィンドウ上にメッセージを表示しましたね。
いずれのテキストも全て黒、黒、黒…。
そんな中に一つだけ赤色や青色がポツッとあれば心がウキウキしませんか?
しませんか、そうですか…しませんね。
言いたかっただけなので気にしないでください。
もしかすると、内心嬉しくなったり感動を覚える方もいるかもしれませんが…。
そういった話はいいとして、下記がHSPで以後の色を設定する命令になります。
| color 赤輝度, 緑輝度, 青輝度 |
| | | |
| 赤輝度 | 赤要素を0〜255の範囲内で指定する。 |
| 緑輝度 | 緑要素を0〜255の範囲内で指定する。 |
| 青輝度 | 青要素を0〜255の範囲内で指定する。 |
color。色そのまんまですね。
色の決定は3つの数値で決定します。
赤と緑と青。RGB等という言葉を聞いたことありませんか?
光の三原色と呼ばれる色要素で、この三種の混ぜ具合でどのような色でも再現できるのです。
HSPでは各々を256段階で表現しますので、256の3乗、即ち最大で16,777,216色を再現できます。
1677万色をフルカラー(32bitカラー)と読んだりするのは聞いたことがあるかもしれません。
言葉の意味はイイとして、HSPではそれだけの範囲で表現できるのですよとだけ覚えておきましょう。
では使い方の説明に移ります。
輝度という表現が分かりにくいですが、要は色要素の強さです。
0〜255の範囲内から整数値で、それぞれの要素の強さはどれくらいにするかを指定します。
0ほど弱く255ほど強くなります。
HTMLでご自分のウェブサイトを持っている方はすぐに分かるかと思います。
HTMLも256段階で1要素を表し「#RRGGBB」形式になっていますからね。
と言ってもHTMLは16進数のために255はFFになるわけですが…。
話が少し反れてしまいました。
範囲外の数値を指定してもエラーにはなりませんが、要素の強さが一回転してしまいます。
つまり、0,1,2…244,245,256(0と同じ),257(1と同じ)…という具合ですね。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
color 255, 0, 0 // 色を設定する
mes "赤色になります。"
mes "次の色指定が来るまではずっと赤色のままです。"
wait 100
mes "時間が空こうが関係ありません。"
color 0, 255, 0 // 色を変更する
mes "ココで色の変更を行いました。緑ですね。"
repeat 3
mes "繰り返しやったところで同じなんですよ。"
loop
color , , 255 // 色を変更する(0, 0, 255)
mes "パラメータを0にする場合は省略して構いません。ちなみに青です。"
mes "現在のように先頭部を省略したい場合は、コンマだけは最低必要です。"
color 255 // 色を変更する(255, 0, 0)
mes "後のパラメータが0になる場合はコンマすらなくてもいいんですよ。"
color // 色を変更する(0, 0, 0)
mes "つまり全パラメータが0の場合はこのようにも書けるわけです。ちなみに黒。"
|
実際にどれくらいの強さをcolor命令のパラメータに指定すればどんな色になるかは、
調べ方はどうであれ、何度も繰り返し試すしかないかと思います。
それでも、全く何も分かっていなければ探すのに時間が掛かりすぎます。
下記を参考にしてある程度の色目安を把握しましょう。
color 255, 255, 255 // 白色
color 255, 0, 0 // 赤色
color 255, 255, 0 // 黄色
color 0, 255, 0 // 緑色
color 0, 255, 255 // 水色
color 0, 0, 255 // 青色
color 255, 0, 255 // 紫色
color 0, 0, 0 // 黒色
|
各々の色を使い切る(255)か、全く使わない(0)か、の表現だけで8種。
ココから、要素の色を大体半分にして弱すぎたらさらに半分分を足してみる。
強すぎたらさらに半分にしてみると言った二分探索方式で理想の色に近づけましょう。
HSP側で様々な色を再現出来ますが、ディスプレイ側で色を制限している場合は実現できません。
ディスプレイの解像度と色設定箇所で256色(8bitカラー)や65,536(16bitカラー)になっている等ですね。
何をやってもうまく色表現が出来ない場合は、この辺りも調べてみましょう。
さて、先ほどはcolor命令でテキストの色を変更してみましたが、
このcolor命令というのはテキストの色を変える為だけの命令ではありません。
点であったり線であったり領域を塗りつぶす色でもあります。
簡単なものから順に説明をしていきましょう。
まずは点の色から。
点と言うだけあって、ある一点のことを指します。
つまり、図上で言うXとY座標の二箇所が分かれば点を表現できると言うことです。
| pset X座標, Y座標 |
| | | |
| X座標 | 点の描画先X座標を指定する。 |
| Y座標 | 点の描画先Y座標を指定する。 |
pos命令と一緒ですから、pos命令が分かる方にはすぐに理解できるかと思います。
HSPウィンドウの左上を基点(0,0)として、
デフォルトではウィンドウサイズが640×480である為に右下が(639,479)になります。
このエリア内に点をセットすることで、現在色(カレントカラー)を使用して、指定座標に点を配置します。
pset命令のパラメータでも、数値0は省略することが出来ます。
先頭パラメータを省略する場合はコンマだけ、後半パラメータはコンマ毎省略しても構いません。
color 255, 0, 128 : pset 50, 220 // カレントカラー(255,0,128)で座標(50,220)に点を配置
color 64, 64, 255 : pset 320, 30 // カレントカラー(255,0,128)で座標(320,30)に点を配置
color 128, 255, 128
pos 55, 210 : mes "← 点を配置しました"
pos 325, 20 : mes "← 点を配置しました"
|
1行目と2行目で点を配置していますが、わかりにくいですね。
下記は複数配置しているので見えることでしょう。
直前のスクリプトで点を並べて、線を形成してみました。
曲線はHSP命令に用意されてませんが、
このような直線であれば下記命令一文で表すことができます。
| line 終点X座標, 終点Y座標, 始点X座標, 始点Y座標 |
| | | |
| 終点X座標 | 直線の終了点X座標を指定する。 |
| 終点Y座標 | 直線の終了点Y座標を指定する。 |
| 始点X座標 | 直線の開始点X座標を指定する。 |
| 始点Y座標 | 直線の開始点Y座標を指定する。 |
直線ですので4つ(両端X,Y)の座標が分かっていれば描画が出来るわけです。
パラメータ2つで1セット、それが2組の計4パラメータと言う指定ですね。
後から説明しますので、まずは引いてみましょう。
color , , 255
line 100, 50, 400, 250 // (100,50)と(400,250)を結ぶ
color 255
line 200, 400, 300, 100 // (200,400)と(300,100)を結ぶ
color , 255
line 400, 150, 200, 250 // (400,150)と(200,250)を結ぶ
color
line 150, 350, 250, 350 // (150,350)と(250,350)を結ぶ
|
一つ間違えそうなのがパラメータ1と2が終了点、3と4が開始点であるということです。
この点についてどのような影響があるかと言うと、
line命令の開始点はパラメータ3と4ですが、省略するとカレントポジションとなります。
line命令を実行すると、カレントポジションが終了点に移動する様になっている為、
コレを利用して下記のように先頭2つのパラメーだけで連続した直線を形成できるということです。
color 128, 128, 128
pos 100, 100 // カレントポジションを設定
line 150, 400 // line 150, 400, 100, 100 と同じ意味
line 200, 100 // line 200, 100, 150, 400 と同じ意味
line 250, 400 // line 250, 400, 200, 100 と同じ意味
line 300, 100 // line 300, 100, 250, 400 と同じ意味
line 350, 400 // line 350, 400, 300, 100 と同じ意味
line 400, 100 // line 400, 100, 350, 400 と同じ意味
line 450, 400 // line 450, 400, 400, 100 と同じ意味
line 500, 100 // line 500, 100, 500, 100 と同じ意味
|
また、環境に依存する様ですが、終了座標点は描画されないものが大半と言うことだそうです。
管理人の環境でも描画されたことはありません。
描画されたりされなかったりは時と場合によって変わるわけではなく(当たり前)、
GDI(描画するAPI)と呼ばれる問題であったり、はたまたディスプレイの問題であったりと
所変われば直接の要因も変わっている状態です。
ホントの原因は調べておらず、こんなことを聞いたことある程度なので気になる方は調べてみてください。
範囲的には全てを塗りつぶしているはずですよね?
上記スクリプトを実行して全て綺麗に塗りつぶされている人はおめでとう。
レアな環境をお持ちの人ということになるでしょう。
大半の人は中心に縦1本線が入っていることとと思います。
ま、こんなこともあるんだよ、と覚えておくと何か役立つ時が来ることでしょう。
最後にもう1つ、色の取得を行う命令を説明します。
画面上の一点の色取得を行うもので、一点の設定を行うpset命令に対し、pget命令になります。
| pget X座標, Y座標 |
| | | |
| X座標 | 点の取得元X座標を指定する。 |
| Y座標 | 点の取得元Y座標を指定する。 |
設定パラメータはpset命令同様に座標のみとなっています。
pget命令も座標が0になる場合、前半は値のみ、後半はパラメータごとの省略が出来ます。
つまり基点(0,0)の取得は「pget」、(0,0)の設定は「pset」だけで出来るということですね。
HSP2と比較して仕様が変わっている部分になりますが、
HSP2は各輝度がrval, gval, bvalというシステム変数にセットされ、
各々のシステム変数をcolor命令に設定するという作業が必要でした。
HSP3ではpget命令にて色を実行した時点でカレントカラーが取得した色に変わるようになっています。
また、各輝度を保持するシステム変数自体も廃止され、代わりにginfo_r, ginfo_g, ginfo_bという
システム変数のようなもの(マクロ)により、各輝度を取得できるように変わりました。
このマクロ自体については、pget命令でcolor命令に自動セットされるようになりましたし、
別途後の章で説明致しますので、とりあえずは今の所覚えておかなくても結構です。
color 90, 123, 45
pos 50, 50 : mes "取得元の色は現在の文字色になります"
pset 100, 100
color 200, 100, 200
pos 50, 150 : mes "一時的に異なる色に変えておきます"
pget 100, 100 // 取得元の座標を指定する(100,100)と以降のカレントカラーが変わる
pos 50, 200 : mes "先ほどの点の色に変わりました"
pos 50, 250 : mes "輝度は" + ginfo_r + "," + ginfo_g + "," + ginfo_b + "です" // カレントカラー取得
pget 99, 99
pos 50, 300 : mes "間違ってずれると背景色と同じ色となり、書かれてない状態と同じになります"
|
前半はコレくらいで終わりにします。
後半は領域の塗りつぶしと高速描画に関する説明を行います。