Search the Community
Showing results for tags 'scaling'.
-
Hi everyone! I'm working on the fast paced multiplayer browser pvp game with following gamedev stack. Angular Website -> global place for the game, responsible for: user account state, game UI, user info etc. (REST and WebSocket connections) Client Game Engine -> based on ECS and PIXI rendering with custom gameloop, client-side- predition and all that stuff. (WebRTC Geckos.io connections.) Nest.js -> backend for angular website, chat, matchmaking, creating services with Server Game Engines when players are ready to play. (REST api and WebSocket connections) Authoritative Server Game Engine -> shared a lot with client, based on ECS etc (WebRTC Geckos.io connections.) MongoDB -> DB for everything. Any ideas / guides on how to scale things up? I read about load balancers using reverse-proxy on nginx and pm2, node.js task partitioning and offloading also microservices with redis. But still dont know if i'm understaning this correctly. For example: 2 players want to play with each other -> new instance of ecs world will be created with all physics etc, this instance has a server game loop with examplary 50 ticks per second, taking from 10% to 100% cpu usage depending on how many entities are currently in game world. If i understand correctly when server game loop is running its blocking the node.js event loop so no other task can be done. So if another 2 players would want to play i would need to create new game server instance in the best case scenario on the second core in the worst on the new physical server. To make this work I would need to have a load balancer and some kind of management over creating and removing new server game engine instances. Maybe game engine should be microservice and Nest.js backend would be the main service which would delegate users to game engine instances? It's very odd looking to me that on 8 core CPU only 16 players could play in the same time. Is there any diffrent way i should go with this to enable more CCU playing? Maybe serverless? Any advice on how to scale server side gameloops which are resource demanding on node would be appreciated :). Sorry for my english and overall knowledge (new in networking and backend world!)
-
Hey All! I needed to display some dialog boxes in a recent game and the old 9-slice plugin wasn't ported to v3 yet so I wrote one (github repo). I have a live demo here and a gif of it in use follows. Would love to see this get some use outside of my projects so give it a spin. I'm pretty active on the discord and try to check in here weekly so feel free to ping if you have any questions! Happy hacking!
-
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.
-
Hi Team, I am banging my head against wall from 2 days. I have a video of different sizes. User can crop video (Just showing cropping area on top of video and getting x,y, coordinates of cropping area). End of the day using back end server I will capture cropped video until I have to mask the video as cropped. Lets assume video original size if 720x1280, the size I am going to show may not be with same size (e.g. 520x292). So after cropping done, I will get the x-scale and y-scale using below formula. var scaleX = 520/720; var scaleY = 1280/292; var cropX = croppedX * scaleX; var cropY = croppedY * scaleY; I could able get actual cropping dimensions but I could not understand how to implement scale in pixi sprite to mask as a cropped video. I am using setTransform method but could not meet desired result. let scaleX = (this._assetSprite.width/newMediaData.croppedDimensions.width); let scaleY = (this._assetSprite.height/newMediaData.croppedDimensions.height); this._assetSprite.setTransform (-(newMediaData.croppedDimensions.x * (scaleX)), -(newMediaData.croppedDimensions.y * (scaleY)));
-
This is probably quite a simple problem to solve; but I'm pretty new to BabylonJS. I would like users of my code to be able to arbitrarily scale a 3D model loaded from a .babylon file using code like this: BABYLON.SceneLoader.Load("", "model.babylon", engine, function (newScene) {newScene.executeWhenReady(function () {... After the scene has been rendered using, engine.runRenderLoop(function() {newScene.render();}); I'm then trying to apply the user defined scaling value like this (for example 200% scaling): for (i = 0; i < newScene.meshes.length; i++){ newScene.meshes[i].scaling = new BABYLON.Vector3(2, 2, 2); } As you can see from the attached images of normal vs scaled; the 200 percent scaled version isn't scaled proportionately; e.g. the wheels out grow the chassis of the vehicle. Is this the correct way to scale a scene of multiple meshes? Should I instead be adding all my meshes to a parent node and then scaling that? (if so how). Appreciate the help; thanks!
-
On some objs that I import, I'm having to do foo.scaling = new BABYLON.Vector3(-1, 1, 1). For example this zombie needed the torso scaling set (-1, 1, 1) before the left and right hands appeared on the correct sides of the body among other details. The arms are parented to the torso, so I think that is how the scale is factoring into which side they appear on. The head is actually flipped incorrectly at the moment as well, but that doesn't really matter. I'm fine with scaling(-1,1,1) as a solution, but for some reason the gun now has its mesh inside out or something. So my question is two parts: 1) why is the gun inside out? The parent order (child to parent) is weapon -> leftHand -> lowerLeftArm -> upperLeftArm -> torso. In theory everything is inheriting its scale from torso. Each body part is a separate mesh made the same way, yet only the weapon is inside out, not the torso or any of the arm parts (maybe I just have an error in my code, unless there is some reason that this would naturally by the case). 2) is there a babylon function to fix only an individual mesh? I searched the forum and found many pgs dating back up to 3 years, and some mention of including righthand vs lefthand modes in bjs... but I wasn't sure what the current day method would be to fix just the weapon mesh below. It may be a little hard to see that it is in fact inside-out, so here's another picture of what the weapon is supposed to look like: I cannot use blender+babylon-exporter to make the full model at this point (some complex issues with networking bone animations exported from blender to babylon, a topic for another time). I am still using blender to pose my character as a visual reference before converting the rotations of each body part over to a custom animation system -- so this is perhaps where the conflicting notion of left/right arms is coming from originally. Thanks -
Hello, I created a pwa with Phaser 2, following this tutorial https://phaser.io/news/2018/10/progressive-web-apps-tutorial. I face a problem with how the game scales on mobile. In my game I use these Phaser 2 methods: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; When I click the localhost link in my mobile, the game is way too big and when I 'download' it to act like an app, it gets really shaky at first, scaling up and down until it settles to the correct size. The game dimensions are 1280x720. It looked very nice before I converted it to a PWA. I did an audit for a PWA in Chrome's dev tools and it showed this notification: The viewport size is 1280px, whereas the window size is 412px. Do you have any idea on how to fix this issue?
-
Hello guys, i'm back with a rather huge question. My game is currently optimized for running in full hd(1920,1080). Now I want it to scale to the users display resolution. In this article I've read that i should use "window.innerWidth * window.devicePixelRatio" to determine the users display size. Now the problem is on how to scale all my sprites to keep the same "size ratio". Because if i increase or decrease the game width/height all object have to scale with it of course. In the mentioned tutorial the guy only scaled it to match the PixelRatio and not to preserve the same sprite-gamewidth/height. Are the velocity I set for my sprites in pixels (e.g. setVelocityY(100)). So do I need to scale the velocity too?
-
Bowmasters.Preloader = function(game){ }; Bowmasters.Preloader.prototype = { preload: function() { let logo = this.add.sprite(this.game.world.centerX -120, this.game.world.centerY - 100, 'logo').scale.setTo(scaleRatio, scaleRatio); let bar = this.add.sprite(this.game.world.centerX-300,this.game.world.centerY, 'bar'); bar.scale.setTo(scaleRatio, scaleRatio); //without next line loading sprite looks good, not cropped this.load.setPreloadSprite(bar); this.load.image('background', 'assets/Resources/BG/bm_bg.png'); this.load.image('ground', 'assets/Resources/BG/bm_ground.png'); this.load.image('icon_thor', 'assets/Resources/UI/icon_thor_odinson.png'); this.load.image('icon_loki', 'assets/Resources/UI/icon_upgrade_loki.png'); }, create: function() { this.state.start('Game'); } }; this.load.setPreloadSprite(bar) sprite looks good. After using bar.scale.setTo it becomes like: This is my code, i am gonna to create loadind scene but i have a problem with loading bar. This was too big, and when i try to scale it becomes cropped as on the screenshots. Give me the hint please how to repair it.
-
Hi, trying to achieve mesh scaling from parent but with maintained aspect ratio, so if parent is scaled, child mesh will scale together but will maintain aspect ratio. would it be possible to do that by overriding `computeWorldMatrix` or there is better way to override default scaling behaviour ? I tried to override `_afterComputeWorldMatrix` to update world and local matrix, but no luck , probably doing something totally wrong protected _afterComputeWorldMatrix() { super._afterComputeWorldMatrix(); const min = Math.min(this._worldMatrix.m[0], this._worldMatrix.m[10]); this._worldMatrix.m[0] = min; this._worldMatrix.m[10] = min; this._localWorld.m[0] = min; this._localWorld.m[10] = min; } thanks for any hint
-
Hi, I'm totally new in HTML 5 Games. If I resize my canvas (by calling resize function in preload), those text will become blurry, ugly. Any idea to handle this? Here's the example: https://codepen.io/anon/pen/wxdXKp .
-
Hi, i would like to import an OBJ file into my scene and I have got it. However, I don't get change the position and scale of the mesh. ¿How could I do it? This is my code: var loader = new BABYLON.AssetsManager(scene); var edificioB4 = loader.addMeshTask("A2", "", "http://localhost:8080/modelos/A2/", "A2.obj"); BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true; loader.load(); Thanks, JuanMa J.R.
-
Hi there. Does anyone had a pleasure to build a Facebook Instant Game? I've spent two days trying to scale my Phaser game in the Facebook for Android. Currently scaling works nicely on desktop, in a responsive viewport of the dev console, in the mobile Chrome -- namely everywhere, except the Facebook app. Seems like it just ignores my settings, sprites are displayed at full width, despite the canvas (and game) dimensions are correct. Here are my init and boot scripts, the scaling logic is copypasted from a random gist: // init code FBInstant.initializeAsync().then(function() { FBInstant.setLoadingProgress(50); FBInstant.setLoadingProgress(100); FBInstant.startGameAsync().then(function() { /** Config part */ var FIXED_SIZE = 720; var FIXED_MEASURE = 'Width'; /** Name mapping */ var fixedName = FIXED_MEASURE; var resName = fixedName === 'Height' ? 'Width' : 'Height'; var FIXED_NAME = fixedName.toUpperCase(); var RES_NAME = resName.toUpperCase(); /** Measures of document */ var documentElement = document.documentElement; var documentFixed = window['inner' + fixedName]; var documentRes = window['inner' + resName]; var ratio = documentRes / documentFixed; /** Canvas measures */ var canvasFixed = FIXED_SIZE; var canvasRes = FIXED_SIZE * ratio; var screen = {}; screen['CANVAS_' + FIXED_NAME] = canvasFixed; screen['CANVAS_' + RES_NAME] = canvasRes; console.log(screen.CANVAS_WIDTH); console.log(screen.CANVAS_HEIGHT); game = new Phaser.Game(screen.CANVAS_WIDTH, screen.CANVAS_HEIGHT, Phaser.CANVAS); game.state.add('Boot', Boot); game.state.add('Preload', Preload); game.state.add('GameTitle', GameTitle); game.state.add('Main', Main); game.state.add('GameOver', GameOver); //Start the first state game.state.start('Boot'); }); }); // boot code var Boot = function(game) {}; Boot.prototype = { preload: function() { }, create: function() { this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.game.scale.refresh(); this.game.state.start("Preload"); } } Would appreciate any help!
-
I need to create a project based on a flash project, however, I can't think of a way to replicate this: I was thinking about using graphics but I do not know how to update it when dragging. Is there anyway to create this? -
Hello, I have my canvas stretching 100% width and height of the page. When running it in a small resolution screen and in a big resolution screen, the whole thing is scaled up. Is there any simple way to simple increase the radius of the camera based on the device resolution instead of having everything scale up? (Everything stays the same size just like regular html elements)
-
Hi everyone, I am quite new in game dev and developing simple app using pixi.js and faced with the following issue: when I use simple sprite I can adjust scaling of sprite and it fit let say logic (using set.scale()), but when I change it to TillingSprite, it breaks any consistency for me. Could someone clarify scaling topic for me: 1. TillingSprite: as soon as I change sprite to TillinSprite I see only enlraged top area of asset spread on whole application stage. Reducing scale or size doesn`t display whole picture, it just reduce area of TillingSprite (picture). Please check my class below. I have played with different values of innerWidth/Height, but no desirable results achieved. What is correct way to scale TillingSprite? So scaling behaves the same as for Sprite: function Clouds() { var cloudsTexture = PIXI.Texture.fromImage("assets/images/clouds.png"); PIXI.extras.TilingSprite.call(this, cloudsTexture, innerWidth, innerHeight); //PIXI.Sprite.call(this, cloudsTexture); this.x = 0; this.y = 0; //this.scale.set(0.3, 0.3); this.tilePosition.x = 0; this.tilePosition.y = 0; }; //Clouds.prototype = Object.create(PIXI.Sprite.prototype); Clouds.prototype = Object.create(PIXI.extras.TilingSprite.prototype); Clouds.prototype.update = function () { this.tilePosition.x -= 0.8; } Thank you in advance,
-
It used to work without problems. Now buttons and sprites will only be clicked/touched if I press ~100 pixels bellow them. I didn't change anything and the problem only exists on android. I think not even on all devices. I use cordova and the newest phaser version. I tried updating cordova but the problem persisted. I think it might have something to do with how I scale the game, but I have no idea how or why this really happens now. It would be great if someone knows why it happens and how to fix it. Here is my code for scaling: var width = window.innerWidth; var height = window.innerHeight; var targetW = 150; var scale = width/targetW; var targetH = height/scale; game.scale.setGameSize(targetW, targetH); game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; game.scale.setUserScale(scale, scale); game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas) ; And here is how I create buttons: game.add.button(0,50,'play',function(){this.save();game.state.start('Games');},this);
-
I'm working on a "fake zoom" function that looks like this: class Zoomer extends Phaser.Group { zoom = (amount = { x: 1.5, y: 1.5 }) => { this.x = -((amount.x * (this.game.width / 2)) - (this.game.width / 2)); this.y = this.game.camera.bounds.y - (amount.x * (this.game.height * 1.15)); this.scale.setTo(amount.x, amount.y); } } The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all. This is how I usually create masks on a Phaser.Sprite: createMask() { const graphics = this.game.add.graphics(this.x, this.y); graphics.beginFill(0xFFFFFF); graphics.drawRect(0, 0, this.width, this.height); this.addChild(graphics); this.mask = graphics; } How can I make the group scaling/repositioning include the group's sprites' masks as well? -
Hello everyone, I'm just making game/app that will check personality and skills of the kids, before they choose their carrier path in life. I have problem with hit area. In web browser everything works properly but when I run my app on mobile device, every sprite is scalling ok, but when I want to click on it I have to click a little bit below and in the right. It looks like sprite change position on the screen after scalling down but hit areas stay in their old positions. Either pixelPerfect = true and false doesn't work. Have you any ideas what is wrong? I'm not including code 'cause whole project is too big now to put everything here, it'll be not clear and won't gave you guys clue what's going on. If that'll be necessery I can try to compress it to some pseudo code or something. And happy new year everyone!
-
Hey there! I am using the latest Phaser.js from the official website. I am creating a game that is supposed to be 640x480 in size. var game = new Phaser.Game(640, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update }); But the final canvas that is being rendered is 800x600 in size, which would be correct according to my Windows DPI settings of 125% (640*1.25=800, 480*1.25=600). A resolution of 1280x720 will get scaled up to 1600x900 and as a result, everything will look blurred. The website itself is not zoomed in or enlarged in any way using Chrome. How do I disable this "feature"? I want to be able to control the size of the game.
-
Hi, I am loading an obj file and trying to scale it as shown below. The mesh is loaded but the scaling does not work. What am I doing wrong? var maraca = loader.addMeshTask("maraca", "", "assets/", "Maraca.obj"); maraca.scaling = new BABYLON.Vector3(0.1, 0.1, 0.1); Thanks!
-
Hi there, First post so sorry if this is in the wrong place. I've been reading posts on this and docs for some time but can't really make sense of it. I starting to learn and teach phaser games to 8-12 year olds. I'm looking for the most readable way for novices to scale up a game so that an original game of 480 x 360 will be displayed as 960 x 720 by default. Any rescaling down based on restricted screen size would be an advantage too but not essential if it complicates the code too much or makes less readable. Many thanks in advance
-
Hi all I was wondering if Pixi has a method for creating the appropriate sized text when within a scaled container. In my case, I scale the main container so that its height is 1080. In this container, I would create a Pixi.Text object with height 20px. From what I understand, this creates a 20px text object, which is then scaled down when placed in the container. This results in text which is slightly blurry. I'm planning on creating a method which would calculate the true pixel height required, which would then be scaled to the size needed. Is this something which Pixi itself supports, or would I need to build this myself?
-
Hello guys, currently I'm trying to resize my game to the whole window, while centering a fixed aspect ratio game window in the center, and having padding sprites at the side, but without success. Can you tell me what I should do? Cheers
-
I am new to Phaser and mobile. As a learning exercise I am attempting to build a simple demo that renders a Phaser game object in the browser and draws a rectangle around the border of the available visible space. My goal is to make sure I understand how to determine the actual usable space. My game is going to use a board that fills one screen so I do not need (or want) any scrolling. I just want to determine the usable screen space so I can fill it. I have found numerous versions of this question on this forum and others and after trying many of the things discussed I am still not getting the result I am after. Based on reading, I think I should be using window.innerWidth and window.innerHeight to get the dimensions I want. On my desktops (using Chrome and Edge/IE) it works as expected. On my tablets (iPad and Nexus) it works as expected for both portrait and landscape orientations. On my iPhone (6) it works in portrait but when I turn it to landscape (and refresh the screen) the browser's navigation bar covers the bottom. On my Android phone it works in landscape but when I turn it to portrait (and refresh the screen) the browser's nav bar covers the bottom. I have spent a couple days on this so now it's time to ask for help... Is there a property I can use to get the actual usable space in the current browser or will there always need to be tweaking for specific devices? Thanks for any suggestions, DK Edit: So I added a check in the render function to watch for the screen size changing. When a size change is detected it rereads the window.innerHeight and window.innerWidth properties and then resizes the game accordingly. Doing this inside the render function appears to solve the problem. I am going to go with this for now. If anyone has any additional words of wisdom I am still open to suggestions.
