Search the Community

Showing results for tags 'sprite'.

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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 665 results

  1. I have an old school RPG I am making and I have two main scenes, the Overworld and Encounter scenens. The overworld is fine when switching to it but the problem is the Encounter, before I switch to it, I reset it so I can recreate it from scratch with a random monster in it. The problem is, every time I switch/restart the Encounter scene, the animation of the creature gets progressively faster. I do remove the animation key so I dont get the warning when I switch back to the Overworld scene. Just curious if I am taking the right approach to this and if so, do I need to clean up the sprite of the monster before hand so it doesn't make the animation speed up?
  2. Catrin

    loadTexture help

    Hello, I am new at this and I need help. I am using v3 to make a small game in which a sprite has to change appearance upon an event. I was trying to use the Phaser 2 example below: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create }); function preload() { game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json'); game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18); } var bot; function create() { bot = game.add.sprite(200, 200, 'bot'); bot.animations.add('run');'run', 15, true); game.input.onDown.addOnce(changeMummy, this); } function changeMummy() { bot.loadTexture('mummy', 0); bot.animations.add('walk');'walk', 30, true); } But I keep getting "player.loadTexture is not a function" error. I assume the equivalent of in Phaser 3 is different, but I can't find it. Any help will be appreciated.
  3. Hey guys, I have searched all over to figure this our but no luck. How do I enable the debug to show the bounding/collision boxes on sprites in Phaser 3? this was pretty easy to do in Phaser 2 but I dont see any docs on how to do this for 3. Thanks!!!
  4. I'm trying to make a Mario styled platformer, and i'm running into a problem where the jumping animation is overridden by the walking animation when pressing the up and right(or left) arrow keys together. Here's what i have in regards of the update and playing the animations. The character sprite is loaded as a spritesheet if it makes a difference. if(this.cursors.right.isDown){'walk', true); this.mario.flipX = false; this.mario.body.setVelocityX(500); } else if(this.cursors.left.isDown){'walk', true); this.mario.flipX = true; this.mario.body.setVelocityX(-500); } else{ if(this.mario.body.onFloor()){'stand'); }else {'jumping'); } this.mario.body.setVelocityX(0); } if(this.cursors.up.isDown && this.mario.body.onFloor()){ //'jumping'); this.mario.body.setVelocityY(-600); }
  5. hi all, I have a problem about the p2 body and sprite positon when I enable a p2 body to a sprite, I use fish.body.setRectangle(fish.width, fish.height); to set the body shape, but the position of body is far away from the sprite, anyone know what is the problem? thx
  6. Hello there. 🙂 I have a sprite which rotates. And i have a healthbar added to that sprite as a child. My problem is: The healthbar does what children are supposed to do! But i don't want that! 😅 How to keep child sprites from rotating with their parent? I want it to always stay at the same position relative to the parents anchor. I'm not talking about fixing its angle - that can be done by simply setting it to the negative angle of its parent each time it rotates (at least i don't know any other way). I'm talking about its position. Is there a fixedToCamera equivalent for sprites? If not, some math would be cool, too. EDIT: I guess this could work with groups. But is there another way?
  7. Code pen: I am moving a NPC back and forth on a plattform by checking if the end tile is one of the tiles that are edges in the tilemap and if so swicthing the x velocity. I am having trouble with getting the moving sprite to move equally as far out of the edge of the plattform on both sides, but it seems the sprite is only colliding with one tile at the time, namely the tile that is touching the right bottom corder of the sprite, can I set the collide to be on the tile that is under the middle of the sprite?
  8. Gerente

    Sprite Spacing Problem

    Hello, there is any consideration to draw a sprite after another?. I'm having a hard time trying to make them fit perfectly. I'm starting to think that is something about decimals or something because most of the sprites have a line/space between them , and in mobiles is even worst. I have a big spritesheet with tiles, and I extract them with: new PIXI.Texture(texture, new PIXI.Rectangle(col * tileSize, row * tileSize, tileSize, tileSize)) where col and row indicate the position of the tile. Could be a problem related with this method? the spritesheet is fine because it works perfect in Tiled.
  9. mat89c

    Set anchor in Phaser 3

    Hello, How can i set anchor point in Phaser 3? setOrigins not working for me. For example: Phaser2 Phaser 3 Sprite is "jumping" on resize. How can i fix it?
  10. I have an idea of how I want to spawn obstacles for my endless runner game; what I want to do is spawn them randomly on the right and move them towards the left hand side of the screen. And once they are out of bounds of the screen, I want to kill them. But I need some help figuring out how to write the function that would do this. So far I've made a title screen, and the basic "treadmill" structure of the endless runner with player movement. var game = new Phaser.Game(820, 360, Phaser.AUTO); var mainMenu = function(game) {}; mainMenu.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // background this.background =, -30,, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.background =, 310,, 60, 'sprites', 'ground'); this.background.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny'); this.player.animations.add('run', Phaser.Animation.generateFrameNames('bunny', 4, 5, "", 4), 10, true);'run', 10, true); // logo this.splash = this.add.sprite(, - 40, 'sprites', 'logo'); this.splash.anchor.setTo(0.5); }, update: function () { if ( {'gamePlay'); } } }; var gamePlay = function(game) {}; gamePlay.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // physics engine; = 2000; // background this.background =, -30,, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.ground =, 310,, 60, 'sprites', 'ground'); this.ground.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny'); this.player.animations.add('right', Phaser.Animation.generateFrameNames('bunny', 4, 5, '', 4), 10, true);'right', 10, true); // physics on sprites[this.player, this.ground]); this.ground.body.immovable = true; this.ground.body.allowGravity = false; this.player.body.collideWorldBounds = true; //add spacebar for jump this.jumpButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, update: function () { // look for collisions between sprites, this.ground); //add arrow keys for movement var cursors = this.input.keyboard.createCursorKeys(); //reset player velocity this.player.body.velocity.x = 0; //moving right if (cursors.right.isDown) { this.player.body.velocity.x = 90;'right'); } else if (cursors.left.isDown) { this.player.body.velocity.x = -90;'right'); } // jump if (this.jumpButton.isDown && (this.player.body.touching.down)) { this.player.body.velocity.y = -800; } } }; var gameOver = function(game) {}; gameOver.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { console.log('create'); game.stage.backgroundColor = '#4488AA'; //click to start text - 100, + 80, 'Click to return to main menu', { font: "30px Raleway"} ); }, update: function () { if ( {'mainMenu'); } } } game.state.add('mainMenu', mainMenu); game.state.add('gamePlay', gamePlay); game.state.add('gameOver', gameOver); game.state.start('mainMenu'); sprites.json
  11. I've noticed that when using an action manager with sprites, both the OnPick and OnPickUp triggers are fired twice. This can be seen in the example (here), linked to from the documentation (here). Looking at the code, this seems to because scene._initClickEvent calls it's callback twice (here and here, cb being defined here). This could be solved by checking if clickInfo.ignore is true before doing all the sprite checking, unless there is a good reason this wasn't done in the first place.
  12. laduree77

    Sprite keeps spawning in same place

    var game = new Phaser.Game(400, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //creating score value and onscreen text var score = 0; var scoreText; //creating random spawning place for diamond var diamondX =; var diamondY =; function preload() { // preload assets game.load.image('sky', 'assets/img/sky.png'); game.load.image('ground', 'assets/img/platform.png'); game.load.image('star','assets/img/star.png'); game.load.image('diamond', 'assets/img/diamond.png'); game.load.spritesheet('baddie', 'assets/img/dude.png', 32, 48); } function create() { // place your assets //enabling Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); //adding a background game.add.sprite(0, 0, 'sky'); //a group containing the ground and platforms to jump on platforms =; //enabling physics for any object in this group platforms.enableBody = true; //creating the ground var ground = platforms.create(0, - 64, 'ground'); //scaling to fit the width of the game ground.scale.setTo(2, 2); //stops ground from falling once player jumps on it ground.body.immovable = true; //create five ledges var ledge = platforms.create(-300, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(200, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(100, 300, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-200, 200, 'ground'); ledge.body.immovable = true; ledge = platforms.create(300, 100, 'ground'); ledge.body.immovable = true; //create the player and its settings player = game.add.sprite(32, - 150, 'baddie'); //enabling physics on player game.physics.arcade.enable(player); //giving player a slight bounce player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; //walking left and right animations player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); //create group for stars stars =; stars.enableBody = true; //creating 12 stars evenly spaced apart for (var i = 0; i < 12; i++) { //create a star inside of the 'stars' group each 33 px apart var star = stars.create(i * 33, 0, 'star'); //giving it gravity star.body.gravity.y = 20; //giving each star a random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } //create diamond and apply physics diamond = game.add.sprite(diamondX, diamondY, 'diamond'); game.physics.enable(diamond, Phaser.Physics.ARCADE); diamond.body.gravity.y = 25; diamond.body.bounce.y = 0.7 + Math.random() * 0.2; //displays score text on screen scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'}); } function update() { // run game loop //collide player and platforms var hitPlatform = game.physics.arcade.collide(player, platforms); //built in keyboard manager cursors = game.input.keyboard.createCursorKeys(); //reset players velocity (movement) player.body.velocity.x = 0; //moving with arrow keys if (cursors.left.isDown) { //move to left player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { //move right player.body.velocity.x = 150;'right'); } else { //stand still player.animations.stop(); player.frame = 2; } //allow player to jump if touching ground if (cursors.up.isDown && player.body.touching.down && hitPlatform) { player.body.velocity.y = -350; } //checking for collision with stars and platforms game.physics.arcade.collide(stars, platforms); //checking if player overlaps with star game.physics.arcade.overlap(player, stars, collectStar, null, this); //checking for collision with diamond and platforms game.physics.arcade.collide(diamond, platforms); //checking if player overlaps with diamond game.physics.arcade.overlap(player, diamond, collectDiamond, null, this); } function collectStar (player,star) { //function for updating score for collecting stars //removes star from screen star.kill(); //add and update score for stars score += 10; scoreText.text = 'Score: ' + score; } function collectDiamond (player, diamond) { //function for updating score for collecting diamond //remove diamond from screen diamond.kill(); //add and update score for diamond score += 25; scoreText.text = 'Score: ' + score; } It's my first time trying out Phaser and what I want to do is have the 'diamond' spawn at random locations on the screen. I've managed to get the diamond to spawn on screen, but it doesn't seem to be spawning in different locations when I reload the game each time. I'm assuming that I'd need to put something in the update function, but I need a little help with that part!
  13. I've just started learning pixi.js 2 days ago and I'm stuck with this. I'm trying to register mouse button events on 3 different buttons which I generate this way. function initializeButtons(bg: PIXI.Graphics) { let xPos = (canvasWidthHeight/2) - 130; for(let i = 0; i < 3; i++) { let temp = PIXI.Sprite.fromImage(BOX_SPRITES[0]); temp.scale.set(0.5); temp.anchor.set(0.5, 0.5); temp.position.x = xPos; temp.position.y = canvasWidthHeight / 2; temp.interactive = true; temp.buttonMode = true; temp.on('pointerdown', function() {onClick(i);} ); rewardBoxes.push(temp); bg.addChild(temp); xPos += 120; } } However, everytime I try to click on any button, it's always the last button that gets clicked. What is the proper way to achieve this? Thank you!
  14. Shex

    Image is pixelated

    Hi I'm trying to run my game on a mobile device with the Phaser 3 framework and sprites are rendered as very pixelated images. I'm running the game through the Facebook web player. I'm using a Samsung Galaxy S6 device which the resolution is 1440x2560 with a device pixel ratio of 4. I have setup the same configuration on my PC through the Chrome mobile debug view (1440/2560 with pixel ratio of 4) and the images look way better. I have attached two screenshot of the PC (good) and mobile (bad) devices to show the difference. The game is rendered as CANVAS and I'm using the window.innerWidth and window.innerHeight to define the sizes. Does anyone have any insight about what's going on?
  15. Hi everyone, I'm trying to figure out how to 'reset/readjust' a sprites collider after adjusting the sprites scale. The initial collider setup ( size/offset) is working perfectly at scale 1, with the following : sprite.setSize(44,64,true); sprite.body.offset.y = 44; scaling works great for both sprite and collider with : sprite.setScale(2); the issue is when i set the scale ( to 2 in this example ), the collider now has an offset. is there a built in way to 'reset' this collider so it aligns with the sprite? thanks for your help. var config = { parent: 'container', type: Phaser.WEBGL, width: 300, height: 300, parent: 'phaser-example', physics: { default: 'arcade', arcade: { debug: true } }, scene: { preload: preload, create: create } }; let game = new Phaser.Game(config); let sprite; function preload () { this.load.image('00', '00.png'); } function create () { sprite = this.physics.add.image(400, 300, '00'); sprite.setSize(44,64,true); sprite.body.offset.y = 44; sprite.setScale(2); sprite.setVelocity(100, 200).setBounce(1, 1).setCollideWorldBounds(true).setGravityY(200); }
  16. Kacper Pietrzak

    Applying multiple masks to single sprite

    Question is pretty straightforward, how can I apply multiple masks to one sprite. Let's say I have a sprite and I want it to be displayed only in particular places. In my case I want zombies to be visible only in light, having only flashlight it's pretty easy to implement since there is only one source of light and I can do something like that: this.zombies.setAll('mask', this.flashlightGraphics); But what do I do when I want to apply multiple masks, is there a way to combine graphics objects ? Thanks
  17. I have sprites which are all anchored at 0.5 for x and y, and they are often "flipped" via (e.g.) someSprite.scale.x *= -1. Because their anchors are centered, they don't move immediately because of this. However, changing to a negative scale mucks with their size and coordinates, because now a 20px-wide sprite will report a width of -20px, and it also interprets changes to its position inverse to what they were before (sprite.x++ will cause it to move up on the screen). This makes sense and everything, but the sprites' movement and activity is not always related to their scale. I know there must be a simple way to make a mirrored "copy" of a texture which can be swapped out on a single sprite without having to change its scale from positive to negative constantly.
  18. I am developing a game where my player has to look to see forward when I am pressing right arrow key. But how can I make it look reverse after pressing left arrow? I can create a sprite of reverse look but how can load that while pressing left and at the same time forward player should be destroyed?
  19. I'm trying to create platforms for my player to jump onto and also make collectible stars. I can create these sprites using functions, but I don't know how to make physics work on them so that the character can jump on the platforms and overlap with the stars. The problem is that the physics portion doesn't work when I call it in the update function. I am also not using tilesprites, so it can't work that way. create: function() { addStar(star1); }, update: function() { removeStar(star1); } addStar(name) { name = game.add.sprite(1700, 550, 'star'); name.anchor.setTo(0.5, 0.5);, Phaser.Physics.ARCADE); name.body.collideWorldBounds = false; name.enableBody = true; name.body.immovable = true; } removeStar(name) { if (game.physics.arcade.overlap(character, name) == true) { name.destroy(); updateScore(); } }
  20. Sammdahamm

    Trying to implement "moveToPointer"

    Hi Guys, so Phaser 2 had a method, game.physics.arcade.moveToPointer() which moved a sprite with a given velocity towards the cursor. It seems like this has been replaced in Phaser 3 by a "moveTo()" method in ArcadePhysics, so I'm trying to reimplement it myself. I create a spriteGroup: this.projectiles ={collideWorldBounds: true}) and then later create & attempt to fire a projectile from within a "fireProjectile" method: this.firePlayerProjectile = function(projectileType){ let projectile = this.projectiles.getFirstDead(true, this.player.sprite.x-16, this.player.sprite.y-32, projectileType); this.scene.physics.moveTo(projectile, {x: this.scene.input.x + this.scene.cameras.main.scrollX, y: this.scene.input.y + this.scene.cameras.main.scrollY}, 750); } This does create the projectile sprite in the correct location, but rather than then travelling towards the target location, it just sorta of flashes and disappears after a second. Can anyone tell what I might be doing wrong? How do I get the projectile to move to a given location (and beyond) at a constant velocity? Thanks, Sam
  21. Marcelo Lv Cabral

    Phaser sprite sheets unpacker

    I'm porting a game developed using Phaser to Roku (streaming box) and I needed to change some of the sprite sheets, so I got TexturePacker but was surprised that it does not have an option to read the json file and split back the sheet into all the separate frames. Then I decided to create a quick app to do that, get the json and the png and unpack the frames png files into a folder. It was very useful to me so I decided to open it to the community:
  22. Hi, I have image in cache on which multiple sprites are based like this: a = game.add.sprite(0, 0, "image"); b = game.add.sprite(0, 0, "image"); Now: I want to change the underlying image's data like e.g. this (notice the "image" as argument to generateTexture): game.cache.getBitmapData("somedata").generateTexture("image") This fails at runtime. According to what I've found out so far, I have to do it like this: game.cache.getBitmapData("somedata").generateTexture("image", function(texture) { a.loadTexture("image"); b.loadTexture("image"); }) The question is: is this achievable via more elegant way? The main problem I have with this is I have to keep track of every sprite that's based on "image", because this: game.cache.getBitmapData("somedata").generateTexture("image", function(texture) { a.loadTexture("image"); // b.loadTexture("image"); }); also fails at runtime. Isn't this somehow covered by what Phaser already offers? Thx in advance.
  23. giturra

    Ajust sprite with the ground

    Hi everyone, I'm trying to figure out how to 'reset/readjust' a sprites collider with the ground, because before set the collider bounds, I got this (first image) using the follow code: var game = new Phaser.Game(1024, 800, Phaser.AUTO, 'BreakOut Phaser',{preload: preload, create: create, update: update}); var bats; var leftKey; var rightKey; function preload() { this.load.image('background', '{% static 'assets/Background/background.png' %}'); this.load.image('ball', '{% static 'assets/Balls/ball_red_resize.png' %}'); this.load.image('bats', '{% static 'assets/Bats/bat_black_256x256.png' %}'); } function create() { this.physics.startSystem(Phaser.Physics.ARCADE); this.add.sprite(0, 0, 'background'); this.add.sprite(480, 336, 'ball'); bats = this.add.sprite(384, 660, 'bats'); this.physics.enable(bats, Phaser.Physics.ARCADE); //bats.body.bounce.y = 0.2; //bats.body.gravity.y = 300; //bats.body.collideWorldBounds = true; leftKey = this.input.keyboard.addKey(Phaser.Keyboard.LEFT); rightKey = this.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this.input.keyboard.addKeyCapture([Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT]); } function update() { bats.body.velocity.x = 0; if (leftKey.isDown) { bats.body.velocity.x -= 300; } if (rightKey.isDown) { bats.body.velocity.x += 300; } } and in the seconds image I remove the Javascript comment, I got the seconds image, the bats is not in the position that was define, how can I fix it?: bats.body.bounce.y = 0.2; bats.body.gravity.y = 300; bats.body.collideWorldBounds = true;
  24. My game has tiles that can contain units, of which there are several types of different units. My goal is to have one group called 'units' of which all units are a sprite inside of it, with properties about what type of unit it is, and what tile it is currently on. Lets say I want to get all 'tank' unit type from tile 'T1' , would I have to use two different itererate steps? First iterating for the tile location and then iterating for the unit type I want? I cant figure out a way using iterate to search on multiple criteria at once. I am regularly going to be grabbing units from territories and doing things with them, but I was wondering if this was the best way to implement or not. I currently had the unit types separated into separate groups to start with, but that will become cumbersome to the game design if additional unit types are added. Any advice or thoughts ? Thanks
  25. Hey guys, So I've just started refactoring my codebase to Phaser 3 today and I've hit a few bumps. Nothing too bad so far, but one I can't get my head around is how to bring sprites/sprite groups to the front of the display in Phaser 3. In Phaser 2 we had, but I'm struggling to find the equivalent in Phaser 3. Any help appreciated, nice one thanks. Sam