Search the Community

I was noodling around and trying to create groups of game objects that had 3 sprites that were cropped from one image. Similar to a 3-panel round cornered web button. The reason for this structure is I need variable width with the outer left and right images being fixed. But I also need it to be a game object with physics and collisions. I tried adding tileSprite to physics to make this, but it did not work with physics. ("Error: Not a function") this.blockLeftCap = this.physics.add.tileSprite(100,100,44,43,'button-001'); In the end I can just cut solo images individually, and then add as sprites to physics with no issue: this.blockLeftCap = this.physics.add.sprite(100,100,'btn-001-cap-left'); Since I can do this other ways it is no big deal. But I did like the way tileSprite allowed for easily adjustment of the image cropping. Just wanted to double check if I was missing something. Thanks, Matt

Her is an example based on a Phaser 2 example, 0 index is set as colliding: Her is the tiled json file: https://examples.phaser.io/assets/games/starstruck/level1.json Phaser 2 example where empty (index 0 in tiled json) is not collideable: https://phaser.io/examples/v2/games/starstruck What is the easiest way to fix this in phaser 3? Setting 0 in setCollisionByExclusion method does not exclude it from collision.

Hi In Phaser2, it was possible to scale a TileSprite so the sprite inside was scaled while being tiled. It doesn't seem to be there anymore in Phase3. Is there a way to achieve this? Thanks!

Hi All, I have been working on a Endless Runner game for mobile and web . Initially i Used TileSprite for the looping background,but it affects the performance on mobile. Then i used the classic method of moving two backgrounds simultaneously. But if i increase the speed of the movement , it gives a gap between two backgrounds. Kindly help me with the logic bgSpeed = 10 update() { mainBg1.y += bgSpeed; mainBg2.y += bgSpeed; if(mainBg1.y >= this.game.height) { mainBg1.y = -this.game.height; } if(mainBg2.y >= this.game.height) { mainBg2.y = -this.game.height; } }

Hi guys, I'm having an issue with a tileSprite I'm using to cover my game screen. It looks like the repeating texture has spacing/margin added on all sides which creates this grid like effect in the screenshot below. I have no idea how this has happened because yesterday when I was working on the game (and all times previously) the tileSprite formed a solid texture the size of the game world. I've tried this with 2 separate textures, in different states/browsers and I'm starting to think I'm going crazy. Any help advice would be greatly appreciated. Thanks!

Hello, I am creating a tilesprite, but its causing black lines to appear right at edges, i have ensured that when used as just sprite there is no black line, i have tried adding extra padding in texture packer didnt, work, tried making the tilesprite size in PoT didnt work. Can anyone suggest anything else I can do? Thanks

Hi everyone, I have a strange issue with the webgl and tilesprite behavior which seems for me to not follow the Phaser documentation. My background is contained inside a sprite atlas described by a json file. All the sprites have dimension equal to a power of 2 (height and width) and the png file too. I have followed the tutorial https://phaser.io/examples/v2/tile-sprites/tiling-sprite-atlas It works great with this example and the octopus dimensions used are "w":62,"h":94 But, when I change one of this parameters to a power of 2, for example: "w":64,"h":94, the tilesprite has a strange behavior: the entire image is displayed from x:0 y:0 No problem with canvas. I suppose it is a newbee issue... any help? Thanks!

Hi everyone! I am currently working on a game where a player has to avoid walls that spawn on the top of the screen. I have a sprite that is a three-line road. Player can step on only one line at a time. I want the background sprite (the road) to auto scroll from top to bottom. At the same time I want it to spread across the entire screen width. To I basically want a single sprite to have the width of the screen and tile vertically. Is it possible to achieve such a thing in Phaser?

Hello everyone! I have a big map with a tilesprite in the background (repeating mountains). When I want to hide them, the first time I do background.alpha = 0, I notice a huge stutter. I can go back to alpha = 1 and alpha = 0 as much as I want later on, no issue. Only the first alpha = 0 causes the game to lag terribly. I have tried with visible, renderable, exists etc. : same result! I have also tried to create a tilesprite with different frames and switch between them, but the impact on performance was dreadful (lost 50FPS!). How could I avoid that? What's the cause of this stutter? Thanks a lot!

preload: function() { this.game.load.image('road', 'assets/images/road.png'); }, create: function() { this.game.world.setBounds(0, 0, 1136, 640); this.road = this.game.add.tileSprite(this.game.world.centerX, this.game.world.centerY, this.game.width, this.game.height, 'tileRoad'); this.road.anchor.setTo(0.5); }, update: function() { this.road.tilePosition.y +=1; } this code is for tilling the background from top to bottom. However, I would like to tilling the background straight to the camera view. what technique I need to use for achieving it? here is the example of the tilling background I have found in this game http://www.nickjr.com/paw-patrol/games/paw-pups-save-the-day/. Can anyone give me a clue to do so? Thanks!

