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

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

on

  • 2,784 views

 

Statistics

Views

Total Views
2,784
Views on SlideShare
1,418
Embed Views
1,366

Actions

Likes
2
Downloads
56
Comments
0

5 Embeds 1,366

http://yoppa.org 1235
http://of.studio23c.com 83
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 複数のシーンの管理・切替え Media Art II openFrameworks 複数のシーンの管理・切替え Presentation Transcript

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