siv3dで楽しむゲームとメディアアート開発
TRANSCRIPT
お絵かきアプリを作りたい！
Kinect のゲームってどうやって作るの？
http://news.microsoft.com/wp-content/uploads/2014/04/KinectforWindowsv2_03_Web.png
子供も楽しめるプログラミングツールを教えて！
# include <Siv3D.hpp>
void Main(){
Image image(640, 480, Palette::White);
DynamicTexture texture(image);
while (System::Update()){
if (Input::MouseL.pressed){
auto pos = Input::MouseL.clicked ? Mouse::Pos(): Mouse::PreviousPos();
Line(pos, Mouse::Pos()).write(image, 8, Palette::Blue);
texture.fill(image);}
texture.draw();}
}
# include <Siv3D.hpp>
void Main(){
Image image(640, 480, Palette::White);
DynamicTexture texture(image);
while (System::Update()){
if (Input::MouseL.pressed){
auto pos = Input::MouseL.clicked ? Mouse::Pos(): Mouse::PreviousPos();
Line(pos, Mouse::Pos()).write(image, 8, Palette::Blue);
texture.fill(image);}
texture.draw();}
}
# include <Siv3D.hpp>
void Main(){
KinectV2::Start();DynamicTexture depthTexture;std::array<Optional<KinectV2Body>, 6> bodies;
while (System::Update()){
if (KinectV2::HasNewDepthFrame())KinectV2::GetDepthFrame(depthTexture);
if (KinectV2::HasNewBodyFrame())KinectV2::GetBodyFrame(bodies);
depthTexture.draw(0, 0);
for (const auto& body : bodies)if (body)
for (const auto& joint : body->joints)Circle(joint.depthSpacePos,15).drawFrame(6,0,Palette::Red);
}}
# include <Siv3D.hpp>
void Main(){
KinectV2::Start();DynamicTexture depthTexture;std::array<Optional<KinectV2Body>, 6> bodies;
while (System::Update()){
if (KinectV2::HasNewDepthFrame())KinectV2::GetDepthFrame(depthTexture);
if (KinectV2::HasNewBodyFrame())KinectV2::GetBodyFrame(bodies);
depthTexture.draw(0, 0);
for (const auto& body : bodies)if (body)
for (const auto& joint : body->joints)Circle(joint.depthSpacePos,15).drawFrame(6,0,Palette::Red);
}}
# include <Siv3D.hpp>void Main() {
const Size blockSize(40, 20);const double speed = 8.0;Rect wall(60, 10);Circle ball(320, 400, 8);Vec2 ballSpeed(0, -speed);Array<Rect> blocks;for (auto p : step({ Window::Width() / blockSize.x, 5 }))
blocks.emplace_back((p*blockSize).moveBy(0, 60), blockSize);
while (System::Update()) {ball.moveBy(ballSpeed);wall.setCenter(Mouse::Pos().x, 420);
for (auto it = blocks.begin(); it != blocks.end(); ++it)if (it->intersects(ball)) {
(it->bottom.intersects(ball) || it->top.intersects(ball) ? ballSpeed.y : ballSpeed.x) *= -1;blocks.erase(it);break;
}
for (const auto& block : blocks)block.stretched(-1).draw(HSV(block.y - 40));
if (ball.y<0 && ballSpeed.y<0)ballSpeed.y *= -1;
if ((ball.x < 0 && ballSpeed.x < 0) || (Window::Width() < ball.x && ballSpeed.x > 0))ballSpeed.x *= -1;
if (ballSpeed.y>0 && wall.intersects(ball))ballSpeed = Vec2((ball.x - wall.center.x) / 8, -ballSpeed.y).normalized()*speed;
ball.draw();wall.draw();
}}
# include <Siv3D.hpp>void Main() {
const Size blockSize(40, 20);const double speed = 8.0;Rect wall(60, 10);Circle ball(320, 400, 8);Vec2 ballSpeed(0, -speed);Array<Rect> blocks;for (auto p : step({ Window::Width() / blockSize.x, 5 }))
blocks.emplace_back((p*blockSize).moveBy(0, 60), blockSize);
while (System::Update()) {ball.moveBy(ballSpeed);wall.setCenter(Mouse::Pos().x, 420);
for (auto it = blocks.begin(); it != blocks.end(); ++it)if (it->intersects(ball)) {
(it->bottom.intersects(ball) || it->top.intersects(ball) ? ballSpeed.y : ballSpeed.x) *= -1;blocks.erase(it);break;
}
for (const auto& block : blocks)block.stretched(-1).draw(HSV(block.y - 40));
if (ball.y<0 && ballSpeed.y<0)ballSpeed.y *= -1;
if ((ball.x < 0 && ballSpeed.x < 0) || (Window::Width() < ball.x && ballSpeed.x > 0))ballSpeed.x *= -1;
if (ballSpeed.y>0 && wall.intersects(ball))ballSpeed = Vec2((ball.x - wall.center.x) / 8, -ballSpeed.y).normalized()*speed;
ball.draw();wall.draw();
}}
C++ で 楽しく簡単にゲームやメディアアートを開発できるライブラリSiv3D を紹介 + 解説
自己紹介鈴木 遼（早稲田大学 表現工学専攻 修士 2 年）
2008 年から Siv3D を開発
「ゲーム開発者のための C++11/C++14」
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
画像や音や入出力デバイスを使って楽しいもの、表現的なものを作ろう！
有名なツール:Processing, openFrameworks, Cinder
Creative Coding
ほかには・・・
11 行 でイラストから 顔検出
26 行 で Twitter クライアント
38 行 で 音楽プレイヤー
短いコード
こんな人に便利学習プログラミングを教えている / 学んでいる人
ゲーム趣味でゲーム開発をしている人
メディアアートメディアアートを制作している人
ビジュアライゼーション研究でプログラムを書いている人
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
音や画像に関する低レイヤ～高レイヤの様々な機能を組み合わせて新しいアイデアを生み出せる
音楽と音声の処理 [1/3]
サウンドの再生コントロール再生, 一時停止, 音量 & スピード変更, 多重再生,再生位置取得 & 変更・フェードイン/アウト
録音マイクの録音データを波形データとして取得
5 種類のフォーマットをサポートWAVE, OggVorbis, MP3, AAC, WMAの読み込みと保存に対応
音楽と音声の処理 [2/3]
FFT (音の高さの解析）録音や再生している音声の周波数解析をリアルタイムに実行できる
波形生成プログラムの計算で波形データを作成できる
ピッチシフト & タイムストレッチサウンドの音の高さやテンポを再生しながら変更できる
音楽と音声の処理 [3/3]
拍のカウントBPM を指定すると拍のカウントを自動で計算してくれる
MIDIMIDI ファイルを再生したり、MIDI メッセージをプログラムで直接送信して音を鳴らせる
音の方向推定音が鳴った方向を推定する機能（Kinevt v2)
CGと画像処理 [1/3]
2D CG レンダリング図形や画像、テキストを画面に描く
3D CG レンダリング3D 形状や 3D モデルを画面に描く
・Deferred Rendering・最大 128 光源
CGと画像処理 [2/3]
画像処理ガウスぼかし、輪郭検出、フィルター、加工等ピクセル単位の処理もできる
10 種類のフォーマットに対応PNG, JPEG, BMP, TIFF, GIF, TGA, DDS, WebP, JPEG2000, PPM, の読み込みと保存に対応
Web カメラ画像取得PC のカメラの映像を使った処理ができる
CGと画像処理 [3/3]
AR マーカー / QR コード検出カメラの映像から AR マーカーやQR コードの情報を取得できる
顔の検出写真やカメラの映像、イラストから人間の顔を検出できる
画像に厚みを持たせて 3D モデル生成画像に形状を描けば、それに厚みを持たせて3D モデルを生成できる
音や画像に関する低レイヤ～高レイヤの様々な機能を組み合わせて新しいアイデアを生み出せる
まとめ
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
12 種類の入力デバイスに対応コードを 2, 3 行追加すればすぐにアプリで活用できる
対応デバイス [1/3]
対応デバイス [2/3]
対応デバイス [3/3]
12 通りの方法で遊べるブロック崩し[117行]
• AR マーカーを持ってカメラの前で左右に移動
• Kinect を傾けて三軸加速度センサの値を取得
• 口笛を吹くとその音の高さの場所にバーが移動
Demo: 12通りの方法で遊べるブロック崩し
12 種類の入力デバイスに対応コードを 2, 3 行追加すればすぐにアプリで活用できる
まとめ
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
音や画像を使うユニークな作品が生み出されている。教育での活用事例もある
HamSketch http://www.nicovideo.jp/watch/sm23493878
手描き風イラスト生成
曲と連動するタイピングソフトTYPL http://www.nicovideo.jp/watch/sm25640453
教育での活用事例早稲田大学の中高生向け IT 講座
情報科学を学ぶデジタル教材と・プログラミング講座に採用
ゲーム専門学校（香川）
1 年生向けの C++ の授業で教材として採用
http://www.anabuki-college.net/ack/news.cgi?Snumber=4162
Siv3D への声ユニティ・テクノロジーズ・ジャパン簗瀬 洋平さん
openFrameworksコミュニティマネージャーKyle McDonald さん
音や画像を使うユニークな作品が生み出されている。教育での活用事例もある
まとめ
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
C++11/14 規格に積極対応複雑な表現やインタラクションを短く明快なコードで実現
Variadic templates
Println(L"Hello, world!", 12345, L"!!!");
// Hello, world!12345!!!
Println(PyFmt, L"{2}/{1}/{0}", 2015, 5, 31);
// 31/5/2015
C++ Advent Calendar 201417 日目で紹介されているcppformat というライブラリを使用
ラムダ式
Array<Vec2> bullets;
...
Erase_if(bullets,
[](const Vec2& v) { return v.y > 500; });
KinectV2::GetDepthFrame(texture,
[](uint16 d){ return HSV(d / 4); });
Initializer list
const Vec2 pts[6] =
{
{ 50, 50 }, { 350, 50 }, { 350, 350 },
{ 200, 350 }, { 200, 200 }, { 50, 200 }
};
const Polygon polygon(pts);
polygon.draw(Color(92, 230, 138));
Initializer list
const Polygon polygon
{
{ 50, 50 }, { 350, 50 }, { 350, 350 },
{ 200, 350 }, { 200, 200 }, { 50, 200 }
};
polygon.draw({ 92, 230, 138 });
for ループのユーティリティ
for (auto i : step(5))
{
Println(i);
}
// 0 1 2 3 4
for (auto p : step({ 6, 4 }))
{
Rect(p.x * 50 , p.y * 30, 40, 20).draw();
}
詳しい実装: http://www.codeproject.com/Articles/876156/Convenient-Constructs-For-Stepping-Through-a-Range
BoostTokenizerCSV ファイルの読み込みで利用
Geometry多角形の幾何計算と一部の交差判定で利用
(Random)→ 標準ライブラリに入ったので不要に
(Optional) → コンパイルが重くなるため自前実装
(Visual Studio 向けに)
サンプルコードが最新の C++
ライブラリコードだけでなく、公式サイトのサンプルやリファレンスもすべてモダンな C++ で書かれている
スマートポインタ、nullptr, enum class, 乱数ライブラリ、正規表現、unordered_map, auto, ムーブ、初期化リスト、Emplacement,Alias template, 可変長引数テンプレート…
Siv3D で遊ぶと、自然に新しい C++ のコーディングに慣れる！
C++11/14 規格に積極対応複雑な表現やインタラクションを短く明快なコードで実現
まとめ
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
ゲーム開発に便利な機能を多数実装
便利な機能の例 [1/4]
あらゆる図形同士のあたり判定円、線分、四角形、多角形、あらゆる図形同士の高速な交差判定や包含判定
標準 GUIボタンやスライダー、ラジオボタンなどの基本的な GUI を標準で提供
アセットのリロード実行中に画像ファイルや音声ファイルを更新した場合、再起動せず即座に反映できる
便利な機能の例 [2/4]
スクショ・プレイムービーの保存スクリーンショットやムービーを保存することができる
ファイルのアーカイブ・データの暗号化複数のファイルをまとめたり、データに暗号 (AES-128bit) をかけて保護したりできる
シーン遷移シーンの遷移を簡単に記述できるC++ フレームワークを用意
便利な機能の例 [3/4]
BGM のフェードイン/フェードアウト時間を指定して BGM の再生や停止にフェードイン/フェードアウトを適用できる
INI, JSON, CSV, XML の読み書きデータ記述言語を多数サポートゲームのデータの保存や読み込みに活用できる
ファイルのダウンロード指定した URL からファイルをバックグラウンドでダウンロードできる
便利な機能の例 [4/4]
Draw call 取得描画のボトルネックを見つけるために、Draw call の発行回数を取得可能
起動時のロゴ表示起動時にオリジナルのロゴを表示できる
キーコンフィグキーやゲームコントローラのボタンを組み合わせて新しいキーを定義でき、キーコンフィグが簡単に
ゲーム開発に便利な機能を多数実装
まとめ
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
デモのコード
play-siv3d.hateblo.jp/entry/boost17
play-siv3d.hateblo.jp/entry/zengeren17
まとめ
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ
Array<Vec2> bullets;
...
Erase_if(bullets,
[](const Vec2& v) { return v.y > 500; });
Println(PyFmt, L”{2}/{1}/{0}”, 2015, 5, 31);
for (auto i : step(5))
{
Println(i);
}
あらゆる図形同士のあたり判定
標準 GUI
アセットのリロード
スクショ・プレイムービーの保存
ファイルのアーカイブ・データの暗号化
シーン遷移
BGM のフェードイン/フェードアウト
INI, JSON, CSV, XML の読み書き
ファイルのダウンロード
Draw call 取得
起動時のロゴ表示
キーコンフィグ
学習プログラミングを教えている / 学んでいる人
ゲーム趣味でゲーム開発をしている人
メディアアートメディアアートを制作している人
ビジュアライゼーション研究用のプログラムを書いている人
Web サイトplay-siv3d.hateblo.jp
Question?• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