Cocos2d-x遊戲開發學習筆記1--在Cocos2d中顯示圖像

Cocos2d-x中的圖像是經過精靈類來顯示的。在Cocos2d-x中游戲中的每個角色、怪物、道具均可以理解成是一個精靈，遊戲背景做爲一種特殊的單位將其理解成是一個精靈也沒有什麼不妥。在源文件本章目錄下的項目ChapterThree03就展現了使用Cocos2d-x實現簡單遊戲開始界面的方法，主要就是經過精靈類來顯示圖像，其關鍵代碼以下所示。

01    Size size = Director::getInstance()->getVisibleSize();            //獲取屏幕尺寸
02    //背景圖像
03    auto* background = Sprite::create("background.jpg");        //建立精靈類，背景圖片爲background.jpg
04    background->setPosition(size.width/2,size.height/2);            //讓背景圖像居中顯示
05    background->setScale(0.7f);                            //讓背景圖片縮小尺寸
06    addChild(background,0);                                //將背景圖片加入到場景中
07    //屏幕右側的三個按鈕
08    auto* button1 = Sprite::create("button.png");                //按鈕的素材圖片爲button.png
09    button1->setPosition(550, size.height / 2);                    //第一個按鈕的位置
10    button1->setScale(0.6f);                                //設置按鈕大小
11    addChild(button1,1);                                    //將第一個按鈕加入到場景中
12    auto* button2 = Sprite::create("button.png");                //第二個按鈕
13    button2->setPosition(550, size.height / 2-60);
14    button2->setScale(0.6f);
15    addChild(button2,1);                                    //將第二個按鈕加入到場景中
16    auto* button3 = Sprite::create("button.png");                //第三個按鈕
17    button3->setPosition(550, size.height / 2 - 120);
18    button3->setScale(0.6f);
19    addChild(button3,1);                                    //將第三個按鈕加入到場景中
20    //左側的古風人物
21    auto* renwu = Sprite::create("renwu.png");                //建立精靈類，人物素材存放在renwu.png中
22    renwu->setPosition(0,0);                                //設置人物位置
23    renwu->setAnchorPoint(Vec2(0,0));                        //設置精靈錨點
24    renwu->setScale(0.5f);
25    addChild(renwu,2);                                    //將人物加入到場景中

運行以後的效果如圖3-5所示。

圖3-5 利用精靈類實現的遊戲開始界面

能夠到該項目的Resources目錄下查看該範例所使用的素材如圖3-6所示。一共有3張圖片分別是用來做爲背景圖片的background.jpg、按鈕圖片button.png和左側人物圖片renwu.png。能夠看出圖3-5所示的界面實際上就是這3張素材以必定的規律疊放在一塊兒的結果。而範例3-5所實現的正是這樣的一個功能。

圖3-6 範例3-5中用到的素材

在範例3-5的第01行首先獲取了當前屏幕的尺寸存放在變量size中，而後建立了一個精靈類的對象background，其中create方法的參數就是所須要素材的文件名，如範例第02行所示。接下來要作的就是使用addChild方法將該精靈對象加入到場景中去，如範例第06行所示。

可是在本範例除了要將圖片顯示出來，還要實現圖片位置的變化，以及縮放等功能，所以還要看看第0四、05行處的內容。第04行中使用setPosition方法設置了背景圖片所在的位置，在默認狀況下，Cocos2d-x中元素的錨點位於圖片最中央的部分，所以setPosition中的參數表示圖片的中點與屏幕的左下角在x、y兩個方向的位移。

至於第05行中使用的setScale則是直接使用一個float類型的小數來設置圖片縮放的倍數，因爲本範例中背景圖片的大小是能夠知道的，而窗口寬度（屏幕寬度）則被設置爲了640*360，所以能夠保證整個屏幕都被背景圖像佔滿，而在實際開發中天然還會遇到屏幕適配的問題，這將在本章後續的內容中進行講解。

第08~19行則是使用了相似的方法將3個按鈕加入到場景中，並設置了必定的位移和縮放。第21~25行的做用是將人物圖像加入到場景中，不難看到相對以前所使用的代碼，該部分新使用了一個setAnchorPoint方法。該方法的做用是設置當前對象的錨點，如第23行所示。它將人物圖像的錨點設置在了其最左下角的位置，此後再使用setPosition方法時，其中的參數就變成了圖像的左下角與屏幕左下角的相對位置。

《Cocos2d-x遊戲開發實戰精解》學習筆記1--在Cocos2d中顯示圖像
《Cocos2d-x遊戲開發實戰精解》學習筆記2--在Cocos2d-x中顯示一行文字
《Cocos2d-x遊戲開發實戰精解》學習筆記3--在Cocos2d-x中播放聲音