1. Media Art II
openFrameworks
複数のシーンの管理・切替え
多摩美術大学情報デザイン学科情報芸術コース
2013年11月11日
田所 淳

2. 今日の内容
‣ openFrameworksでより実践的なプログラムの構築方法
‣ 複数のシーンを切替えるにはどうすれば良いのか?
‣ 実際の例を見ながら解説

3. シーンを切り替える方法
‣ 2つの方法を紹介
!
‣ 1: ベースとなるシーンを継承
‣ ofBaseAppを継承したクラスbaseSceneを作成
‣ testAppに、baseSceneの配列を用意
‣ baseSceneを継承したクラスを複数作成し配列に格納
!
‣ 2: ofxStateMachineを使用する
‣ ステイトデザインを利用した複数の状態を管理するためのア
ドオン

4. 複数シーンの切り替え 1
ベースとなるシーンを継承

5. 複数シーンの切替えイメージ
‣ 下記のような構成を構築
配列(vector)
切替えて表示
setup()
update()
draw()
SceneA
SceneB
SceneC
...
testApp
継承
baseScene
全てのシーンの
テンプレート

6. シーンのテンプレート：baseSceneクラス
‣ baseScene.h
#pragma once
#include "ofMain.h"
!
class baseScene {
!
public:
//仮想関数 (virtual) として定義する
virtual
virtual
virtual
virtual
virtual
virtual
virtual
virtual
virtual
virtual
};
void
void
void
void
void
void
void
void
void
void
setup(){};
update(){};
draw(){};
keyPressed (int key){};
keyReleased(int key){};
mouseMoved(int x, int y ){};
mouseDragged(int x, int y, int button){};
mousePressed(int x, int y, int button){};
mouseReleased(int x, int y, int button){};
windowResized(int w, int h){};

7. 具体化したシーン例：SceneA
‣ SceneA.h
#pragma once
!
#include "ofMain.h"
#include "baseScene.h"
!
// baseSceneを継承したクラスを定義
class SceneA : public baseScene {
void setup();
void update();
void draw();
};

8. 具体化したシーン例：SceneA
‣ SceneA.cpp
#include "SceneA.h"
!
void SceneA::setup(){
}
!
void SceneA::update(){
}
!
void SceneA::draw(){
ofBackgroundHex(0xFF0000);
ofSetHexColor(0xFFFFFF);
ofDrawBitmapString("Scene A", 20, 20);
}

9. シーンの切替えの実装
‣ SceneAクラスと同様にSceneB、SceneC... と作成していく
!
‣ 複数のシーンの切替えの仕組みは、testAppで実装する
‣ シーンの集合は、動的配列(vector)として管理する

10. シーン切替え：testApp
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "baseScene.h"
#include "SceneA.h"
#include "SceneB.h"
#include "SceneC.h"
!
class testApp : public ofBaseApp {
public:
void
void
void
void
void
void
void
void
void
void
setup();
update();
draw();
keyPressed (int key);
keyReleased(int key);
mouseMoved(int x, int y );
mouseDragged(int x, int y, int button);
mousePressed(int x, int y, int button);
mouseReleased(int x, int y, int button);
windowResized(int w, int h);
vector <baseScene *> scenes; //複数のシーンを格納する動的配列
int currentScene; //現在のシーン番号
};

11. シーン切替え：testApp
‣ testApp.cpp (1 of 3)
#include "testApp.h"
!
void testApp::setup(){
ofSetFrameRate(60);
//シーンを新規の生成し、配列に追加
baseScene * sa = new SceneA();
scenes.push_back(sa);
baseScene * sb = new SceneB();
scenes.push_back(sb);
baseScene * sc = new SceneC();
scenes.push_back(sc);
//現在のシーンを0に
currentScene = 0;
scenes[currentScene]->setup();
}
!
void testApp::update(){
//現在表示しているシーンを更新
scenes[currentScene]->update();
}

12. シーン切替え：testApp
‣ testApp.cpp (2 of 3)
void testApp::draw(){
//現在表示しているシーンを描画
scenes[currentScene]->draw();
}
!
void testApp::keyPressed(int key){
!
!
switch (key) {
case ' ':
//シーンの切り替え
currentScene++;
currentScene %= scenes.size();
scenes[currentScene]->setup();
break;
!
}
}
case 'f':
ofToggleFullscreen();
break;

13. シーン切替え：testApp
‣ testApp.cpp (3 of 3)
!
void testApp::keyReleased(int key){
scenes[currentScene]->keyReleased(key);
}
!
void testApp::mouseMoved(int x, int y ){
scenes[currentScene]->mouseMoved(x, y);
}
!
void testApp::mouseDragged(int x, int y, int button){
scenes[currentScene]->mouseDragged(x, y, button);
}
!
void testApp::mousePressed(int x, int y, int button){
scenes[currentScene]->mousePressed(x, y, button);
}
!
void testApp::mouseReleased(int x, int y, int button){
scenes[currentScene]->mouseReleased(x, y, button);
}
!
void testApp::windowResized(int w, int h){
scenes[currentScene]->windowResized(w, h);
}

14. シーンの切替えの実装
‣ スペースキーで、シーンが切り替わる

15. シーンの切替えの実装
‣ 複数のクラスから成る複雑なシーンを組み合せることも可能

16. 複数シーンの切り替え 2
ofxStateMachine を使用

17. ofxStateMachine を使用
‣ State Machine (Finite-state Machine)
‣ 状態と遷移と動作の組み合わせからなる数学的なモデル
‣ (有限個の)状態と、入力による状態の遷移を記述する
!
状態
1
遷移1
!
状態
2
遷移2
遷移3
遷移4
!
状態
3

