me.ImageLayer.achorPoint should map to the viewport boundary

[parasyte]

See also: #604 #332

The anchorPoint setting is unintuitive, as currently implemented. It maps the ImageLayer to the visible part of the viewport. And secondly, the ImageLayer position alters the source coordinates instead of the destination coordinates. Combined, these issues make it very difficult to accurately position an ImageLayer with absolute coordinates, or coordinates relative to the map.

Here are some (really long) threads that also go over this topic, including a lot of workarounds for it:

• https://groups.google.com/d/msg/melonjs/soHi5NSMvy4/4Im7PrTUo2gJ
• https://groups.google.com/d/msg/melonjs/7j4DMlk_7o4/kXYNrwkG4doJ
• https://groups.google.com/d/msg/melonjs/Isabmqej2U0/VpB4mSZf1u8J
• https://groups.google.com/d/msg/melonjs/N6rcqUPLzm0/wv4UNvSoztYJ

For the most part, the workarounds allow things to work as expected. But this is clearly a difficult bug to deal with.

To provide a better technical description, the anchorPoint should map an ImageLayer to the viewport boundary, taking into account the ImageLayer size and the viewport boundary size. This mapping establishes the ImageLayer's origin. Then, as the viewport moves, the ImageLayer moves at a ratio proportional to the viewport position in relation to the viewport boundary. It is not easy to digest in writing, but in practice this will solve almost all of the issues around positioning an ImageLayer with an active ratio.

[xorinzor]

This code allowed me to set the x/y coordinates of the ImageLayer properly

me.CustomImageLayer = me.ImageLayer.extend({
    init: function(x, y, name, width, height, image, z, ratio) {

        this._super(me.ImageLayer, "init", [name, width, height, image, z, ratio]);

        //added the this.pos.<x/y> to prevent "jumping" of the imagelayer when moving the viewport around
        this.pos.x = this.x = x;
        this.pos.y = this.y = y;
    },

    updateLayer : function (vpos) {
        this._super(me.ImageLayer, "updateLayer", [ vpos ]);

        //I couldn't get any modifications on the Y-axis to work so I left this static
        this.pos.y = vpos.y - this.y;

        if(this.repeatX) {
            this.pos.x += (((vpos.x - this.lastpos.x) - this.x) * this.ratio.x) % this.imagewidth;
            this.pos.x = (this.imagewidth + this.pos.x) % this.imagewidth;
        } else {
            this.pos.x = vpos.x - this.x;   
        }
    }
}); 

Might be useful

[parasyte]

@xorinzor Why are you subtracting the absolute origin from the viewport position? Shouldn't it be the other way? Subtract the viewport position from the origin...

[xorinzor]

@parasyte Doing it the other way around creates negative values which result, when drawing, in things like:
(assuming the imagelayer is the background)

[parasyte]

Oh right, because it's changing the source coordinates. 😒 The ImageLayer code needs some internal restructuring, for sure ...

[obiot]

note that with this last change, the anchor point is now also relative to the image default position, I'm not sure how this however answer to the original issue :P