Search the Community

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. 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.

I try to make my pixi.js scene to adjust its size to the window on resize. To do so I use the following: window.addEventListener("resize", () => { this.renderer.resize(window.innerWidth, window.innerHeight); }) It resizes the canvas, inspecting the element it shows the correct size, but somehow the scene is cut off. Both the text and image are pixi.js generated - all stored in several PIXI.Container()'s

Hello! Our team glad to introduce you fresh baked game - Kage: Ninja's Revenge! The game is brand new and was never published before. Main features are: 1. Total cross-platform experience. Every possible resolution is OK! 2. Completely self made everything ! (music, sounds, UI, graphics, code, ideas) Gameplay features: 1. 25+ deisgned levels 2. Every type of enemy and obstacle needs different approach 2. Survival mode 3. 4 exclusive trap style tracks made by our in-house artist You better to check it out by yourself here: http://fluffyfoxgames.com/devninja/ PM me for licensing and rev share offers.

I want to make a simple 2D game using Phaser 3, but I want it to be available on mobile and the web browser. What is the best way to scale my game and make it responsive? This game is a good example of a responsive canvas. https://robowhale.com/html5/mr-driller/

Hello everyone, I have been trying different solutions to make my game full responsive, without success, the solutions I found are very old and not with the new versions of Phaser CE. Please, I need help with this urgently. Can someone tell me how to make full responsive my game both at the beginning and when the resolution changes? I work with angular 5 like container and Phaser CE 2.10.....

I just tried to set the world bounds for a player sprite in a responsive game with the following config: const config = { width: window.innerWidth * window.devicePixelRatio, height: window.innerHeight * window.devicePixelRatio, parent: 'canvas', type: Phaser.AUTO, physics: { default: 'arcade', arcade: { gravity: {y: 2500}, debug: false } }, scene: [ Preloader, Game ] }; In the game itself, i created a player sprite like this: this.player = this.physics.add.sprite(this.screenWidth * 0.2, this.screenHeight * 0.5, 'coin'); this.player.setCollideWorldBounds(true); It places the object correctly, and on desktop the player object hits the ground and stops there. On mobile, it does not stop at the bottom though, because of the pixel ratio. Is that a bug? Or is there just some settings to use setCollideWorldBounds correctly on mobile devices and responsive games?

Hi All, Math Addict - is a fully responsive HTML5 Game, combine at least two numbers to equal to the given number. https://www.brainler.com/math-addict-game regards

Hi everyone! I'm currently building a Phaser tap tap like game for mobile devices. Using Phaser for the first time, I digged into the hard topic of scaling my game for multiple screen sizes and pixel ratios. After looking at every available scale modes, I choosed to go for Phaser.ScaleManager.RESIZE which looks perfect for what I want (changes the Game size to match the display size). The game looks good on my desktop screen but seems blurry when using an iPhone or Samsung Galaxy S8. I looked at many forum topics but the answer to the question of making a game "responsive" doesn't look clear. Is there anything I can do to make my texts and pictures not blurry on devices where the pixel ratio is higher than 1? Like scaling my game according to the pixel ratio without distorting it?

Portals & Galaxies - Save your beloved planet by forbidding the aliens from stealing the polonium, enjoy a game where luck is the only hope in Portals&Galaxies ! Storyline - When humans found out that there is a stolen polonium on the moon stolen by the aliens, the aliens been investing this polonium in order to create a massive power to control the planet earth but with the power of our human soldier we can save our beloved planet by forbidding them from using that element against us . How To Play - The polonium is at the end of the electrified stages that you move on, each electrified stage has its own power that moves you, you can activate the stage by pressing on the stage button at the bottom of the page, Step in portals in order to teleport to higher level and beware of galaxies that teleport you to lower level . Little Game Twist - Land exactly on the polonium ! if the power of the electrified stage is too high your vehicle bounces back due to the nature of polonium power, the polonium absorbs the power of the stage and push you back with the exceeded power. for example, if you’re on stage 99 and the power was 4 your vehicle moves on the polonium then bounce back to 99, 98, 97 (one, two and three moves) if there’s a portal or galaxy at stage 97 your level raise or fall depending on it. Game Link - http://indiemehmet.cf/html5games/PortalsAndGalaxies/ More Informations - http://indiemehmet.cf/ Screenshots [Attachment]

