how to use DOM elements with Phaser?

[kaasis]

Can anyone explain and/or give an example or link me tutorial where is explained how i can put DOM elements over Phaser game and access them through phaser code when needed? I was searching this on google but didn't quite find any good answer, most of them were really old and didn't work.

[mattstyles]

Phaser isn't some magical framework, its just JS and so you'd access other elements in much the same way as you would for any web page.

<canvas id='game' width=640 height=480></canvas>
<div class='js-overlay overlay'>Hello World</div>

Your CSS for this might look something like:

.overlay {
  position: absolute;
  z-index: 1000;
  color: blue;
  background: rgba(0, 0, 0, 0.2);
  padding: 30px;
}

Now you've got a canvas element (which, given nothing else on the screen will end up top-left of the page) and an absolutely positioned overlay element that has a z-index of 1000 to keep it above the canvas (which it would be anyway in this case). It's got a semi-transparent background so you'll see the canvas through it and its cheerily says 'Hello World' in blue.

Once you've initialised Phaser then you can attach that to the canvas element.

For there you can continue to code your Phaser game as you would for any Phaser game, but, at any point you can grab the overlay div and 'muck' with it. For example, maybe one of your state create functions changes the text in the overlay:

function create () {
  var overlay = document.querySelector('.js-overlay')
  overlay.innerHTML = 'Phaser is awesome!'
}

And thats it, I'd like to say you've reached out of the Phaser boundary in to the page and changed it, but, in reality, there is no boundary, its all just HTML, CSS and JS (in the case of Phaser the HTML and CSS portion is extremely minimal).

An html canvas element is much like any other.

Don't be afraid to do this either, for some stuff like text display and UI standard 'old-fashioned' DOM manipulation easily trumps canvas so if your game relies on these sort of things then it makes perfect sense to use it. Canvas shines for rendering stuff really quick. Use the right tool for the job you need doing.

[kaasis]

14 hours ago, mattstyles said:

Phaser isn't some magical framework, its just JS and so you'd access other elements in much the same way as you would for any web page.

<canvas id='game' width=640 height=480></canvas>
<div class='js-overlay overlay'>Hello World</div>

Your CSS for this might look something like:

.overlay {
  position: absolute;
  z-index: 1000;
  color: blue;
  background: rgba(0, 0, 0, 0.2);
  padding: 30px;
}

Now you've got a canvas element (which, given nothing else on the screen will end up top-left of the page) and an absolutely positioned overlay element that has a z-index of 1000 to keep it above the canvas (which it would be anyway in this case). It's got a semi-transparent background so you'll see the canvas through it and its cheerily says 'Hello World' in blue.

Once you've initialised Phaser then you can attach that to the canvas element.

For there you can continue to code your Phaser game as you would for any Phaser game, but, at any point you can grab the overlay div and 'muck' with it. For example, maybe one of your state create functions changes the text in the overlay:

function create () {
  var overlay = document.querySelector('.js-overlay')
  overlay.innerHTML = 'Phaser is awesome!'
}

And thats it, I'd like to say you've reached out of the Phaser boundary in to the page and changed it, but, in reality, there is no boundary, its all just HTML, CSS and JS (in the case of Phaser the HTML and CSS portion is extremely minimal).

An html canvas element is much like any other.

Don't be afraid to do this either, for some stuff like text display and UI standard 'old-fashioned' DOM manipulation easily trumps canvas so if your game relies on these sort of things then it makes perfect sense to use it. Canvas shines for rendering stuff really quick. Use the right tool for the job you need doing.

Thank you very much for for your time and for very good explanation! From first i thought there's some kind of premade functions in Phaser that could have been used, but not really as i can see. This one actually sounds better.

@mattstyles i got another question, if you don't mind. How can i scale game for whole screen like in agar.io (for example) it stays in correct scale all the time no matter in what size window is. I already have scaled like that with Phaser.scale.EXACT_FIT. But every time i resize window, scale just is really weird, if you resize it smaller, it shrinks it, if you resize it bigger, it wides out pixels (which make's bad quality). Thank you again for your time!

[mattstyles]

1 minute ago, kaasis said:

Thank you very much for good for your time and very good explanation! From first i thought there's some kind of premade functions in Phaser that could have been used, but not really as i can see. This one actually sounds better.

Glad to help!

Yeah, the browser apis get a really bad wrap (not totally unwarranted, historically many have been poor, part of the reason for the success of jQuery) but they're pretty good these days and consistent across browsers so there's little reason not to use them, hence no need for Phaser to add an api to access them (plus its far from core for Phaser anyway).

You could still use jQuery (or something like cash or zepto) but there's little point in this case. Whatever you're most comfortable with I guess.

6 minutes ago, kaasis said:

i got another question, if you don't mind. How can i scale game for whole screen

Have a search around, lots of questions asking the same thing with various different answers.

There's two general classes resizing fits in to:

* Just scale up or down

* Reveal/hide more of the game world

Scaling is an option for every game, revealing more of the world is an option for many games but not all.

Scaling is probably the easiest solution, but you need to maintain aspect ratio or you'll get inconsistent stretching/compressing across both dimensions (x, y) which usually looks terrible. If the aspect ratio of the screen does not match your chosen aspect ratio then you'll get letter-boxing or pillar-boxing (black bands either top/bottom or left/right) so you have to handle both scaling to the maximum possible size and repositioning your game viewport so that it is central in screen viewport (or not, depending on what you want).

Scaling has the additional problem with pixel sizes. If your game relies on big chunky pixels then scaling to 1.7 or 4.3 is likely to look terrible, instead you'll be constricted to scaling using integers so that your pixels stay a whole pixel. This isn't too much of a problem but its another thing to solve and will likely mean your game can not scale to the maximum available size i.e. if your game canvas is 100x100 but the screen size is 320x480 then your max size is 320x320 (scale factor of 3.2) but, your pixels might get a bit funky so you'd have to scale to 300x300 (to keep scale factor as an integer) and work out centrally positioning the screen with a bordered area.

The 2nd option, revealing or hiding the screen, is a far better solution, but usually trickier. This way you can get maximum screen coverage for ANY screen size, which is awesome. For a top-down map wandering game (strategy or RPG, for example) then you just let the map view fill the screen and possibly keep everything else the same size so that bigger screens just see more of the view. This works great and usually isn't too bad to implement, however vastly different screen sizes (mobile vs desktop) can be tricky to get playability right.

Sometimes you might be able to get away with a sort-of hybrid. A tetris game, for example, has a fixed aspect ratio but maybe you make the background fill the screen and keep the gameboard in the middle.

Lots of potential solutions to this problem, all with their own pros/cons and highly dependent on your unique situation.

Have a look through the forums though, lots of peeps have tackled this problem, solved it and written about it.

[kaasis]

5 minutes ago, mattstyles said:

Glad to help!

Yeah, the browser apis get a really bad wrap (not totally unwarranted, historically many have been poor, part of the reason for the success of jQuery) but they're pretty good these days and consistent across browsers so there's little reason not to use them, hence no need for Phaser to add an api to access them (plus its far from core for Phaser anyway).

You could still use jQuery (or something like cash or zepto) but there's little point in this case. Whatever you're most comfortable with I guess.

Have a search around, lots of questions asking the same thing with various different answers.

There's two general classes resizing fits in to:

* Just scale up or down

* Reveal/hide more of the game world

Scaling is an option for every game, revealing more of the world is an option for many games but not all.

Scaling is probably the easiest solution, but you need to maintain aspect ratio or you'll get inconsistent stretching/compressing across both dimensions (x, y) which usually looks terrible. If the aspect ratio of the screen does not match your chosen aspect ratio then you'll get letter-boxing or pillar-boxing (black bands either top/bottom or left/right) so you have to handle both scaling to the maximum possible size and repositioning your game viewport so that it is central in screen viewport (or not, depending on what you want).

Scaling has the additional problem with pixel sizes. If your game relies on big chunky pixels then scaling to 1.7 or 4.3 is likely to look terrible, instead you'll be constricted to scaling using integers so that your pixels stay a whole pixel. This isn't too much of a problem but its another thing to solve and will likely mean your game can not scale to the maximum available size i.e. if your game canvas is 100x100 but the screen size is 320x480 then your max size is 320x320 (scale factor of 3.2) but, your pixels might get a bit funky so you'd have to scale to 300x300 (to keep scale factor as an integer) and work out centrally positioning the screen with a bordered area.

The 2nd option, revealing or hiding the screen, is a far better solution, but usually trickier. This way you can get maximum screen coverage for ANY screen size, which is awesome. For a top-down map wandering game (strategy or RPG, for example) then you just let the map view fill the screen and possibly keep everything else the same size so that bigger screens just see more of the view. This works great and usually isn't too bad to implement, however vastly different screen sizes (mobile vs desktop) can be tricky to get playability right.

Sometimes you might be able to get away with a sort-of hybrid. A tetris game, for example, has a fixed aspect ratio but maybe you make the background fill the screen and keep the gameboard in the middle.

Lots of potential solutions to this problem, all with their own pros/cons and highly dependent on your unique situation.

Have a look through the forums though, lots of peeps have tackled this problem, solved it and written about it.

Gonna look around forums. Second solution sounds really easy, gonna try to search about it. I'm anyway making game for desktop only (for now atleast). I'm trying to create yet another .io game. So far is pretty good progress, already have all multiplayer basic mechanics (movement, chat, usernames, etc). Thank you for your help mate!

[mattstyles]

Sweet, sounds good. Multiplayer is HARD!! Great work getting the basic up and running!

[kaasis]

3 hours ago, mattstyles said:

Sweet, sounds good. Multiplayer is HARD!! Great work getting the basic up and running!

Well, not that much of hard work tbh. If i could have figured out how to do it with Phaser and Socket.io then really anybody can, i'm not that decent either. Took me around 2 days to figure out how to do it. But i gotta say, Phaser and Socket.io really makes it easy to do. Because Phaser offers really good library. Including tweening, so i don't have to write my own, i can just use Phaser's built in (which i already do). If you want i can send you prototype version what i already have in pm.

[mattstyles]

5 hours ago, kaasis said:

If you want i can send you prototype version what i already have in pm.

That sounds cool, I'll give it a bash when I get a minute.

When you get something ready for more public consumption make sure you post it in the game showcase. This genre is pretty hot right now so I'm sure lots of people would be interested in checking out your project. Is it hosted on github or somewhere? or private?

[kaasis]

43 minutes ago, mattstyles said:

That sounds cool, I'll give it a bash when I get a minute.

When you get something ready for more public consumption make sure you post it in the game showcase. This genre is pretty hot right now so I'm sure lots of people would be interested in checking out your project. Is it hosted on github or somewhere? or private?

At the current moment i do everything on local computer which makes it private. But when i'll get better version which is playable and has some kind of goal to achieve, then surely i will put it out in game show case subforum. I'm not sure or i'll put it as open source but will think 'bout it, 'cause you can get client code anyway, only what protected is server code.