I'm trying to make a top-down game where the player sprite is fixed in the center of screen and the background is moving (scrolling) in the direction opposite to the player's direction, so it results in effect of the player's movement. I started with Invaders example. It uses TileSprite and its tilePosition property to make vertical scrolling of the background. This works good for linear scrolling in fixed direction (vertical or horizontal). But in my case I need implement scrolling (i.e. movement) in any direction. Furthermore I need such physics features as acceleration and drag to be applied to the player sprite. Here is a sort of what I want to get: http://phaser.io/sandbox/OoPDpTwx As can be seen it features constant movement only, no acceleration and other physics stuff. And I had to calculate angular movement manually. How can I reproduce such effect using Phaser physics? I've tried to enable camera following to the player sprite like here. Here is my code: http://phaser.io/sandbox/dowAsYWa But it doesn't work. What am I doing wrong?

The rope documentation says As the texture moves? The rope? I've tried moving the rope around and adjusting the crop and frame of the texture, but nothing works. I'm using ropes for waves in my game (orangesea.oddkraken.com), and I want to scroll the texture by while keeping the waves moving up and down, so it looks like the player is moving to the right. Is there a better way to go about this? Thanks.

Hi There, I am trying to create a sandbox world with tile sprite, where as the player moves left to right and top to bottom, and they only ever see the image once and it doesn't actually tile. I've read that you can do this by setting the world bounds and tile sprite size to the actual size of the image. When I do this it seems to work okay, however the moment I position the player it causes the background to offset in a way where I am seeing the tile repeat, which is not the desired effect. I was hoping somebody on the forum might have some insight or experience with how to do this? I've attached my code to show the problem I'm running into. Thanks for any help with this. 'use strict'; function Level() {} Level.prototype = { init: function() { this.drone = null; this.background = null; this.cursors = null; this.balloon = null; }, // preload: function () {}, initPhysics: function() { this.game.world.setBounds(0, 0, 3072, 1536); this.game.physics.startSystem(Phaser.Physics.P2JS); // this.game.physics.p2.defaultRestitution = 0.8; this.game.physics.p2.world.defaultContactMaterial.friction = 0.3; this.game.physics.p2.world.setGlobalStiffness(1e5); this.game.physics.p2.gravity.y = 100; this.game.physics.p2.restitution = 0.8; }, addBackground: function() { this.background = this.game.add.tileSprite(0, 0, 3072, 1536, 'background'); this.background.fixedToCamera = true; this.background.tilePosition.x = 0; this.background.tilePosition.y = 0; }, addDrone: function() { this.drone = this.game.add.sprite(0, 0, 'drone'); this.drone.animations.add('fly'); this.drone.animations.play('fly', 30, true); }, addContactMaterials: function() { this.spriteMaterial = this.game.physics.p2.createMaterial('spriteMaterial', this.drone.body); this.worldMaterial = this.game.physics.p2.createMaterial('worldMaterial'); this.game.physics.p2.setWorldMaterial(this.worldMaterial, true, true, true, true); this.contactMaterial = this.game.physics.p2.createContactMaterial(this.spriteMaterial, this.worldMaterial); this.contactMaterial.friction = 0.0; // Friction to use in the contact of these two materials. this.contactMaterial.restitution = 1.0; // Restitution (i.e. how bouncy it is!) to use in the contact of these two materials. this.contactMaterial.stiffness = 1e7; // Stiffness of the resulting ContactEquation that this ContactMaterial generate. this.contactMaterial.relaxation = 3; // Relaxation of the resulting ContactEquation that this ContactMaterial generate. this.contactMaterial.frictionStiffness = 1e7; // Stiffness of the resulting FrictionEquation that this ContactMaterial generate. this.contactMaterial.frictionRelaxation = 3; // Relaxation of the resulting FrictionEquation that this ContactMaterial generate. this.contactMaterial.surfaceVelocity = 0; // Will add surface velocity to this material. If bodyA rests on top if bodyB, and the surface velocity is positive, bodyA will slide to the right. }, enablePhysics: function() { this.game.physics.p2.enable(this.drone); this.drone.body.clearShapes(); this.drone.body.loadPolygon('dronePhysics', 'drone'); this.drone.body.damping = 0.5; // this.drone.body.x = 100; // this.drone.body.y = 1400; // this.drone.anchor.setTo(0.5, 1.0); }, initCamera: function() { this.game.camera.follow(this.drone); }, addControls: function() { this.cursors = this.game.input.keyboard.createCursorKeys(); }, create: function() { this.initPhysics(); this.addBackground(); this.addDrone(); this.enablePhysics(); this.addContactMaterials(); this.initCamera(); this.addControls(); }, moveHorizontally: function() { if (this.cursors.left.isDown) { this.drone.body.rotateLeft(100); } else if (this.cursors.right.isDown) { this.drone.body.rotateRight(100); } else { this.drone.body.setZeroRotation(); } }, moveVertically: function() { if (this.cursors.up.isDown) { this.drone.body.thrust(400); } else if (this.cursors.down.isDown) { this.drone.body.reverse(400); } }, moveBackground: function() { if (!this.game.camera.atLimit.x) { this.background.tilePosition.x -= (this.drone.body.velocity.x * this.game.time.physicsElapsed); } if (!this.game.camera.atLimit.y) { this.background.tilePosition.y -= (this.drone.body.velocity.y * this.game.time.physicsElapsed); } }, update: function() { this.moveHorizontally(); this.moveVertically(); this.moveBackground(); } // , // paused: function () {}, // render: function () {}, // shutdown: function () {} }; module.exports = Level;

Hello everyone, Does anyone of you know how I can disable the tilesprite debugging messages? example in the attachment Very Kind Regards, Cedric

Hi there, I wonder if anyone can help. I have a custom graphic that I made which represents a reel on a slot / fruit machine. It contains 12 different images. Each image is 96 x 96. So you can imagine a long graphic with a new image going vertically at every 96 pixels. I need to display 3 graphics at a time and then emulate spinning of the reel. I was looking into the TileSprites which I thought should be able to get my reels spinning (or look like they are) using the tilesprites. Looking at an example @ phaserjs, its pretty straight forward, I think :-) // Create tilesprite tilesprite = game.add.tileSprite(0, 0, 800, 600, 'starfield'); Then could call method x number of times to emulate scrolling ie. tilesprite.tilePosition.y += 8; // control the speed The problem is that I would like to start each reel at a different position to start off, otherwise, you would always have the same pictures next to each other. I notice I can pass in a frame to the add.tileSprite and I can create the sprite as a atlas / spritesheet. Anyone know what I should be doing here ? Once i have them spinning I would need to stop them, this is another task I can't seem to get my head around. If I just stop them spinning then I could stop the reels NOT being centred i.e. A graphics in between the win line and the line above. Can anyone lend a hand ? I did try searching for some source code already available either free or paid but found none. I am a little lost how to proceed, I should imagine phaserjs gives me the tools to do what i need to do but just unsure where I should go next. Any help really appreciated Thanks