Hi all! I've tried to mix and match between two very basic phaser tutorials about playing a video and putting game fullscreen. My results are not what I expected: http://www.davidenastri.it/savatop/phaser.html Can you please suggest me a tutorial that can let me understand how to make my video fill its container? Thanks for your time and kind help

Hello friends, I want to know how are you making your games responsive to landscape and portrait orientations like a website. I want all the buttons and background elements to stay the same ratio in both orientations. My buttons and background are stretching in both orientations. I have made my canvas 100% in css.I was using Phaser.ScaleManager.showall and i also tried .RESIZE. Resize causes the game background and buttons to float in space.

Hi I'm creating a animated banner using pixi for a website. Then banner will be 100% width and 100% viewport height. I have set the size of the renderer to window.innerwidth and window.innerHeight. Now when i add my animation image with mesh texture and shading, what is the best way to center it within renderer? Hopefully if the answer i get is based on percentages this shoudl also make it repsonsive. Thanks

I've created a boilerplate for Phaser + ES6 + Webpack. Features: JavaScript Standard Style Next generation of Javascript Webpack ready Multiple browser testing Responsive utilities! Feel free to use and improve! https://github.com/lean/phaser-es6-webpack

Hi, We have just started a project so we are planning to buy bulk Exclusive HTML5 Games Licence. Games Should be HTML5. It should be in responsive and compatible with all devices. It should have the facility to in-game ads. So PM your games. Thank you

Greetings devs friends I new in this forum and new in games development with Phaser. Really I new in games development with HTML5 because I work with Unity. I was assigned in a proyect consisting of a responsive game. The engine that I usually work has a WebGl builder but dont works well in smartphone, because is a something new in Unity5, accordingly dont help me I try Phaser, I learned a little and I did an experiment: http://pruebaphaser.esy.es/experimentoP2-master/# is very nice this framework, I like it so much I did the gameplay that I need: just drag the camera on an image and make click in specifc areas to trigger a modal (or any events). The problem is the game must be responsive. I mean must see very well and full screen in smartphone as PC, also with a responsive navbar (I use bootstrap for the navbar and modals). Also i need add a backend for a webservice, datebase...that is another topic... Really I need make it responsive. For this I did the following: var width = window.innerWidth; var height = window.innerHeight; var game = new Phaser.Game(width,height, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render}); I use window.innerWidth and windows.innerHeight of javascript to create the world game size. I thought that if take those dates of the screen then I would have a responsive view regardless of the platform used. But not works I will appreciate any help. Thank you for reading. I fall in love with Phaser, I will a pro HTML5 game developer for help you too. Greetings from Venezuela.

