本節我們會通過一個執行個體介紹紋理對象建立sprite對象使用，這個執行個體如圖5-2所示，其中地面上的草是放在背景（如下圖所示）中的，場景中的兩棵樹是從後圖所示的“樹”紋理圖檔中截取出來的，圖5-5所示是樹的紋理坐标，注意它的坐标原點在左上角。
建立sprite對象執行個體
場景背景圖檔
“樹”紋理圖檔
下面我們看看app.js 中helloworldlayer中初始化代碼如下：
在上面代碼第①行通過圖檔建立精靈，變量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開發》
歡迎加入cocos2d-x技術讨論群：257760386
《cocos2d-x實戰 js卷》現已上線，各大商店均已開售：
歡迎關注智捷ios課堂微信公共平台，了解最新技術文章、圖書、教程資訊