チュートリアル 3
◆描画とオーディオの 10 ステップ
Step 21. 長方形の枠を描く
Rect を作成し、drawFrame します
内側方向の幅と外側方向の幅、それぞれ設定できます
https://gyazo.com/53449a4e8212ec0dd9d2ed4440fd1164
code:cpp
# include <Siv3D.hpp>
void Main()
{
const Rect rect(100, 100, 400, 300);
while (System::Update())
{
// 長方形の内側に太さ 5 の白色の枠を描く
rect.drawFrame(5, 0, Palette::White);
// 長方形の外側に太さ 20 のオレンジの枠を描く
rect.drawFrame(0, 20, Palette::Orange);
}
}
Step 22. 円の枠を描く
Crcle を作成し、drawFrame します
内側と外側を合わせた幅の指定もできます
https://gyazo.com/8aa4ab737cc6f7adacc0e7bce6186f0a
code:cpp
# include <Siv3D.hpp>
void Main()
{
const Circle circle(350, 250, 200);
while (System::Update())
{
// 内側に太さ 5 の白い枠を描く
circle.drawFrame(5, 0);
// 外側に太さ 20 の赤い枠を描く
circle.drawFrame(0, 20, Palette::Red);
// 太さ 4 (内側に 2, 外側に 2) の黄色い枠を描く
Circle(400, 300, 80).drawFrame(4, Palette::Yellow);
}
}
Step 23. 複数の点をつないだ線を描く
LineString を作成し、draw します
https://gyazo.com/fa37fac50bfb3f9d4a9f3244222d8430
code:cpp
# include <Siv3D.hpp>
void Main()
{
LineString line;
line << Vec2(50, 100);
line << Vec2(600, 100);
line << Vec2(50, 200);
line << Vec2(600, 200);
line << Vec2(50, 300);
line << Vec2(600, 300);
line << Vec2(50, 400);
while (System::Update())
{
// 黄色い線を太さ 3 で描く
line.draw(3, Palette::Yellow);
}
}
<< を使わずに一気に指定することもできます
code:cpp
code:cpp
# include <Siv3D.hpp>
void Main()
{
// 線を作成
const LineString line
{
Vec2(50, 100), Vec2(600, 100),
Vec2(50, 200), Vec2(600, 200),
Vec2(50, 300), Vec2(600, 300),
Vec2(50, 400)
};
while (System::Update())
{
// 黄色い線を太さ 3 で描く
line.draw(3, Palette::Yellow);
}
}
Step 24. 正多角形を描く
Shape2D の関数群は、よく使われる形状定義を低コストで作成できます
Shape2D::Pentagon は正五角形を作成します
Shape2D::Hexaagon は正六角形を作成します
Shape2D::Ngon は正 N 角形 (N ≧ 3) を作成します
それぞれ、半径、中心座標、回転を指定します
https://gyazo.com/7f3957bb5ca4802a319637b3f6ef89a1
code:cpp
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
// 正五角形
Shape2D::Pentagon(50, Vec2(200, 100)).draw(Palette::Yellow);
// 正六角形
Shape2D::Hexagon(100, Vec2(450, 150)).draw(Palette::Orange);
// 30° 回転させた正六角形の枠
Shape2D::Hexagon(100, Vec2(200, 300), 30_deg).drawFrame(10, Palette::Skyblue);
// 正十角形
Shape2D::Ngon(10, 80, Vec2(450, 350)).draw();
}
}
Step 25. 星形を描く
Shape2D::Star は五芒星(普通の ★ の形)を作成します
引数は、半径、中心座標、回転です
Shape2D::NStar はいろいろな星形を作成します
引数は星の先端の数、外径、内径、中心座標、回転です
https://gyazo.com/f10018a6dd0d7bb2b4fe3017f2c66871
code:cpp
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
Shape2D::Star(150, Vec2(150, 150)).draw(Palette::Yellow);
Shape2D::NStar(8, 120, 60, Vec2(480, 200)).draw();
Shape2D::NStar(12, 90, 70, Vec2(300, 350)).draw(Palette::Skyblue);
}
}
Step 26. 文字を描く
Font を作成して、その変数を使って font(U"テキスト").draw() でテキストを描きます
Font を作るときにフォントのサイズと、オプションで書体を指定します
https://gyazo.com/04adef311505b5cbd2d7343f547c2f5d
code:cpp
# include <Siv3D.hpp>
void Main()
{
const Font font(40);
const Font fontBold(40, Typeface::Bold);
while (System::Update())
{
font(U"Hello!").draw(30, 30);
fontBold(U"Hello!").draw(30, 100);
}
}
Step 27. 絵文字を描く
Siv3D には標準で絵文字が用意されています。絵文字は Texture として読み込むことで画面に表示できます
絵文字は Emoji(U"読み込む絵文字") で指定します
拡大縮小表示のときに画質が低下するのを避けるため、Texture の第 2 引数には TextureDes::Mipped を指定します
Texture を作成し、Texture::drawAt で Texture を描きます
Texture::drawAt の引数には、画像の中心を置く座標を指定します
https://gyazo.com/8258245ea48baf256410c1a55c914ba2
code:cpp
# include <Siv3D.hpp>
void Main()
{
Graphics::SetBackground(ColorF(0.8, 0.9, 1.0));
const Texture textureA(Emoji(U"🐈"), TextureDesc::Mipped);
const Texture textureB(Emoji(U"🐕"), TextureDesc::Mipped);
while (System::Update())
{
textureA.drawAt(200, 200);
textureB.drawAt(400, 300);
}
}
Texture::resized したものを、TextureRegion::drawAt すると、拡大縮小したテクスチャを描けます
Texture::resized の引数には拡大縮小後のサイズをピクセルで指定します
絵文字のオリジナルサイズは 136 ピクセルです
https://gyazo.com/769f3788871b4ab61066886be49fa6fb
code:cpp
# include <Siv3D.hpp>
void Main()
{
Graphics::SetBackground(ColorF(0.8, 0.9, 1.0));
const Texture emojiCat(Emoji(U"🐈"), TextureDesc::Mipped);
const Texture emojiDog(Emoji(U"🐕"), TextureDesc::Mipped);
while (System::Update())
{
// 絵文字のテクスチャを 200 ピクセルに拡大して描く
emojiCat.resized(200).drawAt(200, 100);
// 絵文字のテクスチャを 50 ピクセルに縮小して描く
emojiDog.resized(50).drawAt(400, 400);
}
}
Texture::rotated したものを TexturedQuad::drawAt すると、回転したテクスチャを拡大縮小して描けます
回転の単位は 2π を 360° とするラジアンです
度数法をラジアンに変換する _deg サフィックスを使うこともできます。45_deg は 45° のラジアンを返します
https://gyazo.com/2230d3cf066e6605d4e84b5336e43cc5
code:cpp
# include <Siv3D.hpp>
void Main()
{
Graphics::SetBackground(ColorF(0.8, 0.9, 1.0));
const Texture emojiCat(Emoji(U"🐈"), TextureDesc::Mipped);
const Texture emojiDog(Emoji(U"🐕"), TextureDesc::Mipped);
while (System::Update())
{
emojiCat.rotated(45_deg).drawAt(200, 100);
emojiDog.rotated(-160_deg).drawAt(400, 400);
}
}
Step 28. 画像を読み込んで描く
画像ファイルを読み込んで Texture を作成します
画像ファイルのパスは実行ファイルが存在するディレクトリを基準にします
Texture を作成したら、Texture::draw で Texture を描きます
Texture::draw の引数には、画像の左上が描かれる座標を指定します
https://gyazo.com/cd98182a2736cf02f6a54a87a340050b
code:cpp
# include <Siv3D.hpp>
void Main()
{
const Texture texture(U"example/windmill.png");
while (System::Update())
{
// 位置 (100, 50) にテクスチャを描く
texture.draw(100, 50);
}
}
Step 29. 音楽を読み込んで再生する
音声ファイルを読み込んで Audio を作成します
音声ファイルのパスは実行ファイルが存在するディレクトリを基準にします
Audio を作成したら、play で再生、pause で一時停止、stop で停止・先頭に巻き戻しします
code:cpp
# include <Siv3D.hpp>
void Main()
{
const Audio audio(U"example/test.mp3");
while (System::Update())
{
if (Key1.down())
{
audio.play();
}
if (Key2.down())
{
audio.pause();
}
if (Key3.down())
{
audio.stop();
}
}
}
Step 30. 音を作成してを読み込んで再生する
楽器と音の高さと音の長さを指定して Audio を作成します
楽器の名前は GMInsturment:: から
音の高さは PianoKey:: から
音の長さは 1.2s (1.2 秒) のように指定します
同じ音を重ねて再生したい場合は playOneShot で再生します
code:cpp
# include <Siv3D.hpp>
void Main()
{
const Audio audioC4(Wave(GMInstrument::Harmonica, PianoKey::C4, 1.0s));
const Audio audioD4(Wave(GMInstrument::Harmonica, PianoKey::D4, 1.0s));
while (System::Update())
{
if (Key1.down())
{
audioC4.playOneShot();
}
if (Key2.down())
{
audioD4.playOneShot();
}
}
}