EDIT: I already solved the issues. About the html functions that phaser was unable to call using Firefox browser I change how to define them. Instead of: var changeFullScreen = function(){ actions(); } I changed for: function changeFullScreen (){ actions(); } Hello, I wanted to create a game that appears with its default size in desktop vesion (800x600). In mobile version should be seen in fullscreen and resized to the device resolution. It is defined: this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL Canvas is inside a div and it is defined with one of the following classes: .desktop{ position:relative; } .mobile{ width:100%; height:100%; position:fixed; top:0px; left:0px; background-color: black; } Following the tutorial http://www.emanueleferonato.com/2015/04/23/how-to-lock-orientation-in-your-html5-responsive-game-using-phaser/ I setted in boot state the listeners to show a"turn around image", it hide o show the image of a div: this.game.scale.forceOrientation(true, false,); this.game.scale.enterIncorrectOrientation.add(this.handleIncorrect); this.game.scale.leaveIncorrectOrientation.add(this.handleCorrect); handleIncorrect = function(){ show_the_div_with_turn_image(); } handleCorrect = function(){ hide_the_div_with_turn_image(); } When the page is loaded , with a javascript I set the game with it screen configuration: window.onload = function(){ if( (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|lumia|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4))) ){ define_the_class_of_the_div_for_mobile(); }else{ define_the_class_of_the_div_for_desktop(); } change_size_of_the_canvas_container_div(); } The game, on the top right position has a button for resizing the screen size. That button change the class of the canvas div. (.mobile or .desktop) so the canvas is streched depending the size of its div container. I checked the game and with my PC using Chrome it works delightfully. I can't say the same using Firefox. When I click the rize button it doesn't call the javascript function allocated in the html file: var fullScreen = function(){ add_the_resize_button_on_canvas(); //This next function is not called using Firefox! entrarPantallaCompleta(); } In the html there is: entrarPantallaCompleta = function (){ change_the_class_of_canvas_div() } The other problems I found are: - In android devices I can't not see the canvas. - In Windows Phone It show the "turn around screen image" when the page is charged with device in horizontal orientation. Also it doesn't load the game in full screen size. What I'm doing wrong? Thanks DNL

I'm working on a game and I'm trying to implement dynamic resizing, but I have some unexplained issues. My game is optimized for a phone portrait layout. Depending on the phone screen size (or browser window size) it should adjust the layout, the width is fixed size but the height is adjusted. So make it taller if necessary and center some sprites or texts. I've created a code example which works, but the resize function gets called many times. So to isolate and test the resize function see this github example: https://github.com/BdR76/phaserresize/ The code example has 4 states: Boot, Preloader, MainMenu, Game. I won't post all the code here, but what I've done is essentially this: // Boot state, in create() setup the scale.setResizeCallback event handler. mygame.Bootup.prototype = { create: function(){ this.game.scale.setResizeCallback(this.resizeCallback, this); this.game.scale.onSizeChange.add(this.onSizeChange, this); }, resizeCallback: function(manager) { // browser window changes size, resize the game var ratio = window.innerHeight / window.innerWidth; if (GAME_WIDTH * ratio > GAME_HEIGHT) { this.scale.setGameSize(GAME_WIDTH, Math.floor(GAME_WIDTH * ratio)) // too tall, adjust height resolution } else { this.scale.setGameSize(GAME_WIDTH, GAME_HEIGHT); // too wide, just use fixed width and empty side bars }; }, onSizeChange: function() { // fire the game resize event for the current state (make sure each state has this) this.game.state.callbackContext.resize(); } }; And then both the MainMenu and Game have a resize function that adjusts its layout and positions of sprites, text etc., it's a little similar to this topic. My github code example works, however the resizeCallback function from the Bootup state gets called all the time. It fires many times right from the beginning even before I do anything. I'm not resizing and not switching state or anything, and it get called not once but continually. So my questions is: Why is the onSizeChange event called so often? Is this normal and should I use a different event?

Note5 or Galaxy S6 has devicePixelRatio of 4, how do you guys handle different image to be responsive to all the different device aspect ratio and devicePixelRatio?

Hi, I'm developing a small HTML5 game for mobile and tablet. I am not a very seasoned coder. so I hope somebody can help me out here. I want to make the game fit the screens of different mobile and tablet platforms. How do I do that the best? Here is a link to an early prototype of the game, without any attempt for it to be responsive http://christianlaumark.dk/codeShop/shopProto1_5.html. Thanks in advance!

Good afternoon everyone, I'm having some problems fitting Phaser inside a responsive div. I have already achieved this with bootstrap, but this project requires flexbox -- and it's not working as intended. I have noticed that when Phaser is injected in a div inside a flexbox container, the resize event is not fired when the window changes size. I have tried fitting it in a div with "position: absolute" that follows x, y, width and height properties of the flexbox item, but with no success. Has anyone tried this before? Maybe it's something trivial that I'm missing. Thanks in advance, Pedro Antoninho

