1.0.2 • Published 10 years ago

texture-region v1.0.2

Weekly downloads
2
License
MIT
Repository
github
Last release
10 years ago

browser support

texture-region

stable

A region of a texture, typically used for rendering sprites in a texture atlas on the GPU. Largely inspired by LibGDX's TextureRegion utility.

This is useful alongside kami, but not necessarily tied to it.

The coordinate system used has its origin in the upper left corner with the x-axis pointing to the right and the y axis pointing downwards.

Usage

NPM

var TextureRegion = require('texture-region');

//can be anything with width/height, like an HTML Image object..
var tex = { width: 800, height: 600 };

//get a region for that texture with (x, y, width, height) in pixels
var region = new TextureRegion(tex, 25, 50, 100, 100);

//get UV coordinates
console.log( region.u, region.v, region.u2, region.v2 );

//the region size in pixels
console.log( region.x, region.y, region.width, region.height );

properties (read-only)

  • texture the texture/image this region is associated with
  • u the first U coordinate (horizontal)
  • u2 the second U coordinate
  • v the first V coordinate (vertical)
  • v2 the second V coordinate
  • x the X position of the region in pixels
  • y the Y position of the region in pixels
  • width the width of the region in pixels
  • height the height of the region in pixels

methods

TextureRegion(texture, x, y, width, height)

The constructor. The region is in pixels, and is optional. XY will default to zero. width/height will default to the size of the given texture. The new keyword is optional.

setUVs(u, v, u2, v2)

Updates the UVs and scales the region's pixel values accordingly, based on the associated texture. For example:

//with texture: {width: 50, height: 50}
region.setUV(0, 0, 1, 1);

region.x => 0
region.y => 0
region.width => 50
region.height => 50

setRegion(x, y, width, height)

Updates the region in pixels, based on the associated texture. If width or height is not defined, they will default to the texture width and height. The x and y will defualt to zero.

clone()

Returns a clone of this region.

copy(otherRegion)

Copies the values of the other region into this region.

flip(u, v)

Flips the UV coordinates on either or both axes. u and v are booleans specifying whether to flip that axis.

AMD Filtering Fix

This includes a fix for 1x1 regions, pushing the UVs closer to texture center. Without this, some AMD GPUs will have strange texture artifacts (noted in LibGDX docs). You can disable this fix by setting TextureRegion.FIX_AMD to false.

License

MIT, see LICENSE.md for details.