About Game UI
krumza September 1st, 2017

I've tried but still came to the opinion that if you need a complex interface,

it is better to do it on html and not on the canvas.

Complex animated element or set of elements that are already in the default html to paint on the canvas is just awful.

For example, scroll bars or a set of cards - you just want to hang myself if all this stuff into arrays and do other manipulations in the head to understand where the elements

well, generally studying this issue , reading books, stackoverflow, looking at examples of other projects,

I still came to the conclusion that it is best practice to make the complex interface beyond the canvas and do it in html this opens up a huge world context menu, modal Windows, tooltips and other beautiful elements

I implement it the following way - create div#gui and all the controls already put it

I put it hagher than main div and give it all propertyes as #wade_main_div, only give bigger z-index and pointer-events:none to not disable canvas

buttons in div #gui has css-propery pointer-events:auto; and i warite listeners in hud.js file for it.

in principle, very easy to align the coordinates of objects of Wade and the cursor position on the screen

wade.app.showHud = function() {
        gui.style.display = 'block';
        gui.style.width = container.style.width;
        gui.style.height = container.style.height; 
    }

but it's hard to manage the interactions with the elements - for example the onclick works fine, but not mobile - you have to hang up the handler for touchstart/touchend html buttons

here's the question-how is it possible to implement directly in wade_input_manager model of interaction with the html layer? and actually given that we have a cycle update we could create a reactive model is not worse react.js or vue.js have you ever thought about it?

 

All 5 Comments
krumza September 21st, 2017

20 days forum inactivity

Gio please ask something!

Gio September 21st, 2017

Hi krumza

Don't worry we've been quiet but we're all alive and working on wade :)

We are releasing 3.8 very soon, a bit behind our initial schedule but hopefully it'll be worth the  wait. It's a nice update.

Now regarding your question above - apologies I had completely missed it the frist time around.

I think that if you are doing a desktop game, doing your interface in html, outside the canvas, is a good idea.

However on mobile, a lot of basic css operations are very, very slow. Too slow to be practical. Even having a couple of simple css transitions active on the page could slow everything down considerably.

So if you need your game to work well on mobile, and have a nice UI where things move smoothly and fade in and out, and so on, I think doing it in canvas will give you a better result.

However if you don't care about mobile, and are making a desktop game/app, I agree with you: css + html is an easier and more powerful model for making UI's.

Having said that, if you want you could try to edit wade's inputManager.js and get it to pass the input events to your DOM objects. I think this would be fairly simple to implement. However, without even making any changes to the wade source code, you could try this in your app:

wade.app.onMouseDown = function(data)
{
    var domObject = document.elementFromPoint(data.screenPosition.x, data.screenPosition.y);
    if (domObject && domObject.id != 'container' && domObject.id.substr(0, 5) != 'wade_')
    {
         // mouse down happened on domObject
    }
};

I hope this makes sense?

krumza September 22nd, 2017

Thanks Gio! I will use this code snippet

and what about part 2 of my post - about move WADE to vue(react)-like framework?

Gio September 25th, 2017

I have been thinking about it since you first suggested it, but I can't really figure out a way of making it work nicely.

Generally speaking, an MVC architecture can be good for some web apps, and sometimes for UI, but for games (which is what most people use WADE for) it doesn't really seem to be a good fit.

How do you think this would work in practice? Could you make an example using some pseudo code?

For interacting with DOM elements however, I'm sure we could integrate something like the above code into WADE itself, so for example you could add a list of DOM objects that you want to receive wade events, and wade will trigger those events automatically. I can think of a few ways of doing that, and should be able to add it in for version 4.0 in some form.

krumza September 25th, 2017

to be honest, I did not fully understand, but here's how I think.

From Wade if the layers of the canvas, why not add the html layer , like for the UI or even use it too to build games (well, popular for example on codepen these clicker does not need the canvas).

Ie we are talking about adding objects to Wade, associated not only with the canvas but with the html element. on idea it is necessary to consider all form elements(input,text, group of options, sliders, etc). as to implant it in Wade. after all, we have and so has elements of OOP - graphics using the canvas, but what if it's not a picture but a DOM element

later I will add more thoughts

 

Post a reply
Add Attachment
Submit Reply
Login to Reply