Cocos2d-js中使用紋理對象建立Sprite對象

本節咱們會經過一個實例介紹紋理對象建立Sprite對象使用，這個實例如圖5-2所示，其中地面上的草是放在背景（以下圖所示）中的，場景中的兩棵樹是從後圖所示的「樹」紋理圖片中截取出來的，圖5-5所示是樹的紋理座標，注意它的座標原點在左上角。

 建立Sprite對象實例

 場景背景圖片

「樹」紋理圖片

「樹」紋理圖片

下面咱們看看app.js 中HelloWorldLayer中初始化代碼以下： 

[html] view plaincopy

1. var HelloWorldLayer = cc.Layer.extend({  

2.       

3.     ctor:function () {  

4.         

5.         this._super();  

6.         var size = cc.director.getWinSize();  

7.   

8.   

9.         var bg = new cc.Sprite(res.background_png);                             ①  

10.         bg.x = size.width/2;  

11.         bg.y = size.height/2;  

12.         this.addChild(bg);      

13.   

14.   

15.         var tree1 = new cc.Sprite(res.tree_png,cc.rect(604, 38, 302, 295));                 ②  

16.   

17.   

18.         tree1.x = 200;  

19.         tree1.y = 230;  

20.         this.addChild(tree1);   

21.           

22.         var texture = cc.textureCache.addImage(res.tree_png);                       ③  

23.         var tree2 = new cc.Sprite(texture, cc.rect(73, 72,182,270));                    ④  

24.         tree2.x = 500;  

25.         tree2.y = 200;  

26.         this.addChild(tree2);  

27.     }  

28. });  

在上面代碼第①行經過圖片建立精靈，變量res.background_png是圖片的完整路徑，它是在resource.js文件中定義的，它表明的圖片是background.png，background.png圖片如圖5-3所示。第②行代碼是經過tree1.png圖片（res.tree_png變量保存的內容）和矩形裁剪區域建立精靈，矩形裁剪區域爲(604, 38, 302, 295)，如圖所示。
rect類能夠建立矩形裁剪區，rect構造函數以下：
rect (x, y, width, height)
其中x,y是UI座標，座標原點在左上角，width是裁剪矩形的寬度，height是裁剪矩形的高度。

第③行代碼把tree1.png圖片添加到紋理緩存中，第④行代碼是經過指定紋理和裁剪的矩形區域來建立精靈。

更多內容請關注最新Cocos圖書《Cocos2d-x實戰：JS卷——Cocos2d-JS開發》

本書交流討論網站：http://www.cocoagame.net

歡迎加入Cocos2d-x技術討論羣：257760386

更多精彩視頻課程請關注智捷課堂Cocos課程：http://v.51work6.com

智捷課堂現推出Cocos會員，敬請關注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

《Cocos2d-x實戰 JS卷》現已上線，各大商店均已開售：

京東：http://item.jd.com/11659698.html

歡迎關注智捷iOS課堂微信公共平臺，瞭解最新技術文章、圖書、教程信息