Media Art II openFrameworks 複数のシーンの管理・切替え
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 2,944 views

 

Statistics

Views

Total Views
2,944
Views on SlideShare
1,533
Embed Views
1,411

Actions

Likes
2
Downloads
59
Comments
0

5 Embeds 1,411

http://yoppa.org 1278
http://of.studio23c.com 85
http://cloud.feedly.com 42
http://feedly.com 4
http://digg.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 を使用 ‣ キーボードの操作で、シーンを切り替えるサンプル ‣ 詳細はコードで!