Changing the position of the loader's play button?

10 views
Skip to first unread message

DaVince

unread,
Feb 4, 2020, 12:38:00 PM2/4/20
to excaliburjs
Hi all,

I'm working on a game that uses pixel art and a fixed game resolution. I've edited my HTML, CSS and JavaScript so that the game canvas is resized to an integer scale. Unfortunately, it turns out that the play button's dimensions and position are set only once and I cannot change it. I'm looking for a way to set it to a specific location on the screen.

Some details.

I'm using the loader.startButtonFactory() method and I'm overwriting some styles in there for the button. But once I try to change the position (using position: relative; top: 20px;), things get messed up as the element tries to go beyond its fixed size parent element:


I realize this is because a _playButtonRootElement is created and it is given a certain position only once.

Ultimately, I'd like to be able to pass some values to the loader in order to set a custom button position. This allows for a bit more flexibility in the loader. :)

Erik Onarheim

unread,
Feb 6, 2020, 1:14:21 PM2/6/20
to DaVince, excaliburjs
Hi DaVince,

It was our intention to allow the button to be positioned anywhere, this sounds like a bug. I agree, we'd like the flexibility to do what you are trying to do.

It might be possible to hack in some CSS to gain more control of the _playButtonRootElement div element or use the #excalibur-play id to manipulate the button element. Another workaround may be to return an position absolute/fixed button out of the loader.startButtonFactory() and position manually.

Please open an issue in github https://github.com/excaliburjs/Excalibur and describe exactly what you're trying to do with the play button. Please let us know what values you think would be valuable to pass to the loader to customize button position.

I'll have some time to look at this bug on Saturday, sorry about the hassle.

Cheers,
Erik

--
You received this message because you are subscribed to the Google Groups "excaliburjs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/a4849181-b32b-4883-a8e9-1f5474789bde%40googlegroups.com.

DaVince

unread,
Feb 8, 2020, 12:47:57 PM2/8/20
to excaliburjs
Thanks for the response, I'll put an issue up on Github. :)

Op donderdag 6 februari 2020 12:14:21 UTC-6 schreef Erik Onarheim:
To unsubscribe from this group and stop receiving emails from it, send an email to excal...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages