Jump to content

Seamless integration of a phaser game in a webpage.


scheffgames
 Share

Recommended Posts

I've used Phaser to create games that have a fixed width/height in browser but I'm wondering if it's possible to create apps/games that fit on the whole screen and resize accordingly.

Basically integrate a Phaser game seamlessly into an existing web page so there's no indication where the game starts and the page begins. Has anyone ever done this?

I'm not a webdev so I might be missing some important facts here or asking a dumb question, so sorry for that. I am familiar with html/css but I haven't made any serious web development.

Thanks! 

Link to comment
Share on other sites

Conceptually you just shove a canvas into the html (literally, just the canvas element and your scripts, although I dont think you even need the canvas element as Phaser will create it) and use css to size it to the screen, I think there might be some issues with css scaling (where the actual dimensions of the canvas do not match on-screen dimensions) so you might want to create it in code and grab the current screen dimensions and create the canvas element that size. You probably want to attach some resize handlers too to handle when the screen changes dimensions.

Then you have to handle how you want to present to varying sizes of screen/canvas, which is a much harder problem.

Do you just want to choose a reasonable fixed size and scale it? Then position it centrally as large as it will go when the w/h ratio does not match the screen, this results in some letterboxing/pillarboxing but is generally acceptable and usually easy enough to manage although you have to be careful of blurring. 

Or, do you want your game world to resize itself based on the available space? i.e. if its a top down map affair then display more or less of that world as the screen real estate accommodates.

The biggest issue is usually handling the difference between portrait and landscape for mobile devices as the screen wildly changes ratio when switching orientation and this is always difficult to manage (for apps, games, anything).

Having said all this, I think Phaser has a ScaleManager which might be able to help with this sort of thing.

You'd also want to explore the full screen options, which give you proper full screen experience, again, I think Phaser has some helpers for this too.

Link to comment
Share on other sites

Thanks @mattstyles, very informative as always! I had looked a bit at ScaleManager in the past, will probably do so again. Creating a custom canvas size depending on screen size it's a very good idea, will keep that in mind. I'll also probably use css to position the canvas accordingly - it just clicked now that canvas it's an element that can be position and manipulated by css. Like I said, my experience with css/html is very limited so I'll have to do some serious research and invest some time into learning at least the basics.

Am asking this because I'll probably get to work with a client on a gamified (?) app so the whole integration process it's a very novel thing to me.

If I may ask one more question. How can communication occur between my game scripts and external (JS) scripts? I'm guessing that they share the same namespace but haven't actually experimented with it. 

Thanks again Matt!

Link to comment
Share on other sites

I'd recommend giving electron a try.  

I'm using it with my game and it makes it really easy to cross-platform and such.

  win = new BrowserWindow({
    width: 1024, height: 768,
    useContentSize: true,
    frame: false,
    resizable: false
  })

and 

  // Open the DevTools.
  win.webContents.openDevTools()

in it's main.js to get a frameless window and you can pop-out the dev tools to make it easy to work with

also, i've read about electron-reload which  makes reloading and hot-loading code possible iirc.

 

Cheers

Link to comment
Share on other sites

@d0nut Thanks for the sugestion, it looks like an interesting framework and I see there's some cool apps made with it but right now I'm focused on Phaser and game dev -  if I can do it with Phaser it's fine, if not then that's it, no biggie. :)

Oh yeah, and for reloading your page automatically as you save your code I use Live Reload - works decently enough. :)

 

Link to comment
Share on other sites

9 hours ago, scheffgames said:

If I may ask one more question. How can communication occur between my game scripts and external (JS) scripts? I'm guessing that they share the same namespace but haven't actually experimented with it. 

They do indeed share a namespace, the only one we have in browser-land, the mighty `window`.

The only way to share state between scripts is by tacking stuff on to the window. Unless you create a closure then adding `var foo = 'bar'` to a script will tack the variable `foo` on the window where it will be available to any subsequent script you include in your html (actually, strictly speaking the `var` is optional, JS will infer `var` if you omit it, but, never ever ever do this, always explicitly declare your variables).

* Technically you could share state via an external service using ajax/fetch or even use local storage, but, thats just stupid when you have `window` to share stuff.

Link to comment
Share on other sites

I used to work for an agency and we'd do a few microsites, which often ended up quite gamey, a few being just full-blown mini-games. Now I'm back in product building ecommerce for a client, its a super cool project (despite the ecommerce thing).

I spend a lot of time on trains so I've got a couple of gaming projects going, but, I'm also developing an open source state management layer and additional tooling so I get distracted when I have a requirement in one of the games and I end up adding stuff to various libraries I maintain, which is great, but it means most of the projects never get to a state where they're ready to see the light of day. That and I suffer terribly from scope-creep in my personal projects—I either get distracted really digging in to the nuts and bolts of stuff or end up trying to do way way too much as a very part-time thing and stuff often ends up stagnating. I like to get things working properly, which is great for my clients but terrible for my side projects, at some point soon I'll take a little time away from paid work and end up spending a bit more time on personal stuff, but not just yet.

Having said all that I'm keen to commit to something like OGAM which would help keep my scope in check, some of those months would be dedicated to finishing up some smaller projects I've got kicking around.

Biggest projects I want to get presentable are a roguelike which was coming along very nicely and a sort-of space station building sim, its a little odd that one, its part idle-game, part text adventure and part asset management sim, UI looks like Football Manager but rather than footballers you control a group of intrepid colonists as they build their station and eventually explore space (as I said, a little curious that one! Good news is I've just built a proper navigator for it and I can do without server rendering for now so I'd like to pick that one up again, bad news is that its easily the most complex).

Link to comment
Share on other sites

Looks like you got lots of things going on - which can be a curse or a blessing. :)

3 hours ago, mattstyles said:

I either get distracted really digging in to the nuts and bolts of stuff or end up trying to do way way too much as a very part-time thing and stuff often ends up stagnating

I feel you man - I often ended up with hundreds/thousands of lines of code that I wrote "just in case" that ends up either unused or obsolete for the next project. Happens less and less now as I'm becoming aware but it's still a dangerous time eating trap.

3 hours ago, mattstyles said:

sort-of space station building sim, its a little odd that one, its part idle-game, part text adventure and part asset management sim,

Would love to play that game. :)

3 hours ago, mattstyles said:

never get to a state where they're ready to see the light of day.

This happened to me when I developed in Unity. I have  lots of interesting/promising prototypes and half-finished games - people were asking me "so what do you do"...."I'm a game developer"...."oh cool, what games have you made"....."uhhh, I haven't released nothing yet but I'm working on this cool project that will see the light of day very soon". That kinda sucked. :)

I'm a much happier dev since I switched to HTML5 because I actually get to FINISH the damn games in pretty shot time spans. Sure, they will never look as complex/interesting as my big/cool projects but hey, now I can show people something. :D Not to mention all the usability/ui/graphic-candy stuff that I learned and can apply in the future on the "big" projects. And the fact that it opened lots of financial opportunities from a freelancing point of view and it will hopefully soon open some big checks from sponsorship. Being a broke game developer as I was for years sucked big time.

Btw, thanks @devMidgard for that, it was your reddit post that inspired me to get into html5 games and get to know this awesome community and the local developer "rockstars." :)

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...