zoukankan      html  css  js  c++  java
  • 一步一步图文介绍SpriteKit使用TexturePacker导出的纹理集Altas

    1、为什么要使用纹理集?

    游戏是一种很耗费资源的应用,特别是在移动设备中的游戏,性能优化是非常重要的

    纹理集是将多张小图合成一张大图,使用纹理集有以下优点:

    1、减少内存占用,减少磁盘占用;

    2、减少磁盘读取次数,一次性读取一张大图比多次读取多张小图速度更快
    一张大图:打开-读取小图-读取小图-读取小图-关闭;
    多张小图:打开-关闭,打开-关闭,打开-关闭,打开-关闭;

    3、减少OpenGL绘制次数;
    OpenGL ES 1.1仅仅能够使用2的n次幂大小的图片(即宽度或者高度是2、4、8、64...)。如果采用小图片OpenGL ES1.1会分配给每个图片2的n次幂大小的内存空间,即使这张图片达不到这样的宽度和高度也会分配大于此图片的2的n次幂大小的空间。那么运用这种图片集的方式将会减少内存碎片。虽然在Cocos2d-x v2.0后使用了OpenGL ES 2.0,它不会再分配2的几次幂的内存块了,但是减少读取次数和绘制的优势依然存在。

    2、SpriteKit导入SKTexturePacker的纹理集

    上官网 www.codeandweb.com 下载 TexturePacker

    1_texturePacker下载_www.codeandweb.com.png
    1_texturePacker下载_www.codeandweb.com.png

    没有去除空白边角的原始图片


    1_texturePacker用法.png
    1_texturePacker用法.png

    直接把图片文件夹拖入软件左侧的导航栏


    2_texturePacker用法_拖动.png
    2_texturePacker用法_拖动.png

    TexturePacker直接剪切图片变生成一张大图


    3_texturePacker用法_自动剪切.png
    3_texturePacker用法_自动剪切.png

    点击右下角高级设置 Advanced settings>>


    4_texturePacker用法_高级设置.png
    4_texturePacker用法_高级设置.png

    选择 Data Format 为SpriteKit,并生成Altas及Swift


    5_texturePacker用法_生成Atlas.png
    5_texturePacker用法_生成Atlas.png

    并生成Altas及Swift 之前可以全选左侧导航栏的所有图片,并点击"Anim preview" 预览动画


    6_texturePacker用法_预览动画.png
    6_texturePacker用法_预览动画.png

    命名Altas文件夹名称及Swift文件名(class为首字母大写)


    7_texturePacker用法_生成Atals_swift.png
    7_texturePacker用法_生成Atals_swift.png

    发布Altas及Swift


    8_texturePacker用法_发布.png
    8_texturePacker用法_发布.png

    发布Altas及Swift 成功 ,查看发布结果


    9_texturePacker用法_发布结果.png
    9_texturePacker用法_发布结果.png

    把Altas及Swift拖进XCode工程内


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

    类JumpRight为class类,首字母应为大写


    11_texturePacker用法_swift类Class首写字母为大写.png
    11_texturePacker用法_swift类Class首写字母为大写.png

    JumpRight内的代码


    12_texturePacker用法_JumpRight类.png
    12_texturePacker用法_JumpRight类.png

    定位SpriteKitNode精灵节点在场景中的位置


    13_texturePacker用法_scene定位精灵.png
    13_texturePacker用法_scene定位精灵.png

    实例化一个类 并代码调用


    14_texturePacker用法_代码调用.png
    14_texturePacker用法_代码调用.png

    SpriteKit 调用TexturePacker 的最终效果


    15_texturePacker用法_最终效果.png
    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
        }
    }
    
    

    以上就是使用TexturePacker的所有步聚及源码!

    源码传送门:http://www.iFIERO.com/uploads/babeKitten.zip
    更多游戏教学:http://www.iFIERO.com

  • 相关阅读:
    Git_创建版本库
    Git_安装Git
    Git_集中式vs分布式
    Git_git的诞生
    echartShow
    微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的
    vue2.0 $router和$route的区别
    vue移动端开发全家桶
    干货分享:vue2.0做移动端开发用到的相关插件和经验总结
    优秀的基于VUE移动端UI框架合集
  • 原文地址:https://www.cnblogs.com/apiapia/p/9512007.html
Copyright © 2011-2022 走看看