me.ImageLayer.anchorPoint is broken

[parasyte]

this.viewport is never set. in me.ImageLayer

[obiot]

ahah, i'm probably responsible for that one ;)

[parasyte]

Sadly, I could not get the anchorPoint working, even by patching init to add this.viewport.

[obiot]

oh so my patch won't help furthermore I guess :P

[obiot]

Just successfully tested this on the tutorial by first resizing used image to half their size and then by adding the following line after loading a level (in the play screen reset function) :

me.game.currentLevel.getLayerByName("Parallax1").anchorPoint.set(0.0, 0.5);
me.game.currentLevel.getLayerByName("Parallax2").anchorPoint.set(0.0, 0.5);

all working fine, so closing this one :)

[parasyte]

@obiot What exactly does it look like? And does it work as expected with the repeat property? I'm testing it now.

[parasyte]

Aha! I got it. Now I see why this confused me before. anchorPoint changes the destination position of the image relative to the viewport. I actually want the source position relative to the map, and I think most other developers would, as well. Here's a related thread: https://groups.google.com/d/msg/melonjs/7j4DMlk_7o4/9rR00lQPuDMJ

As an example, I want the buildings and moon backgrounds in Kung Fu Star to align the bottom of the image with the bottom of the map. The current implementation creates an ugly window effect when the image is smaller than the viewport, which is not at all what I expect. And when the image is bigger, the bottom of the image is aligned with the bottom of the viewport initially.

Here is an explanation of how I expect this to work, with pictures:

1. My map is 640x480 px
2. My viewport is 320x240 px
3. I create a me.ImageLayer with repeat = "no-repeat", anchorPoint = { "x" : 0, "y" : 1 }, and ratio = { "x" : 0, "y" : 0.5 }.
4. When I scroll the viewport to the bottom of the map, I should see the me.ImageLayer anchored to the bottom. (Figure 1)
5. When I scroll the viewport to the top of the map, I should see the me.ImageLayer has scrolled up exactly half way. (Figure 2)

In the images, I have represented the map as the entire white background, and the me.ImageLayer is represented by the colorful image. The viewport is represented by the bright area. The darkened area is outside of the viewport, so it is hidden from view.

Figure 1

Figure 2

[obiot]

Actually I would rather stick with the current implementation and rewrite the whole stuff as part of the 1.0.0 release.
I would like as well to rewrite the following ugly piece of code using something like context.translate and context.clip, and I'm afraid it's too much risk for a maintenance release :
https://github.com/melonjs/melonJS/blob/1.0.0-dev/src/level/TMXLayer.js#L288-L332