Boost.勉強会 #17 東京 「Siv3Dで楽しむゲームとメディアアート開発」 第 17 回全ゲ連「Siv3D でサクッとゲームを作ろう」 のマージ版

2. お絵かきアプリを作りたい！

3. Kinect のゲームって
どうやって作るの？
http://news.microsoft.com/wp-content/uploads/2014/04/KinectforWindowsv2_03_Web.png

4. 子供も楽しめるプログラミング
ツールを教えて！

5. # 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();
}
}

6. # 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();
}
}

7. # 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);
}
}

8. # 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);
}
}

9. # 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();
}
}

10. # 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();
}
}

11. C++ で 楽しく簡単に
ゲームやメディアアートを
開発できるライブラリ
Siv3D を紹介 + 解説

12. 自己紹介
鈴木 遼（早稲田大学 表現工学専攻 修士 2 年）
2008 年から Siv3D を開発
「ゲーム開発者のための C++11/C++14」

13. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

14. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

15. 画像や音や入出力デバイスを使って
楽しいもの、表現的なものを作ろう！
有名なツール:
Processing, openFrameworks, Cinder
Creative Coding

16. ほかには・・・
11 行 でイラストから 顔検出
26 行 で Twitter クライアント
38 行 で 音楽プレイヤー
短いコード

17. こんな人に便利
学習
プログラミングを教えている / 学んでいる人
ゲーム
趣味でゲーム開発をしている人
メディアアート
メディアアートを制作している人
ビジュアライゼーション
研究でプログラムを書いている人

18. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

19. 音や画像に関する
低レイヤ～高レイヤの
様々な機能を組み合わせて
新しいアイデアを生み出せる

20. 音楽と音声の処理 [1/3]
サウンドの再生コントロール
再生, 一時停止, 音量 & スピード変更, 多重再生,
再生位置取得 & 変更・フェードイン/アウト
録音
マイクの録音データを波形データとして取得
5 種類のフォーマットをサポート
WAVE, OggVorbis, MP3, AAC, WMAの
読み込みと保存に対応

21. 音楽と音声の処理 [2/3]
FFT (音の高さの解析）
録音や再生している音声の周波数解析を
リアルタイムに実行できる
波形生成
プログラムの計算で波形データを作成できる
ピッチシフト & タイムストレッチ
サウンドの音の高さやテンポを
再生しながら変更できる

22. 音楽と音声の処理 [3/3]
拍のカウント
BPM を指定すると
拍のカウントを自動で計算してくれる
MIDI
MIDI ファイルを再生したり、MIDI メッセージをプ
ログラムで直接送信して音を鳴らせる
音の方向推定
音が鳴った方向を推定する機能（Kinevt v2)

23. デモ: 音声処理を活用するユーザ作品
http://www.nicovideo.jp/watch/sm22665548

24. CGと画像処理 [1/3]
2D CG レンダリング
図形や画像、テキストを画面に描く
3D CG レンダリング
3D 形状や 3D モデルを
画面に描く
・Deferred Rendering
・最大 128 光源

25. CGと画像処理 [2/3]
画像処理
ガウスぼかし、輪郭検出、フィルター、加工等
ピクセル単位の処理もできる
10 種類のフォーマットに対応
PNG, JPEG, BMP, TIFF, GIF, TGA, DDS, WebP,
JPEG2000, PPM, の読み込みと保存に対応
Web カメラ画像取得
PC のカメラの映像を使った処理ができる

26. CGと画像処理 [3/3]
AR マーカー / QR コード検出
カメラの映像から AR マーカーや
QR コードの情報を取得できる
顔の検出
写真やカメラの映像、イラストから
人間の顔を検出できる
画像に厚みを持たせて 3D モデル生成
画像に形状を描けば、それに厚みを持たせて
3D モデルを生成できる

27. 音や画像に関する
低レイヤ～高レイヤの
様々な機能を組み合わせて
新しいアイデアを生み出せる
まとめ

28. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

29. 12 種類の
入力デバイスに対応
コードを 2, 3 行追加すれば
すぐにアプリで活用できる

30. 対応デバイス [1/3]

31. 対応デバイス [2/3]

32. 対応デバイス [3/3]

33. 12 通りの方法で
遊べるブロック崩し
[117行]
• AR マーカーを持ってカメラの前で左右に移動
• Kinect を傾けて三軸加速度センサの値を取得
• 口笛を吹くとその音の高さの場所にバーが移動

34. Demo: 12通りの方法で遊べるブロック崩し

35. 12 種類の
入力デバイスに対応
コードを 2, 3 行追加すれば
すぐにアプリで活用できる
まとめ

36. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

37. 音や画像を使う
ユニークな作品が
生み出されている。
教育での活用事例もある

39. HamSketch http://www.nicovideo.jp/watch/sm23493878
手描き風イラスト生成

40. 曲と連動するタイピングソフト
TYPL http://www.nicovideo.jp/watch/sm25640453

