經過較為繁瑣的環境搭建後，我們終於執行出了一個helloworld視窗，可以正式上手cocos了

現在我們就從改程式碼開始玩起

視窗

我們之前講到AppDelegate類是程式的入口，所以和視窗有關的設定也在這個類裡，開啟我們的AppDelegate.cpp，從AppDelegate::applicationDidFinishLaunching這個成員函式看起

函式中有幾行程式碼涉及到遊戲的一些設定

這裡面有幾個基礎的可選項：

glview = GLViewImpl::createWithRect(
    "Test", cocos2d::Rect(
        0, 0, designResolutionSize.width, designResolutionSize.height
        )
    );//設定視窗的尺寸
director->setDisplayStats(true);//顯示FPS
director->setAnimationInterval(1.0f / 60);//設定每幀的間隔
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);//設定遊戲的解析度
 

如果把setDisplayStats的引數改成false，可以發現helloworld中左下角的FPS和Drawcall資訊消失了，你也可以自己動手試試其他的引數

視窗大小

往上翻應該不難找到這幾行程式碼

cocos有一個叫做Size的類，這個尺寸的width和height兩個成員是我們經常需要使用的，在設定精靈的尺寸，座標的時候會經常使用到

Copystatic cocos2d::Size designResolutionSize = cocos2d::Size(480, 320);
static cocos2d::Size smallResolutionSize = cocos2d::Size(480, 320);
static cocos2d::Size mediumResolutionSize = cocos2d::Size(1024, 768);
static cocos2d::Size largeResolutionSize = cocos2d::Size(2048, 1536);
 

這是cocos給我們提供的常用的視窗尺寸，我們可以發現，現在使用的是designResolutionSize這個尺寸，480,320是比較小的，可以把視窗的尺寸設定成mediumResolutionSize，它的size是(1024, 768)

將下面這個designResolutionSize引數改成mediumResolutionSize即可：

執行：

畫面解析度

現在雖然我們視窗的尺寸設定成了1024*768，但是實際上游戲窗口裡的解析度還是480*320個畫素

開啟專案目錄的Resources資料夾我們可以看到HelloWorld.png這個圖片的解析度是195*270

你可以試試把我們換上去的mediumResolutionSize

精靈

精靈(Sprite)是 cocos裡的一個概念，我們helloworld介面的cocos的logo就是一個精靈，現在我們嘗試把他換成別的圖片，選一張圖片放到專案目錄的Resources資料夾內

控制這個精靈的程式碼在HelloWorldScene.cpp內，開啟找到這段程式碼：

把HelloWorld.png修改成你放入Resources內的圖片名即可

執行：

座標系統

要了解cocos的座標系統，首先要介紹一下Vec2類，有接觸過圖形庫或者遊戲引擎的同學對這種命名應該都不陌生，這個類代表的是二維向量，有x和y這兩個成員，我們在設定遊戲物體的座標的時候會使用到

同樣在HelloWorldScene.cpp中，在建立sprite精靈的地方有這麼幾行程式碼，就是我們剛才換圖片的那裡

// position the sprite on the center of the screen
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

這行程式碼就是使用setPosition設定初始化好的精靈（你的圖片）的座標，有意思的來了，座標中出現了兩個物件，一個是visibleSize和origin，visibleSize這個物件儲存了遊戲世界的尺寸，也就是我們能夠看到的視窗的尺寸，設定遊戲的解析度可以影響這個值，origin指的是視窗左下角的點在遊戲世界中的位置

在設定座標的程式碼下加入這樣一行程式碼輸出一些資訊（log函式可以當作c/c++的printf使用）

log("visibleSize.width=%f, visibleSize.height=%f, origin.x=%f, origin.y=%f", 
            visibleSize.width, 
            visibleSize.height,
            origin.x,
            origin.y);

執行，檢視輸出視窗

可以看到visibleSize和origin的值

再回看設定座標的程式碼

// position the sprite on the center of the screen
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

實際上意思很簡單，就是set到了視窗正中間的位置，我們把座標改成
Vec2(visibleSize.width/4 + origin.x, visibleSize.height/2 + origin.y)

向左移動了1/4視窗寬度的距離

最後一句

this->addChile(sprite, 0);

是將這個精靈加入到當前圖層中，引數0代表最底層，如果不加這行程式碼，sprite不會成為遊戲世界中的一員，編譯出來之後就不會顯