Sign in to follow this  
MirroW

Responsive Game Area and Canvas

Recommended Posts

Hello, I'm looking at creating a fully responsive Phaser 3 game that would work for mobile (landscape/portrait) and desktop. I've been working with game development for a couple of years and I have a total of 7 years of programming experience. I recently started creating a game in Phaser 3 (5 months ago) and found it difficult to scale the game assets if you want the canvas to fit the entire parent div (which happens to be 100% window height and width, without using fullscreen). I've attached an image that somewhat describes what I'm trying to achieve.
phaser-game-responsive-design.png.0387cf9b505a0370109a45f3ff5003eb.png
If the blue rectangle was the canvas I could be using the Phaser.Scale.FIT property and then positioned the canvas using a parent div. But, this is not what I need. My problem is with mobile portrait, I need the red area to also be canvas, whilst the blue area is the game (as it would look on landscape / desktop). This way particle effects or score could be drawn in the red area instead. The dream would be that I could make the game camera act the same way inside the canvas, as the canvas can inside a parent div. But I've only found the setZoom function on cameras that doesn't seem to do the job.

Is there anyone of you that can recommend any resources (books, forums) that I can read to get a better understanding of how to scale a game in Phaser 3? Or perhaps have some tips on how assets/game can be scaled this way inside a canvas? I found some examples from phaser 2 and 3 that I've looked at for inspiration before deciding to create this post:
https://www.html5gamedevs.com/topic/5949-solution-scaling-for-multiple-devicesresolution-and-screens/
https://www.html5gamedevs.com/topic/21639-phaser-scale-manager-show-all-not-working/
https://www.html5gamedevs.com/topic/33206-scalemanagershow_all

Important notes:
The game assets are designed based on canvas size 1280x720. The canvas has a transparent background, so it's really only important to make assets fit the blue area and without being stretched.

Edited by MirroW

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.