學習Cinder——建立Cinder工程

==引子==

先請看幾個使用Cinder開發的案例：

==Cinder簡介==

Cinder是一個由社群開發，開源，高品質C++庫，功能和Processing類似，主要是緻力于繪圖以及藝術化的表現，使用它就可以開發出各種絢麗的效果。其實Cinder是一個工具箱式的函數庫，裡面包含了圖形、圖像等等多種工具，使用時可以很輕松的信手拈來，而不必考慮其他。

官網簡介：http://libcinder.org/about/

官方文檔：http://libcinder.org/docs/dev/index.html

下載下傳位址：http://libcinder.org/download/

==Cinder建立工程==

在Cinder下載下傳并解壓縮完成後，在...\cinder_0.8.6_vc2012\tools\TinderBox-Win目錄下會有一個TinderBox.exe，使用它可以很友善的建立一個Cinder工程，并且不用配置。使用TinderBox.exe建立工程，會出現以下提示：

Template：選擇模闆，一般應用程式都是Basic OpenGL，還可以建立屏保程式ScreenSaver或者Mac程式Cocoa OpenGL 

Project Name: 不解釋

Location: 不解釋

Cinder Version: 在安裝了不同版本Cinder的條件下，可以選擇Cinder的版本，在Settings裡面設定不同的Cinder版本對應的名稱。

Environment：根據你的開發環境選擇。

Create local git repository：部署git本地資料。

繼續下一步會彈出CinderBlocks視窗，CinderBlocks主要用于其他庫與Cinder進行互操作。其實就是友善配置。如果選擇了相應的庫之後（反正我一般不選擇）

選擇INSTALL方式：

Copy：複制到本地檔案夾（推薦）。 Relative：工程建立在與CinderBlocks相關聯的磁盤位置，不會複制檔案。 Git Submodule: 将CinderBlock添加到git submodule。

點選FINISH，結束。

如果安裝了CinderBlocks，相應檔案會儲存在blocks檔案夾中，反之則沒有該檔案夾。 源檔案會儲存在src檔案夾。需要注意的是，你的VS工程是在vc11檔案夾中，是以在VS中進行程式設計時，在編譯器中直接添加的檔案，會出現在VC11檔案夾中，是以在#InClude代碼時，應注意路徑。

==代碼解析==

以讀取并顯示圖像為例，對代碼結構進行一個簡要的說明。

跟腳本語言或者Processing類似，Cinder函數的結構主要有：

void setup(); 初始狀态，載入資源等；

void update(); 每一幀更新一次；

void draw(); 在Update()結束後繪制；

隻要在相應的位置編寫代碼就可以。還有其他一些功能子產品：

void prepareSettings( Settings *settings );

void mouseDown( MouseEvent event );

void keyDown( KeyEvent event );

void fileDrop( FileDropEvent event );

...

也都比簡單

==圖像資源的載入和顯示==

Cinder載入圖像有兩種方式：一種是Surface，另一種是Texture，

Surface側重于圖像處理，相當于OpenCV中的Mat，當然功能十分有限：cinder::ip

Texture側重于顯示，直接使用了GPU（基于OpenGL或者D3D）：cinder::gl::Texture; cinder::dx::Texture

#include "cinder/app/AppNative.h"
#include "cinder/gl/gl.h"
#include "cinder/ImageIo.h"				//Loading and displaying images
#include "cinder/gl/Texture.h"			//displaying images

using namespace ci;
using namespace ci::app;
using namespace std;

class TutorialLoadImgApp : public AppNative {
  public:
	void prepareSettings( Settings *settings );
	void setup();
	void mouseDown( MouseEvent event );	
	void keyDown( KeyEvent event );
	void update();
	void draw();

private:
	Surface mSurface1;
	gl::Texture mTexture1;
	Surface mSurface2;
	gl::Texture mTexture2;
};

void TutorialLoadImgApp::prepareSettings( Settings *settings ){
	
	mTexture1 = loadImage( loadAsset("girl000.jpg") );//這裡載入是為了設定Window大小，真正載入圖像需要在setup()
	settings->setWindowSize(mTexture1.getWidth(),mTexture1.getHeight());
	settings->setFrameRate( 60.0f );
}

void TutorialLoadImgApp::setup()
{
	//方式1：Load到Texture
	mTexture1 = loadImage( loadAsset("girl000.jpg") );
	//從Texture到Surface
	mSurface1 = Surface(mTexture1);
	
	//方式2：Load到Surface
	mSurface2 = loadImage( loadAsset("girl001.jpg") );
	//從Surface到Texture
	mTexture2 = gl::Texture(mSurface2);

	//方式3：載入網絡圖像
	//loadImage( loadUrl( "http://site.com/image.png" ) );
}

void TutorialLoadImgApp::mouseDown( MouseEvent event )
{
	if(event.isLeft()){
		//...
	}
}
void TutorialLoadImgApp::keyDown( KeyEvent event )
{
	if( event.getChar() == 'f' )
		setFullScreen( ! isFullScreen() );
}
void TutorialLoadImgApp::update()
{

}

void TutorialLoadImgApp::draw()
{
	// clear out the window with black
	gl::clear( Color( 0, 0, 0 ) ); 
	gl::draw( mTexture1 );

}

CINDER_APP_NATIVE( TutorialLoadImgApp, RendererGl )