Screen element graphics anchor is broken in 0.28.0-alpha.547

[ikiselev1989]

Steps to Reproduce

Create new screen element. Add graphics to it.

Expected Result

Graphics is centered on element.

Actual Result

Graphics is not centered on element.

[eonarheim]

Hi @ikiselev1989

This isn't well documented, but ScreenElement's have an anchor of (0, 0) by default which draw the graphics from the top left. Is this what you are seeing?

The anchor on ScreenElement can be changed to center graphics by setting it to (.5, .5)

const screenElement = new ex.ScreenElement({..});
screenElement.anchor = ex.Vector.Half;

I've pushed an update to the documentation to highlight this gap excaliburjs/excaliburjs.github.io@dc1f614

[ikiselev1989]

Hi @onarheim
Sorry, I was on fire and couldn't leave good feedback yesterday.

The story:
I used half vector anchor for graphics of Screen Element and it was good but in version 0.28.0-alpha.547 it's not affected for graphics.
this.graphics.use(sprite, { anchor: new Vector(0.5, 0.5) });

I have checked it's working in alpha.546 but not in alpha.547

[eonarheim]

@ikiselev1989 Interesting, I'll dig into those versions!

[eonarheim]

@ikiselev1989 Can you send me more code about your specific situation? I suspect something trickier might be happening.

This is what I built to try and reproduce and so far it seems to be accurately centering the graphics. Let me know if I'm misunderstanding something as well

var engine = new ex.Engine({
  width: 600,
  height: 400
});

var image = new ex.ImageSource('./spritefont.png');

var loader = new ex.Loader([image]);

var screenElement = new ex.ScreenElement({
  pos: ex.vec(0, 0),
  width: 200,
  height: 200
});

screenElement.graphics.use(image.toSprite(), { anchor: ex.vec(0.5, 0.5) });

engine.currentScene.add(screenElement);

engine.start(loader);

spritefont.png

Spritefont centered about (0, 0)

[ikiselev1989]

@eonarheim Hi! Of course. I want to use anchor in center of ScreenElement and add its graphics in the same place with anchor in center.

import {Engine, ImageSource, Loader, ScreenElement, Vector} from "excalibur";

const engine = new Engine({
    width: 600,
    height: 400
});

engine.debug.entity.showId = false;
engine.debug.collider.showGeometry = true;

engine.showDebug(true)

const image = new ImageSource('./vite.svg');

const loader = new Loader([image]);

const screenElement = new ScreenElement({
    pos: new Vector(engine.screen.halfDrawWidth, engine.screen.halfDrawHeight),
    width: 100,
    height: 100,
    anchor: Vector.Half
});

screenElement.graphics.use(image.toSprite(), {anchor: Vector.Half});

engine.currentScene.add(screenElement);

engine.start(loader);

I want:

I get:

[eonarheim]

@ikiselev1989 Theoretically fixed, let me know if the latest alpha doesn't address the issue!

[ikiselev1989]

@eonarheim Hi! Sorry for late.
I still get this.

BUT maybe I understand it wrong. I think if I use Vector.Half for both of ScreenElement and its graphics it should be the same center of ScreenElement and its graphics.