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

Found 648 results

  1. 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(); } }
  2. 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;
  3. 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.
  4. 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
  5. 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
  6. 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
  7. How to set sprite height/width

    I am having some basic syntax confusion... i have declared a sprite... var taxi = this.add.sprite(100, 100, 'taxi').setOrigin(0, 0); and now would like to resize it I have tried various combos (including ideas from phaser2 i found), what am I doing wrong? taxi.width = 25; taxi.setWidth = 25; taxi.setSize = (25,25); Any help for noob here?
  8. 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); }
  9. BitmapData and sprite with children

    Hello, please help. Can I put sprites with children in the bitmapdata? I'll attach the picture, is this possible and how? Thank you.
  10. Hello, i have this code that should create in the create function if one of the sprites of the "asteroids" group is overlapping the station (so the player doesnt get instant killed when he spawn). It is working in the Asteroid.prototype.update function but to optimize the game i would like to check it in the create function. this.asteroids.forEach(function (item) { if (Phaser.Rectangle.intersects(this.station.getBounds(), item.getBounds())) { item.destroy(); } }, this); It isnt working as exepted, could soweone help me ?
  11. I'm using the Phaser Editor and I created a prefab for my player sprite, but no matter what I do I can't get it to appear in the assets window or in the options to add prefabs to my scene files. I created the Prefab by using File -> New -> Sprite Prefab. I've tried adding the associated script file to the pack.json file, I've tried loading the script in index.html, I've tried shutting down and restarting the editor but I just cant use the prefab. The prefab shows up where it's supposed to in my folder structure, and I can edit the canvas file normally. I just can't add the prefab to any of my Scenes.
  12. 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?
  13. Hi. I made a game using an other engine and would like to port the game over to Phaser but it is using individual images for all sprite animations. I was wondering if is there any way to create a sprite animation from individual images inside Phaser? I was searching the web and everyone seems to offer to pack all images on to a single texture then use an atlas in phaser. It could be the best way to do it, but I'm really would like to know if it possible to create sprite animation inside Phaser without using any 3rd party tools? To give an explanation, I would like to attempt to import the game levels from the JSON exported directly from the tool I was using, so this way I need to remake the game logic only and don't need to worry about building all the levels and menus again. I could just write the import code once, then import all my levels directly from the JSON and I don't need to start completely from scratch. Even if I would be using an atlas, I need to work on this importer to get the position, scale, animation frame and other details of everything in the level so getting the images too and make sprite animations from them could be faster to get the levels up and running in Phaser. Thank you.
  14. Hi. I'm new to phaser and to this forum. I have a problem that I would like to ask for some help with. I'm trying to import a level from a JSON file exported from a 3rd party level editor that is not meant to be used with Phaser or any other 3rd party engine. It is just me trying to use the JSON coming from the editor to load the level in Phaser and I have some problem with rotation and scale of the sprites. The level editor rotate the sprites around a center point and scale the sprites from the origin point. In Phaser, I set the position of the anchor point to match the position of the origin point and set the position of the pivot point to match the position of the center point for each sprite and it works for getting the position and the rotation of the sprites but when I scale a sprite in the editor, it does not appear right in Phaser. This is how it looks like in the editor: And this is how it looks like in Phaser after import: Notice the distance between the two sprites. It does not match and I think it is because in the editor the sprite is scaled from the top left corner of the sprite (origin/anchor point) while in phaser it is scaled from the center of the sprite (pivot point). At least If I don't change the position of the pivot point, the scale and position works but then rotation is off because in the editor the sprite is rotated around the center point which is in the middle by default. In any case I can't find a solution to this. I can't get the scale match without messing up the rotation or the rotation without messing up the scale because of the two points. When I check the values, everything seems to match. Position, rotation, scale but it still does not look the same in Phaser. I hope someone did have the same problem with rotating and scaling sprites in Phaser and already figured a solution. What I would like to know specifically, is there any way to rotate a sprite around a middle point without changing the position of the anchor and pivot point or is there any way to scale a sprite from the anchor point instead of the pivot point? Because the problem seems to be in Phaser the sprites are scaled and rotated around the pivot point but in this case I need to scale it and rotate it in two separated points to get the same result as in the level editor. I would appreciate any help. Thank you.
  15. I've been battling this problem for the past 24h and figured it was worth asking for help. I've got a class called Character that extends Phaser.Sprite and is used in a few States (Character Select->Play) for my game. When I instantiate new Characters in the Select class or Play class, they work great as expected. However, when I load the Select state and select a character (which calls the 'Play' state), the Character class errors upon instantiating a new character in the new state with the following message: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null at Phaser.AnimationManager.add (phaser-split.js?2ffb:49401) at Character.loadData (character.js?9c96:59) If I call the 'Play' state directly, the character loads properly and doesn't give any errors. So it only seems to be happening when going from one state to another, which is puzzling me. I've tried every route of debugging possible and the only solution I can find seems to be not loading the data dynamically from my server. Currently, the animation data in my Character class gets loaded via which is called in the constructor: window.socket.on(`data:load:${name}`, (data) => { // Listen to data updates for this character this.loadData(data) }) window.socket.emit('data:request', name) // Request new data from the server The loadData function then loops through the data and adds the animation frames: loadData(data) { // Grab data from server for this character from its definition file for(let anim in data.anims) { this.animations.add(anim, data.anims[anim].frames, data.anims[anim].speed) } } The error above occurs on the first animation I want to add. If I look at the this.animations object, it doesn't have a 'sprite' set and most values are null. Any help would be appreciated. I've stripped out most of my code at this point and am now just stuck. I've searched a bunch (here/google/stackoverflow) and the only solutions to people running into similar problems seem to be to make sure you're passing into your sprite, which I'm doing Actual code (Github) Play (state): Character (sprite):
  16. Tiled/Sprite collision

    Hi, I want to ask how to collide sprite with a tile in layer on map created in tiled. So far I have this, but it doesnt work /* global demo, game, Phaser */ demo.stateMaze = function(){}; var ball; var playerSpeed = 3; var map; demo.stateMaze.prototype = { preload: function() { game.load.tilemap('map-maze', 'assets/maps/hole_in_a_park/maze/mapa.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tileset-maze', 'assets/maps/hole_in_a_park/maze/tileset.jpg'); game.load.image('ball','assets/imgs/gula.png'); }, create: function() { game.stage.backgroundColor = '#FFFFFF'; //Starting physics game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('map-maze'); map.addTilesetImage('tileset','tileset-maze'); //CallBACK map.setTileIndexCallback(15, this.collisionHandler(), this); normal = map.createLayer('normal'); normal.resizeWorld(); wall = map.createLayer("wall"); wall.resizeWorld(); normal.renderSettings.enableScrollDelta = true; wall.renderSettings.enableScrollDelta = true; ball = game.add.sprite(0, 80, 'ball'); ball.anchor.setTo(0.5, 0.5); //Enabling ball physics game.physics.enable(ball); game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; game.input.onDown.add(function(){ if (game.scale.isFullScreen) { game.scale.stopFullScreen(); } else { game.scale.startFullScreen(false); } }); }, update: function() { //Collide game.physics.arcade.collide(ball, wall); if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { ball.scale.setTo(1, 1); ball.x += playerSpeed; } if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { ball.scale.setTo(-1, 1); ball.x -= playerSpeed; } if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) { ball.y -= playerSpeed; } if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { ball.y += playerSpeed; } }, collisionHandler: function() { console.log("COLLISION!!!"); } }; But it never write COLLISION!!! so can anyone tell me what to do ?
  17. '' gives 0 at first

    So my problem is that I have a sprite that is giving me 0 for and (although it clearly isn't at 0,0). What's weird is that printing out the gives 0 at first but adding a delay of 50ms it gives me the correct position (in case you're wondering nothing is happening during the delay) Below is the code snippet that i am using (just to be 100% sure). Basically I have a group (located at a certain position) with a specific rotation that has a sprite (the one I'm having issues with) at a certain location. The first printed out value is 300 (which obviously isn't true). I added a delay of 50 ms after the last line then printed out and got the correct value (813). The provided code snippet is the last thing I have in my create function (and the update function is empty). As stated previously nothing is happening by the time the delay starts till it ends (I am only left with the preload function).
  18. '' gives 0 at first

    So my problem is that I have a sprite that is giving me 0 for and (although it clearly isn't at 0,0). What's weird is that printing out the gives 0 at first but adding a delay of 50ms it gives me the correct position (in case you're wondering nothing is happening during the delay) Below is the code snippet that i am using (just to be 100% sure). Basically I have a group (located at a certain position) with a specific rotation that has a sprite (the one I'm having issues with) at a certain location. The first printed out value is 300 (which obviously isn't true). I added a delay of 50 ms after the last line then printed out and got the correct value (813). The provided code snippet is the last thing I have in my create function (and the update function is empty). As stated previously nothing is happening by the time the delay starts till it ends (I am only left with the preload function). Note: I accidentally posted my question twice please ignore the duplicate. ( I couldn't find a delete button for my duplicate post)
  19. I want to add custom property to my sprite object but when I try to get id property it returns "undefined". Is there a Phaser library bug or am I doing something wrong? My update function; function update() { //When I debug below line I can see property game.physics.arcade.overlap(enemyTank.tank, mytank.tank, enemyTankHitPlayer, null, this); } Callback function; function enemyTankHitPlayer(myTankSprite, enemyTankSprite) { // is undefined! }
  20. I am using the last official release 2.6.2. Given the following code, which can be found on the following jsbin:,output var MainState={ create: function(){ var circleGraphic = new Phaser.Graphics(); circleGraphic.beginFill(0xFFBBBB); circleGraphic.drawCircle(0, 0, 100); circleGraphic.endFill(); circleSprite =, 0, circleGraphic.generateTexture()); //circleSprite.anchor.setTo(0.5); // (Try barSprite anchor below first.) Ugh, this doesn't fix it... var barGraphic = new Phaser.Graphics(); barGraphic.beginFill(0x88FF88); barGraphic.lineTo(250, 0); barGraphic.lineTo(250, 10); barGraphic.lineTo(0, 10); barGraphic.lineTo(0, 0); barGraphic.endFill(); var barSprite =,, barGraphic.generateTexture()); barSprite.addChild(circleSprite); //barSprite.anchor.setTo(0.5); // Why doesn't the child adjust to the anchor with the parent? } }; var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'phaser-example', MainState); As long as the two lines remain commented out, what is rendered makes perfect sense: 1. A circleSprite is created and registered to position 0,0 of the parent sprite that it is later attached to. 2. A barSprite is created and its top left is added to the center of the world. 3. The circleSprite is added as a child to barSprite, and consequently, the top left of that child sprite is found at 0,0 of the parent sprite. As a result, you can see a sort of sideways "b" graphically depicted. Now, my (reasonable?) assumption is that the parent barSprite can be treated like any ordinary sprite as a composite whole. Anything I do to the parent sprite should automatically cause cascaded adjustments to the children so that the parent sprite would behave as it would if it were just an individual sprite on its own without any children behavior artifacts. However, if you notice, uncomment the line that sets the barSprite anchor, and the child does not follow. The child remains in place as if the anchor to the parent is not applied. To make matters worse, I have no easy recourse. I cannot recover the intended sideways "b" by uncommenting the circleSprite anchor. Is this a bug with anchor? Or is this intended behavior for some reason? What are my best options? (I am also curious if this behavior will exist in v3.) Also, please make me aware if you happen to see a violation of good/best practices!
  21. Is there a way to create sprite from multiple files ? Like creating a sprite : Knight in 'knight.js' and creating his movement in 'movement.js' is this possible : // knight.js import Phaser from 'phaser' import Movement from './movement' export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) } movement(){ // Here Ill call Movement } } // movement.js import Phaser from 'phaser' export default class extends Phaser.Sprite { // Here ill make a function that will move the sprite // and start the animation }
  22. Hi there, I want to implement a car which can be dragged and is able to turn around corners while being draged so far I only found a posibility to turn in direction of the pointer (eg mouse) but than the car turns before it is even (pixelperfect)clicked too any sugguesstions or helpfull links? thanks:)
  23. Hi, my sprite is pointing to the top. But the angle = 0 means the it points to the right. So if i start moving, e.g. with velocityFromAngle the movement direction is default to the right, while the sprite is facing to the top. If i try to turn the sprit 90 degrees to the right, the angle for the movement also changes (the movement direction is then down). so the movement direction and the pointing direction of my sprite are never the same. one way would be to change the sprite image. but i want to be flexible to move it in all 4 directions (90 degrees steps), depending on its random start postion. this has to be possible somehow. please help me in other words now: sprite is ^ and movement direction is > if i change the angle then sprite is > but movement direction is v what i want is the this: Sprite > and movement direction > or Sprite ^ and movement direction ^ or Sprite < and movement direction < or Sprite v and movement direction v best regards Oliver
  24. Hello All, I posted about this a while back and it's now finished and released! CryPixels Procedural Pixel Art Generator Has a demo version available on Windows and Mac. The software is 100% written in HTML5/JavaScript and packaged using nw.js. Full details of the software can be found here: Feel free to request additional features, product is in active development. Regards, TomC.
  25. 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?