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

  1. Hi Folks, I'm trying to build a Babylon app that will potentially pull in external content, and some of the content would be very easy to present if I were able to put rendered HTML inside of my Babylon scene. Is it possible to render some HTML in Babylon? Possibly as a sprite or a texture on a mesh?
  2. Sprite jitters if camera moves with it

    Hello! I'm developing a simple 2D platformer with low res pixel art (canvas of size 144x81 pixels), and I noticed that when I move the sprite horizontally but enough to make the camera follow it, there's some jittering ocurring with the sprite. Here's the link (just pass the "main screen" clicking on START): Could a kind soul give some assistance? I pay with internets. Thanks a lot!
  3. I am fairly new to phaser. I am currently working on a card game using phaser and I am trying to work out how to best position sprites in zones around the board. My tests this far have revolved around hardcoding positions on the screen and that has been a math-tastic nightmare. I am building two decks of cards on either side of the screen. Then I am dropping several other cards onto the board in a row. The two decks of cards when clicked will be added to two seperate zones (one hand and one play). So, my thought process is as follows: Load all sprites Assign sprites by starting position into starting groups when a card is clicked add that card to the appropriate group use the group to determine the position within the bounds of the group (checking for overlap, etc). Does this seem like an appropriate way of handling it? If not, what would you suggest?
  4. Image Not Displaying in Phaser

    I'm following the rougelike tutorial and for some reason the preloader images arent displaying. I load them in the boot state: preload() {//changed the file names to make it easier to type this.load.image('preloaderBackground', 'assets/progBarBack.png'); this.load.image('preloaderBar', 'assets/progBar.png');'Preloader'); }and i try to display them here: module RougeLikeClone { export class Preloader extends Phaser.State{ background: Phaser.Sprite; preloadBar: Phaser.Sprite; create() { this.stage.backgroundColor = "#FF0000"; //just to check this.background = this.add.sprite( / 2 - 250, / 2 - 70, 'preloaderBackground'); this.preloadBar = this.add.sprite( / 2 - 250, / 2 - 70, 'preloaderBar'); } }} I get a red background with a greenoutlined black box when this runs. Whats the problem? (see attatched)
  5. Hello, 1. I created a group groupA in the game. 2. I created a sprite spriteA and added it to groupA. 3. After that I kill() spriteA and keep its reference in a pool array for later use. 4. I destroy() groupA. 5. I get the spriteA from the pool array to be used in another group and try to change its texture with loadTexture(), I get error: phaser2.8.8.js:46794 Uncaught TypeError: Cannot read property 'cache' of null at Phaser.Sprite.loadTexture (phaser2.8.8.js:46794) That doesn't happen if I don't destroy the group in step 4. Could anyone please explain what is going on and what is the right way to reuse Sprites even when their container parents are destroyed?
  6. Stretch the center of a sprite

    Hi guys I am creating interface elements using sprite images. Not sure if this is best practice, open to suggestion. For example; at the moment a have large image for an input field which is fine and it works. ------------------------------------ | | ------------------------------------ However now i need nearly the exact same sprite just half the width for a small input field. -------------------- | | -------------------- So the middle of the sprite is actually the same but the corners can't be stretched as I would like to maintain the same corner radius I don't really want to create a seperate sprite for each of the corners unless you think that is best. So what I really want is to be able to create a very small sprite. --- | | --- And stretch the center pixel horizontally. However as I have said this may be far away from what is the best way to achieve this, so let me know! Thanks!
  7. Hey guys, Is it possible to drag-drop sprites? The scene.pickSprite doesn't return a pickedPoint.
  8. I'm trying to make a menu like option to where the user can drag a sprite on screen and make a clone out of it leaving the other sprite on it's original location. This is what I have up untill now. var box = game.add.sprite(100, 200, 'box', 0); box.anchor.set(0); box.inputEnabled = true;, this, 0, box); function clone(obj){ var clone = game.add.sprite(obj.x, obj.y, obj.key, obj.frame); clone.inputEnabled = true; clone.input.enableDrag(true); } Only down side is I have to click twice on the sprite in order for there to be a copy of it which kind of takes away the whole purpose of a copy on drag function. Any help would be greatly appreciated. (I'm quite new to Phaser and js so I'm sorry for any obvious mistakes beforehand) Thanks in advance!
  9. Pixijs free sprites atlas packer

    Hello everyone! I've been release my own atlas packer for pixijs. It's fast and easy to use command line tool. You can try it and send me your beedback. Main features: - scaling for multiple dimenstions - alpha trimming - multisheet textures if not all sprites could be allocated into a single texture - png, jpg - texture format - texture size limit - sprites border to avoid render artefacts Platforms: MacOS, Windows Download from:
  10. child sprite behind parent

    Hi Guys, I'm trying to link 3 sprites together for a player character using the addChild method on a sprite. I have backArm, player and frontArm sprites that need to be rendered in that order. The arms both rotate at the shoulder and the backArm needs to go behind the player sprite. I've seen a suggestion on this thread to have a main sprite container with a null key and add the sprites as children of that. I've tried that and I have my sprites rendered in the correct order but the arms do not follow the player anymore when it walks across the screen. The arms just stay in place while the player walks away. Pretty sure I've made an error somewhere. I'll put a code snippet below and any advice would be really helpful. Thanks create: function() {; this.playerContainer =, 500, null); this.backArm =, 500, 'backArm'); this.player =, 500, 'player'); this.frontArm =, 500, 'frontArm'); this.playerContainer.addChild(this.backArm); this.playerContainer.addChild(this.player); this.playerContainer.addChild(this.frontArm);; this.player.anchor.setTo(0.5); this.frontArm.anchor.setTo(0.4866, 0.2925); this.backArm.anchor.setTo(0.4866, 0.2925); //walk animation this.player.animations.add('walkright', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 0, 24,'', 5), 24, true, false); this.player.animations.add('walkleft', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 24, 0,'', 5), 24, true, false); cursors =; }, update: function() { //player walk movement this.player.body.velocity.x = 0; if (cursors.right.isDown) { this.player.body.velocity.x = 150;'walkright'); }else if (cursors.left.isDown){ this.player.body.velocity.x = -150; this.'walkleft'); }else { this.player.animations.stop(); this.player.frame = 25; } this.frontArm.rotation =; this.backArm.rotation =; }
  11. Is it possible to show the loading progress of a png sptire atlas and its json file? Something like we used to do in flash with totalBytes and loadedBytes?
  12. Hello, guys. I'm newbie on 3d programming. I want to display sprite like GUI that has a function linkWithMesh. but it hasn't. In this example, sprite's position from a mesh is changing, not fixed. the mesh must have BILLBOARDMODE_ALL. how to make sprite to track mesh's position like GUI's linkWithMesh.
  13. Hey. I am trying to using 2 polygons as mask for a sprite group. It seems to work with drawRect perfectly, when I use more than 1 (as in the example image). But whenever I try to use 2 polygons, it just apply the first one created as mask. One polygon is above the window, one being the window itself. (see the code). I have provided my example code here. poly = new Phaser.Polygon( { x: 0, y: 0 },{ x: 0, y: 255 },{ x: 153, y: 255 },{ x: 154, y: 218 }, { x: 176, y: 213 },{ x: 165, y: 215 },{ x: 165, y: 215 },{ x: 176, y: 213 }, { x: 199, y: 211 },{ x: 199, y: 211 },{ x: 201, y: 157 },{ x: 202, y: 149 }, { x: 205, y: 142 },{ x: 200, y: 139 },{ x: 199, y: 132 },{ x: 206, y: 127 }, { x: 215, y: 123 },{ x: 215, y: 123 },{ x: 231, y: 120 }, { x: 256, y: 116 },{ x: 303, y: 116 },{ x: 328, y: 119 },{ x: 349, y: 122 },{ x: 356, y: 125 }, { x: 360, y: 130 },{ x: 361, y: 151 },{ x: 365, y: 184 },{ x: 365, y: 216 }, { x: 366, y: 252 },{ x: 550, y: 251 },{ x: 552, y: 213 },{ x: 550, y: 210 }, { x: 550, y: 207 },{ x: 569, y: 201 },{ x: 591, y: 199 },{ x: 615, y: 199 }, { x: 638, y: 201 },{ x: 659, y: 204 },{ x: 675, y: 208 },{ x: 675, y: 212 }, { x: 675, y: 212 },{ x: 672, y: 213 },{ x: 671, y: 216 },{ x: 671, y: 249 }, { x: 767, y: 249 },{ x: 927, y: 239 },{ x: 947, y: 239 },{ x: 940, y: 479 }, { x: 957, y: 497 },{ x: 960, y: 509 },{ x: 960, y: 509 },{ x: 982, y: 532 }, { x: 984, y: 548 },{ x: 998, y: 568 },{ x: 1005, y: 562 },{ x: 1024, y: 561 }, { x: 1024, y: 0 } ); poly2 = new Phaser.Polygon( { x: 780, y: 280 },{ x: 876, y: 280 },{ x: 876, y: 371 }, { x: 848, y: 371 },{ x: 848, y: 352 },{ x: 779, y: 352 } ); mask =, 0); mask.beginFill(0xFFFFFF); mask.drawPolygon(poly.points); mask.drawPolygon(poly2.points); enemies.mask = mask; Is there something I have missed or is this a bug? Is there another (better) way of doing what I am trying to archive (on the example images)? Basicly it is one big image I just want to be able to define specific areas where enemies can be shown in-game. Since I would probably need to add at least a couple more areas. Thanks for your help.
  14. Sprites and Shadows

    Hey! I wanted to know if the library has been updated yet to perform this function, as I found a couple of post from 2014 talking about it being in future updates @Deltakosh, An example post I found and wanted to know if it's here as would be suuuuuper useful to me right now in my current project build, if you know of another way also of it being done please let me know, please find the babylon playground link and youtube video of my build as my textures are not very good at working!
  15. Hey everyone I just have two simple question I cannot find an answer too. First Question: The SpriteManager needs a capacity parameter, but why does it need this? Why can I not change this during runtime? What does it actually do (in the background) (except for just not showing any sprites that exceed the capacity)? Does it hurt performance at all if I just put a 'crazy' high number? Can the manager not just +1 the capacity by itself in the background whenever an instance of the sprite is created? It just seems so odd that I have to give it a number and I feel like I'm missing something here. My second question is how to exactly use the AssetsManager for sprites. The documentation gives this example: var imageTask = assetsManager.addImageTask("image task", "img.jpg"); imageTask.onSuccess = function(task) { console.log(task.image.width); } But that doesn't explain how to use it with a Sprite since the task returns an image, and a SpriteManager only requires an image url. Thank you in advance!
  16. I have a tilemap with multiple layers that should be impassable. I tried multiple times with setCollision() and setCollisionBetween() but could never get it to work, so I decided to do a bit of hard-coding. I have a 32 x 32 tile-map and this function works for 2 out of 4 directions. The directions this works for are right and down. I can solve this easily if I can just figure out the problem with one direction. I simplified this code as much as possible. The moveUp() function is the one that doesn't work, whereas the moveDown() function is the one that's working. function moveUp(map, layers) { if (layers.every(layer => !map.hasTile(x, y - 1, layer))) { hero.body.velocity.setTo(0, -150); } else { stopMovement(); } } function moveDown(map, layers) { if (layers.every(layer => !map.hasTile(x, y + 1, layer))) { hero.body.velocity.setTo(0, 150); } else { stopMovement(); } } Here is information on the hasTile() function. x: X Position to check if a tile exists y: Y Position to check if a tile exists Layer: The layer to set I'm checking whether the map has a tile in the collision layers at the player's X Position on the tile map and the Y Position is the tile directly above or below the player. If there is no collision tile, the player is free to walk. When a player moves up, there is an entire tile that a player cannot access (32px), whereas, when a player moves down, there is no space. To demonstrate this, take a look at the attachments. The problem probably lies with the coordinates of the collision sprite. . I can't figure out what I'm doing wrong here.
  17. Animation Question

    Hey Everyone! Still working with my same project looking at the depth perspectives and minor animations, I'm either looking for a page which is better structured than babylons own help page - Find it very unhelpful and vague personally, or some suggestions from everyone on here. I am looking to see if i can create the animation affect to give a sense of depth to the build, the best online example effect of what I mean is here: - You can see as you go across the team, you are able to see the effect i'm trying to describe and aspire to build, as you look for example at Pharrell Williams sat on the stool and the tall guy with glasses behind him, as you go from the leftmost view to rightmost. If anyone can help me with this I would be very appreciative. as I am currently struggling to find a start point, I will attach a playground of my current project to see what I currently have running and if possible could even demo the effect i'm after using it would be great! Please note that the FOV I wish to use is 0.30, but is set to 1 in the example as the texture error boxes are rather big. Playground: Thanks everyone! Mezz
  18. Sprite Size

    Hey, I was wandering if anyone knew the code to set the size of sprites to however many pixels as currently no matter what the cell size or image size they are all formatting to the same height which is very unhelpful for my project! Looking for any working solution so I can have height accurate sprites, my two pieces of code being used to position and call in my sprites are as follows; var spriteManagerstaffs = new BABYLON.SpriteManager("peopleManager", "Images/TinyPNG/David.png", 1, 1010, scene); //finds file, sets capacity to 1, cellsize to 1010<-- (does nothing) and adds to scene var staff = new BABYLON.Sprite("staff", spriteManagerstaffs); staff.position.x = -1.4; staff.position.z = 0; staff.isPickable = true; //Sets the position within my 3d environment
  19. Issue with sprite animation

    Hello, I am doing a simple Platformer game with Phaser, for learning purposes. I have a sprite that is 2 columns x 2 rows (see attached image), with the upper-left image being the "idle" status. And I put this code in my player prefab file: this.animations.add("idle", [0]); this.animations.add("jump", [1]); this.landAnimation = this.animations.add("land", [0]); this.animations.add("run", [1,2,3]); The problem is that my "idle" status is going to repeat frames 1,2,3 instead, again and again, as if the character is moving, and the other statuses are all [0] (what I wanted for "idle"). The result is always the same, whatever numbers I put into the arrays. I am a bit stuck, and cannot figure out where the problem is... Any help or ideas should be greatly appreciated. Thanks.
  20. Pixel Colour bleed

    So I am using a range of images as sprites, and whenever they have been cropped and touch the edge of the canvas in photoshop, it creates a weird bleed of colour as if the last colour pixel is being stretched outwards, please find attached some screenshots of the issue. I have fixed the issue for myself by creating a blank space between the image and canvas edge, so I can confirm that it is definitely the cause of the bug! Hope this helps future development!
  21. Sprite Manager

    Hello! I am looking at around 40 sprites which are actually being replaced with HD Images, I was wandering if there are ways to animate or any alternative solution as i'm struggling to find a solution to the lag and drop in frames currently which makes it look bad, I will insert a playground here with my current working version, but the main issue being the playground doesn't lag as it won't be loading my images and the size and scale of my images is far higher than the can't load texture issue. Secondarily, if anyone could tell me how to add a small amount of movement to look up and down but I want to prevent the camera looking more than 10/20 degrees above or below the mid point to keep it focused. The example mouse movement camera rotation and general project i'm using as inspiration can be found here:
  22. Replacing a Graphics sprite

    I made a canvas class for a drawing app and set a white rectangle made with Graphics.drawRect() as its sprite, but I need to change its fill color when I click it. It seems that's not possible according to the few info I've found, so I want to draw another rectangle and change the container sprite but that's not working. Am I doing something wrong? How should I replace the sprite? game.createClass('Canvas', { init: function() { this.drawContainer = new game.Container(); var board = new game.Graphics(); board.visible = false; board.beginFill(0xFFFFFF); board.lineStyle(0); board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 ); board.endFill(); this.sprite = fill; this.sprite = board; this.sprite.interactive = true; =; this.drawContainer.addChild(this.sprite); game.scene.stage.addChild(this.notebookContainer); }, click: function(event) { var board = new game.Graphics(); board.visible = false; board.beginFill(0xFF0000); board.lineStyle(0); board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 ); board.endFill(); this.sprite = board; } });
  23. Hi, I updated phaser lib from older version to 2.6.2 and now there is no more "alpha" property in "sprite" object. I see "alpha" is still available using tween. But what if I want to change it directly like it was in previous version? : this.background = this.add.sprite(0, 0, 'back'); this.background.alpha = 0; thanks
  24. Hello comrades, I'm new to phaser and I can't seem to create new objects to the group "capetinhas", even though I can load the sprite through game.add.sprite. Here's the code: var game = new Phaser.Game(448, 448, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload () { game.load.image('tabuleiro','assets/tabuleiro.png') game.load.spritesheet('devil','assets/devil.png',32,32); var capetinhas; } function create (){ capetinhas =; game.add.sprite(window.width,0,'tabuleiro');//loading the background game.add.sprite(128,128,'devil'); // this works capetinhas.create(32,32,'devil'); // this doesnt } function update (){ } Any helpe would be really apreciated. Thanks in advance.
  25. I am trying to make a 'bullet' from the var weapon shoot in a certain direction, this bullet is actually a pokemon ball as I am just making a practice game. I cannot seem to make the 'bullet' go in the direction that I would like it to, I entered: weapon.body.velocity.x = -100; under the the: if (cursors.left.isDown) but this did not work, when I pressed any key the screen would just freeze. Please help me make the 'bullet' go in the direction I want. var items; var game; var player; var weapon; var cursors; var fireButton; function addItems() { items = game.add.physicsGroup(); createItem(100, 400, 'coin'); } function createItem(left, top, image) { var item = items.create(left, top, image); item.animations.add('spin');'spin', 10, true); } function itemHandler(player, item) { item.kill(); } window.onload = function () { game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.stage.backgroundColor = ('#424242'); game.load.spritesheet('coin', 'coin.png', 36, 44); game.load.spritesheet('player', 'hero.png', 64, 64); game.load.spritesheet('bullet', 'Pokeball.png'); } function create() { player =, 200, 'player'); // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, weapon, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.p2.enable(player, weapon); player.body.setSize(30, 45, 16, 12); player.body.immovable = false; // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character; addItems(); // Creates 1 single bullet, using the 'bullet' graphic weapon = game.add.weapon(1, 'bullet'); // The bullet will be automatically killed when it leaves the world bounds weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; // Because our bullet is drawn facing up, we need to offset its rotation: weapon.bulletAngleOffset = 90; // The speed at which the bullet is fired weapon.bulletSpeed = 400; game.physics.arcade.enable(player); // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically weapon.trackSprite(player, 30, 0, true); cursors = this.input.keyboard.createCursorKeys(); fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); } function update() { game.physics.arcade.overlap(player, items, itemHandler); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100;'left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100;'right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100;'up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100;'down'); } // player does not press anything else { player.animations.stop(); } if (fireButton.isDown) {; } } function render() { weapon.debug(); } }