41. 教育での活用事例
早稲田大学の中高生向け IT 講座
情報科学を学ぶデジタル教材と・
プログラミング講座に採用
ゲーム専門学校（香川）
1 年生向けの C++ の授業で
教材として採用
http://www.anabuki-college.net/ack/news.cgi?Snumber=4162

42. Siv3D への声
ユニティ・テクノロジーズ・ジャパン
簗瀬 洋平さん
openFrameworks
コミュニティマネージャー
Kyle McDonald さん

43. 音や画像を使う
ユニークな作品が
生み出されている。
教育での活用事例もある
まとめ

44. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

45. C++11/14 規格に積極対応
複雑な表現や
インタラクションを
短く明快なコードで実現

46. 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 2014
17 日目で紹介されている
cppformat というライブラリ
を使用

47. ラムダ式
Array<Vec2> bullets;
...
Erase_if(bullets,
[](const Vec2& v) { return v.y > 500; });
KinectV2::GetDepthFrame(texture,
[](uint16 d){ return HSV(d / 4); });

48. 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));

49. Initializer list
const Polygon polygon
{
{ 50, 50 }, { 350, 50 }, { 350, 350 },
{ 200, 350 }, { 200, 200 }, { 50, 200 }
};
polygon.draw({ 92, 230, 138 });

50. 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

51. Boost
Tokenizer
CSV ファイルの読み込みで利用
Geometry
多角形の幾何計算と一部の交差判定で利用
(Random)
→ 標準ライブラリに入ったので不要に
(Optional)
→ コンパイルが重くなるため自前実装
(Visual Studio 向けに)

52. サンプルコードが最新の C++
ライブラリコードだけでなく、
公式サイトのサンプルやリファレンスも
すべてモダンな C++ で書かれている
スマートポインタ、nullptr, enum class, 乱数ライブラリ、正規表現、
unordered_map, auto, ムーブ、初期化リスト、Emplacement,
Alias template, 可変長引数テンプレート…
Siv3D で遊ぶと、
自然に新しい C++ のコーディングに慣れる！

53. C++11/14 規格に積極対応
複雑な表現や
インタラクションを
短く明快なコードで実現
まとめ

54. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

55. ゲーム開発に便利な機能を
多数実装

56. 便利な機能の例 [1/4]
あらゆる図形同士のあたり判定
円、線分、四角形、多角形、あらゆる図形同士の
高速な交差判定や包含判定
標準 GUI
ボタンやスライダー、ラジオボタンなどの
基本的な GUI を標準で提供
アセットのリロード
実行中に画像ファイルや音声ファイルを
更新した場合、再起動せず即座に反映できる

57. 便利な機能の例 [2/4]
スクショ・プレイムービーの保存
スクリーンショットやムービーを
保存することができる
ファイルのアーカイブ・データの暗号化
複数のファイルをまとめたり、データに暗号 (AES-
128bit) をかけて保護したりできる
シーン遷移
シーンの遷移を簡単に記述できる
C++ フレームワークを用意

58. 便利な機能の例 [3/4]
BGM のフェードイン/フェードアウト
時間を指定して BGM の再生や停止に
フェードイン/フェードアウトを適用できる
INI, JSON, CSV, XML の読み書き
データ記述言語を多数サポート
ゲームのデータの保存や読み込みに活用できる
ファイルのダウンロード
指定した URL からファイルを
バックグラウンドでダウンロードできる

59. 便利な機能の例 [4/4]
Draw call 取得
描画のボトルネックを見つけるために、
Draw call の発行回数を取得可能
起動時のロゴ表示
起動時にオリジナルのロゴを表示できる
キーコンフィグ
キーやゲームコントローラのボタンを組み合わせて
新しいキーを定義でき、キーコンフィグが簡単に

60. ゲーム開発に便利な機能を
多数実装
まとめ

61. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

62. デモのコード
play-siv3d.hateblo.jp/entry/boost17
play-siv3d.hateblo.jp/entry/zengeren17

63. まとめ

64. • Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ

68. 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);
}

69. あらゆる図形同士のあたり判定
標準 GUI
アセットのリロード
スクショ・プレイムービーの保存
ファイルのアーカイブ・データの暗号化
シーン遷移
BGM のフェードイン/フェードアウト
INI, JSON, CSV, XML の読み書き
ファイルのダウンロード
Draw call 取得
起動時のロゴ表示
キーコンフィグ

70. 学習
プログラミングを教えている / 学んでいる人
ゲーム
趣味でゲーム開発をしている人
メディアアート
メディアアートを制作している人
ビジュアライゼーション
研究用のプログラムを書いている人

71. Web サイト
play-siv3d.hateblo.jp
Question?
• Siv3D とは
• 音や画像を面白く
• 12 種類の入力デバイスに対応
• ユニークなユーザ作品
• C++11/14 の活用
• ゲーム開発に便利な機能
• デモ