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
    • 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 542 results

  1. I'm working on a game project where I want to be able to switch between two "dimensions" in the same world. I though the easiest way to do this was to have a keyboard event, which toggles sprites' visibility when pressed. This works fine, however, when the visibility is toggled off, and I move the character (and thus, the camera), the sprites seem to be keeping their position relative to the camera, and not the world. Which means that when I toggle the visibility on again, the sprites have moved from their original position relative to the world, but are in the same position relative to the camera. For example, if a sprite is off-camera while invisible and I move the character, the sprite gets pushed off the stage, and can't get back (because it falls down below the ground). How do I stop this from happening? How can I "lock" them in place while visible? I read that the sprites are not being rendered when visible=false, so should I be using some other method of hiding them? Here is my relevant code for the keyboard event: skey =; skey.onDown.add(this.sPressed,this); Here is the method sPressed: sPressed: function(key) { if (baddie.visible) baddie.visible = false; else baddie.visible = true; if (stars.visible) stars.visible = false; else stars.visible = true; } And here is how I make the camera follow the character sprite: = player.body.x-200; I tried changing to camera.follow, and camera.focusOnXY, and that changed nothing. I have tried googling, and can't find anything relevant to my problem.
  2. Put a "sprite" style change is similar to CSS "border-radius" OK?
  3. Hello, I'm trying to add animations to a class which is extending Phaser.Sprite export class PlayerEntity extends Phaser.Sprite { constructor(game: Phaser.Game, x: number, y: number) { super(game, x, y);, y, "player"); // Error this.animations.add("down", [0, 1, 2, 3], 10, true); this.animations.add("left", [8, 9, 10], 11, true); this.animations.add("right", [4, 5, 6, 7], 10, true); this.animations.add("up", [12, 13, 14, 15], 10, true);"down", 4, true);; } } Stacktrace: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null at c.AnimationManager.add (phaser.min.js:19) at new PlayerEntity (:9000/js/entity/playerentity.js:18) at l.CreatePlayer (:9000/js/entity/entityfactory.js:5) at Level01.create (:9000/js/level/level01.js:20) at LevelController.create (:9000/js/level/controller.js:15) at WorldController.create (:9000/js/world/controller.js:27) at c.StateManager.loadComplete (phaser.min.js:10) at c.Loader.finishedLoading (phaser.min.js:20) at c.Loader.processLoadQueue (phaser.min.js:20) at c.Loader.asyncComplete (phaser.min.js:20) So "this.animations.add..." is the problem.; Doesn't have any effect. Thanks for reading and any help is appreciated!
  4. HI everyone, sorry for very noobish question, but I'm new in phaser and objective js I'm making platform game, where I placed enemy like a sprite and programmed his movement. It works, but when I add another enemy, one is not moving, while the other is. I understand this, because sprites are not objects and all of my instructions can conduct only one, the latest sprite. How change the code, group or sth, can someone give me example, that I could add multiple sprites and all of them will be doing the same? Here's the code: //IN CREATE: for (var i = 0; i < 20; i++) { droid = game.add.sprite(game.rnd.integerInRange(0, 128),, 'droid'); } game.physics.enable(droid, Phaser.Physics.ARCADE); droid.body.bounce.y = 0.1; droid.body.setSize(32, 32, 5, 1); droid.animations.add('left', [0, 1, 2], 10, true); droid.animations.add('right', [5, 6], 10, true); droid.body.collideWorldBounds = true; droid.previous_x=droid.body.x; droid.body.velocity.x = 50; //IN UPDATE: if( Math.abs(droid.body.x-droid.previous_x) > 100) enemy_switch_direction(droid); function enemy_switch_direction(enemy) { if ( enemy.body.velocity.x > 0 ) enemy.body.velocity.x=-50; else enemy.body.velocity.x=50; }
  5. Ok so Ill start with a quick example: I start the example with a stationary swing and then proceed to swing while spinning. The station swing is perfect and smooth with zero jittering. The swing while rotating creates a horrible jitter effect. Right now the character is as follows: Base empty sprite holding everything. This only moves x and y. Bodyholder sprite is holding the characters body and is child of the base LeftArmHolder sprite is holding the left arm and is a child of the base RightArmHolder sprite is holding the right arm and is a child of the base I have tried a tweening the arm holders, which works well for static swings, but creates jittering while the character spins and swings. I have tried grabbing the body holders angle and applying the swing angle on top of that (body.angle + requiredSwingAngle). The result is the same as the tween. I have also tried creating an addition arm holder to act the base for both arms and make it a child of the body holder. The result is the same as the tween. Does anyone have any ideas on how to create a nice smooth sprite orbiting animation (backwards and forwards) whilst the parent sprite is rotating?
  6. Hi, I'm creating my first project with Phaser. I have two large background TileSprites that I want to toggle between as the game is played. When the game state calls the create() method it creates the sprites and then sets one visible true and the other false. After a set time, it will swap. The first time this swap is called, there's a bit of lag. Subsequent swaps have no lag. I've experiencing this on my Nexus 5X and Laptop (Core i7 + GTX960M). I'm guessing that because I almost immediately set visible to false, the second sprite isn't being rendered to the GPU. Once it has rendered at least one time, then subsequent calls to toggle the visibility don't lag cause the texture is somehow cached. This is all conjecture on my part, I really don't know how these things work. Is there anyway to cache a sprite/texture to the GPU, so that toggling the visibility won't cause lag? Thanks!
  7. Hi i'm very new to phaser and i have one problem. I'm using a group (called platforms) to put my ground in it. But when i'm creating the ground and i test the game, the ground isn't showing up. var game = new Phaser.Game(1024, 512, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var platforms; function preload() { game.load.image('platform', 'assets/platform.png'); } function create() { /* === GROUPS === */ // PLATFORMS platforms =; // PHYSICS platforms.enableBody = true; /* === GROUND === */ var ground = platforms.create(0, 0, 'platform'); ground.scale.setTo(2, 1); ground.body.immovable = true; } I hope someone has a solution for this. thanks
  8. Hi, I'm currently in the middle of setting up the base of my game with the use of Phaser game engine but I'm having issue with the sprite colliding with the world bounds. I've used Tiling to create the backdrop and the ground etc. But I need help understanding how to define what the sprite should be colliding with. How do I collide with the ground, which is part of the whole tile. Please see the attached 2 images, the sprite falls through the game as expected.,0, 400,300); console.log("in Game screen"); //sprite width - 180px, height 247.5px map = this.add.tilemap('level'); map.addTilesetImage('MyTile', 'tiles'); layer = map.createLayer('Tile Layer 1'); console.log("Json and sprite loaded"); sprite = this.add.sprite(,, 'character'); sprite.anchor.setTo(0.5,0.5); sprite.scale.setTo(0.2, 0.2); console.log("Character Loaded"); this.physics.startSystem(Phaser.Physics.ARCADE); this.physics.enable(sprite, Phaser.Physics.ARCADE); sprite.body.gravity.y = 500; console.log("Physics added to sprite"); The above code is in the create function, I am using state management, as you can see I've added set world bounds, when adding this the sprite dissapears, I've tried numerous different dimension but I've still not come to a solution. Any help would be much appreciated. Thanks
  9. I am having trouble figuring out how to do a scrolling background using multiple background images. These images are not overlayed to create a parallax effect, but rather next to each other to create a changing background scene. My background is created using 20 different images who's order must be dynamically changed as the background scrolls. So I can start with A,B,C showing and as it moves I need to remove A and add D after C...and so forth. I tried using tweens, but it is almost impossible to to place the next image at the correct starting position without gaps forming between the images. I have tried using a tileSprite, but I can only figure out how to add a single texture to the tileSprite. I tried creating a texture dynamically using bitMapData and copying a image sequences to the texture and then scrolling the texture using a tileSprite, but that does not allow me to dynamically change the next image that should appear based on whatever is happening in the game. Also I have read that tileSprites have performance issues on mobile. In another post on this form Rich suggests doing the following: I have tried this by adding my stating ABC images next to each other in a group and then moving the group, but all that happens is that the group moves off the screen after a while. Could someone please explain to me how to implement what Rich suggests above? Or any other method to achieve my desired result?
  10. Is there a method that works even after scaling and changing screen size? I am using the "drawRect" method in but I don't know how to get the bounds of the shape.
  11. I have some sprites that are set to horizontal drag only. What I want to do is, if someone drags vertically up from one of those sprites, when they leave the bounds of that sprite (top edge), spawn a new sprite and be actively dragging that new sprite. The user should not have to release the mouse button, they should just instantly be dragging the new sprite. I can successfully calculate when the pointer is leaving the first sprite, and spawn a new sprite at that location, but I can't seem to transfer the drag control. I tried Pointer.swapTarget, but that doesn't seem to work - the new sprite is spawned, but just sits there and I have to release the mouse button and re-click on the new sprite in order to drag it. How can I make the transfer seamless?
  12. I am experimenting positioning the sprites correctly on the screen when setting anchor to the center of the sprite. However I can not get the expected result. For example, I want to have a group of sprites place on the screen like a tile map. Some sprites are on the edge of the screen and have a graphics object as their texture. While sprites not on the edge are image sprites generated from images. I want the image sprites stay on their tile while have their anchor set to 0.5. Here is my code for the example in this URL (You need to paste my code into the create method to see the result) function create() { // disable these lines, and the other sprite will be blank var sprite = game.add.sprite(0, 0, 'phaser'); // blank sprite will add last used texture var pics =; for (let i = 0; i <= 7; i++) { for (let j = 0; j <= 5; j++) { var b; if (i === 0 || j === 0 || i === 7 || j === 5) { b = new Phaser.Sprite(game) // or game.add.sprite(0,0) var g = new Phaser.Graphics(0,0) g.beginFill(0xFF0000,0.5) g.lineStyle(1, 0xAACCCC); g.drawRect(0,0,100,100) g.endFill() b.addChild(g) b.x = i * 100; b.y = j * 100; } else { b = game.add.sprite(i * 100, j * 100, 'mushroom'); } b.anchor.set(0.5) pics.add(b) } } } When I set all the sprites anchor to 0.5 the image sprites shift to their top left corner. If I only set the edge sprites anchor to 0.5 it looks fine. What is the problem? Does the anchor setting change the texture's position?
  13. Hi. I have a really long graphic for a progress bar and I want to render only a percentage of it. It has to change over time. How can I display chosen part of a Sprite?
  14. var sprites = {};var loader = PIXI.loader.add('cloudstars',"imgs/cloudstars.jpg").load(function (loader, resources){ sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture); }).add('star1',"imgs/star1.png").load(function (loader, resources){ sprites.star1 = new PIXI.TilingSprite(resources.star1.texture); }).add('star2',"imgs/star2.png").load(function (loader, resources){ sprites.star2 = new PIXI.TilingSprite(resources.star2.texture); }).add('star3',"imgs/star3.png").load(function (loader, resources){ sprites.star3 = new PIXI.TilingSprite(resources.star3.texture); }).add('star4',"imgs/star4.png").load(function (loader, resources){ sprites.star4 = new PIXI.TilingSprite(resources.star4.texture); }).add('ship',"imgs/ship_blue.png").load(function (loader, resources){ sprites.ship = new PIXI.Sprite(resources.ship.texture); }).add('shield_straight',"imgs/shield_straight.png").load(function (loader, resources){ sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture); }).add('shield_edge',"imgs/shield_edge.png").load(function (loader, resources){ sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture); }).add('title_ship',"imgs/title_ship.png").load(function (loader, resources){ sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture); }).once('complete',function(){ var ready = setTimeout(accountSetup,3000); }).load() This seams to work but I figure it's not the correct way to do this as I kinda guessed my way through some of it. Will this cause a problem if I use this method to load all of my sprites into a standard javascript array for use later on? Talking about maybe 100 sprites including some tiling sprites for backgrounds. Also do I really need to use the "loader" in "function(loader, resources)" part? I don't seem to use it inside the function.
  15. In the phaser docs I can see that the biggest difference between Sprite and Image is that you cannot animate or add a physics body to an Image, but in Image properties you can see an animationManager. I'm a little confused about this. Anyone?
  16. Hi there! So here's my issue. I have a player sprite which has an orb sprite attached to it as a child. Player = function (game, x, y, image) {, game, x, y, image); //calls constructor this.orb = this.addChild(game.make.sprite(0, 0, 'orb')); game.add.existing(this); }; /*--------------------------------------------------------*/ Player.prototype = Object.create(Phaser.Sprite.prototype); Player.prototype.constructor = Player; /*--------------------------------------------------------*/ I want to reference the x and y positions of the orb so that I can shoot bullets out of it. BUT, if I console.log(this.orb.x) or the y position, the value that is returned is 0. What do I do so that I can get the x and y positions of the orb, relative to the game world and not the parent sprite??
  17. Hi I am trying to write a tiny program so that my sprite can move to my mouse position on the broswer (viewport content area). However, the method I am using is not accurate, the sprite always goes a few pixels away of my mouse position. I wonder if there is a better way to do this. Currently my code is like this: const stage = new Container(); stage.interactive = true; stage.hitArea = new Rectangle(0, 0, 600, 600); stage.mousemove = moveHandler; const c = document.createElement('canvas'); // build a canvas element const sprite = Sprite.from(c); function movehandler(event) { const x =; const y =; sprite.rotation = Math.atan2(y - sprite.y, x - sprite.x); } function play() { sprite.x += 2 * Math.cos(sprite.rotation); sprite.y += 2 * Math.sin(sprite.rotation); } function animate() { requestAnimationFrame(animate); play(); renderer.render(stage); } animate(); The sprite moves when my mouse moves but it doesn't go to the same direction. It always goes slightly away from my mouse position, maybe 3-4 pixels. I have also tried to update the sprite's rotation every tick but the problem still exists. When I am not using PIXI.js I don't get this kind of problem. What is the correct way to make my sprite move to the right direction of my mouse in PIXI.js v4?
  18. Hi, I want to show 2 sprites. Why one sprite disapears if I set renderingGroupId = 1 ? Here is my demo: comment line 29 to see what i mean. I want one sprite always visible and one behinde the wall with normal behavior. With my old Babylon.js version 2.5 all works. So its a bug?
  19. Hi there, I want to extend Phaser.Weapon so I can create my own custom weapons. I know that you extend groups by using Weapon.SingleBullet = function (game) {, game,, 'Single Bullet', false, true, Phaser.Physics.ARCADE); return this; }; Weapon.SingleBullet.prototype = Object.create(Phaser.Group.prototype); Weapon.SingleBullet.prototype.constructor = Weapon.SingleBullet; But what about the weapons group? Are there any examples out there for this? EDIT: I used Weapon.SingleBullet.prototype = Object.create(Phaser.Weapon.prototype); and it seems to work. However, when I try to fire my bullet I get the following error Cannot read property 'getFirstExists' of null at (phaser.js:101053)
  20. So I'm currently following @rich 's Shoot-em-up tutorial from over here Please have a look at the source code if you haven't already. From what I understand he create's a weapon array that holds all the weapon types (each of which are an object inside a Weapon object). Now my question is How do I access the current weapon bullets in game.physics.arcade.collide? I've used game.physics.arcade.collide(this.weapon[this.currentWeapon], this.enemies) and this works fine, the bullets and the enemy collide well. BUT what if I want to kill that bullet? How would I pass the specific bullet that collided with the enemy into a function? This is what I've tried: game.physics.arcade.collide(this.weapon[this.currentWeapon], this.enemies, function(bullet, enemy) { bullet.kill(); }, null, this); However the above code doesn't work. Bullet is undefined. What do I do?
  21. Hello, I would like to create one of the most simple game but I encounter an issue : My snake will be composed of several parts, one for the head, one for the tail and one for the body. Then, when my snake will ate an item, his size will growth by the addition a body's part. But I don't know how to create my snake (I have the sprite with the different directions). Should I merge the head's sprite with the body's sprite and with the tail's sprite and redefine the final sprite every time the snake grows or I can use group or another method ? Thanks for you help PS : I apologize for my English mistakes, English is not my native language ^^
  22. Hi guys may I ask a quick question? I'm working with Phaser and I'm using the module pattern, creating a module that has a prototype of Object.create(Phaser.Sprite.prototype) and creating an instance of that in the main module. The problem is the sprite seems to be created in the main module in the create function but the image of the sprite is not loading and i cant find the problem or set the image. Thanks so much!!
  23. Hi all ! As the title said, I have a sprite sheet who has a strange behaviour. It's difficult to explain so you can see the uploaded file to see. I add my sprite sheet like this inside the preload() : level2.load.spritesheet('hil', 'dest/img/sprite-Level2.png', 373, 265, 8); In the create() : player = level2.add.sprite(380, level2.height - 430, 'hil', 1); player.frame = 0; player.enableBody = true; player.scale.setTo(0.5); player.animations.add('left', [0,1,2,3,4,5,6,7,8], 5, true); And in the update() : if (cursors.left.isDown) { player.body.velocity.x = -800;'left'); } I searched a lot but I didn't find anything to help me. I can't understand why it doesn't work. If somebody knowes, it could be very helpfull. Thanks by advance.
  24. I'm having problems transferring sprite from another sprite to stage and then back to another sprite. The scenario is I have two rotating sprites (wheels) and another sprite (player). Initially, the player is added to wheelA as a child. Upon pressing fire, the player is removed from wheelA and its velocity is changed so that it moves away from wheelA. (Player is removed from wheelA so that it ignores wheelA's rotation). The player is also added to the game via game.add.existing(player); (Since it doesn't render after removing from wheelA). On update, I check if player overlaps with wheelB. On overlap, I disable the physics of the player and add it as child of wheelB. The result is player is not rendered on the scene although it is a child of wheelB.
  25. I am trying to leave the game on even if the game is out of focus with stage.disableVisibilityChange = true; However it seems to not work and I wonder if it is because my sprites aren't on the stage. I have followed tutorials that tell to add sprites into the game with game.add.sprite(x,y, 'name');. However it seems there is another way, something like stage.addChild(); if I am correct. What is the difference between these two. Should I use the second one and why? Is it the reason it is not working or something else. Currently I initialize the game and stage like this: game = new Phaser.Game(1000,600, Phaser.AUTO, 'gameCanvas', {preload: preload, create: create, update: update}, false, false); game.stage = new Phaser.Stage(game); game.stage.disableVisibilityChange = true;