您在這裡

多媒體程式工具庫 OpenFrameworks

1 篇文章 / 0 新
多媒體程式工具庫 OpenFrameworks

OpenFrameworks》是另一套歷史較久的 C++ 多媒體程式工具庫,相較於《Cinder》,它的開發社群龐大,還能跨平台到 Android。 這套工具在國內算小有知名度,不少社群與學校單位舉辦過相關活動,例如去年 COSCUP 2011 便有一場演講 「Openframeworks x Smartphone!!!」。
北藝大與廣達也舉辦過 「openFrameworks大師工作坊

OF 志在讓初階入門者也能使用,不像 Cinder 比較重視有經驗的程式員,所以官方網頁還很貼心的介紹了 C++、編譯、整合開發工具。

在工具庫網頁看到這段範例,有種莫名的喜感 :)

// 相信這段對程式員不必多做解釋
#include <iostream>
using namespace std;
 
int main() {
  cout << "Hello World!\n";
  return 0;
}

官方下載頁可找到各種平台的版本,不過個人使用 windows + code::blocks 開發包時,內帶的編譯批次檔有些路徑異常,需把 code:blocks 在系統中的路徑改對,更早之前筆者用舊版、其他平台的專案檔還有連結 .a 檔名寫錯的問題。總之,建置 OF 或許需要一點耐心見招拆招,像這種專案設置的小雜務雖然難不倒開發者,可對入門者來說卻是不小的負擔阿,相比之下 Cinder 做得較好,抓下來即可順利編譯、執行。

了解工具永遠從空專案開始 :)

此為最基本的 OF 程式物件,實作可以只擺空白函式。

#include "ofMain.h"
class testApp : public ofBaseApp{
public:
  void setup(); // 啟動時執行一次
  void draw();  // 繪製 Frame
 
  void keyPressed(int key);
  void mouseMoved(int x, int y);
};

OF 把程式進入點保留下來,需要 main() 來運行起一個空視窗。

#include "ofAppGlutWindow.h"
int main(){
  ofAppGlutWindow window;
  ofSetupOpenGL(&window, 1024, 768, OF_WINDOW);
  ofRunApp(new testApp());
}

 

與 Cinder 相同,OF 也包山包海,有各種多媒體程式範例,不過 OF 最大的特點還是在於具開放性的 Addon 機制,讓大家都可以對 OF 加油添醋或著幫個人專案擴充功能,想必這也是 OF 社群成果較為龐大的主要原因。而且實際上多人共同開發時,難免需要一種擺放各自程式的共識,那乾脆照 OF Addon 慣例擺吧。

Addon 其實跟自己寫的 C++ Class 一樣,再額外多做個 XML 設定檔敘述怎麼配置專案,讓別人在引用時,可以統一地放到 addons 目錄底下,並將相關 source code、library 加入專案。我們就來實際操作一次 code::blocks,以後才方便拉別人的成果來用!

首先開啟內建的空專案 emptyExample,並加入 ofxThreadedImageLoader 相關檔案,如圖所示。

然後從對話框當中,選取 addons/ofxThreadedImageLoader 目錄

成功匯入檔案的樣貌

最後再到選單 Project -> Build Options -> Search Directories,把 src 與 lib 目錄都加入 (此例僅需 src 目錄)。

至此設定完成,可以使用背景載圖的 Addon 啦!

打開 testApp.h 宣告部分,加入三行。

#include "ofMain.h"
#include "ofxThreadedImageLoader.h" // include it
 
class testApp : public ofBaseApp{
public:
  void setup();
  void draw();
 
  ofxThreadedImageLoader loader;    // 載入器
  ofImage pimg;                     // 圖片物件
};

testApp.cpp 實作部分就可載圖囉

void testApp::setup(){
  // 從網路載入神祕圖片...
  loader.loadFromURL(&pimg, "http://ext.pimg.tw/meteacher/1335927428-3792849751.jpg");
   
  // Thread 背景載入!
  loader.startThread();
}
void testApp::draw(){
  pimg.draw(0,0, 480, 640);   // 圖檔畫出來
}

執行程式會發現空白視窗先跑出來,過一段時間圖片載完了,才被畫到螢幕上。因為用 thread 在背景抓圖,程式不會為了等資源載入而卡住。

幫專案匯入 addon 的過程就這樣,應該不難。

除了開發包內建的 addons,我們還可以到 ofxAddons 尋找更多社群成果 (五花八門怪東西),快速建置自己想要的多媒體互動程式!

若很不幸第三方的 Addon 太複雜,無法正確匯入,那可打開 Addon 內的 install.xml 檢視如何配置。

ofxThreadedImageLoader 的設定如下,裡頭包含所有檔案該如何擺放的資訊:

<install>
    <name>ofxThreadedImageLoader</name>
    <version>1.0</version>
    <author><[CDATA[Diederick Huijbers <diederick@apollomedia.nl> ]]></author>
    
    <code_url>https://github.com/roxlu/openFrameworks/tree/master/addons</code_url>
    <site_url>http://www.openframeworks.cc</site_url>
    <download_url></download_url>
    
    <description><![CDATA[
          Loads threads from disk or url in a separate thread so your
          application will not hang while loading.
    ]]></description>
     
    <add>
         
        <!--     =====================================================================   -->
        <!-- ========================== add per project using this addon =========   -->
        <!--     =====================================================================   -->
     
        <src>
            <folder name="addons/ofxThreadedImageLoader/src">
                <file>../../../addons/ofxThreadedImageLoader/src/ofxThreadedImageLoader.cpp</file>
                <file>../../../addons/ofxThreadedImageLoader/src/ofxThreadedImageLoader.h</file>
            </folder>
        </src>
    </add>   
</install>

如果一切順利的話,應該很快就能動手做軟體了。網路找幾個 DEMO 激勵一下士氣吧!

OpenCV 視覺辨識 + Box2D 物理引擎

精美的 Word Puzzle 遊戲

3D 踩地雷

玩家自製 FPS

整體來說,若希望軟體能跨到 Android 平台,或著希望遇到各種疑難雜症時得到國際社群支援,OF 是個不錯的選擇。可是要有心理準備,OF 的多樣性來自 Addon,雜亂也來自 Addon,使用面常遇到專案設置雜務,也難以預期第三方 Addon 的品質或瑕疵。

不過看著網路上滿坑滿谷的酷炫 DEMO,只能說,敢衝就有勝算。

補充資訊:
9/1 與 9/2 有免費的免費工作坊 / openFrameworks 入門,地點在 台北數位藝術中心,有興趣者請把握機會與時間!