18. ofxStateMachine を使用
‣ ofxStateMachineでは
‣ ofxStateを継承したシーンを複数作成して、名前をつける
‣ シーンを跨いで共有するデータ、SharedDataを利用できる
ofxState
継承
SceneA
名前: “scene_a”
SceneB
名前: “scene_b”
SceneC
名前: “scene_c”

19. ofxStateMachine を使用
‣ ofxStateMachine、状態(個別のシーン)のテンプレート
#pragma once
#include "ofxState.h"
!
class TemplateState : public itg::ofxState<> {
!
!
};
void setup();
void update();
void draw();
string getName();

20. ofxStateMachine を使用
‣ ofxStateMachine、状態(個別のシーン)のテンプレート
#pragma once
#include "ofxState.h"
!
class TemplateState : public itg::ofxState<> {
!
!
};
void setup();
void update();
void draw();
string getName();
ofxStateを継承する

21. ofxStateMachine を使用
‣ ofxStateMachine、状態(個別のシーン)のテンプレート
#pragma once
#include "ofxState.h"
!
class TemplateState : public itg::ofxState<> {
!
!
};
void setup();
void update();
void draw();
string getName();
ofBaseAppの関数は、
そのまま使用可能

22. ofxStateMachine を使用
‣ ofxStateMachine、状態(個別のシーン)のテンプレート
#pragma once
#include "ofxState.h"
!
class TemplateState : public itg::ofxState<> {
!
!
};
void setup();
void update();
void draw();
string getName();
状態の名前を返す関数が必須
状態遷移の際に必要となる

23. ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.h
#pragma once
!
#include "ofMain.h"
#include "ofxStateMachine.h"
!
class testApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
!
(中略)
!
};
itg::ofxStateMachine<> stateMachine;

24. ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.h
#pragma once
!
#include "ofMain.h"
#include "ofxStateMachine.h"
!
class testApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
!
(中略)
!
};
itg::ofxStateMachine<> stateMachine;
ofxStateMachineを
インスタンス化

25. ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.cpp
#include "testApp.h"
#include "TemplateState.h"
!
//-------------------------------------------------------------void testApp::setup(){
// initialise state machine
!
!
!
stateMachine.addState<TemplateState>();
stateMachine.changeState("template");
}
!
(後略)

26. ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.cpp
#include "testApp.h"
#include "TemplateState.h"
!
読み込む状態をインクルード
//-------------------------------------------------------------void testApp::setup(){
// initialise state machine
!
!
!
stateMachine.addState<TemplateState>();
stateMachine.changeState("template");
}
!
(後略)

27. ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.cpp
#include "testApp.h"
#include "TemplateState.h"
!
//-------------------------------------------------------------void testApp::setup(){
// initialise state machine
!
!
!
stateMachine.addState<TemplateState>();
stateMachine.changeState("template");
}
!
(後略)
状態をState Machineに追加

28. ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.cpp
#include "testApp.h"
#include "TemplateState.h"
!
//-------------------------------------------------------------void testApp::setup(){
// initialise state machine
!
!
!
stateMachine.addState<TemplateState>();
stateMachine.changeState("template");
}
!
(後略)
名前を指定して、状態へ遷移

29. ofxStateMachine を使用
‣ SharedDataを利用
‣ 全てのシーンで共有するデータを格納する
SceneA
SceneB
SceneC
SharedData

30. ofxStateMachine を使用
‣ SharedDataの例、string sharedMsg を追加
‣ SharedData.h
#pragma once
!
class SharedData{
public:
string sharedMsg;
};

31. ofxStateMachine を使用
‣ SharedDataを読み込めるように、testApp.hを変更
‣ testApp.h
#pragma once
!
#include "ofMain.h"
#include “ofxStateMachine.h"
#include "SharedData.h"
!
class testApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
!
(中略)
!
};
itg::ofxStateMachine<SharedData> stateMachine;

32. ofxStateMachine を使用
‣ SharedData.hをtestAppにインクルード
‣ testApp.h
#pragma once
!
#include "ofMain.h"
#include “ofxStateMachine.h"
#include "SharedData.h"
!
SharedState.h
をインクルード
class testApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
!
(中略)
!
};
itg::ofxStateMachine<SharedData> stateMachine;

33. ofxStateMachine を使用
‣ ofxStateMachineのインスタンス化を変更
‣ testApp.h
#pragma once
!
#include "ofMain.h"
#include “ofxStateMachine.h"
#include "SharedData.h"
!
class testApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
!
(中略)
!
};
itg::ofxStateMachine<SharedData> stateMachine;
ofxStateMachineを
インスタンス化

34. ofxStateMachine を使用
‣ testApp.cppで、SharedDataにアクセス
‣ testApp.h
#include "testApp.h"
#include "TemplateState.h"
!
//-------------------------------------------------------------void testApp::setup(){
!
// SharedData
stateMachine.getSharedData().sharedMsg = "Hello State Machine!";
// initialise state machine
stateMachine.addState<TemplateState>();
stateMachine.changeState("template");
}

35. ofxStateMachine を使用
‣ testApp.cppで、SharedDataにアクセス
‣ testApp.h
#include "testApp.h"
#include "TemplateState.h"
!
//-------------------------------------------------------------void testApp::setup(){
!
// SharedData
stateMachine.getSharedData().sharedMsg = "Hello State Machine!";
// initialise state machine
stateMachine.addState<TemplateState>();
stateMachine.changeState("template");
}
SharedData内のsharedMsgに
文字列を代入

36. ofxStateMachine を使用
‣ キーボードの操作で、シーンを切り替えるサンプル
‣ 詳細はコードで!