0
Media Art II
openFrameworks
複数のシーンの管理・切替え
多摩美術大学情報デザイン学科情報芸術コース
2013年11月11日
田所 淳
今日の内容
‣ openFrameworksでより実践的なプログラムの構築方法
‣ 複数のシーンを切替えるにはどうすれば良いのか?
‣ 実際の例を見ながら解説
シーンを切り替える方法
‣ 2つの方法を紹介
!

‣ 1: ベースとなるシーンを継承
‣ ofBaseAppを継承したクラスbaseSceneを作成
‣ testAppに、baseSceneの配列を用意
‣ baseSceneを継承したクラス...
複数シーンの切り替え 1
ベースとなるシーンを継承
複数シーンの切替えイメージ
‣ 下記のような構成を構築

配列(vector)

切替えて表示
setup()
update()
draw()

SceneA
SceneB
SceneC

...

testApp

継承

baseScene...
シーンのテンプレート:baseSceneクラス
‣ baseScene.h
#pragma once
#include "ofMain.h"

!

class baseScene {

!

public:
//仮想関数 (virtual) ...
具体化したシーン例:SceneA
‣ SceneA.h
#pragma once

!

#include "ofMain.h"
#include "baseScene.h"

!

// baseSceneを継承したクラスを定義
class ...
具体化したシーン例:SceneA
‣ SceneA.cpp
#include "SceneA.h"

!

void SceneA::setup(){
}

!

void SceneA::update(){
}

!

void SceneA...
シーンの切替えの実装
‣ SceneAクラスと同様にSceneB、SceneC... と作成していく
!

‣ 複数のシーンの切替えの仕組みは、testAppで実装する
‣ シーンの集合は、動的配列(vector)として管理する
シーン切替え:testApp
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "baseScene.h"
#include "SceneA.h"
#include "SceneB.h"...
シーン切替え:testApp
‣ testApp.cpp (1 of 3)
#include "testApp.h"

!

void testApp::setup(){
ofSetFrameRate(60);
//シーンを新規の生成し、配列に...
シーン切替え:testApp
‣ testApp.cpp (2 of 3)
void testApp::draw(){
//現在表示しているシーンを描画
scenes[currentScene]->draw();
}

!

void test...
シーン切替え:testApp
‣ testApp.cpp (3 of 3)
!

void testApp::keyReleased(int key){
scenes[currentScene]->keyReleased(key);
}

!
...
シーンの切替えの実装
‣ スペースキーで、シーンが切り替わる
シーンの切替えの実装
‣ 複数のクラスから成る複雑なシーンを組み合せることも可能
複数シーンの切り替え 2
ofxStateMachine を使用
ofxStateMachine を使用
‣ State Machine (Finite-state Machine)
‣ 状態と遷移と動作の組み合わせからなる数学的なモデル
‣ (有限個の)状態と、入力による状態の遷移を記述する
!
状態
1
...
ofxStateMachine を使用
‣ ofxStateMachineでは
‣ ofxStateを継承したシーンを複数作成して、名前をつける
‣ シーンを跨いで共有するデータ、SharedDataを利用できる

ofxState

継承

...
ofxStateMachine を使用
‣ ofxStateMachine、状態(個別のシーン)のテンプレート
#pragma once
#include "ofxState.h"

!

class TemplateState : publi...
ofxStateMachine を使用
‣ ofxStateMachine、状態(個別のシーン)のテンプレート
#pragma once
#include "ofxState.h"

!

class TemplateState : publi...
ofxStateMachine を使用
‣ ofxStateMachine、状態(個別のシーン)のテンプレート
#pragma once
#include "ofxState.h"

!

class TemplateState : publi...
ofxStateMachine を使用
‣ ofxStateMachine、状態(個別のシーン)のテンプレート
#pragma once
#include "ofxState.h"

!

class TemplateState : publi...
ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.h
#pragma once

!

#include "ofMain.h"
#include "ofxStateMachine.h"...
ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.h
#pragma once

!

#include "ofMain.h"
#include "ofxStateMachine.h"...
ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.cpp
#include "testApp.h"
#include "TemplateState.h"

!

//---------...
ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.cpp
#include "testApp.h"
#include "TemplateState.h"

!

読み込む状態をインクル...
ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.cpp
#include "testApp.h"
#include "TemplateState.h"

!

//---------...
ofxStateMachine を使用
‣ 作成したシーンを、testAppから呼びだす
‣ testApp.cpp
#include "testApp.h"
#include "TemplateState.h"

!

//---------...
ofxStateMachine を使用
‣ SharedDataを利用
‣ 全てのシーンで共有するデータを格納する

SceneA

SceneB

SceneC

SharedData
ofxStateMachine を使用
‣ SharedDataの例、string sharedMsg を追加
‣ SharedData.h
#pragma once

!

class SharedData{
public:
string s...
ofxStateMachine を使用
‣ SharedDataを読み込めるように、testApp.hを変更
‣ testApp.h
#pragma once

!

#include "ofMain.h"
#include “ofxState...
ofxStateMachine を使用
‣ SharedData.hをtestAppにインクルード
‣ testApp.h
#pragma once

!

#include "ofMain.h"
#include “ofxStateMachi...
ofxStateMachine を使用
‣ ofxStateMachineのインスタンス化を変更
‣ testApp.h
#pragma once

!

#include "ofMain.h"
#include “ofxStateMachin...
ofxStateMachine を使用
‣ testApp.cppで、SharedDataにアクセス
‣ testApp.h
#include "testApp.h"
#include "TemplateState.h"

!

//-----...
ofxStateMachine を使用
‣ testApp.cppで、SharedDataにアクセス
‣ testApp.h
#include "testApp.h"
#include "TemplateState.h"

!

//-----...
ofxStateMachine を使用
‣ キーボードの操作で、シーンを切り替えるサンプル
‣ 詳細はコードで!
Upcoming SlideShare
Loading in...5
×

Media Art II openFrameworks 複数のシーンの管理・切替え

4,135

Published on

Published in: Technology, Art & Photos
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,135
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
74
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Media Art II openFrameworks 複数のシーンの管理・切替え"

  1. 1. Media Art II openFrameworks 複数のシーンの管理・切替え 多摩美術大学情報デザイン学科情報芸術コース 2013年11月11日 田所 淳
  2. 2. 今日の内容 ‣ openFrameworksでより実践的なプログラムの構築方法 ‣ 複数のシーンを切替えるにはどうすれば良いのか? ‣ 実際の例を見ながら解説
  3. 3. シーンを切り替える方法 ‣ 2つの方法を紹介 ! ‣ 1: ベースとなるシーンを継承 ‣ ofBaseAppを継承したクラスbaseSceneを作成 ‣ testAppに、baseSceneの配列を用意 ‣ baseSceneを継承したクラスを複数作成し配列に格納 ! ‣ 2: ofxStateMachineを使用する ‣ ステイトデザインを利用した複数の状態を管理するためのア ドオン
  4. 4. 複数シーンの切り替え 1 ベースとなるシーンを継承
  5. 5. 複数シーンの切替えイメージ ‣ 下記のような構成を構築 配列(vector) 切替えて表示 setup() update() draw() SceneA SceneB SceneC ... testApp 継承 baseScene 全てのシーンの テンプレート
  6. 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. 7. 具体化したシーン例:SceneA ‣ SceneA.h #pragma once ! #include "ofMain.h" #include "baseScene.h" ! // baseSceneを継承したクラスを定義 class SceneA : public baseScene { void setup(); void update(); void draw(); };
  8. 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. 9. シーンの切替えの実装 ‣ SceneAクラスと同様にSceneB、SceneC... と作成していく ! ‣ 複数のシーンの切替えの仕組みは、testAppで実装する ‣ シーンの集合は、動的配列(vector)として管理する
  10. 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. 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. 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. 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. 14. シーンの切替えの実装 ‣ スペースキーで、シーンが切り替わる
  15. 15. シーンの切替えの実装 ‣ 複数のクラスから成る複雑なシーンを組み合せることも可能
  16. 16. 複数シーンの切り替え 2 ofxStateMachine を使用
  17. 17. ofxStateMachine を使用 ‣ State Machine (Finite-state Machine) ‣ 状態と遷移と動作の組み合わせからなる数学的なモデル ‣ (有限個の)状態と、入力による状態の遷移を記述する ! 状態 1 遷移1 ! 状態 2 遷移2 遷移3 遷移4 ! 状態 3
  18. 18. ofxStateMachine を使用 ‣ ofxStateMachineでは ‣ ofxStateを継承したシーンを複数作成して、名前をつける ‣ シーンを跨いで共有するデータ、SharedDataを利用できる ofxState 継承 SceneA 名前: “scene_a” SceneB 名前: “scene_b” SceneC 名前: “scene_c”
  19. 19. ofxStateMachine を使用 ‣ ofxStateMachine、状態(個別のシーン)のテンプレート #pragma once #include "ofxState.h" ! class TemplateState : public itg::ofxState<> { ! ! }; void setup(); void update(); void draw(); string getName();
  20. 20. ofxStateMachine を使用 ‣ ofxStateMachine、状態(個別のシーン)のテンプレート #pragma once #include "ofxState.h" ! class TemplateState : public itg::ofxState<> { ! ! }; void setup(); void update(); void draw(); string getName(); ofxStateを継承する
  21. 21. ofxStateMachine を使用 ‣ ofxStateMachine、状態(個別のシーン)のテンプレート #pragma once #include "ofxState.h" ! class TemplateState : public itg::ofxState<> { ! ! }; void setup(); void update(); void draw(); string getName(); ofBaseAppの関数は、 そのまま使用可能
  22. 22. ofxStateMachine を使用 ‣ ofxStateMachine、状態(個別のシーン)のテンプレート #pragma once #include "ofxState.h" ! class TemplateState : public itg::ofxState<> { ! ! }; void setup(); void update(); void draw(); string getName(); 状態の名前を返す関数が必須 状態遷移の際に必要となる
  23. 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. 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. 25. ofxStateMachine を使用 ‣ 作成したシーンを、testAppから呼びだす ‣ testApp.cpp #include "testApp.h" #include "TemplateState.h" ! //-------------------------------------------------------------void testApp::setup(){ // initialise state machine ! ! ! stateMachine.addState<TemplateState>(); stateMachine.changeState("template"); } ! (後略)
  26. 26. ofxStateMachine を使用 ‣ 作成したシーンを、testAppから呼びだす ‣ testApp.cpp #include "testApp.h" #include "TemplateState.h" ! 読み込む状態をインクルード //-------------------------------------------------------------void testApp::setup(){ // initialise state machine ! ! ! stateMachine.addState<TemplateState>(); stateMachine.changeState("template"); } ! (後略)
  27. 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. 28. ofxStateMachine を使用 ‣ 作成したシーンを、testAppから呼びだす ‣ testApp.cpp #include "testApp.h" #include "TemplateState.h" ! //-------------------------------------------------------------void testApp::setup(){ // initialise state machine ! ! ! stateMachine.addState<TemplateState>(); stateMachine.changeState("template"); } ! (後略) 名前を指定して、状態へ遷移
  29. 29. ofxStateMachine を使用 ‣ SharedDataを利用 ‣ 全てのシーンで共有するデータを格納する SceneA SceneB SceneC SharedData
  30. 30. ofxStateMachine を使用 ‣ SharedDataの例、string sharedMsg を追加 ‣ SharedData.h #pragma once ! class SharedData{ public: string sharedMsg; };
  31. 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. 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. 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. 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. 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. 36. ofxStateMachine を使用 ‣ キーボードの操作で、シーンを切り替えるサンプル ‣ 詳細はコードで!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×