HTML UI for a game

0 favourites
  • 3 posts
From the Asset Store
Casual UI Buttons #1
$4 USD
20% off
Casual UI Button is a customizable, ready to use desktop and mobile-friendly game UI Asset.
  • Hi,

    I wanted to ask if there is a more or less clean way to create an ui in HTML that is overlaying the canvas to control the game?

    I've tested it with an iframe and put my HTML ui inside. Then I've used the API with Javasctipt to communicate with the game.

    Is there a better, more sophisticated way to do this?

    Tagged:

  • Iframes aren't very good way imo. They sit on top of everything, and may run in to issues with cors just about anywhere, if the specific platform doesn't have its own issues cough ios.

    There is no silver bullet because a gui can be done in such a wide variety of ways and styles.

    Learn hierarchies, blend modes with masks, and take a look at some of the third party plugs.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thanks for the reply!

    I know iFrames are not a clean solution, that's why I'm asking for alternatives.

    But you can do almost magical things with it^^ and it was just my first approach cause I did not find any other standard object type that could do the job.

    The hint with the plugin let me to this one https://www.construct.net/en/make-games/addons/190/html-element.

    It does the job by adding a new object "HTML" to Construct. But you have to assign the HTML Tag in the editor. I would prefere simply writing some code as text which is much faster.

    There seems to be a workaround.

    Every HTML object has a 'Text like HTML' checkbox. This allows you to put HTML in the text editor. It might do the job, but I have to test it.

    I've expected a way like in Phaser.io or PlayCanvas. There you can simply load and render html files with CSS and JavaScript.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)