Search the Community

Showing results for tags 'scaling'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 118 results

  1. 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!
  2. 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!
  3. 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
  4. 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?
  5. Pave

    Scalable Game

    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?
  6. 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.
  7. 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
  8. 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 .
  9. 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.
  10. 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!
  11. 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?
  12. 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)
  13. 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,
  14. 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);
  15. 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?
  16. 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!
  17. 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.
  18. 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!
  19. 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
  20. 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?
  21. 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
  22. 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.
  23. I've used libraries in other languages before that provide different types of scaling via viewport types. The best example of what I want is from a library called libgdx for Java, their ScreenViewport. Essentially what I want is to: Fill the screen meaning that there's no black bars or the sides of the game Maintain the pixel ratio meaning that every in-game pixel is equal to one pixel on screen, so no stretching Not maintain aspect ratio meaning that it doesn't matter to my game what the aspect ratio of the game is. Its job is to forget about aspect ratio and follow the above two criteria The way how I'm achieving this is by using Phaser's EXACT_FIT scaling type so that the canvas automatically resizes to fit the window. Then upon resizing, I update the size of the camera and the game's renderer so that they match the new canvas size. Here's the code I have in my create function. this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; // Phaser.ScaleManager.SHOW_ALL USER_SCALE this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setResizeCallback(function () { var width = window.innerWidth; var height = window.innerHeight; console.log('size: ' + width + ', ' + height); this.camera.setSize(width, height); this.game.renderer.resize(width, height); }, this); It works fantastic in the horizontal axis, but when the window shrinks vertically, there is some vertical stretching of the pixels. Here's a working example of my issue And here's the code on GitHub, in case it's of any help. Here are some related topics that I've done my research on, in case they are also of help Thank you for reading, any help is appreciated! EDIT: I've isolated the issue, it appears to be that when the game is initially created, the height that I specify is the initial height of the canvas. e.g. var game = new Phaser.Game(16 * 80, 9 * 80, Phaser.AUTO, ''); Phaser's scaling method allows the canvas to grow in height, but not to shrink in height. The renderer is rendering to a much taller canvas (which goes off-screen) than expected, therefore causing the vertical stretching. Any thoughts on how I can shrink the canvas myself? Thanks!
  24. Hello, I cannot figure out how the get an updated Bounding Box after the rotation, position or scaling of a mesh. Here the playground: https://www.babylonjs-playground.com/#5HP8KU#1 Thanks in advance for the help
  25. Hi, Just wondering if it is possible to define the scaling for a game only once in a single state (rather than in every state) and it is applied to all states thereafter? In the game I'm currently making I have a boot state and I want to define the scaling only once in the init function but it doesn't seem to apply to any following states and I have to define these settings on all pages: This is the code I'm using for scaling if it helps at all: init: function() { this.scale.pageAlignHorizontally = true; this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.scale.setUserScale(0.445, 0.445, 0, 0); }, I'm sure I must be missing something obvious. Any help would be appreciated.