一介のCS人の綴り

トップ > プログラミング > 創作プログラミング
Tweet

Siv3Dとは?

Siv3D は C++ で楽しく簡単にゲームやメディアアートを作れるライブラリで、短いコードで実装でき、音や画像で遊べる多くの機能を有し、環境の構築や技能の習得コストが非常に少ないと言われている。
詳細は公式HPにて→Play Siv3D!ゲームとメディアアートのための C++ ライブラリ「Siv3D」

ここでは、このライブラリに慣れるという趣旨で、簡単なプログラムを記述し実行して楽しんでいこう!ということで、「Siv3Dで遊ぼう!」というタイトルで数回記事を書いていきます。

what's new

2015/12/20
Siv3Dで遊ぼう! - No.4 (Siv3D Advent Calendar 2015 20日目) を投稿
2015/12/02
Siv3Dで遊ぼう! - No.3 を投稿
2015/11/27
Siv3Dで遊ぼう! - No.2 を投稿
2015/11/22
Siv3Dで遊ぼう! - No.1 を投稿

Siv3Dで遊ぼう! - No.1

ここでは公式HPにある色相環の回転のプログラムを理解し、改変した上、遊んでみようと思います!

int main(){→ クリックで開閉

ウインドウの設定

                    // ウィンドウのタイトルを設定する
	                Window::SetTitle(L"Test Program -siv3D App-");
	                // サイズを変えられるウィンドウにする
	                Window::SetStyle(WindowStyle::Sizeable);
	                //プログラム中で用いる文字サイズを30に設定する
	                const Font font(30);
                

上記のように、Window::SetTitle()やWindow::SetStyle()でウインドウのタイトルの変更したり、サイズ変更ができるようにした。 また、公式HPに記述があったように、データFontは処理に少し時間がかかるため、メインループ外で作成している。

while (System::Update()){→ クリックで開閉

メインループ

                            //毎回ウインドウを初期化する
                            while (System::Update()){
                                // マウスの位置を2次元ベクトルで保持
		                        Vec2 mouseP = Mouse::Pos();
		                        // マウスの位置を中心とする半径5の円を白色で描画
		                        Circle(mouseP, 5).draw(Palette::White);
                                /* 以下略 */
                            }
                        

メインループはwhile (System::Update()){}内に記述する。また、各ループ内におけるマウスポインタの位置を2次元ベクトル(Vec2型)で取得し、 その点を中心に半径5の白色で塗りつぶした点を描画している。

色相環の描画における位置の計算

                                    // 回転する色相環の描画
		                            for (int i = 0; i < 36; ++i){
                                        //描画する正方形の中心に対する位相[rad]を計算
			                            const double radian = Radians(i * 10 + System::FrameCount());
			                            //正方形の色をHSAで保持
			                            Color circulColor = HSV(i * 10);
			                            // 色相環の中心に対し、大きさ200、位相radianの2次元ベクトルを保持
			                            const Vec2 pos = Circular(200, radian);
			                            // 色相環A、Bそれぞれについて、描画する正方形のベクトルを計算
			                            const Vec2 pA = pos + 1.5 * Window::Center();
			                            const Vec2 pB = pos + 0.5 * Window::Center();
                                        /* 以下略 */
                                    }
                                
角度の説明図

36色の色相環を描画するため、各色相の位置を求めている。今回のプログラムでは2つの色相環を描画するため、各色相環の中心をベクトル1.5 * Window::Center()、 0.5 * Window::Center()とし、各色相の描画する角度を弧度法[rad]で計算している。また、各色相環の半径を200としている。
さらに、System::Update() が呼ばれた回数を返すSystem::FrameCount()を用いることで毎回のループで描画する色を1つずつずらし、色相環が回っているように描画している。
また、図にあるように各色相について同角度分傾けることによって、色相環の半径に直交するように描画できる。

2つの色相環において、同色同士を線分で結ぶ

                                    // 色相環A、Bそれぞれについて、描画する正方形のベクトルを計算
			                        const Vec2 pA = pos + 1.5 * Window::Center();
			                        const Vec2 pB = pos + 0.5 * Window::Center();
			
			                        // 始点pA 終点pB の線分を描く
			                        Line(pA, pB).draw(circulColor);
                                    /* 以下略 */
                                

先ほど求めた、各色相環について同ループ回数i内で描画する正方形、つまり同色circulColor=HSV(i * 10)の正方形をLine().draw()より描画している。

正方形の描画

                                    //正方形の1辺の長さ
			                        const double size = 25;
			                        // 色相環Aに対して
			                        const Rect rect1(pA.x, pA.y, size, size);
			                        // 描画する正方形上にマウスが存在するか
			                        if (!rect1.mouseOver){
				                        // 存在しなければradianだけ回転した半径sizeの正方形を、中心pAとなる色circulColorで描画
				                        RectF(size).setCenter(pA).rotated(radian).draw(circulColor);
			                        }
			                        else {
				                        // 存在した場合、そこに描画されるはずであった正方形の色を保持
				                        color = circulColor;
			                        }
			                        /* 色相環Bに対して同様の描画をする(以下省略) */
                                

一辺の長さをsize = 25とし、先ほど求めたpA、pBを中心に正方形を描画する。
ここでは、中心をpA、pBとし、高さ・幅ともにsizeの正方形内にマウスポインタが存在した場合はその正方形を描画せずに、その色のみを保持している。

←} // for (int i = 0; i < 36; ++i)

マウスポインタの座標の表示

                            // マウスポインタのある座標を色colorで表示
		                    font(Mouse::Pos()).draw(Window::Width() * 0.05, Window::Height() * 0.9, color);
                        

マウスポインタの座標を、通常白色で表示している。ここで、先ほど描画していない正方形があった場合、その描画するはずであった色でマウスポインタの座標を表示している。

←} // while (System::Update())
←} // int main()

ソースコードの全容

            # include <siv3d.hpp>
            void Main()
            {
	            Window::SetTitle(L"Test Program -siv3D App-");
	            Window::SetStyle(WindowStyle::Sizeable);
	            const Font font(30);
	            while (System::Update())
	            {
		            Vec2 mouseP = Mouse::Pos();
		            Circle(mouseP, 5).draw(Palette::White);
		            Color color = Palette::White;
		            for (int i = 0; i < 36; ++i)
		            {
			            const double radian = Radians(i * 10 + System::FrameCount());
			            Color circulColor = HSV(i * 10);
			            const Vec2 pos = Circular(200, radian);
			            const Vec2 pA = pos + 1.5 * Window::Center();
			            const Vec2 pB = pos + 0.5 * Window::Center();
			
			            Line(pA, pB).draw(circulColor);
			            const double size = 25;
			            const Rect rect1(pA.x, pA.y, size, size);
			            if (!rect1.mouseOver){
				            RectF(size).setCenter(pA).rotated(radian).draw(circulColor);
			            }
			            else {
				            color = circulColor;
			            }
			            const Rect rect2(pB.x, pB.y, size, size);
			            if (!rect2.mouseOver){
				            RectF(size).setCenter(pB).rotated(radian).draw(circulColor);
			            }
			            else {
				            color = circulColor;
			            }
		            }
		            font(Mouse::Pos()).draw(Window::Width() * 0.05, Window::Height() * 0.9, color);
	            }
            }
        

実行結果

実行結果

Comments

Top