Skip to content

Commit

Permalink
[#632] parse and apply the default ImageLayer position when specifi…
Browse files Browse the repository at this point in the history 
…ed in Tiled

- `me.ImageLayer` constructor was updated to add two `x` and `y`
parameters
- the original `pos` property has been renamed to `offset`, which makes
more sense since this specifies the start drawing offset in the image.
- `pos` is now use as its should be, to specify the default drawing
position of the image in the viewport
- some cleaning in the constructor as well, remove some useless local
var, as speed is not a real issue here.
  • Loading branch information
@obiot
obiot committed Feb 2, 2015
1 parent fbba765 commit 9f30a6f
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 24 deletions.
46 changes: 24 additions & 22 deletions src/level/TMXLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,11 @@
* @extends me.Renderable
* @memberOf me
* @constructor
* @param {String} name layer name
* @param {Number} x default x coordinates in pixels
* @param {Number} y default x coordinates in pixels
* @param {Number} width layer width in pixels
* @param {Number} height layer height in pixels
* @param {String} name layer name
* @param {String} image image name (as defined in the asset list)
* @param {Number} z z position
* @param {me.Vector2d} [ratio=1.0] scrolling ratio to be applied
Expand All @@ -69,7 +71,7 @@
* @ignore
* @function
*/
init: function (name, width, height, imagesrc, z, ratio) {
init: function (x, y, width, height, name, imagesrc, z, ratio) {
// layer name
this.name = name;

Expand All @@ -82,13 +84,13 @@
this.imagewidth = this.image.width;
this.imageheight = this.image.height;

// a cached reference to the viewport
var viewport = me.game.viewport;

// set layer width & height
width = (width ? Math.min(viewport.width, width) : viewport.width);
height = (height ? Math.min(viewport.height, height) : viewport.height);
this._super(me.Renderable, "init", [0, 0, width, height]);
width = (width ? Math.min(me.game.viewport.width, width) : me.game.viewport.width);
height = (height ? Math.min(me.game.viewport.height, height) : me.game.viewport.height);
this._super(me.Renderable, "init", [x, y, width, height]);

// specify the start offset when drawing the image (for parallax/repeat features)
this.offset = new me.Vector2d(0, 0);

// displaying order
this.z = z;
Expand Down Expand Up @@ -116,7 +118,7 @@
}

// last position of the viewport
this.lastpos = viewport.pos.clone();
this.lastpos = me.game.viewport.pos.clone();

// Image Layer is considered as a floating object
this.floating = true;
Expand Down Expand Up @@ -185,15 +187,15 @@
}
else if (this.repeatX || this.repeatY) {
// parallax / scrolling image
this.pos.x += ((vpos.x - this.lastpos.x) * this.ratio.x) % this.imagewidth;
this.pos.x = (this.imagewidth + this.pos.x) % this.imagewidth;
this.offset.x += ((vpos.x - this.lastpos.x) * this.ratio.x) % this.imagewidth;
this.offset.x = (this.imagewidth + this.offset.x) % this.imagewidth;

this.pos.y += ((vpos.y - this.lastpos.y) * this.ratio.y) % this.imageheight;
this.pos.y = (this.imageheight + this.pos.y) % this.imageheight;
this.offset.y += ((vpos.y - this.lastpos.y) * this.ratio.y) % this.imageheight;
this.offset.y = (this.imageheight + this.offset.y) % this.imageheight;
}
else {
this.pos.x += (vpos.x - this.lastpos.x) * this.ratio.x;
this.pos.y += (vpos.y - this.lastpos.y) * this.ratio.y;
this.offset.x += (vpos.x - this.lastpos.x) * this.ratio.x;
this.offset.y += (vpos.y - this.lastpos.y) * this.ratio.y;
}
this.lastpos.setV(vpos);
},
Expand All @@ -205,9 +207,9 @@
draw : function (renderer, rect) {
// translate default position using the anchorPoint value
var viewport = me.game.viewport;
var shouldTranslate = this.anchorPoint.y !== 0 || this.anchorPoint.x !== 0;
var translateX = ~~(this.anchorPoint.x * (viewport.width - this.imagewidth));
var translateY = ~~(this.anchorPoint.y * (viewport.height - this.imageheight));
var shouldTranslate = this.anchorPoint.y !== 0 || this.anchorPoint.x !== 0 || this.pos.y !== 0 || this.pos.x !== 0;
var translateX = ~~(this.pos.x + (this.anchorPoint.x * (viewport.width - this.imagewidth)));
var translateY = ~~(this.pos.y + (this.anchorPoint.y * (viewport.height - this.imageheight)));

if (shouldTranslate) {
renderer.translate(translateX, translateY);
Expand All @@ -234,8 +236,8 @@
}
// parallax / scrolling image
else {
var sx = ~~this.pos.x;
var sy = ~~this.pos.y;
var sx = ~~this.offset.x;
var sy = ~~this.offset.y;

var dx = 0;
var dy = 0;
Expand Down Expand Up @@ -266,9 +268,9 @@
// else update required var for next iteration
sx = 0;
sw = Math.min(this.imagewidth, this.width - dx);
sy = ~~this.pos.y;
sy = ~~this.offset.y;
dy = 0;
sh = Math.min(this.imageheight - ~~this.pos.y, this.height);
sh = Math.min(this.imageheight - ~~this.offset.y, this.height);
} while (true);
}

Expand Down
7 changes: 5 additions & 2 deletions src/level/TMXMapReader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,9 @@
if (map.background_image) {
// add a new image layer
map.mapLayers.push(new me.ImageLayer(
"background_image",
0, 0,
map.width, map.height,
"background_image",
map.background_image,
zOrder++
));
Expand Down Expand Up @@ -283,13 +284,15 @@

readImageLayer: function (map, data, z) {
// extract layer information
var ilx = +data[TMXConstants.TMX_TAG_X] || 0;
var ily = +data[TMXConstants.TMX_TAG_Y] || 0;
var iln = data[TMXConstants.TMX_TAG_NAME];
var ilw = +data[TMXConstants.TMX_TAG_WIDTH];
var ilh = +data[TMXConstants.TMX_TAG_HEIGHT];
var ilsrc = typeof (data[TMXConstants.TMX_TAG_IMAGE]) !== "string" ? data[TMXConstants.TMX_TAG_IMAGE].source : data[TMXConstants.TMX_TAG_IMAGE];

// create the layer
var imageLayer = new me.ImageLayer(iln, ilw * map.tilewidth, ilh * map.tileheight, ilsrc, z);
var imageLayer = new me.ImageLayer(ilx, ily, ilw * map.tilewidth, ilh * map.tileheight, iln, ilsrc, z);

// set some additional flags
var visible = typeof(data[TMXConstants.TMX_TAG_VISIBLE]) !== "undefined" ? data[TMXConstants.TMX_TAG_VISIBLE] : true;
Expand Down

0 comments on commit 9f30a6f

Please sign in to comment.