Jump to content

Search the Community

Showing results for tags 'responsive'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. 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
  2. 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
  3. 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/
  4. 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/
  5. 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.....
  6. 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)
  7. 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
  8. 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 cl
  9. 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
  10. 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
  11. 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.
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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: Boo
  18. 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?
  19. 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!
  20. 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.
  21. 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
  22. 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
  23. 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 t
  24. 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
  25. OnGe

    Responsive scene

    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 don
  • Create New...