猿頁

ここまで基礎資料とか調査情報とかを作ってきて、そろそろ自分でもなんか作ってみようかなーとかいう気になってきたような気がします。

ので、とりあえず四角形を描いてみることにしました。

まずはふつーに、DrawRectangle で。

まあなんかこんな感じで。

でもってソースはこんな感じで。

GraphicsWindow.Width=320
GraphicsWindow.Height=200
GraphicsWindow.DrawRectangle(50,50,50,50)

.Width と .Height は、このエントリに貼り付けやすくするために GraphicsWindow を小さくしたかっただけです。以下紹介するソースは基本的にこの 2 行を含んでいますが、長ったらしくなるのが嫌なので省略します。

で、上記ソースで描いた四角形ですが、私が思っていたより線が太いです。

1 ドット線で書かれるのかと思っていたんですが、拡大してみると

2 ドット線ですね。

図形描画時の線の太さは.PenWidth の値が使われますので、

GraphicsWindow.DrawRectangle(50,50,50,50)
TextWindow.WriteLine(".PenWidth = "+GraphicsWindow.PenWidth)

なるほど確かに「2」。.PenWidth はドット単位指定、という理解でよさそうです。

で。

線幅が 2 ドットで 50 × 50 の四角形を描いた場合、この余分な 1 ドットは四角形のどこ側にはみ出すのか？内側とか外側とか上側とか左側とか？

50 ではカウントが大変なので、10 ドットの四角形で試してみます。

GraphicsWindow.DrawRectangle(3,3,10,10)

よくわからないので、拡大してみます。

なるほど。内部の白い部分が 8 × 8 、黒枠の外側は 12 × 12 ドットとなります。基点 (3, 3) は黒枠の内側左上の点となっています。

ということで、

• 線の太さは指定図形の外側に肥大
• 基点は枠の内側左上

ということになりそうです。では、確認してみましょう。

今度はまったく同じ四角形を、ペンの太さだけ変えて同じ位置に 2 回描いてみます。黒枠の四角形を 4 ドット、赤枠の四角形を 2 ドットとして、

GraphicsWindow.PenWidth=4
GraphicsWindow.PenColor=GraphicsWindow.GetColorFromRGB(0,0,0)
GraphicsWindow.DrawRectangle(5,5,10,10)
GraphicsWindow.PenWidth=2
GraphicsWindow.PenColor=GraphicsWindow.GetColorFromRGB(255,0,0)
GraphicsWindow.DrawRectangle(5,5,10,10)

…あー。ちょいと違いますね。同心円ならぬ同心四角として描かれますので、線は外側に肥大するのではなく、指定された座標から内側・外側に等しく肥大しようとしているようですね。どうも外側→内側→…の順にかわりばんこに太くしていくようで、線の太さが偶数値の場合には外側に 1 ドット多くなるようです。

てことで、

• 線の太さは指定図形の外側→内側→外側→…と交互に肥大
• 基点は枠線の左上中点 ( 線の不当さが偶数の場合は 1 ドット内側 )

という理解の方が正しそうです。

では、線の太さが基数なら基点がぴったり中点になるかというと、

GraphicsWindow.PenWidth=1
GraphicsWindow.PenColor=GraphicsWindow.GetColorFromRGB(0,0,0)
GraphicsWindow.DrawRectangle(5,5,10,10)

アンチエイリアスがかかるというか、ボケます。指定した太さでシャープに描かれるわけではありません。

指定した太さ + 1 ドットの太さで、色を薄めて描かれるようです。

これは四角形だけではなく、用意されている 4 種類の図形描画 ( 残り 3 つは円/楕円、直線、三角形 ) のすべてがそんなルールみたいですね。

For i=0 To 1
  GraphicsWindow.PenWidth=i+1
  GraphicsWindow.DrawRectangle(10,10+60*i,50,50)
  GraphicsWindow.DrawEllipse(70,10+60*i,50,50)
  GraphicsWindow.DrawLine(130,10+60*i,180,10+60*i)
  GraphicsWindow.DrawTriangle(190,10+60*i,240,10+60*i,215,60+60*i)
EndFor

ドット単位で細かく描画したい時には気をつけないばいかんってことですね。

GraphicsWindow の Draw ～ 系ではなく、Shapes の Add ～ 系の描画ではどうでしょう。

For i=0 To 1
  GraphicsWindow.PenWidth=i+1
  Rect1=Shapes.AddRectangle(50,50)
  Shapes.Move(Rect1,10,10+60*i)
  Elps1=Shapes.AddEllipse(50,50)
  Shapes.Move(Elps1,70,10+60*i)
  Line1=Shapes.AddLine(130,10+60*i,180,10+60*i)
  Trgl1=Shapes.AddTriangle(190,10+60*i,240,10+60*i,215,60+60*i)
EndFor

うーん、これは微妙。

四角形は 1 ドット線でもアンチエイリアスなし、直線はあり、三角形は平行線のみなしという結果になりました。

リファレンスとしては同じような説明になっていますので、安易に「どっちでもいいやー」と混ぜ混ぜで使うと、ボケたりボケなかったりでなんともちぐはぐな画面になりかねんことになりそうです。

特性を充分理解した上で適切に使い分けていくとかなんかそんな感じでひとつ。

---

せっかく Add ～ 系の描画オペレーションにも言及しましたので、枠線の太さについても Draw ～ 系と同じように調べてみることにします。

Rect1=Shapes.AddRectangle(10,10)
Shapes.Move(Rect1,5,5)

これはわかりやすいというかなんというか。

線の太さは、図形の内側に向かって肥大していきます。

GraphicsWindow.PenWidth=1
Rect1=Shapes.AddRectangle(10,10)
Shapes.Move(Rect1,5,5)
GraphicsWindow.PenWidth=2
Rect2=Shapes.AddRectangle(10,10)
Shapes.Move(Rect2,20,5)
GraphicsWindow.PenWidth=3
Rect3=Shapes.AddRectangle(10,10)
Shapes.Move(Rect3,35,5)

ということで、Add ～ 系の描画は

• 線の太さは指定図形の内側に向かって肥大
• 基点は枠線の左上のいちばん外側の点

って理解でひとつ。

さて、Draw ～ 系描画オペレーションと Add ～ 系描画オペレーションを混ぜ合わせるとどうなるか。

試しに、

1. AddRectangle で四角形を描画。
2. DrawRectangle で四角形を描画。
3. 1.で描画した四角形を右下へスライド。

というプログラムで表示と動作を確認してみます。

Rect1=Shapes.AddRectangle(50,50)
Shapes.Move(Rect1,5,5)
GraphicsWindow.DrawRectangle(25,25,50,50)
Shapes.Animate(Rect1,45,45,2000)

  

後から書いても、Draw ～ 系はAdd ～ 系の「下側」に重なるように描かれますね。

Add ～ で書いた四角形が Draw ～ で描いた四角形の上を斜めに横切っても、Draw ～ 描画の四角形は消えたり乱れたりしません。

ゲームで言えば、Draw ～ 系は背景向き、Add ～ 系はスプライト ( キャラクター等動作するモノ ) 向きだと把握すればいいように思います。