プロジェクトシートK(仮)

技術の吐き溜めなどなど

【2】Siv3Dという、c++フレームワークが凄い!

俺'dvent Calendar2日目です。なんか検索に引っかかりづらくしてるだけな気がするので、以降はAdventCalendarと書きます(当たり前)。
 
最初の技術記事は、最近僕がはまっているSiv3Dに関することでも書こうかなと思います。

Siv3Dとは…

ゲームとメディアアートのための C++ ライブラリ
Siv3D は C++ で楽しく簡単にインタラクティブなアプリケーションを作れるライブラリです。2D / 3D グラフィックスやオーディオを自在にコントロールし、KinectLeap Motion, カメラやマイクといった様々なデバイスを使った複雑なインタラクションを短いコードで書けます。

引用:
github.com

 
要するに、グラフィカルなアプリケーションをとっても簡単に記述できるようになるフレームワークです。実際に、グラフィカルなアプリケーション画面をたったの数十行程度で記述でき、「え、こんなんでいいの??」と感じさせてくれます。例えばRubyのコードを書いている様な感じ、といえばある程度伝わるのではないでしょうか。
 
日本人が開発した凄く便利なフレームワークなのですが、いかんせん知名度が低く、極一部の層にしか使われていないというのが大変勿体なく感じます。これに関する文献も、現時点ではそんなにない様に思えます。
そんなSiv3Dを持ち上げるべく、何度かにわたって取り上げたいと思います。今回は簡単な導入と、それを利用した簡単なUIを紹介します。

導入

VisualStudio2015が必須環境となります。僕の場合、これを導入するところから始めました。会員登録が必須となりますが、Microsoftの公式サイトより無料でインストールできます。
Visual Studio 2015 - Visual Studio

 
そして、公式リファレンスの通りに進めれば問題なく導入できるはずです。Macでは利用できないのがややネックですが…。
ダウンロードとインストール · Siv3D/Reference-JP Wiki · GitHub

 
VisualStudioを始めて利用する場合は、c++の開発環境をインストールするのも忘れないようにしましょう。「新しいプロジェクト」の中にc++の開発環境をインストールするメニューがあるはずです(自分はここで若干詰まっていました)。
 

Siv3Dの世界へ

ではSiv3Dを用いたコードを記述してみましょう。プロジェクトを新規作成し、Main.cppを開くと(プロジェクトを作成しただけでは開かれていないので注意)、次のようなコードが出てきます。

# include <Siv3D.hpp>
void Main(){
	const Font font(30);
	while (System::Update()){
		font(L"ようこそ、Siv3D の世界へ!").draw();
		Circle(Mouse::Pos(), 50).draw({ 255, 0, 0, 127 });
	}
}

これを実行してみた画面がこれです。
f:id:konkea:20161202224938p:plain
(PrtScの仕様でマウスカーソルが表示されてませんが…)

マウスカーソルを中心とした赤色の円が動きます。(gifを貼っても動かないみたいなので、後日動画を貼るかも…!)
このような、グラフィカルなプログラムがほんの10行足らずで書けてしまいます。


普段JavaのSwingとかでグラフィカルアプリケーションをガリガリ書いてた自分としては、記述量のあまりの少なさに驚愕していました。というか今みても少ないなこれw


こちらはリファレンスをそのまま引用したプログラムですが、なんとペイントアプリが10行程度で実装できます。

# include <Siv3D.hpp>

void Main(){
    Image image(Window::Size(), Palette::White);
    DynamicTexture texture(image);
    while (System::Update()){
        if (Input::MouseL.pressed){
            Line(Mouse::PreviousPos(), Mouse::Pos()).overwrite(image, 8, Palette::Orange);
            texture.fill(image);
        }
        texture.draw();
    }
}

f:id:konkea:20161202225611p:plain


記述量少ねぇ…


びっくりします。これがSiv3Dだ

ファイルシステムみたいな図形移動のUI

リファレンスを引っ張っただけで記事を終えるのも手抜きもいいところなので、簡単なUIの紹介をします。今回はマウスカーソルを使って図形をドラッグさせてみます。デスクトップのファイルを移動させるやつを想像してもらえれば分かるかと思います。

作成したプログラムがこれです。

# include <Siv3D.hpp>
void Main(){
	Vec2 position = Window::Center();
	bool isPressed = false;
	while (System::Update()){
		Circle circle(position, 50);
		if (circle.leftClicked) {
			isPressed = true;
		}
		if (Input::MouseL.released) {
			isPressed = false;
		}
		if (isPressed) {
			position += Mouse::Delta();
		}
		circle.draw(Palette::Yellow);
	}
}

初期画面
f:id:konkea:20161202231155p:plain
f:id:konkea:20161202231206p:plain


いちいちisPressed変数を使うのも冗長に感じるかもしれないけど、こうする理由もあります。circle.leftClickedだけを使ってドラッグ判定をすると、マウスを高速で動かしたときにカーソルが図形をはずれてしまい、フラグがfalseに変わってしまいます。そこで「図形がクリックされればisPresseedをtrueに、マウスが離された時にfalseにする」とすれば、マウスを離さない限り図形がドラッグされ、しっくりとくるUIが実装できます。


ということで、ここまで記述が楽だといろんな動作をさせてみたくなりますよね。今回の記事はこれで締めますが、今後もSiv3Dに関するいろいろなUIやアプリケーションを紹介していこうかなと思います!