一步一步圖文介紹SpriteKit使用TexturePacker導出的紋理集Altas

時間 2019-11-20

標籤一步圖文介紹 spritekit 使用 texturepacker 導出紋理 altas 简体版

原文原文鏈接

一、爲何要使用紋理集？

遊戲是一種很耗費資源的應用，特別是在移動設備中的遊戲，性能優化是很是重要的web

紋理集是將多張小圖合成一張大圖，使用紋理集有如下優勢：swift

一、減小內存佔用，減小磁盤佔用；性能優化

二、減小磁盤讀取次數，一次性讀取一張大圖比屢次讀取多張小圖速度更快
一張大圖：打開-讀取小圖-讀取小圖-讀取小圖-關閉;
多張小圖：打開-關閉,打開-關閉,打開-關閉,打開-關閉；ide

三、減小OpenGL繪製次數；
OpenGL ES 1.1僅僅可以使用2的n次冪大小的圖片（即寬度或者高度是二、四、八、64...）。若是採用小圖片OpenGL ES1.1會分配給每一個圖片2的n次冪大小的內存空間，即便這張圖片達不到這樣的寬度和高度也會分配大於此圖片的2的n次冪大小的空間。那麼運用這種圖片集的方式將會減小內存碎片。雖然在Cocos2d-x v2.0後使用了OpenGL ES 2.0，它不會再分配2的幾回冪的內存塊了，可是減小讀取次數和繪製的優點依然存在。性能

二、SpriteKit導入SKTexturePacker的紋理集

上官網 www.codeandweb.com 下載 TexturePacker優化

1_texturePacker下載_www.codeandweb.com.png

沒有去除空白邊角的原始圖片動畫

1_texturePacker用法.png

直接把圖片文件夾拖入軟件左側的導航欄ui

2_texturePacker用法_拖動.png

TexturePacker直接剪切圖片變生成一張大圖spa

3_texturePacker用法_自動剪切.png

點擊右下角高級設置 Advanced settings>>code

4_texturePacker用法_高級設置.png

選擇 Data Format 爲SpriteKit，並生成Altas及Swift

5_texturePacker用法_生成Atlas.png

並生成Altas及Swift 以前能夠全選左側導航欄的全部圖片，並點擊"Anim preview" 預覽動畫

6_texturePacker用法_預覽動畫.png

命名Altas文件夾名稱及Swift文件名(class爲首字母大寫)

7_texturePacker用法_生成Atals_swift.png

發佈Altas及Swift

8_texturePacker用法_發佈.png

發佈Altas及Swift 成功 ,查看發佈結果

9_texturePacker用法_發佈結果.png

把Altas及Swift拖進XCode工程內

10_texturePacker用法_導入atlasc及swift文件.png

類JumpRight爲class類,首字母應爲大寫

11_texturePacker用法_swift類Class首寫字母爲大寫.png

JumpRight內的代碼

12_texturePacker用法_JumpRight類.png

定位SpriteKitNode精靈節點在場景中的位置

13_texturePacker用法_scene定位精靈.png

實例化一個類並代碼調用

14_texturePacker用法_代碼調用.png

SpriteKit 調用TexturePacker 的最終效果

15_texturePacker用法_最終效果.png

SpriteKit 調用TexturePacker 的源代碼

// // GameScene.swift // BabeKitten // Copyright © 2018 iFiero.com. All rights reserved. // import SpriteKit import GameplayKit class GameScene: SKScene { let catJumpRight = JumpRight() private var cat:SKSpriteNode! private var catJump:SKSpriteNode! override func didMove(to view: SKView) { cat = SKSpriteNode(texture:catJumpRight.jumpRight01()) // 調用圖片 cat.position = CGPoint(x: CGFloat(-450), y: CGFloat(-400)) cat.setScale(0.5) cat.zPosition = 1 self.addChild(cat) catJump = SKSpriteNode(texture: catJumpRight.jumpRight01()) // 調用圖片1 catJump.position = CGPoint(x: CGFloat(370), y: CGFloat(-400)) catJump.setScale(0.5) catJump.zPosition = 1 self.addChild(catJump) let jumpAction = SKAction.animate(with: catJumpRight.jumpRight(), timePerFrame: TimeInterval(0.05)) let repeatAction = SKAction.repeatForever(jumpAction) catJump.run(repeatAction) } override func update(_ currentTime: TimeInterval) { // Called before each frame is rendered } }