Hey all, Working on a game that animates a number of different layers to produce an parallax effect however I'm stuck when trying to repeat a single instance of a tile across the world and once out of view, it comes back in, i.e. marquee effect. The only ways I can think of doing this is: Create an asset with a lot of white space, however this could result in the tile taking longer on smaller devices and repeating on larger devices. Use a standard tile and change the X/Y values and use math to reset once out of view. Is there any way we can tell the TileSprite to effectively not repeat, but still move the image along the path as usual? Thanks

If I try to resize a TileSprite after instantiation it doesn't work. When I set width and height, it properly changes the number of times my 32x32 texture tiles over the TileSprite, but the actual bounds of the TileSprite don't change. In other words, a 128x128 TileSprite stays that size even if I set its width and height to 256. Its texture just scales down. Am I missing something? If this is a bug, is there a good workaround?

Hello, i have problem with smoothing on tilesprite(not working). My code var background = game.add.tileSprite(0,0,50,50, 'Background')background.scale.set(10);background.smoothed = false;

Hello all, i have a small code on phaser wich needs to parallax two textures at different speeds. i've set the game canvas to transparent mode and my tiles are 1024x512. However, i have the need of resize it according to screen resolution, i.e. apply scale to have a good aspect ratio. how do i do that? here's what i'm seeing. i need to scale it in order to parallax it nicely http://imgur.com/a/swwOI

How can I resize a TilemapLayer? I'm resizing my game on browser resize, and if the size increases the layer is only rendered to an area equal to the old size. Increasing a layer's width/height scales it, but it is not quite what I want. Something equivalent to setBoundsToWorld() (like what the camera have) would be perfect.

So i have a tileSprite and would like to change the texture. I call loadTexture and check with the console that the key is correct, but the old texture keeps showing. Then when I change the texture again, it displays the last texture. for example: this.mainBg.loadTexture('city-level-bg'); // Nothing Happensthis.mainBg.loadTexture('park-level-bg'); // Now it displays city-level-bg, why !?!?!

Hi guys, In earlier versions of Phaser I can get texture from a TilemapLayer and use it with a TileSprite... but with the 2.4.2 doesn't work. Any idea that you can suggest me? PD: My code: http://www.html5gamedevs.com/topic/12994-tilesprite-from-tilemap-and-tilemaplayer/ Thanks in advance, any help is greatly appreciated

Hi guys! One question please... How Can I create a tilesprite from a TileMap and TileMapLayer? Thanks in advance, Nicholls.

So I figure if I want a repeating image I'll be using a TileSprite. But I can't get my layer to render to a texture to then generate the tile sprite. I don't know what's going wrong because, basically, nothing shows up and I get no errors in the console. In this code, "map" is a Tilemap instance, "layer" is a TilemapLayer added through "map.createLayer(layerName);". var texture = this.game.add.renderTexture(layer.width, layer.height);texture.renderXY(layer, 0, 0)var tileSprite = this.game.add.tileSprite(0, 0, map.widthInPixels, map.heightInPixels, texture);layer.destroy();Simply nothing shows up. I can display my other images as TileSprites successfully, but I want to be able to make a repeating background in Tiled and have it automatically show up in my game. If this doesn't work I guess I'll get Tiled to render out my backgrounds as images? That's more annoying because I'll have to do that every time I change the background. What do y'all think?

What is the difference between Rope and Tilesprite? In both cases it seems it's just a sprite with repeated texture.