3. 円と長方形を描く¶
3.1 画面の座標系¶
- ウィンドウ内の背景色を変えられる部分が 画面（シーン） で、Siv3D はこの領域に文字や図形、画像を表示できます
- 画面のサイズは、基本の状態では幅 800 ピクセル、高さ 600 ピクセルです
- 画面上の位置を表す座標系は、一番左上のピクセルを「X 座標 0」「Y 座標 0」を表す (0, 0) と表記し、右に進むと X 座標が大きく、下に進むと Y 座標が大きくなります
- 画面の一番右下のピクセルの座標は (799, 599) です
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
ClearPrint();
// 現在のマウスカーソル座標を表示する
Print << Cursor::Pos();
}
}
3.2 円を描く¶
- 何かを描く命令はメインループ内に記述します
- 円を描くときは
Circleを作成し、その.draw()を呼びます Circle{ x, y, r }は、中心座標が (x, y), 半径が r の円です
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
// 円を描く
Circle{ 400, 300, 20 }.draw();
}
}
Hint
簡単に説明すると、Circle は次のようなクラスです（実際にはこれ以外にもメンバがたくさんあります）。
3.3 円の色を変える¶
- 図形に色を付けたいときは
.draw()関数の引数に色を渡します。 ColorF{ r, g, b, a }によって、RGB に加えて不透明度 a を 0.0 以上 1.0 以下の範囲で指定できます- 不透明度は通常は 1.0 ですが、0.0 に近づくと背景が透過するようになり、0.0 で完全に透過します
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
Circle{ 100, 200, 40 }.draw();
Circle{ 200, 200, 40 }.draw(Palette::Green);
Circle{ 300, 200, 40 }.draw(Palette::Skyblue);
Circle{ 400, 200, 40 }.draw(ColorF{ 1.0, 0.8, 0.0 });
Circle{ 500, 200, 40 }.draw(ColorF{ 0.8 });
Circle{ 600, 200, 40 }.draw(HSV{ 160.0 });
Circle{ 700, 200, 40 }.draw(HSV{ 160.0, 0.5, 1.0 });
// 半透明の円を描く
Circle{ Cursor::Pos().x, Cursor::Pos().y, 80 }.draw(ColorF{ 0.0, 0.5, 1.0, 0.8 });
}
}
3.4 長方形を描く (1)¶
- 長方形を描くときは
Rectを作成して.draw()します Rect{ x, y, w, h }は、左上座標が (x, y), 幅が w, 高さが h の長方形ですRect{ x, y, s }は、左上座標が (x, y), 幅と高さが s の正方形です
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
// 長方形を描く
Rect{ 20, 40, 400, 100 }.draw();
// 正方形を描く
Rect{ 100, 200, 80 }.draw(Palette::Orange);
}
}
Hint
簡単に説明すると、Rect は次のようなクラスです（実際にはこれ以外にもメンバがたくさんあります）。
3.5 長方形を描く (2)¶
- 座標や大きさを
double型で扱いたい場合は、Rectの代わりにRectF使います
# include <Siv3D.hpp>
void Main()
{
double w = 0.0;
while (System::Update())
{
w += 0.2;
// 長方形を描く
RectF{ 20, 40, w, 100 }.draw();
}
}
Hint
簡単に説明すると、RectF は次のようなクラスです（実際にはこれ以外にもメンバがたくさんあります）。
3.6 円や長方形の枠を描く¶
- 図形の枠だけを描きたい場合、
.draw()の代わりに.drawFrame(innerThickness, outerThickness, color)を使います innerThicknessは内側方向への太さ、outerThicknessは外側方向への太さです
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
// 長方形の枠を描く
Rect{ 100, 100, 100, 30 }
.drawFrame(3, 0);
// 長方形の枠を描く
Rect{ 220, 100, 100, 30 }
.drawFrame(0, 3);
// 長方形の枠を描く
Rect{ 200, 200, 400, 100 }
.drawFrame(3, 3, Palette::Orange);
// 円の枠を描く
Circle{ Cursor::Pos(), 40 }
.drawFrame(1, 1, Palette::Seagreen);
}
}
3.7 グラデーションで長方形を描く¶
RectやRectFを.draw()する際、.draw(Arg::top = 色, Arg::bottom = 色)のように書くことで、上下のグラデーションで長方形を描画できますArg::top = 色には上側の色、Arg::bottom = 色には下側の色を指定します
