TexturePackerGUI结合CoronaSDK生成ImageSheet示例
在OPENGL中加载图片的大小最好是2的N次方,否则就会造成内存的浪费。比如10X10的图片实际上占用了16X16的空间,所以最好的方法是把图片尽可能拼到一起,成为一个符合2的N次方的大图。在移动设备上大图大小不能超过2048X2048。
使用Corona SDK进行开发的时候,我们可以使用一个很棒的工具TexturePackerGUI来完成拼大图的体力活,下面举个例子:
随便涂鸦了上述5个大小不一的图片,我们拖进TexturePackerGUI看一下:
把数据格式选成corona sdk,我们可以看到工具自动以MaxRects算法拼成了一张256X512的图片,按Publish就可以生成这样png图片,以及一段ImageSheet.lua的代码,如下:
local SheetInfo = {} SheetInfo.sheet = { frames = { { -- img1 x=136, y=86, width=28, height=28, sourceX = 2, sourceY = 0, sourceWidth = 30, sourceHeight = 30 }, { -- img2 x=2, y=220, width=96, height=72, sourceX = 0, sourceY = 8, sourceWidth = 100, sourceHeight = 100 }, { -- img3 x=170, y=2, width=60, height=288, sourceX = 0, sourceY = 2, sourceWidth = 60, sourceHeight = 300 }, { -- img4 x=2, y=2, width=166, height=82, sourceX = 16, sourceY = 8, sourceWidth = 200, sourceHeight = 100 }, { -- img5 x=2, y=86, width=132, height=132, sourceX = 8, sourceY = 10, sourceWidth = 150, sourceHeight = 150 }, }, sheetContentWidth = 256, sheetContentHeight = 512 } SheetInfo.frameIndex = { ["img1"] = 1, ["img2"] = 2, ["img3"] = 3, ["img4"] = 4, ["img5"] = 5, } function SheetInfo:getSheet() return self.sheet; end function SheetInfo:getFrameIndex(name) return self.frameIndex[name]; end return SheetInfo
我们使用上述代码是,只需require之后,以如下方式取得小图片即可:
local sheetInfo = require("myExportedImageSheet") -- lua file that Texture packer published local myImageSheet = graphics.newImageSheet( "ImageSheet.png", sheetInfo:getSheet() ) -- ImageSheet.png is the image Texture packer published local myImage1 = display.newImage( myImageSheet , sheetInfo:getFrameIndex("image_name1")) local myImage2 = display.newImage( myImageSheet , sheetInfo:getFrameIndex("image_name2"))
让我们像月光一样