Search the Community

I am creating a game in phaser 3 where I need to work with texture atlas. There are no useful tutorial available online and I have no idea how to even start. So here are my questions. 1) How to load a JSON atlas and draw images from it? 2) How to randomly select a texture from the atlas and draw it? Note : While packing my textures I selected JSON array option. Some tutorials which I found online. LoadingTextures RandomTexture AddingAtlas

Hi Guys, I'm making a game that uses assets for a 1920 x 1080 screen and I'm having some issues with some states taking a long time to load. All my assets are loaded in a preload state which has a loading bar but the issue I'm having is that some states which access a large texture atlas (8,000 or higher) take 3-5 seconds to load, without any feedback to the user. I wouldn't mind if that extra time was added to the preload state with a loading bar but I'm confused as to why switching states takes so long if the assets are already loaded. I've run some tests with simply adding a single sprite to a page in a create function from a large texture atlas. The texture atlas is 7643 x 8488 (2.94MB) and I've used Texture Packer to create the png and JSON array. The atlas contains around 70 textures. create: function(){ this.game.stage.backgroundColor = "#db6565"; this.test = this.game.add.sprite(400, 50, 'wrongFoam'); } This state takes around 2-3 seconds to load after pressing the next button in the previous state. Am I doing something wrong here? I can't split the textures into multiple atlases because I need access all 70 textures for certain animations. I also don't believe that Phaser supports multipack from Texture Packer. Any help would be appreciated. Thanks

I use this code to setup a texture atlas animation: PIXI.loader .add('out2', 'assets/out2.png') .load(function (loader, resources){ onRotationsLoaded(loader, resources) }); function onRotationsLoaded(loader, resources) { first = new PIXI.extras.AnimatedSprite(setupFrames(resources["out2"].texture.baseTexture)); app.renderer.plugins.prepare.upload(first, function(){ console.log("loaded first"); // ready to go }); } function setupFrames(name) { var frames = []; array is an array that stores correct position for each frame of animation for (var i = 0; i < array.length; i++) { var rect = new PIXI.Rectangle(array[i].frame.x, array[i].frame.y, array[i].frame.w, array[i].frame.h); frames.push(new PIXI.Texture(name, rect)); } return frames; } I would like to change the texture of the AnimatedSprite first in a click event or something. The new texture needs to be fetched from the server(I do not want to load it at start, because there are too many of them). I could destroy first and create second AnimatedSprite, but is there a way to just change it's texture atlas image?

Hello all! I have hit a roadblock and I need help :/ All I want out of this is one thing: I press a cursor key, and an animation plays. Three of my animations work perfectly, and two only play the first frame of the animation when the keys are pressed (down && left) || (down && right). Any insight to what I hope is just a simple typo? Thanks for your time! EDIT: The frames that are not working are not the same size as the frames that do work, they are about twice the width, could that have something to do with it? var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload(){ //loading the background game.load.image('background', 'background.png'); //loading three ball images game.load.image('redBall', 'redBall.png'); game.load.image('blueBall', 'blueBall.png'); game.load.image('greenBall', 'greenBall.png'); //loading the atlas game.load.atlas('player', 'henAnimation/henAnimation.png', 'henAnimation/henAnimation.json'); } var cursors; var player; function create(){ //adding the background game.add.sprite(0, 0, 'background'); //adding player player = game.add.sprite(200, 200, 'player'); //cursor animations-stop, right, and left work perfectly player.animations.add('stop', Phaser.Animation.generateFrameNames('', 1, 3, '.png', 4), 10, true); player.animations.add('right', Phaser.Animation.generateFrameNames('', 4, 5, '.png', 4), 10, true); player.animations.add('left', Phaser.Animation.generateFrameNames('', 6, 7, '.png', 4), 10, true); //only load the first frame of the animation player.animations.add('rightlick', Phaser.Animation.generateFrameNames('', 8, 10, '.png', 4), 10, true); player.animations.add('leftlick', Phaser.Animation.generateFrameNames('', 11, 13, '.png', 4), 10, true); cursors = game.input.keyboard.createCursorKeys(); } function update(){ if (cursors.left.isDown) { player.animations.play('left'); } else if ((cursors.left.isDown) && (cursors.down.isDown)) { player.animations.play('leftlick'); } else if (cursors.right.isDown) { player.animations.play('right'); if ((cursors.right.isDown) && (cursors.down.isDown)) { player.animations.play('rightlick'); } } else { player.animations.play('stop'); } }

I'm trying to use Phaser Ropes in order to populate the top of a curved world with ground. As the rope is a mesh that distorts an image its perfect for this purpose. However I'm running into two issues. 1. According to the docs, a Phaser Rope is "a Sprite that has a repeating texture.". This doesn't seem to be the case however, with a simple fiddle it already shows that the texture is stretched (and loses its aspect ratio in the process): https://jsfiddle.net/qruppmzu/ Is it possible to actually turn this into a repeating texture instead of causing it to stretch? Currently I need to use a whole lot of ropes to populate the world, which becomes heavy on performance really quickly. I can generate / move the ropes as you progress through the world but having one rope seems like a better idea (if it works). 2. Even though the constructor allows it, the rope doesn't work with texture atlasses. How would I go about getting this to work? My framework depends on everything being in an atlas, apart from rebuilding it makes little sense to have one single sprite outside of the atlas because of a bug like this. See: https://jsfiddle.net/qruppmzu/1/

I'm having issues trying to get my head around animated particles. I have a texture atlast representing an explosion animation. I can use this standalone with no problems, however when I try to use it with a particle emitter I'm having difficulty with positioning. It also seems that the animation is half sized and I can't tell why. Here's my code: // Player explosion this.playerExplode = function(x, y) { this.emitter = this.add.emitter(x, y, 4); this.emitter.makeParticles('explosion'); this.emitter.forEach(function(singleParticle) { singleParticle.animations.add('explosion', Phaser.Animation.generateFrameNames("explosion_", 1, 11, ".png", 2)); singleParticle.animations.play('explosion', 15, false, true); }); this.emitter.start(true, 2000, null, 10); } The function is called on a player collision with an obstacle. I pass the X,Y co-ordinates to the function and create the emitter as you can see. If I dump out the emitter object to the console, I can see the X,Y co-ordinates are correct. I've picked up the method for adding animations from some tutorial or other - I can't remember where but I've been all over the web looking for a simple animated particle example and can't seem to find one. This is where I've landed - if there are any better or more standard ways to add an animation to a particle, please let me know! If I dump out the position of each 'singleParticle', they all come back as 0. Oddly enough, I can see the animation (zoomed out by 50%, it would seem!) in the top right corner of the screen. I'm not sure why this is. Can anyone help out here? Thanks

If I have a spritesheet, i could extract the animations with Phaser.Loader spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing)I have a spritesheet inside a texture atlas. So whole spritesheet is considered a single frame. So far, i had to manually edit the json file to extract each animation frame. If i have this spritesheet frame: "player": { x: 0, y: 0, w: 100, h: 10 } and if frameWidth is 10, i end up doing this manually: "player1": { x: 0, y: 0, w: 10, h:10 }, "player2": { x: 10, y: 0, w: 10, h:10}, ... I want to keep the spritesheet inside the texture atlas, and extract the animation frames automatically. Is there an easy way to do this?