Search the Community

Showing results for tags 'tilesprite'.

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

Found 48 results

  1. TileSprite Alternative

    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 >= { mainBg1.y =; } if(mainBg2.y >= { mainBg2.y =; } }
  2. 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!
  3. 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
  4. 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 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!
  5. 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?
  6. 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!
  7. preload: function() {'road', 'assets/images/road.png'); }, create: function() {, 0, 1136, 640); this.road =,,,, '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 Can anyone give me a clue to do so? Thanks!
  8. 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: 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: But it doesn't work. What am I doing wrong?
  9. 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() {, 0, 3072, 1536);; // = 0.8; = 0.3;; = 100; = 0.8; }, addBackground: function() { this.background =, 0, 3072, 1536, 'background'); this.background.fixedToCamera = true; this.background.tilePosition.x = 0; this.background.tilePosition.y = 0; }, addDrone: function() { this.drone =, 0, 'drone'); this.drone.animations.add('fly');'fly', 30, true); }, addContactMaterials: function() { this.spriteMaterial ='spriteMaterial', this.drone.body); this.worldMaterial ='worldMaterial');, true, true, true, true); this.contactMaterial =, 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.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() {; }, addControls: function() { this.cursors =; }, 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.background.tilePosition.x -= (this.drone.body.velocity.x *; } if (! { this.background.tilePosition.y -= (this.drone.body.velocity.y *; } }, update: function() { this.moveHorizontally(); this.moveVertically(); this.moveBackground(); } // , // paused: function () {}, // render: function () {}, // shutdown: function () {} }; module.exports = Level;
  10. 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 (, 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.
  11. Hello everyone, Does anyone of you know how I can disable the tilesprite debugging messages? example in the attachment Very Kind Regards, Cedric
  12. 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
  13. TileSprite without repetition?

    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
  14. Tile Sprite

    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;
  15. 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
  16. 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 !?!?!
  17. 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: Thanks in advance, any help is greatly appreciated
  18. What is the difference between Rope and Tilesprite? In both cases it seems it's just a sprite with repeated texture.
  19. Hello, guys! That's me again with my foolish questions)) So, the question is: How to stretch tileSprite to fullscreen ? planetSprite = game.add.tileSprite(0, 0, game.width + 500, game.height + 900, planetObject.key + 'Planet');// planetSprite.anchor.setTo(0, 0);planetSprite.scale.set(0.75, 0.6);planetSprite.fixedToCamera = true;and here I have a problem: it looks ok on my screen, but on bigger one this tileSprite is repeated and also it's not stretched to fullScreen on bigger screens image is attached Thank you in advance for your help))
  20. hi, In my project, i'm trying to change the background of a game but i've got some issues. I use a tileSprite as background, i had it in the beginning of create() so it's behind the layers and other objects : (where my loaded images are named bg0, bg1, ...) background = game.add.tileSprite(0, 0, 800, 600, 'bg' + layers.fond);but i want to change it by pressing a key and there it goes wrong : if i use again rhis code with a different image, it creates a new tileSprite IN FRONT of the previous objects i've created. So i tried to change the tileSprite by using : background.key = 'bg' + layers.fond;But then, nothing change, the new image linked with background is good but i can't "refresh" the displayed sprite. Can you give me some advices ?
  21. 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 =, layer.height);texture.renderXY(layer, 0, 0)var tileSprite =, 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?
  22. Hello all, I have a tileSprite which looks like this: game.add.tileSprite(0, 0, 0, 0, "wordBG");The first time I create it, it looks fine, when the game.state is reset the following error occurs: Does anyone have any idea what is going on? Note: I'm using Phaser 2.3.0
  23. Tilesprite collision issue

    Hi guys! I'm currently having an issue with using a tilesprite as the ground for an infinite runner game. Using Arcade physics I set a body to the tilesprite so that I could check collision between my sprite and the ground. The problem comes when the collision actually happens. The sprite body doesn't flag "body.touching" as down nor does it work with "body.onFloor()". A by-product of this issue is that my jump function is negated for some reason. Once my sprite collides with the ground he can't move up at all. Any help would be appreciated!! This is my main game state: Play = function(game) { = game; this.boy = new Player(game); this.girl = new Girl(game); = null; this.ground = null;}Play.prototype = { create: function() { =, 0, 438, 136, 'background'); this.ground =, 125, 438, 44, 'ground');; this.ground.body.allowGravity = false; this.ground.body.immovable = true; this.ground.body.setSize(this.ground.width, this.ground.height - 10, 0, 10); this.boy.create(); this.girl.create(); }, update: function() { -= 0.5; this.ground.tilePosition.x -= 1.5; this.boy.update(); this.girl.update();, this.ground); }And here is my player class: Player = function(game) { = game; this.player = null; this.cursors = null;}Player.prototype = { create: function() { this.player = / 2, / 2, 'boy') this.player.anchor.setTo(0.5, 0.5); this.player.scale.setTo(0.5, 0.5);; this.player.body.collideWorldBounds = true; this.player.animations.add('run', ['run1', 'run3', 'run2', 'run4'], 8, true, false); this.player.animations.add('jump', ['jump1', 'jump2'], 5, false, false); this.player.animations.add('fall', ['fall1', 'fall2', 'fall3'], 8, false, false); this.cursors =; }, update: function() { this.player.body.velocity.x = 0;'run'); if (this.cursors.left.isDown) { this.player.body.velocity.x = -100; } else if (this.cursors.right.isDown) { this.player.body.velocity.x = 100; } if (this.cursors.up.isDown) { this.player.body.velocity.y = -200;'jump'); }Here is a live version: Thanks in advance!!
  24. Collide problem?

    Hi guys, somebody can please tell me how collide, push sprite go, tileSprite too. Read examples, find some solutions but i dont know whats wrong with my code: function preload(){ game.load.image('block1', 'block1.png'); game.load.image('block2', 'block2.png'); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = '#ECF0DD'; block1 = game.add.sprite(500, 300, 'block1'); game.physics.arcade.enable(block1); block1.body.allowCollision = true; block2 = game.add.sprite(700, 300, 'block2'); game.physics.arcade.enable(block2); block2.body.allowCollision = true; } function update() { game.physics.arcade.collide(block1, block2); if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { block1.body.x += 5; } else if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { block1.body.x -= 5; } else if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { block1.body.y -= 5; } else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { block1.body.y += 5; } } var game = new Phaser.Game(900, 500, Phaser.CANVAS, 'game', {preload:preload, create:create,update:update}); Its just go through, dont collide at all. Can you please tell me how to collide left, right side too?
  25. Hi guys! One question please... How Can I create a tilesprite from a TileMap and TileMapLayer? Thanks in advance, Nicholls.