question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple Sprites From Image

See original GitHub issue

Hello, I am trying to make identical sprites from a sprite sheet image by creating a texture for a sprite and changing the frame of the texture to animate it. This is my code:

var playerTexture = PIXI.utils.TextureCache["public/images/SpriteSheet.png"];
var enemyTexture = PIXI.utils.TextureCache["public/images/SpriteSheet.png"];

PIXI.Texture.addTextureToCache(playerTexture, 'playerTexture');
PIXI.Texture.addTextureToCache(enemyTexture, 'enemyTexture');

var player = new PIXI.Sprite.fromFrame('playerTexture');
var enemy = new PIXI.Sprite.fromFrame('enemyTexture');

I can change the x and y positions of the player and enemy and it will work fine, but when I change the frame of the playerTexture to animate it, the enemy will also change, and vice-versa.

For example:

//This Works:
player.x = 100;
player.y = 100;
enemy.x = 70;
enemy.y = 70;
//But If I Do This:
playerTexture.frame = new PIXI.Rectangle(0,1*32,13*32,16*32);
//Then the enemyTexture.frame will change as well.

So far the only way I have found to fix this is by copying the SpriteSheet.png and making a SpriteSheet2.png and using that image instead for the enemy.

Any help or suggestions would be appreciated.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
themoonratcommented, Jun 25, 2019

Just use .from to cover you in pretty much all scenarios var player = PIXI.Sprite.from('imgs/player.png') or if you already have a texture. var player = PIXI.Sprite.from(playerTexture);

0reactions
gitgudongithubcommented, Jul 1, 2019

Just use .from to cover you in pretty much all scenarios var player = PIXI.Sprite.from('imgs/player.png') or if you already have a texture. var player = PIXI.Sprite.from(playerTexture);

ty, that works well

Read more comments on GitHub >

github_iconTop Results From Across the Web

Images to Sprite Sheet Generator - CodeShack
Covert multiple images to a sprite sheet. Tools Images to Sprite Sheet Generator. Drag and drop your images onto the canvas below, or...
Read more >
Multiple Sprites from a single imported Texture
This sample shows a rigged actor that is made out of multiple Sprites. The Sprites are derived from a single imported Texture, ...
Read more >
Working with Sprite Sheets in Unity - Medium
Sprites are a vital part of working on a game in Unity. Part of that is how do you go about slicing a...
Read more >
Slicing Images
This image has sub-images too close together for automatic slice to work. 2. Select the Sprite image in the Sprites folder, change the...
Read more >
Spritesheet vs. multiple images : r/gamedev - Reddit
Single images: less wasted space, more "natural" to work with, its possible to only load that single sprite you need instead of getting...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found