Difference between revisions of "love.graphics.newArrayImage"
(Created page) |
m |
||
Line 28: | Line 28: | ||
A DPI scale of 2 (double the normal pixel density) will result in the image taking up the same space on-screen as an image with half its pixel dimensions that has a DPI scale of 1. This allows for easily swapping out image assets that take the same space on-screen but have different pixel densities, which makes supporting high-dpi / retina resolution require less code logic. | A DPI scale of 2 (double the normal pixel density) will result in the image taking up the same space on-screen as an image with half its pixel dimensions that has a DPI scale of 1. This allows for easily swapping out image assets that take the same space on-screen but have different pixel densities, which makes supporting high-dpi / retina resolution require less code logic. | ||
+ | |||
+ | In order to use an Array Texture or other non-2D texture types as the main texture in a custom [[Shader]], the [[love.graphics.newShader|void effect()]] variant must be used in the pixel shader, and MainTex must be declared as an ArrayImage or sampler2DArray like so: <code>uniform ArrayImage MainTex;</code>. | ||
+ | |||
+ | == Examples == | ||
+ | === Draw multiple layers of an Array Image === | ||
+ | <source lang="lua"> | ||
+ | function love.load() | ||
+ | local sprites = {"sprite1.png", "sprite2.png"} | ||
+ | image = love.graphics.newArrayImage(sprites) | ||
+ | end | ||
+ | |||
+ | function love.draw() | ||
+ | love.graphics.drawLayer(image, 1, 50, 50) | ||
+ | love.graphics.drawLayer(image, 2, 250, 50) | ||
+ | end | ||
+ | </source> | ||
+ | |||
+ | === Use a custom shader with love.graphics.drawLayer === | ||
+ | <source lang="lua"> | ||
+ | shader = love.graphics.newShader[[ | ||
+ | uniform ArrayImage MainTex; | ||
+ | |||
+ | void effect() { | ||
+ | // Texel uses a third component of the texture coordinate for the layer index, when an Array Texture is passed in. | ||
+ | // love sets up the texture coordinates to contain the layer index specified in love.graphics.drawLayer, when | ||
+ | // rendering the Array Texture. | ||
+ | love_PixelColor = Texel(MainTex, VaryingTexCoord.xyz) * VaryingColor; | ||
+ | } | ||
+ | ]] | ||
+ | |||
+ | function love.load() | ||
+ | local sprites = {"sprite1.png", "sprite2.png"} | ||
+ | image = love.graphics.newArrayImage(sprites) | ||
+ | end | ||
+ | |||
+ | function love.draw() | ||
+ | love.graphics.setShader(shader) | ||
+ | love.graphics.drawLayer(image, 1, 50, 50) | ||
+ | love.graphics.drawLayer(image, 2, 250, 50) | ||
+ | end | ||
+ | </source> | ||
== See Also == | == See Also == |
Revision as of 02:34, 5 April 2018
Available since LÖVE 0.11.0 |
This function is not supported in earlier versions. |
This function can be slow if it is called repeatedly, such as from love.update or love.draw. If you need to use a specific resource often, create it once and store it somewhere it can be reused! |
An array image / array texture is a single object which contains multiple 'layers' or 'slices' of 2D sub-images. It can be thought of similarly to a texture atlas or sprite sheet, but it doesn't suffer from the same tile / quad bleeding artifacts that texture atlases do – although every sub-image must have the same dimensions.
A specific layer of an array image can be drawn with love.graphics.drawLayer / SpriteBatch:addLayer, or with the Quad variant of love.graphics.draw and Quad:setLayer, or via a custom Shader.
To use an array image in a Shader, it must be declared as a ArrayImage
or sampler2DArray
type (instead of Image
or sampler2D
). The Texel(ArrayImage image, vec3 texturecoord)
shader function must be used to get pixel colors from a slice of the array image. The vec3 argument contains the texture coordinate in the first two components, and the 0-based slice index in the third component.
Contents
Function
Creates an array Image given a different image file for each slice of the resulting array image object.
Synopsis
image = love.graphics.newArrayImage( slices, settings )
Arguments
table slices
- A table containing filepaths to images (or File, FileData, ImageData, or CompressedImageData objects), in an array. Each sub-image must have the same dimensions. A table of tables can also be given, where each sub-table contains all mipmap levels for the slice index of that sub-table.
table settings (nil)
- Optional table of settings to configure the array image, containing the following fields:
boolean mipmaps (false)
- True to make the image use mipmaps, false to disable them. Mipmaps will be automatically generated if the image isn't a compressed texture format.
boolean linear (false)
- True to treat the image's pixels as linear instead of sRGB, when gamma correct rendering is enabled. Most images are authored as sRGB.
number dpiscale (1)
- The DPI scale to use when drawing the array image and calling getWidth/getHeight.
Returns
Image image
- An Array Image object.
Notes
Illustration of how an array image works: [1]
A DPI scale of 2 (double the normal pixel density) will result in the image taking up the same space on-screen as an image with half its pixel dimensions that has a DPI scale of 1. This allows for easily swapping out image assets that take the same space on-screen but have different pixel densities, which makes supporting high-dpi / retina resolution require less code logic.
In order to use an Array Texture or other non-2D texture types as the main texture in a custom Shader, the void effect() variant must be used in the pixel shader, and MainTex must be declared as an ArrayImage or sampler2DArray like so: uniform ArrayImage MainTex;
.
Examples
Draw multiple layers of an Array Image
function love.load()
local sprites = {"sprite1.png", "sprite2.png"}
image = love.graphics.newArrayImage(sprites)
end
function love.draw()
love.graphics.drawLayer(image, 1, 50, 50)
love.graphics.drawLayer(image, 2, 250, 50)
end
Use a custom shader with love.graphics.drawLayer
shader = love.graphics.newShader[[
uniform ArrayImage MainTex;
void effect() {
// Texel uses a third component of the texture coordinate for the layer index, when an Array Texture is passed in.
// love sets up the texture coordinates to contain the layer index specified in love.graphics.drawLayer, when
// rendering the Array Texture.
love_PixelColor = Texel(MainTex, VaryingTexCoord.xyz) * VaryingColor;
}
]]
function love.load()
local sprites = {"sprite1.png", "sprite2.png"}
image = love.graphics.newArrayImage(sprites)
end
function love.draw()
love.graphics.setShader(shader)
love.graphics.drawLayer(image, 1, 50, 50)
love.graphics.drawLayer(image, 2, 250, 50)
end
See Also
Other Languages
Dansk –
Deutsch –
English –
Español –
Français –
Indonesia –
Italiano –
Lietuviškai –
Magyar –
Nederlands –
Polski –
Português –
Română –
Slovenský –
Suomi –
Svenska –
Türkçe –
Česky –
Ελληνικά –
Български –
Русский –
Српски –
Українська –
עברית –
ไทย –
日本語 –
正體中文 –
简体中文 –
Tiếng Việt –
한국어
More info