Search the Community

Showing results for tags 'scale'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 143 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. i want to zoom to player position using pixi features. According to this comment. A camera is as easy as setting container pivot point to user position and move the container position to the canvas center. How about do a little more and zoom to the user position and make it look natural? I am currently using this const scaleDelta = -0.1; const offsetX = - (user.x * scaleDelta); const offsetY = - (user.y * scaleDelta); const currentScale = container.scale.x; let nScale = currentScale + scaleDelta; container.position.x += offsetX; container.position.y += offsetY; container.scale.set(nScale); This works when I am not using a camera, but looks jumpy when I add a camera. What is the solution with a camera?
  3. Hi, when I create an empty image, I always get a 32x32 pixels image. //As you can see, I'm not passing any 'key' this.img = this.game.add.image(x, y); Then, even after adding a rectangle to my Phaser.Image, its size is still 32x32. this.rect = new Phaser.Graphics(game); this.rect.beginFill(color, alpha); this.rect.drawRect(0, 0, 200, 100); this.rect.endFill(); this.img.addChild(this.rect); And if I manually set the image width and height properties, it would scale the image children. So, how can I create an empty Phaser.Image of a specific size? Edit: I'm not sure this is the right way of doing it, but I guess I could give this image a texture with the size I need.
  4. Need help scaling TilemapLayer

    I'm trying to scale a tilemap using TilemapLayer.setScale but it blurs tiles, is there any way to scale tilemap with full quality? Phaser's scaling: https://prnt.sc/fsgcfz Tiled zoom: https://prnt.sc/fsgcp3
  5. 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!
  6. Hello all, My colleagues and I from the Illinois Institute of Technology are conducting a research study to develop a measure of prior videogame experience (PVGE), intended to help develop and use learning games. Currently, we are trying to link situational and dispositional factors with PVGE through an online survey to validate the new scale. Please help us with the research by participating in this brief and confidential survey, approved by the university's institutional review board. The link is provided: https://iitresearchrs.co1.qualtrics.com/jfe/form/SV_6qZvi2oTDyXwbYN I would be glad to answer any questions or concerns. Thank you!
  7. I'm trying to get my tilemap to scale and I'm basically following the example here: https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js#L17 However, what ends up happening is the tilemap itself will scale but the frames won't. I can't record a GIF because for some reason the screen randomly flashes white when running the PIXI app, but here are some screenshots which may be helpful:
  8. Hello! I am the P2 physics. I have a sprite scaled. My problem is that the polygon loaded to the sprite does not scale with it. It is possible to scale the polygon?
  9. Scale text question

    So, I have a text in size 200x50, and wan't to scale it down precisely 2 times (100x25) option 1) Scale 0,5. This sucks, as the quality is crewed (more on up-scale, less downscale, but anyways it is..) and I can't afford that in my project. option 2) FontSize/2. This sucks as well in my case, because it wont be precisely 100x25. So are there any alternative options, so I get the precise size and quality as well? Some kind of scale + re-render, duno?
  10. Hi there, I'm trying to zoom out the entire game world from the center.. unfortunately I see no method for the camera for zooming out so I'm scaling the game.world directly with this.game.world.scale.setTo(0.5, 0.5);Unfortunately, this scales around the top left of the screen. I've tried setting the anchor on the game.world as well as the pivot to the center of the world or the center of the stage to no avail. Is it possible to achieve what I'm trying to do? Thanks for any thoughts - Nick
  11. My game does not scale correctly when the browser loads the game while the window size is made smaller. Another scenario is while in game state, the game will resize correctly, If I try to make the window bigger once again the game will be made out of scale and not usable really. this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  12. Hi Everyone, Completely new to Phaser so I am, embarrassingly, having problems even just scaling an image down. Code looks like this: var game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload(){game.load.image('cat', 'cat.png');} function create(){ game.stage.backgroundColor = "#8A2BE2"; game.add.sprite(0,game.world.height-250, 'cat'); } function update(){ } Could Someone show me how to set the size of the image, cat? At the moment it is far too big. Thanks in advance
  13. I have made a demo that the sprite will scale to a bigger size on some event. However its texture gets blurry and resolution changed so the sprite looks very awful after scaling to a bigger size. Is there a way to scale but maintain the visual quality of the texture without changing the resolution of the texture? How about replacing the texture with a new one? This is all I can think about but I am afraid of the performance cost. I am using CanvasRenderer by the way.
  14. Hi everyone sorry for the "tongue-twisted" title. I am making a player sprite inside a container and it works like this: when I move my player sprite on some occasions such as the sprite touches some other sprites on the container, the container scales smaller but the player sprite will scale bigger. However what I get for now is the player sprite will scale with its container. If the container becomes smaller the player sprite will become smaller too. Whatever scale I use on the sprite is useless. Is there anything I can do to change to what I want? Do I need to move the player sprite out of the container? If I do this their relative positions are hard to observe. Can somebody point out a direction for me please?
  15. I'm creating a tile-based game where the game is set to always have ten tiles vertically and scale every tile to fit as such. At certain window sizes, however, there are gaps every few tiles running vertically. Strangely enough these lines only run vertically and not horizontally. I'm assuming this is because of the non-round scaling (a typical number is something like 2.496875). Any ideas how to fix this?
  16. Graphics scale and linewidth

    Is there a way to scale a Graphics without getting the linewidth scaled as well? For instance: var stage = new PIXI.Container(); var graphics = new PIXI.Graphics(); // Set a fill and line style. var linewidth = 10; graphics.beginFill(0xFF3300); graphics.lineStyle(linewidth, 0xffd900, 1); // Draw a shape. graphics.moveTo(50, 50); graphics.lineTo(250, 50); graphics.lineTo(100, 100); graphics.endFill(); // Now, scale this Graphics. var scale = 5; graphics.scale.set(scale, scale); // all lines now have width linewidth * scale In the example above, the vector "shape" gets properly scaled by a factor of 5. Unfortunately, so does the linewidth. I am trying to render Graphics vector data on top of Google Maps (typically polygons over countries), and when the map gets zoomed in, I want to rescale the data without getting enormous boundaries.
  17. Hi guys! I'm doing a 2D game with tiled map and I've run into a problem. When the group of objects (map layer and unit sprites) scaled, and camera is focused on sprite (by following with lerp), camera.view, or autoCull (or something else) gets some offset lag But all works fine with image map. You can uncomment the /* image map */ section in 'create' tab to check it out. Dont forget to comment the /* tile map */ section Just look: http://phaser.io/sandbox/edit/XNQoDGUq Buttons: LEFT ARROW - center camera on unit1 and scale group to 1.2 (if not zoomed); RIGHT ARROW - center camera on unit2 and scale group to 1.2 (if not zoomed); UP ARROW - unzoom (set group scale to 1); Spent last two days to fix this out, but have no more ideas.
  18. Hello everyone! Is there a way to change canvas size to preloaded background image size? And only after that do the code at create function. Thanks.
  19. Scale to fit browser screen issues

    I am using these codes to scale my game to fit the Chrome browser screen on my computer. But It only works in OS X not on windows. On windows I have to use full screen mode to see all of my sprites. But on normal resolution OS X I can see all my sprites without using full screen mode. What is the correct solution? this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true;
  20. I got this tile map in tiled:(4x) In 4.1.0 when you video.init using this settings (for integer scale) antiAlias: false, scale: 4 * window.devicePixelRatio, In will draw like this: tile texture are scaled 1 pixel, and it looks very bad. It's all because of these change: So there is an option for creating renderer: * @param {Boolean} [options.textureSeamFix=true] enable the texture seam fix when rendering Tile when antiAlias is off for the canvasRenderer But it's not in the API document yet, and also you can pass this option to video.int which you might not know like me, so, to fix it add textureSeamFix: false video.init : if (!me.video.init(256, 208, { wrapper: 'screen', antiAlias: false, scale: 4 * window.devicePixelRatio, textureSeamFix: false }))
  21. Scaling Box2D sprites and world?

    Hello! I'm new to Phaser and Box2D, but I've looked through as many posts as I could find on scaling box2d and am still struggling to get it working well. I'm trying to scale a bunch of sprites, and on each scale step increase the worldsize as well so that I can reset box2d world bounds. I've gotten the world scaling and the sprites scaling, but the physics bodies stay behind. It looks like this: the sprites are beyond the bounds of the world and they are offset from their box2d bodies. Here's what I've tried - using body.setRectangle() to scale the Box2D rectangle as well. I've also noticed that the sprites are scaling faster than the world and are leaving the world bounds. I've been banging my head against the wall for a while and was hoping someone had some wisdom to share. if (this.cursors.up.isDown) { // An internal function that I use to track world scale. This is working fine this.scaleWorld(1); // Scale all the bodies in the world inside a group called stageGroup this.stageGroup.scale.set(this.worldScale); // Set the world scale & reset bounds this.game.world.scale.setTo(this.worldScale); this.game.world.setBounds(0, 0, this.worldSize.width * this.worldScale, this.worldSize.height * this.worldScale); // Reset box2d world bounds this.game.physics.box2d.setBoundsToWorld(); // For all sprites in the sprite group, scale them this.stageGroup.children.forEach(child => { // scale x and y child.position.x = child.position.x * this.worldScale; child.position.y = child.position.y * this.worldScale; // This is what I've tried but it's not working child.body.setRectangle(child.initialSize* this.worldScale, child.initialSize * this.worldScale, 0, 0, 0); }); } Thanks!!
  22. I work on a simple game prototype which uses the tilemap I have a scene which extends PIXI.Container and has a map made out of individual pats of a texture atlas. At the end I have simple piece of code for zooming my scene by mousewheel, when I scale the scene the tiles sprites will have a small gap between them or they may overlay each other at certain points. I tried to solve my problem the following ways: 1) I've tried to use this settings PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 2) I've tried to set up my canvas like this: canvas { image-rendering: pixelated; } 3) I've tried to set up antialias property to true and vice versa 4) I've tried to use Math.round to the position of each tile as well as to the position of whole scene 5) I've tried to set up cacheAsBitmap = true to the whole scene 6) I've try to use pixi-tilemap from there https://github.com/pixijs/pixi-tilemap, I made there small changes in the basic example, but I've got the same result Nothing was helpful This is my code which I use for zooming: var self = stage; rendererviewaddEventListener('mousewheel'function(event) { var factor = delta = eventwheelDelta || -eventdetailpoint = new PIXIPoint(eventpageX / 1 eventpageY /1); // на сколько минимально можно отдалить объект var MIN_SCALE = 0.25; // максимально можно приблизить объект var MAX_SCALE = 1; var local_pt = selftoLocal(point); var curScale = selfscaley; if ( delta > 0) { // Zoom in factor = 0.1; } else{ // Zoom out factor = -0.1; } if(factor > 0 && curScale >= MAX_SCALE) { //; } else if(factor < 0 && curScale <= MIN_SCALE) { //; } else { var parentLocal = point; selfpivotx = Mathround(local_ptx); selfpivoty = Mathround(local_pty); selfpositionx = Mathround(parentLocalx); selfpositiony = Mathround(parentLocaly); selfscaleset(selfscalex + factor); } }); Does anyone know how to solve it?
  23. Scale on resize

    Hello everyone, this is my first time posting here and I am incredibly new to babylon .I've scoured the net looking for a solution to this problem with none yet. I'm using engine.resize() on window resize listener and this seems to work when I resize the window vertically. However, there seems to be no horizontal scaling available and when resizing the window horizontally, the image gets cut off instead of shrinking. Anybody have a solution?
  24. How to scale entire game up

    Hi, I'm extremely new to Phaser and I've started going through the src and examples to convert a game. One thing I can't figure out though, is how to scale up the entire game. I know I can scale up a particular sprite, but how would you scale up the entire game? Also is there anything extra I would have to do to keep the "pixel art" feel of the game when scaling? Apologies if this is blindingly obvious, but I've come to Phaser from working with Impact and I'm trying to "unlearn" as it were! Have to say I'm impressed with the framework, though I am looking forward to the completed docs! Thanks