Almost 3 years ago, I told you in this same forum about the new game I had just put online: http://www.html5gamedevs.com/topic/366-esviji/ Today, I'm releasing the second major version of this game, with an interface even more adaptable to any screen size and ratio. You can still play on http://play.esviji.com/ To really see how responsive it is, you can try this URL in a desktop browser: http://play.esviji.com/wow/ Here is a screenshot: You need a browser modern enough, on mobile and desktop. Internet Explorer and Edge are the only modern browser not supported, because they don't have SMIL for SVG animations.

Hi guys, I'm having a slight problem getting my head round using the Phaser.RESIZE scale mode with devices which have a higher pixel ratio than 1. The game resizes fine, but on modern iOS and android devices, the game loses its 'crispness', and objects become blurry, particularly smaller text. I know this is down to higher pixel densities of these devices, but I've not managed to find a solution for the canvas to utilise these extra pixels, as resize mode seems to be bound to the physical document dimension (I'm creating a responsive game which will fill the device/webpage window on either orientation, so sadly the SHOW_ALL approach won't work). Just wondering if anyone had uncovered any solution, or had any advice, as there doesn't seem to have been any conclusion on other similar posts. Thanks as always!

Hey everybody, many, many posts in this forum have already helped me a lot in getting to know Phaser, so I decided to take a chance in asking a question I didn't find an answer to yet. Thanks to a topic on this forum (http://www.html5gamedevs.com/topic/17437-changing-game-size-dynamically/?hl=%2Bchange+%2Bworld+%2Bsize) I found out that I can dynamically change the world size of my game. When trying, I realized that it reduces the size by cutting off of the right side and/or the bottom (and respectively increases the size by adding to the right side and/or the bottom). The thing I want to do is reducing the game size by cutting off from the right and left side equally, so the center of the game will always be in the exact center of the world. So instead of cutting of the whole from only one side, I'd like to cut off half of the whole from each side. If it's not understandable, what I mean, please just ask and I'll try to explain better.

Hi all, Just a quick post to start a discussion on flexgrids. I know they are still in testing, but its been hard to find any resources or examples of these in use. As I'm planning a responsive game, just wondered if anyone had any success or experience to share of these in action? Thanks! SeeJay

Im trying to make app that will work fine on any screen. That means any resolution and any aspect ratio. I have canvas that fill 100% width and height of viewport. Problem is that renderer has absolute dimensions and it fits to canvas. Its fine when aspect ratio is same, but view is deformed on different ratios - and I dont want that. I have managed to make something that tentatively holds shape, but is far from looking same on any screen. I will describe my approach here and would be happy if you will tell me about yours. Or some best practices, if there are any. So, here is what I have done: I set size of renderer same as viewport (window.innerWidth and window.innerHeight) I have some default project size as base (1280 x 900) as reference frame for absolute positioning and scaling I have percentage of width and height, so I can place items relatively on screen Sprites are placed on scene both relatively (x% from top and left) and absolutely (most time x% + number of pixels). Absolute positioning is there because there was problem to fit sprites near each other and not overlap them Sprites are anchored in center (0.5, 0.5) Sprite size is modified by mean of width and height of viewport compared to project base size (viewport of 1280 x 900 is same as project original size, so modifier is 1. 900 x 1280 would be 1 too. 640 x 900 would be 0.75, because width is 0.5 and height is 1...) It is not a problem if something goes off screen on left/right, but scene should cover full view, so no "white spaces" or letterbox anywhere.I may upload example, but its experiment of everything about pixi, so there is shitload of other things that have nothing to do with this issue and would be pain to remove that, so I hope my description is sufficient. When I look at this after few days, its quite complicated and it should be more simple... I hope. Worst problem I see is fitting sprites in different aspect ratios proportionally without breaking composition of scene. My current solution is just breaking composition little bit. So, what is better way to do this?