Search the Community

Showing results for tags 'responsive'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 29 results

  1. 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?
  2. 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 - More Informations - Screenshots [Attachment]
  3. 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: 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
  4. 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.
  5. 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
  6. 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
  7. 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: 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.
  8. 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 I setted in boot state the listeners to show a"turn around image", it hide o show the image of a div:, false,);;; 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
  9. 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: 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);, 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); } }; 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?
  10. 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?
  11. 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 Thanks in advance!
  12. 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
  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!
  14. Almost 3 years ago, I told you in this same forum about the new game I had just put online: 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 To really see how responsive it is, you can try this URL in a desktop browser: 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.
  15. 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!
  16. 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 ( 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.
  17. 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
  18. 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?
  19. Hi everyone!! I´ve developed a game based on "Spring Ninja" and I made it responsive: As you can see the game auto-adapts to all screens taking all the available space on the window. It does the same in all platforms. I use the innerWidth and innerHeight to load a different size depending on the screen ratio: var innerWidth = window.innerWidth;var innerHeight = window.innerHeight;var gameRatio = innerWidth/innerHeight;if(innerWidth > innerHeight){ game = new Phaser.Game(Math.ceil(320*gameRatio), 320, Phaser.AUTO); } But I have a problem for mobile: when I load the game on "Portrait" and then the user changes the orientation I would like to reorder the Canvas to autoadapt to the new screen ratio. But I´m can´t do it. I wrote this code: $(window).resize(function() { resizeGame(); } );function resizeGame() { var innerWidth = window.innerWidth;var innerHeight = window.innerHeight;var gameRatio = innerWidth/innerHeight; game.width = Math.ceil(320*gameRatio); game.height = 320; game.stage.bounds.width = Math.ceil(320*gameRatio); game.stage.bounds.height = 320;game.scale.refresh(); } This code is supposed to set the new dimensions to the game, but instead of reescaling everything properly every object gets deformed: Is it possible to render again the game with the new size?
  20. I am interested in connecting with companies and freelancers that are masters at cutting edge game designs that will be played in device agnostic, live consumer facing settings and that can deal with fast turn arounds, challenging timelines, unexpected client change requests and high levels of global exposure at large consumer events. Creativity and uniqueness are highly valued in this arena just as much as the ability to code what the client wants even when you don't agree with it. Rock solid, bullet proof code solutions are a must for all deliverables. This is "big-boy" stuff so please only serious, enterprise level experience. If you have a degree and no real experience, stick with it. This is a great business to be in but this post isn't for you. If you're a great coder but you still call mom's basement a command center... well... ok... you still could be my guy but the point is, we're looking for professionals here! Looking forward to it. Give me samples and lets talk. MK
  21. I have a problem when I get the position of Input (click, touch, etc...) in a event and then try to put a sprite in the same position. This happen when the game is in (100%, 100%) screen mode, i.e , the sprites in a scene are responsive to the screen size. In this case, the position of the sprite is "shifted" a space versus the mouse click, the problem is: this "shift" is not constant, and the image is not exactly in the sprite.x(y) position. More details: I have a image 800 x 600 per example in a sprite, this sprite is responsive to the touch or click event, when this happen, I put a new sprite in the position of the click, but... well, the thing I said at the beginning. Thanks.
  22. Hello I just read this article: It is about to implement responsive music for your game. I tried to do this with phaser API but introduced some lag in the transition from one sound to other. Probably I am doing something wrong, but my question is if there is any plugin related to responsive music in phaser. If there is not any plugin, maybe, if you give me some tips, I can try to develop it.
  23. I've been looking at several different methods of resizing for Cocoon on this forum, but I can't get any to work the way I want! What I'm trying to achieve is a creating set 'safe' area, which is scaled proportionately on resize to fill the screen. I then want to add extra px to the canvas, filling any remaining gaps for when the safe area doesn't fit at that aspect ratio. I'm currently using a basic window.innerWidth + window.innerHeight, but everything ends up tiny on bigger screens! Am I right in thinking that you cant use the ScaleManager with cocoon? If anybody has achieved this successfully I would be very grateful for advice!
  24. Can someone give me an example of the best way to make my Phaser game respond to different screen sizes? Ive looked at the responsive game template but it didnt work for me.
  25. Hello. I'm using the following code to make my game responsive: = Phaser.ScaleManager.SHOW_ALL;; = true; = true;;But it only change the size if I refresh the page... Is it possible to change when window resize? I saw that in early versions (for example 1.1.3) it resized when the window resized..