Search the Community

Showing results for tags 'sprites'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 196 results

  1. Hello, I've used both individual sprites and a group (from a set of arrays). Either way once I enable Arcade physics the sprites dissapear. full code is here : I've used same method elsewhere without issues, so I'm completely stumped. Any help appreciated. ////////////////////////place players//////players_group =;if (typeof players_list != 'undefined') {for (var index = 0; index < players_list.length; index++) {var key = players_list[index].id//add_players[index] = game.add.sprite(players_list[index].posx, players_list[index].posy, key);players_group.create(players_list[index].posx, players_list[index].posy, key);}game.physics.enable( players_group, Phaser.Physics.ARCADE);}
  2. karoliux

    two spritesheets

    so I'm making a game where there is 1 player but i have 2 different sprite sheets primarily because they are different sizes. i got the first sprite for movement animation and everything works perfectly fine for left and right cursors. i want the second sprite sheet animation to be played on the click of a spacebar. how would i do it?
  3. I am in the process of bolting PixiJS onto an existing JS game engine. Currently the engine uses object pooling comprehensively for all components and game entities, and I was planning on having the engine's Sprite component contain a PIXI.js sprite that is used during rendering. My main question is this: What is the proper way to go about "re-initializing" A PixiJS sprite if I were to pool them? Are theres some general pooling strategies that I should use (e.g, only re-use Sprite objects if the Texture is going to be the same, make sure to reset some underlying cached state... etc). I know I'll have to (re)set the position, rotation, etc properties, but was wondering if there are some larger caveats I need to be aware of. I am only using the WebGL renderer and not making any use of interactivity, if it matters.
  4. Hey, First of all I would like to thank you all for the great support in learning about this great framework I have another question: Is it possible to check for an overlap in an if statement? Currently I have this in my update function: game.physics.arcade.overlap(player, enemyGroup, this.collisionHandler, null, this);and this in my collisionHandler: if(game.physics.arcade.overlap(player, enemyGroup.children[0])) { this.vow1();}But as expected, it's not working... Is it even possible? And if yes, how? Thanks in advance!
  5. Hi, so I'm working on a game and I'm wondering if there's an easy way to code the following. I have an animal sprite, with body, collision, gravity, animations etc all implemented and working like I want. But now I want to add a tail sprite to the animal. animal.addChild(tail) works like I want only it puts the tail in front and I can't seem to change that. So I'm wondering if there's a simple way like to do the same thing only put it behind the first sprite. I know you can do stuff with groups, maybe I have to here, but then I have to change how everything interacts with the animal don't I? P.S. it's a cat. Cheers
  6. I use tiled map editor to create maps json my game. I've done that the map is loaded and all good. Now, I've made ​​my character shoot. And I want those shots collide with the wall (and call a function to delete the shot with an animation). I can not do that from phaser to detect specific tile (tiles hard block) to treat this as a sprite tile. And put in the update () function to the group of bullets that hit my character collides with these tiles (sprites). Help please
  7. Hey, Real simple case: draggable popup window with text. var popup =[0], coordinates[1], this.popupSprite);popup.anchor.x = 0.5;popup.anchor.y = 0.5;var t =, popup.y-50, msg, this.msgStyle); popup.addChild(t);popup.inputEnabled = true;popup.input.enableDrag(false);Problem: After calling addChild, it ends up rendering the text way off to a seemingly random coordinate, sometimes even off the screen. The text does move with the popup window however. I played around with Groups to handle this, but the problem is that the text does not move with the popup window, even though they are in a group. Any suggestions on how to handle this?
  8. In short, I want to get all the sprites at a given point. Currently, I'm getting the bounds of my sprites and testing if that Rect contains that point. I'm browsing through the code to see if there is a method on "Group" or something that I might be missing that already does this. Any ideas? If not, I can probably figure out a good place for it and do a pull request.
  9. Hello all and the main guy "rich" thank you for this wonderful framework...its been smooth sailing until I hit this terrible bump and I am beyond irate and even more I have a big project due in about 3 days... I have spent the last 2 days off and on trying to figure out why in all the world I cant get a button with texture atlas or spritesheet to work and I am at my wits end...Please help!!! What I am trying to accomplish: I am creating a turn based game project, which has a lot of buttons, which change depending on button which clicked, overstate,outstate, downstate... why is there no specific doc on this it is very confusing... By the way I have looked through all the examples on : and throughout the forum to no avail The problem when I reference the atlas key and the "framenames" in the button instance like: this.allbutton = this.add.button(680, 700, 'MainGameSprite', this.buttonCallback, this, 'AllinButton_Pressed', 'AllinButton', 'AllinButton_Pressed');the whole texture/spritesheets gets output to the screen, instead of the first frame? are the json and jsonhash files i tried from leshy and texture packer..Maybe its the json? I have used Leshy texture packer leshy output :!nwF3xKRC!h9aQIOUL3iwi6lGVHE1rrOCiF_uNBvJksPOlmlbn2vc texture packer output :!zwN0WQ4D!4r1urUSNMR_h8R5PzojyHdvRm6vtU9pcf-_Tb9Zl1yM sample json texture packer: {"frames": {"AllinButton.png":{"frame": {"x":764,"y":63,"w":164,"h":58},"rotated": false,"trimmed": false,"spriteSourceSize": {"x":0,"y":0,"w":164,"h":58},"sourceSize": {"w":164,"h":58},"pivot": {"x":0.5,"y":0.5}},"AllinButton_Pressed.png":{"frame": {"x":930,"y":63,"w":164,"h":58},"rotated": false,"trimmed": false,"spriteSourceSize": {"x":0,"y":0,"w":164,"h":58},"sourceSize": {"w":164,"h":58},"pivot": {"x":0.5,"y":0.5}}, here is some snippet of code from me to assure you that I have (or tried at least) to do everything right : ///index.htmlBasic stateswindow.onload = function(){ //inject game object into container div var game = new Phaser.Game(1386, 786, Phaser.CANVAS, 'gameArea'); //add states to game object game.state.add('Boot', xGame.Boot); game.state.add('Preloader', xGame.Preloader); game.state.add('Lobby', xGame.Lobby); game.state.add('Game', xGame.Game); //start boot sequence game.state.start('Boot'); ///preloadxGame.Preloader = function (game){this.background = null;this.preloadBar = null;//this.ready = false;};xGame.Preloader.prototype = {preload: function (){ this.load.atlasJSONHash('MainGameSprite', 'img/Slices/TextureAtlas/testpng.png','img/Slices/TextureAtlas/testjson.json');//tried both atlas and atlasJSONHash for leshy and texture packer and spritesheet this.load.atlas('MainGameSprite', 'img/Slices/TextureAtlas/testpng.png','img/Slices/TextureAtlas/testjson.json');this.load.spritesheet('cardsActions', 'img/Slices/sprites/CardActions.png', 329, 353); }} ///gamexGame.Game = function (game) {};xGame.Game.prototype = {create: function () { // this is from me trying everything including pulling out hair...... //tried //this.gameSprite = this.add.sprite(100, 200, 'cardsActions'); //this.gameSprite.frameName = 'AllinButton'; // The numbers given in parameters are the indexes of the frames, in this order: over, out, down //tried the atlas thing this.allbutton = this.add.button(680, 700, 'MainGameSprite', this.buttonCallback, this, 'AllinButton_Pressed', 'AllinButton', 'AllinButton_Pressed'); ////tried the spritesheet frame thing, but didn't make sense since I had multiple spritesheets of varying component texture sizes this.allbutton = this.add.button(550, 500, 'cardsActions', this.actionOnClick, this, 1, 0, 2); // setting the anchor to the center this.allbutton.anchor.setTo(0.5, 0.5);}}in both cases and other test this has been my output: or in the case of the texture atlas it sprints the whole spritesheet!!? for example this example menu shows close to an in game activity : but even the documentation on this is poor eg: function preload() { // We load a TexturePacker JSON file and image and show you how to make several unique sprites from the same file game.load.atlas('atlas', 'assets/pics/texturepacker_test.png', 'assets/pics/texturepacker_test.json');}function create() { game.stage.backgroundColor = '#404040'; chick = game.add.sprite(64, 64, 'atlas'); // You can set the frame based on the frame name (which TexturePacker usually sets to be the filename of the image itself) chick.frameName = 'budbrain_chick.png'; This works in the example but makes no sense.... i have looked into almost every example out there including : phaser/ressources/basic referenced here from browsing this topic..So I took every precaution and advice about formats for texture atlas I removed "check rotation"as specified in this topic: Please solution needed Ideally I would like to use a texture atlas to fit this as opposed to several different spritesheets which become very obfuscated in terms of frames? what if you have multiple spriteshteets, what becomes of the frame numbers in different button instances? ie: //in loadthis.load.spritesheet('Actions', 'img/Slices/sprites/CardActions.png', 329, 353);this.load.spritesheet('setofanotheraction', 'img/Slices/sprites/CardActions.png', 329, 353);//in createbutton 1 = this.add.button(550, 500, 'Actions', this.actionOnClick, this, 1, 0, 2);button 2 = this.add.button(550, 500, 'setofanotheraction', this.actionOnClick, this, ?,?,? wtf???);So please if you can help solve the texture atlas issue, it will be much appreciated...I have no more hair left to pull, I will be watching this thread eagerly...thanks to the hero in advance.
  10. Hi, I am a programmer with little skills with the pencils, but i'm very not an animator. The game kingdom rush inspire me a lot. I want to create a game with some characters like Kingdom rush, small but cool and the movement are fluids. Can anyone help me? Thank you!
  11. I'm trying to create a bitmapdata with a single frame from a spritesheet and I'm getting nothing I'm using this, bmd = game.add.bitmapData(800, 800); bmd.add(new Phaser.Sprite(game, 50, 50, 'blocks', 3)); sprite = game.add.sprite(0,0,bmd);but its showing nothing. Am doing something wrong? I tried copypixels aswell and still got nothing, I tried adding the sprite in advance, nothing. (I'm useing phaser 2.0.6) Thanks for the help in advance.
  12. Hey. So bascially, I was wondering if there is a way to create a camara object that is tied to only a certain part of the game screen. Then controll dat part of the screen. Like a rectangle. I know there is a way to do this but ... I want to add texts and sprites in that rectangle that can be browsed around using the camara. Bascially, I want to emulate a kind of scrolling through items in the game's UI. The type of scrolling you do on mobile. I want to show a bunch of texts vertically but its a lot so it goes off the game's height therefore i wanted to do a kind of scrolling for it to still contain it within the game screen. Is this possible? If so, any help please?
  13. Hi All - I have two Sprites, a player and a shape. When the player is overlapping the shape, I want it to accerate the player sprite object (like a conveyor belt).. I'm having some issues getting this to work with the following code: var Player = function(game, x, y, frame) {, game, x, y, 'playerMovements', 0);; this.body.collideWorldBounds = true this.anchor.setTo(0.5, 0.5);}; var Belt = function(game, player, x, y) { var beltBMD = game.add.bitmapData(50, 400); beltBMD.ctx.fillStyle = 'red'; beltBMD.ctx.fillRect(0, 0, 50, 400);, game, x, y, beltBMD);; // Code that isn't working as intended, player, this.applyEffect, null, this);, this.destroy, this);; player.bringToTop()}; Belt.prototype.applyEffect = function(drop, player) { console.log(drop.body.overlapX); // 0 console.log(drop.body.overlapY); // 0 console.log(player.body.overlapX); // 0 console.log(player.body.overlapY); // 0 player.body.velocity.y += 400;}; The issue is that my applyEffect callback gets triggered, but there isn't an overlap property set on either of the two objects so I can't accelerate until the overlap properties are back to 0 because they never seem to be set in the first place. If the callback gets triggered, shouldn't an overlap be set? Open to other suggestions about how to do this, I went with the bitmap data approach because I need to be able to draw shapes w/ physics bodies which the Graphics class doesn't support. Thanks!
  14. I'm trying to convert my spritesheet animations into 1 bigger texture atlas. I want to avoid calling load Texture every click (swinging weapon). The problem is I can't find the way to provide frameData for my animation. I load 3 images to texture atlas and then I have 3 frames after export. How I can tell that there are 4 frames in 1 texture atlas sprite? I used to write like this: this.loadTexture(toolName + side, 0);Any ideas?
  15. Hi, New to Phaser, but I can't seem to get some basic functionality working. Using Arcade physics, when my sprites hop on top of each other they compress and sometimes fall through the floor. Like so: I've feel like I've tried everything but I wouldn't be surprised if I missed something obvious. Here's what I hope is the relevant code. Please forgive its poor quality. I've also attached the whole file if that helps. Thanks! function create() { // A simple background for our game game.add.sprite(0, 0, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms =; // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0,, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; ground.body.allowGravity = false; // The player and its settings player = game.add.sprite(150, - 150, 'dude'); player2 = game.add.sprite(300, - 150, 'dude'); player3 = game.add.sprite(450, - 150, 'dude'); player4 = game.add.sprite(600, - 150, 'dude'); players =; players.add(player); players.add(player2); players.add(player3); players.add(player4); // We need to enable physics on the player game.physics.arcade.enable(players, Phaser.Physics.ARCADE); game.physics.arcade.OVERLAP_BIAS = 30; game.physics.arcade.TILE_BIAS = 1000; game.physics.arcade.gravity.y = 2600; players.callAll('body.collideWorldBounds', 'body', true); player.body.bounce.x = 0; player.body.bounce.y = 0; player.body.allowRotation = false; player2.body.bounce.x =0; player2.body.bounce.y =0; player2.body.allowRotation = false; player3.body.bounce.x =0; player3.body.bounce.y =0; player3.body.allowRotation = false; player4.body.bounce.x =0; player4.body.bounce.y =0; player4.body.allowRotation = false; // Our two animations, walking left and right. players.callAll('animations.add', 'animations', 'left', [0, 1, 2, 3], 10, true); players.callAll('animations.add', 'animations', 'right', [5, 6, 7, 8], 10, true); // The score scoreText = game.add.text(200, 300, '', { fontSize: '68px', fill: '#000' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); // Finally some stars to collect stars =; // We will enable physics for any star that is created in this group stars.enableBody = true;}function update() { // Collide the player and the stars with the platforms game.physics.arcade.collide(platforms, players); game.physics.arcade.collide(players, players); game.physics.arcade.collide(stars, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function game.physics.arcade.overlap(players, stars, collectStar, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; player2.body.velocity.x = 0; player3.body.velocity.x = 0; player4.body.velocity.x = 0; player.body.angle = 0; player2.body.angle = 0; player3.body.angle = 0; player4.body.angle = 0; }index.html
  16. Hey folks, my name is Remus and i specialize in creating pre-rendered sprites for video games.For those not familiar with pre-rendered graphics, they are basically 2d images of custom-made 3d models. I am here offering my services to anyone interested in these sort of graphics, here are some samples of my work : Notes and TermsI don't work for free or royalties/shares.Allow a minimum of one week for each commission, excluding weekends.Prices vary to accommodate the complexity of the model.I don't do trademarked characters (Zelda, Pokemon, Mario, Megaman..etc).I don't charge for the number of directions needed, can be anything from 1 to 360​. Contact PM me here, or e-mail me at valarinPath(at) For more samples check my Portfolio -- Remus
  17. how to know the distance of the Drag, unused PositionUP or onInputUp to differentiate a drag from a long click
  18. Hello, What I'm trying to achieve and I am sure that it can be done is the following: I have two sprite-sheets one with the entity animation and one with some explosion. Can I combine these two (not in the same image but programmatically) so that the explosion plays when the entity is killed? I thought to add them to the same group and simply animate the "explosion instance" of that group in which the entity dies, but I wanted to ask if there is a more "refined" way to do this. Also how can I sequence these animations (entity killed and then explosion plays)? Thanks for your time!
  19. Hi. I need to implement some dragging in my game. The code below works fine on Desktop and Mobile but when I turn on chrome dev tools on desktop (for testing on mobile) the drag functionality doesn't work, except for the sprite jumping around. Its convenient to be able to test in chrome dev tools, so if anyone has a clue as to why it doesn't work please let me know. Thanks! // Create paddlepaddle = game.add.sprite(, - 100, 'sprites', 'platform.png');paddle.anchor.setTo(0.5, 0.5); paddle.inputEnabled = true;paddle.input.enableDrag(false);paddle.input.allowVerticalDrag = false;
  20. there will be 2 sprites (they're just squares) and some text that constantly need to change colours. so would it be better to change the tint or use a spritesheet with the different coloured sprites?
  21. I have fixed a bug. This is how to repro it: At startup: this.sprite.loadTexture("walk.png"); // Sprite sheet 3x4 frames Some time later: this.sprite.loadTexture("dead.png"); // Single frame My game sets this.sprite.frame each update. If the object is 'dead', the frame number is 0. The BUG is: the old frameData in this.sprite.animations resets the texure to walk.png's first frame. I SOLVED this by executing this.animations.loadFrameData(null); in the "cache.isSpritesheet == false" part of Phaser.Sprite.prototype.loadTexture
  22. I'm a first time user of Phaser, been trying to make a simple point and click type game. I'm trying to keep things very modular, so I'm defining a list of levels (states) in a JSON, and then every level has its own JSON containing the objects within that level. However, I'm encountering an issue in that, when changing states, I get a black flash while the assets for the next state load (this happens whether I iterate through the JSON list or define everything manually). From what I've read, all sprites should be loaded in the preload stage, however, by doing this I'm causing that tiny but noticeable black pause. I know one way would be to simply load every asset at the start of the game, but that seems incredibly inefficient (wouldn't that fill up the memory immensely?). I would rather load a state's assets from the "parent" state. However, in my quick test (which maybe I did wrong) it seems that game.load doesn't work properly if done within the create stage? What is the best approach to doing this?
  23. I know this is probably well known, but I don't know the name for it and no amount of googling could help me find the answer. (Maybe I wasn't googling hard enough.) How do you remove the rough edges from pictures? I mean, how can I show the part of the picture I want to show and remove the whitespace, having the background overlay it.? I'm not using any spritesheets.
  24. Anny

    Connecting Sprites

    Hey guys! I have asked about this in different topics but I haven't been able to find a good way to do it. What I need is to connect sprites dragging and dropping a point of one of them (like a button) to connect it to another sprite. I have tried to do this creating lines with a bitmap and using new Phaser.line but I don't want any diagonal line and when I use bitmap I haven't been able to create multiple lines. I thought of adding a sprite with the draw of the line but that wouldn't follow the player's movement ): I wan't it to be whatever the player draws on the field that connects the two sprites (but with straigth lines, like if they were cables that connect 2 electronic pieces) I add an image to illustrate what i'm trying to do Thank you so much in advance PD: Ignore B's position haha
  25. Gio

    Free Sprite of the Week

    Our company has been doing this Free Sprite of the Week thing for a little while, so I thought I'd let you know about it, as it's probably useful to some people here. The idea is that one of the animated characters, creatures, etc. that are normally for sale, is given away for free, and there is a new one each week. It seems to be working well for now, and if people don't abuse it, we intend to keep doing this for some time. This week it's an unicorn... and everyone loves unicorns, so you should absolutely get it! If you don't love unicorns, then there's something wrong with you, really There are also other free sprites if you look in the Market area of the website, and some of them (no, all of them) are really cool The ones that aren't free are still very cheap, especially now, since it's all a new thing and literally everything is 50% off for another week or so. The characters with a + next to their names are "premium" ones, that have a much higher resolution, higher frame rate, a larger number of camera angles, and a more complete animation set. The animation sets have been made in a way that makes them suitable to any type of game, from platforming to point-n-click adventures, to isometric RPG's, etc. Just as an example of what one of these animation sets includes, most of the + characters have the following animations seen from 12 different angles (8 isometric and 4 straight-on ones): Idle, Angry_01, Angry_02, Assemble, Bow_01, Bow_02, Bow_Curtsey, Box_PickUp, Box_Pull, Box_Push, Button_Push, Celebrate_01, Celebrate_02, Climb, Crouch, Crouch_Walk, Dance, Death_Backwards, Death_Backwards_Get_Up, Death_Forward, Death_Forward_Get_Up, Door_Pull, Door_Push, Fall, Fight_Stance, Give_Item, Hang_Ledge, Hang_Ledge_Left, Hang_Ledge_Right, Hang_Wall, Hang_Wall_Left, Hang_Wall_Right, Happy_01, Happy_02, Item_Pick_Up, Jump_Up, Jump_Flip, Kick_Flying_Kick, Kick_High, Kick_Low, Kick_Mid, Kick_Spin, Land, Lever_Big_Pull, Lever_Pull, Magic_Raise, Magic_Sky, Magic_Throw, Magic_Thrust, Point_Down, Point_Forward, Point_Forward_Down, Point_Forward_Up, Point_Up, Pull_Up_Ladder, Pull_Up_Ledge, Pull_Up_Wall, Punch_High, Punch_Low, Punch_Mid, Punch_Spin, Reach_01, Reach_02, Run, Sad, Sitting_Cross_Legs, Sitting_Talking, Sitting_Down, Slide_Down, Slide_Left, Slide_Right, Smash, Standing, Standing_Fold_Arms, Standing_Hands_On_Hips, Standing_Look_About, Standing_Up, Stand_To_Climb, Stand_To_Fight, Step_Backwards, Swim, Talk, Throw, Walk, Wave, What Hopefully you'll find something useful in there. Also, if you have any requests for something that you'd like to see, or want stuff to be made exclusively for your games, this is sometimes possible, so if you want just send me a message and I'll forward it to the people that do these things (I only write code and know nothing about art and animation).