Formにグラフを描画しよう
C#とWindows Formを使ったシューティングゲーム作成記録です。まずは図形やグラフを表示させてみます。図形はキャラクターや敵キャラ、弾幕の弾の代わりです。のちのち画像などに差し替えてゲームらしくしていきますが、とりあえずはシンプルに図形を使うと簡単にコーディングできるかなと思います。またグラフは弾や敵キャラなど、自動的に動く物体の軌跡となります。直線的に進みながらプレイヤーに向かって弾を放ってくる敵キャラとか、画面内をジグザグに動いてくる敵キャラなどの動きをグラフによって作ります。
目次 Table of Contents
Windows formで円や矩形や直線などの図形を表示する
Windows formの画面上に図形を表示させてみます。図形の描画はDrawメソッド内に記述します。2点を結ぶ直線、矩形、円形の図形を描画してみます。
public partial class Form1 : Form
{
Point start;
Point end;
Pen penBlack;
Pen penGreen;
float radius;
int rectWidth;
int rectUnitHeight;
int baseX;
int baseY;
public Form1()
{
InitializeComponent();
start = new Point(300, 30);
end = new Point(100, 400);
penBlack = new Pen(Color.Black, 1);
penGreen = new Pen(Color.Green, 1);
radius = 100;
rectWidth = 20;
rectUnitHeight = 10;
baseX = 0;
baseY = 100;
}
protected override void OnPaint(PaintEventArgs e)
{
//Graphicsオブジェクトを取得
Graphics graphics = e.Graphics;
//直線
graphics.DrawLine(penBlack, start.X, start.Y, end.X, end.Y);
//矩形
Rectangle rect = new Rectangle(40, 40, 400, 200);
graphics.DrawRectangle(penBlack, rect);
//矩形を連続して描画
Rectangle[] rects = new Rectangle[]
{
new Rectangle(20, 350, 20, 40),
new Rectangle(50, 300, 40, 60),
new Rectangle(100, 400, 80, 30),
};
graphics.DrawRectangles(penGreen, rects);
//円形
graphics.DrawEllipse(penBlack, start.X, start.Y, radius, radius);
//矩形を使った棒グラフ
SolidBrush brush = new SolidBrush(Color.Blue);
int[] sampleValues = new int[] { 4, 8, 5, 2, 3 };
List<Rectangle> listRect = new List<Rectangle>();
for(int i = 0; i < 5; i++)
{
Rectangle graphUnit = new Rectangle((30 * i + baseX), (baseY – (rectUnitHeight * sampleValues[i])), rectWidth, rectUnitHeight * sampleValues[i]);
listRect.Add(graphUnit);
}
Rectangle[] myRects = listRect.ToArray();
//graphics.DrawRectangles(pen, myRects);
graphics.FillRectangles(brush, myRects);
}
}
Pointはint型の2つのペアの値をとる構造体です。2点を結ぶ直線は敵やブロックとの当たり判定を作るときなどに利用できます。
数学の関数を使って直線のグラフを描画する
今度は数学で出てくるような2次元のグラフを描いてみましょう。グラフを使うと、敵キャラや弾の動きのような時間によって変化する動きを作ることができます。簡単な例として、数学の「比例」関数を使って直線のグラフを描画してみます。
今度は2点を結ぶ直線ではなく、点の座標をループで変えながら描画して比例のグラフを描きます。
public partial class Form1 : Form
{
Point start;
Bitmap p;
public Form1()
{
InitializeComponent();
start = new Point(100, 100);
p = new Bitmap(1, 1);
}
protected override void OnPaint(PaintEventArgs e)
{
//Graphicsオブジェクトを取得
Graphics graphics = e.Graphics;
p.SetPixel(0, 0, Color.Black);
for (int i = 0; i < 200; i++)
{
graphics.DrawImage(p, i + start.X, i + start.Y);
}
}
}
グラフが右下がりになりました。多くのプログラミング環境では、描画エリアの左上を原点(0, 0)としてx軸を右方向に正、y軸を下方向に正という仕様になっているのでこのような形状になります。
放物線のグラフを描画する
今度は「放物線」のグラフを描画してみます。
放物線の関数は
y = x2
という形が基本形ですね。
そのままだと画面に半分しか表示されないため、グラフを右下方向に移動してやります。
public Form1()
{
InitializeComponent();
start = new Point(100, 100);
p = new Bitmap(1, 1);
}
protected override void OnPaint(PaintEventArgs e)
{
//Graphicsオブジェクトを取得
Graphics graphics = e.Graphics;
p.SetPixel(0, 0, Color.Black);
for (int i = 0; i < 200; i++)
{
graphics.DrawImage(p, i + start.X, (int)(0.01 * Math.Pow(i, 2)) + start.Y);
}
}
色々なグラフを組み合わせることで、敵キャラの動きなどにバリエーションを持たせることができそうですね。
