图像表单

Solar2D 完全支持图像表单,有时也称为精灵表单或纹理图集。这允许您从单个更大的图像文件中加载多个图像/帧。图像表单可用于静态图像和动画精灵。

概述

在移动应用程序设计中,由于设备的纹理内存有限,因此通常必须通过使用图像表单来节省内存。在大多数情况下,将几个较小的图像合并到一个较大的表单中,并在您想要在屏幕上显示特定图像时从表单中“拉取”它会更有效率。Solar2D 通过图像表单提供此功能。

图像表单也是一项便利功能。使用流行的第三方工具,如 TexturePacker,您可以单独设计图像,然后指示应用程序将多个图像文件合并到一个优化的图像表单中。

有关图像表单内存优势的更详细说明,请参阅 性能和优化 指南。

图像表单设置

新图像表单的语法至少需要文件名和一个选项表,该表告诉 Solar2D 关于整个表单中包含的图像的信息。根据您的需要,这些选项可以采用“简单”格式或“复杂”格式。如果您正在使用上述纹理打包实用程序,则通常会为您处理此任务。

使用 graphics.newImageSheet() 函数初始化图像表单

graphics.newImageSheet( filename, [baseDir, ] options )

简单选项

此配置假定图像表单中的所有帧都共享相同的尺寸属性(宽度和高度)。

local options =
{
    width = 50,
    height = 50,
    numFrames = 3
}
local sheet = graphics.newImageSheet( "mySheet.png", options )

复杂选项

如果图像表单具有不同大小的帧,则需要此配置。在此配置中,options 由父 frames 表中的一个表数组组成。数组中的每个表代表图像表单中的一个帧。对于每个帧,您必须指定 xy 起始(左上角)以及帧的 widthheight。这四个参数共同构成了帧的矩形边界。

例如,考虑以下具有两个不同宽度帧的图像表单 (mySheet.png)

232 277
276

图像表单设置如下所示

local options =
{
    frames =
    {
        {   -- frame 1
            x = 0,
            y = 0,
            width = 232,
            height = 276
        },
        {   -- frame 2
            x = 232,
            y = 0,
            width = 277,
            height = 276
        }
    }
}
local sheet = graphics.newImageSheet( "mySheet.png", options )

动态选择的图像表单

就像使用 display.newImageRect() 显示的单个图像一样,可以根据屏幕分辨率动态选择图像表单。要实现此目的,您必须在 options 表中指定以下键值对

  • sheetContentWidth
  • sheetContentHeight

这些值告诉 Solar2D 原始 1x 图像表单的大小。例如,如果您同时为 iPad 和 iPad Retina 开发,并且您正在为常规 iPad 使用 1000×1000 的图像表单,则应为这两个值指定 1000,然后以 2000×2000 的分辨率设计您的 Retina 图像表单。

local options =
{
    width = 100,
    height = 100,
    numFrames = 10,
    sheetContentWidth = 1000,  --width of original 1x size of entire sheet
    sheetContentHeight = 1000  --height of original 1x size of entire sheet
}
local sheet = graphics.newImageSheet( "mySheet.png", options )

有关内容缩放和动态图像选择(也适用于图像表单)的详细信息,请参阅 项目配置 指南。

显示图像

要显示图像表单中的图像(帧),请使用现有的显示 API,但指定表单和帧编号,而不是仅指定图像名称

local sheet = graphics.newImageSheet( "mySheet.png", options )

local frame1 = display.newImage( sheet, 1 )
local frame2 = display.newImage( sheet, 2 )

如果您需要动态选择的图像,请使用 display.newImageRect() 并照常指定宽度和高度

local sheet = graphics.newImageSheet( "mySheet.png", options )

local frame1 = display.newImageRect( sheet, 1, 232, 276 )
local frame2 = display.newImageRect( sheet, 2, 277, 276 )

裁剪注意事项

如上所述,流行的图像打包程序提供了最大化(压缩)图像表单的选项。本质上,这意味着源图像将在打包到最终图像表单之前裁剪掉周围的空白区域。这些程序会智能地利用整个表单尺寸,并自动将图像排列成最有效的布局。例如,如果您想使用打包程序将两个单独的鸟图像打包到一个图像表单中,结果可能如下所示

 +   = 

请注意,上述示例中由灰色棋盘格表示的透明空间已被裁剪掉,并且鸟类紧密地排列在一起,以实现尽可能小的图像表单。通过此更改,图像表单现在为 450×262,而不是 512×276。

重要

虽然裁剪通常是获得尽可能小的图像表单的必要条件,但您必须注意一些重要的使用说明,尤其是在定位方面。

当您将其中一个图像放置在屏幕上或在精灵动画中使用它们时,您通常希望图像的定位就好像它们没有被裁剪一样 - 也就是说,在屏幕定位方面,被裁剪掉的空白区域是被尊重的,而不是被丢弃的。这确保了图像彼此正确对齐,尤其是在裁剪区域通常每帧不同的动画中。

Solar2D 通过图像表单设置中的一些附加参数来管理这一点。这些参数包括 sourceXsourceYsourceWidthsourceHeight。它们被添加到图像表单 options 中,如下所示

local options =
{       
    frames =
    {
        {   -- frame 1
            x = 0,
            y = 0,
            width = 203,
            height = 256,
            sourceX = 60,
            sourceY = 11,
            sourceWidth = 277,
            sourceHeight = 276
        },
        {   -- frame 2
            x = 203,
            y = 0,
            width = 247,
            height = 262,
            sourceX = 16,
            sourceY = 5,
            sourceWidth = 277,
            sourceHeight = 276
        },
    },
    sheetContentWidth = 450,
    sheetContentHeight = 262
}
local sheet = graphics.newImageSheet( "mySheet.png", options )

请注意,在两个帧中,sourceWidthsourceHeight 参数如何与原始未裁剪帧的大小匹配。这个假想的“画布”是您在屏幕上定位裁剪图像时必须考虑的。实际上,图像将相对于未裁剪帧大小的中心点定位。