Permalink
Browse files

Add tilepad option to stop mipmap bleed. Bump v0.2.3

  • Loading branch information...
shama committed Apr 22, 2013
1 parent 5e804ab commit 42c5d5adb72c783b087e54d35ebdd37872904038
Showing with 52 additions and 6 deletions.
  1. +6 −0 README.md
  2. +4 −1 example/example.js
  3. +41 −4 index.js
  4. +1 −1 package.json
View
@@ -149,6 +149,11 @@ atlas = atlas.json(jsonkey);
atlas.canvas = mycanvas;
```
+#### `atlas.tilepad`
+Set this boolean property to `true` if you would like each packed image to pad
+itself with a tiled pattern of itself. Useful for avoiding texture bleeding when
+mipmapping.
+
### `atlaspack.Rect(x, y, w, h)`
Creates a rectangle instance.
@@ -166,6 +171,7 @@ npm install atlaspack
```
## release history
+* 0.2.3 - Add tilepad property to help with mipmapping.
* 0.2.2 - Ability to get and set JSON key.
* 0.2.1 - Add uv method for uv coordinates.
* 0.2.0 - Add expand and index methods.
View
@@ -7,11 +7,13 @@ canvas.height = 128;
// create an atlas with our canvas
var createAtlas = require('../');
var atlas = createAtlas(canvas);
+//atlas.tilepad = true;
function atlasPack(img) {
var node = atlas.pack(img);
if (node === false) {
atlas = atlas.expand(img);
+ //atlas.tilepad = true;
}
}
@@ -20,7 +22,8 @@ var texturePath = 'node_modules/painterly-textures/textures/';
[
'dirt', 'grass', 'grass_dirt',
'obsidian', 'plank', 'whitewool',
- 'crate', 'bedrock', 'bluewool', 'cobblestone',
+ 'crate',
+ 'bedrock', 'bluewool', 'cobblestone',
'brick', 'diamond', 'glowstone',
'netherrack', 'redwool',
].forEach(function(name) {
View
@@ -34,6 +34,7 @@ function Atlas(x, y, w, h) {
this.left = this.right = null;
this.rect = new Rect(x, y, w, h);
this.filled = false;
+ this.tilepad = false;
this._cache = [];
this._uvcache = Object.create(null);
}
@@ -50,6 +51,11 @@ Atlas.prototype.pack = function(rect) {
this._cache = [];
this._uvcache = [];
rect = this._toRect(rect);
+
+ if (this.img && this.tilepad) {
+ rect = this._tilepad(rect);
+ }
+
if (this.left !== null) {
return this._ontoCanvas(this.left.pack(rect) || this.right.pack(rect));
}
@@ -76,6 +82,10 @@ Atlas.prototype.expand = function(rect) {
var self = this;
rect = this._toRect(rect);
+ if (this.img && this.tilepad) {
+ rect = this._tilepad(rect);
+ }
+
var atlas;
if (this.rect.w < this.rect.h) {
atlas = new Atlas(0, 0, this.rect.w + rect.w, this.rect.h);
@@ -129,16 +139,18 @@ Atlas.prototype.uv = function() {
if (self._uvcache.length > 0) {
return self._uvcache;
}
+ var isPad = this.tilepad;
(function loop(atlas) {
if (atlas.left !== null) {
loop(atlas.left);
loop(atlas.right);
} else if (typeof atlas.rect.name !== 'undefined') {
+ var p = (isPad) ? atlas.rect.w / 4 : 0;
self._uvcache[atlas.rect.name] = [
- [atlas.rect.x, atlas.rect.y],
- [atlas.rect.x + atlas.rect.w, atlas.rect.y],
- [atlas.rect.x + atlas.rect.w, atlas.rect.y + atlas.rect.h],
- [atlas.rect.x, atlas.rect.y + atlas.rect.h],
+ [atlas.rect.x + p, atlas.rect.y + p],
+ [(atlas.rect.x + p) + (atlas.rect.w - (p * 2)), atlas.rect.y + p],
+ [(atlas.rect.x + p) + (atlas.rect.w - (p * 2)), (atlas.rect.y + p) + (atlas.rect.h - (p * 2))],
+ [(atlas.rect.x + p), (atlas.rect.y + p) + (atlas.rect.h - (p * 2))],
].map(function(uv) {
if (uv[0] !== 0) {
uv[0] = uv[0] / self.rect.w;
@@ -179,6 +191,31 @@ Atlas.prototype.json = function(input) {
}
};
+// Pads the image by tiling itself around itself
+Atlas.prototype._tilepad = function(rect) {
+ var img = this.img;
+ if (!img) return rect;
+
+ var p = img.width / 2;
+
+ var canvas = document.createElement('canvas');
+ canvas.name = img.name || img.src;
+ canvas.id = img.id || '';
+ canvas.width = img.width + img.width;
+ canvas.height = img.height + img.height;
+ var ctx = canvas.getContext('2d');
+
+ var pattern = ctx.createPattern(img, 'repeat');
+ ctx.fillStyle = pattern;
+ ctx.translate(p, p);
+ ctx.fillRect(-p, -p, canvas.width + p, canvas.height + p);
+ ctx.translate(-p, -p);
+
+ this.img = canvas;
+
+ return new Rect(rect.x, rect.y, this.img.width, this.img.height);
+};
+
// if has an image and canvas, draw to the canvas as we go
Atlas.prototype._ontoCanvas = function(node) {
if (node && this.img && this.canvas) {
View
@@ -1,7 +1,7 @@
{
"name": "atlaspack",
"description": "Pack rectangles (or images) into a rectangle (or canvas texture atlas).",
- "version": "0.2.2",
+ "version": "0.2.3",
"homepage": "https://github.com/shama/atlaspack",
"author": {
"name": "Kyle Robinson Young",

0 comments on commit 42c5d5a

Please sign in to comment.