Search the Community

Showing results for tags 'scaling'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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





Found 118 results

  1. Hey guys, I made a minigame in Phaser. This game was working fine until you try to resize the browser. What i want is that the hole game is scaling to the browsers canvas. here is some code and the pictures of what is going wrong: When the games startup: window.addEventListener('load', function() { window.EMS.requestFullscreen(); setTimeout(function() { scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080); scaleWidth = scale;//(window.innerWidth / 1920); scaleHeight = scale;//(window.innerHeight / 1080); game = new Phaser.Game(1920, 1080, Phaser.AUTO, 'area', { preload: preload, create: create, update: update, render: render }); }, 1);});Then for the resize i used: function resizeGame() { scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080); scaleWidth = scale;//(window.innerWidth / 1920); scaleHeight = scale;//(window.innerHeight / 1080); // game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.maxWidth = window.innerWidth; game.scale.maxHeight = window.innerHeight; worldWidth = * scale; worldHeight = * scale; BG.width = worldWidth; BG.height = worldHeight; //game.stage.bounds.width = window.innerWidth; //game.stage.bounds.height = window.innerHeight; //game.renderer.resize(window.innerWidth, window.innerHeight); //, window.innerHeight);}This is what happend: I hope some of you understands what went wrong here and can help me out.
  2. When I try to play my game on an ios device, the game gets cut off and you can not see the rest even if you move the screen. The game works fine on android and desktop. Here's the code I'm currently using... this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = 320; this.scale.minHeight = 480; if(screen.width <= 641){ this.scale.maxWidth = 320; this.scale.maxHeight = screen.height; }else{ this.scale.maxWidth = 750; this.scale.maxHeight = 600; } this.scale.pageAlignVertically = true; this.scale.pageAlignHorizontally = true; game.scale.refresh();I added the if statement for mobile devices(devices with width under 641px). Any ideas?
  3. Hi there! I am in the process of finishing my first two HTML5 games oriented to mobile. I have developed them with GameMaker. It was hard as it was one of my first coding experiences. Now I am trying to make the games resizable. In order to do that, I have implemented a GM project called "mhtml5 optimized". So far the results were mixed. I think it's making my FPS drop. Is that possible? Is it possible to do the scaling without coding inside Gamemaker. Can I do that with JS? And also: is there a way to get rid of the IOS navigation bar at the bottom? Thanks for your help. Leo
  4. Animated mesh exported from 3DS Max 2013 using the babylon exporter. Please see the link: Adjusting the scale, rotation, and position doesn't get applied to the actual mesh. Babylon Model Files: Max Scene: BABYLON.SceneLoader.ImportMesh("", "../Models/Monsters/", "Boss_Pukui.babylon", scene, function (mapZone, particleSystems, skeletons) { mapZone[0].rotationQuaternion = null; mapZone[0].scaling = new BABYLON.Vector3(0.0005, 0.0005, 0.0005); mapZone[0].rotation = new BABYLON.Vector3(0, -3.141593, 0.000000); mapZone[0].position = new BABYLON.Vector3(-104.0314, 4.3437, -14.2259); } );
  5. I am loading a small tile map (created in tiled) and scaling it to be double the size to fill the screen. The scaling works but something is off with the tile layer scrolling. The tile layers scroll on the x axis as the player moves to the right but it stops short of the end of the level (meaning the player continues on but the tile layers stop scrolling short of the boundry). I suspect this is something with my bounds settings but I'm not getting anywhere adjusting settings. Even worse, the tile layers do not scroll at all on the Y axis. Has anyone had a similar issue or a possible fix? I figure its something with the world bounds, camera bounds and tile layer bounds but I'm not getting anywhere on my own. Any help would be appreciated. Canvas settings: width: 1024 height: 768 TileMap settings: Tile size: 32x32 height: 15 (480px) width: 468 (14976px) Screen settings game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.minWidth = 480;game.scale.minHeight = 260;game.scale.maxWidth = 768;game.scale.maxHeight = 576;game.scale.pageAlignHorizontally = false;game.scale.pageAlignVertically = false;game.scale.setScreenSize(true);Level Loader createMap : function (game) { // adding the "level" tilemap loaded it preloader state var map = game.add.tilemap("level"); $.each(map.tilesets, function (index, tileset) { map.addTilesetImage(,; }); // create tilemap layers var that = this, entitiesScale = 2, levelScale = 2, platformScale = 2; game.scaleFactor = { level : levelScale, platforms : platformScale }; $.each(map.layers, function (index, layer) { var mapLayer = map.createLayer(, speed = || 1; mapLayer.scrollFactorX = 0.5; =; mapLayer.scale.setTo(levelScale, levelScale); //mapLayer.height = 1536; // doesn't seem to make a diff that.layers[] = mapLayer; if ( === "ground") { mapLayer.resizeWorld(); } }); map.currentLayer = 2; map.widthInPixels = 32 * (468 * 2); map.heightInPixels = map.heightInPixels * 2; //; = 1536; = 1536; console.log("cam",,,; return map;},Camera follow in player update function. + offsetX, this.masterSprite.y + offsetY);
  6. Hi all, Firstly - a quick howzi from a newbie!!! - just moving over from Three'js and experimenting with Babylon, lovin it so far... I'm havin a small issue getting my blender export to listen to scaling and position commands. var newMeshes = []; function importedMeshes(mesh) { mesh.position = new BABYLON.Vector3(-10, 0, 0); mesh.scaling = new BABYLON.Vector3(19.025, 19.025, 19.025); } BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/room/", "Room2.babylon", scene, function (newMeshes) { importedMeshes(newMeshes[0]); }); Room2 is appearing but won't resize or listen to any postioning commands. It was originally a 3DS file that I imported to blender and exported to Babylon (long winded but worked kind of ok for my Three.js project.) ( i tested an import from my three.js (Json) file into blender and then exported for babylon - THAT responded to the above code for scaling and positioning, BUT lost all info (meshes etc and just showed black walls in the correct shape and position) Anyone see anything I'm doing wrong? Is it something I need to do in Blender first? Thanks and kind Eegards
  7. Hello, first post here! Phaser's been great so far and this is the first hangup I've really had. The Problem I have a number of (tile)maps of varying sizes made from 128 x 128px tiles. At this size, especially on particular devices, the whole game is way too big. The player can drag the camera around the map, but beyond 10x10 tiles it's really not ideal. I'd like to be able to scale the whole game down to a smaller size. Ideally the user could zoom in and out at will but doing it as the game is created is acceptable. My Question there a recommended approach to solving this particular type of problem? What I've tried It looks like there are a few ideas out there about how to achieve this type of thing. I'm not against sprinkling a common scaling factor throughout my code if that's what it takes, as it doesn't seem like there's an easy way to do this at the top level yet. So far, I've set my game size to match the dimensions of the visible window. Then I'm scaling the map layer, as well as sprites and their corresponding movement logic. For starters: var gameScale = 0.5;...layer = map.createLayer('Tile Layer 1');layer.scale = {x: gameScale, y: gameScale};layer.resizeWorld();The first thing I notice is that the layer is resized but it is clipped to only show what you could first see at 100% scale. It is drawn from the top left corner, with a bunch of empty space around it filling out the rest of the window. The second thing I notice is that as I change the camera (x, y) coordinates, the sprites on the stage move. Lastly, I don't see collisions occurring. I think others have encountered this already. I suspect that the tiles themselves aren't really scaled with the layer, or something to that effect?
  8. Is there any way for me to scale the game to fit a mobile screen?
  9. I've been trying without success to get a simple prototype (just a background) to scale on my mobile with Phaser using Typescript after reading this post I've asked both on the post and on IRC but I'm starting to feel that approaching this issue in TS is different from doing so in vanilla JS. So my question is: How can I: Detect 5 different screen sizes (small, normal, large, xlarge, xxlargge) and load assets accordingly.Scale my game in a way that works for PC (without it going 100% and looking blurry), Tablets and Mobile phones.Scale both horizontally (landscape) and vertically (portrait).Hide the address bar in as many devices as Typescript? I'm sorry if these are too many questions to ask at once but I feel that it would also be helpful to other newbies starting out with Typescript. While Typescript is very useful in the long term (and helps me to keep my code very tidy), learning the basics and trying to get tutorials or code snippets is a lot harder than with JS. The two tutorials posted on Photonstorm allowed me to create a couple of desktop-only prototypes, but they do not cover how to do it on Mobile. The structure I'm using for my TS projects contains the following core files: app.tsGame.tsBoot.tsPreloader.tsMenu.tsBaseLevel.tsThank you for reading!
  10. Greetings, developers! I have the following situation here: I'm not using any of Phaser tools to manage game stretch logics and I have a problem with Phaser buttons right now. Guess that Phaser don't know that touch coordinates are related to old canvas style while it was stretched. The resizing logic is following: function ResizeGame(){ var Ratio = 960 / 640; var NewWidth = window.innerWidth; var NewHeight = window.innerHeight; if (NewWidth > NewHeight) // LANDSCAPE { = NewHeight + "px"; = NewHeight + "px"; NewWidth = NewHeight * Ratio; = NewWidth + "px"; = NewWidth + "px"; //GameInstance.scale.width = (960 / (NewHeight * Ratio)); //GameInstance.scale.height = (960 / (NewHeight * Ratio)); } else //PORTRAIT { NewHeight = NewWidth / Ratio; = NewHeight + "px"; = NewHeight + "px"; = NewWidth + "px"; = NewWidth + "px"; //layer.scale = 960 / NewWidth; } = window.innerWidth * 0.5 - NewWidth * 0.5 + "px"; = window.innerHeight * 0.5 - NewHeight * 0.5 + "px";}The button boundaries are offset. I don't know what to do. Changing camera view boundaries not works. Changing world boundaries also has no effect. Tried using Phaser to do that stuff but not found the way how to do it. The next question is about locking mobile swipes and touches to prevent scrolling of the page while playing. The stretched game has some parts of document body visible. And when player's finger touches that region the browser scrolls content so url bar appears.. Its awful. Tried doing that: /* Locking mobile browser non-gaming manipulations */document.body.addEventListener("touchmove", function(e){ e.preventDefault(); return false;});document.body.addEventListener("touchstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("selectstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("dragstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("contextmenu", function(e){ e.preventDefault(); return false;});But it doesn't work.
  11. what is the best way to scale the game from 720x720 to 720x1280?
  12. Hi everyone! I have been trying Phaser for a couple of days now, and I must say I really love how easy and fast it is to develop HTML5 games with it. I'm having some trouble due to the lack of documentation, but I guess it's just normal being such a new framework. I have been trying a few things, but can't see any code in the examples to solve my question, nor found any answer searching Google, so I hope any of you can help me with this. I have a tiled map file, and I want to render the map upscaling it by 5x its original tile size. I haven't found any way to do this (it may be even impossible). The other question I have is, is there any way to force "pixel perfect" scaling? I mean, if my game is pixel art, when I scale some sprites (in round numbers like 2) I want them to still have the same look as the original, no anti-aliasing at all. Thank you in advance for your help, and thanks a lot to the Phaser dev, I really love it
  13. Hi there. It seems fixedToCamera works fine for me when I don't scale down the image at all (it is a background sky image), but the second I scale either the group containing the sky or even the whole the background stops following the camera. What I would like is when I zoom out for the sky to expand, but then remain fixed to the camera afterwords when the camera moves etc... Thanks for any help/suggestions. -DRG
  14. I'm trying to scale the sprite that I'm setting as a preloader sprite, and it seems to react very weirdly, as it crops the sprite instead of scaling it. The cropping that is part of the preloading still occurs, but the sprite is now cut off from below and from the size. Any idea what's wrong?
  15. I am wondering if/how it is possible to scale the stage, in order to get a zoom effect on the game world. I have tried a whole slew of things, I have looked over the source code, but I still can't figure it out. Any help would be greatly appreciated!
  16. Hi, I did my first tests with Pixi,js and CocoonJS. Basically, it seems to work. However, I have got the following issue. Example Code: <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <style type="text/css">body { margin: 0px; }</style> <!-- Android fix --> </head> <body> <script src="js/pixi.js"></script> <script type="text/javascript"> window.onload = function() { var canvas = document.createElement(navigator.isCocoonJS ? 'screencanvas' : 'canvas');"idtkscale:ScaleAspectFill;"; canvas.width= 320; canvas.height= 480; document.body.appendChild(canvas); var stage = new PIXI.Stage(0x66FF99); // Does scale //var renderer = new PIXI.CanvasRenderer(320, 480, canvas); // Does not scale var renderer = new PIXI.WebGLRenderer(320, 480, canvas); requestAnimFrame( animate ); var bunny = PIXI.Sprite.fromImage("bunny.png"); bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; bunny.position.x = 160; bunny.position.y = 240; stage.addChild(bunny); function animate() { requestAnimFrame( animate ); bunny.rotation += 0.1; renderer.render(stage); } }; </script> </body></html>Using the CanvasRenderer - CocoonJS scales up correctly. Using the WebGLRenderer - CocoonJS does not scale up at all. Maybe this is a CocoonJS issue - not quite sure. Is there's something I can do with Pixi to solve this? Like modifying the viewport or something like this? Referring to CocoonJS WebGL examples - they are always setting the dimension of the canvas to the windows.innerWidth/innerHeight. Any help appreciated. Best, benny!
  17. Hey guys, is there any know weirdness with 'scale' property of a DisplayObject, and InteractionmManager? I'm targeting canvas renderer only - no WebGL rendering here. My resize handler does the following: - scales the stage based on the new width and height (thought this seems to have no effect on any child DisplayObjects!?): var sx:number = w / this.config.stageW ;var sy:number = h / this.config.stageH ;stage.scale.x = sx;stage.scale.y = sy; - resizes the renderer: renderer.resize( w, h ) ; - because stage scale seems not to function as I'd expect, I try propagating the scale into my current view object this.scale.x = sx ;this.scale.y = sy; - This latter step correctly sizes the view, but my interactive objects are now screwed because the hitTest no longer appears to work (functional hit area is no longer coupled to where the scaled object appears to be)... Am I missing something obvious?
  18. Hi all, I'm currently building a reusable framework in GameMaker Studio that deals with scaling and orientation on mobile and tablet devices, that I can build all of my future html5 games on. All of my games will be made at either 320x480 or 480x320, and I plan to offer them to sponsors and portals. When dealing with devices with a screen resolution of 320x480, such as iPhones, displaying the game at 1:1 ratio will mean that a portion of the game at the bottom will not be visible under the browser bar, and so would be filled with a logo or filler graphics perhaps. The issue is that because GameMaker studio makes it so easy to export to other formats I also plan to release the same games as iOS and Android native apps. Designing this way would mean that I have to design two versions of the game; a native version taking up the entire screen and an html5 version that fits within the iOS bars. (I've hidden the top browser bar but you can't remove the bottom browser bar or top iOS bar). The scaling solution I've come up with takes the entire 320x480 canvas and scales it up or down to fill whatever space it can, whilst still respecting aspect ratio. However on iPhone this leaves scrollable spaces at either side, as shown below: This solution is the easiest for me as I only need to design each game to fit 320x480 and then scale it up or down to suit, but would sponsors (booster media for example) be happy with this or could it hinder my chances? Thanks in advance. Edit: I wasn't sure whether to put this in the coding or sponsor section so feel free to move it if necessary!