Search the Community

Showing results for tags 'scale'.

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 137 results

  1. 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: I would be glad to answer any questions or concerns. Thank you!
  2. I'm trying to get my tilemap to scale and I'm basically following the example here: 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:
  3. 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?
  4. 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?
  5. 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;
  6. 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,, '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
  7. 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.
  8. 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?
  9. 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?
  10. 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.
  11. 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: 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.
  12. 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.
  13. 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? = Phaser.ScaleManager.SHOW_ALL; = true; = true;
  14. 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 which you might not know like me, so, to fix it add textureSeamFix: false video.init : if (!, 208, { wrapper: 'screen', antiAlias: false, scale: 4 * window.devicePixelRatio, textureSeamFix: false }))
  15. 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;, 0, this.worldSize.width * this.worldScale, this.worldSize.height * this.worldScale); // Reset box2d world bounds; // 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!!
  16. 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 directly with, 0.5);Unfortunately, this scales around the top left of the screen. I've tried setting the anchor on the 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
  17. 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, 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?
  18. 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?
  19. 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
  20. I make some PIXI.Graphics objects and put it on my stage, which contains a TilingSprite as background, then I scale my background and my Graphics objects. They look nice because they all scale to the same point. Then I put the PIXI.Graphics in Sprites and add the sprites onto my stage, scale them again. This time only the background scales. Sprites don't scale with the background. What happens? The Graphics and Sprites objects are at the same position. But they behave differently during scaling. I hope I use the right way to create sprites. My code: const array = new Array(COUNT); for (let i = 0; i < COUNT; i++) { const x = randomInt(50, 100); const y = randomInt(50, 100); array[i] = new Graphics(); array[i].beginFill(0xD48CFA); array[i].lineStyle(0); array[i].drawCircle(x, y, 10); array[i].endFill(); stage.addChild(array[i]); } for (let i = 0; i < COUNT; i++) { const x = randomInt(50, 100); const y = randomInt(50, 100); const g = new Graphics(); g.beginFill(0xD48CFA); g.lineStyle(0); g.drawCircle(10, 10, 10); g.endFill(); const rt = RenderTexture.create(g.width, g.height); renderer.render(g, rt); array[i] = Sprite.from(rt); array[i].anchor.set(0.5); array[i].position.set(x, y); stage.addChild(array[i]); }
  21. I posted a while back about tile maps without much luck, I may have been way too vague. No matter, finished up the game and was happy enough with it. On to the next one! Phaser kicks ass!!! My Issue: I have a few sprites that I've added to a group, what I want to do is scale the group down and maintain its position. I was reading about "pivot" but I couldn't get it to work. It seems like the group is shrinking to the top left corner. I want to set the "center" of the group and then scale down. If anyone has experience with this I'd love to hear how you solved it, if you need a code sample let me know. I haven't worked with the sandbox much but will be more than willing to set it up if it helps out. Thanks and cheers!
  22. Hello, So we have this memory game, we are having problems about the smoothness of the images and the text that comes with it when we scaled down on higher levels (more columns and rows). So the more rows and columns the more we scaled down the sprite and they suffered on smoothing and anti aliasing so much. Any help would be appreciated. Thanks in advance.
  23. Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens. The tweening library that I'm using is Tween.js ( ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged. According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( ), which is what prompted my current, albeit unsatisfactory, solution. To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution. This code example is no longer able to set the x position in v4: new TWEEN.Tween(stage.position) .to({ x: value }, 500) .start(); However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target. This code example using onUpdate() works with v4: var temporaryObject = { x: stage.position.x }; new TWEEN.Tween(temporaryObject) .to({ x: value }, 500) .onUpdate(function() { stage.position.x = this.x; }) .start(); Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.
  24. Hey, i created some circles with the PIXI.Graphics thingy, and added them to a container. When i now scale that container, the lines are becoming more thick. Im sure this is the best behavior in the most situations, but i would like them to stay allways with the same width. is this possible?
  25. I'm using P2 physics, and I'm creating a relatively intricate border around the screen that I want balls to bounce against. I am scaling all assets on the screen for 3 different aspect ratios, depending on the user's screen size. I create the border like this: bgOverlay = otherSpriteGroup.create(gameWidth / 2, gameHeight / 2, "bgOverlay"); bgOverlay.anchor.setTo(0.5, 0.5); bgOverlay.scale.setTo(scale.x, scale.y); bgOverlay.body.clearShapes(); bgOverlay.body.loadPolygon("physicsData", "bgOverlay"); bgOverlay.body.setCollisionGroup(otherCollisionGroup); bgOverlay.body.collides(bubbleCollisionGroup, otherHitBubble, this); bgOverlay.body.static = true; The trick is that I scale all assets using a Phaser Point, scale.x and scale.y. But when I load in the polygon data using bgOverlay.body.loadPolygon, it takes in actual pixel values, and I can't scale bgOverlay.body. I am not sure how to scale the numbers in the physics data. Any ideas?