• Content Count

  • Joined

  • Last visited

  1. I'm trying to task that's easy to handle in Canvas, but which I can't seem to make sense of in PIXI. I thought I was getting close with this ( ) and ( ), but some of that is now deprecated; also, I'm not convinced this is quite what I'm looking for (or at least maybe not yet the way to do it) and I'd like to see a code example for what I'm trying to do. What I'm trying to do, and why: I have an editor, which is on a grid of tiles. The data for that level is stored in a JSON object, which may look something like this: { "room1": { 10: { 5: { "id": "Enemy/BossGuy" }, 6: { "id": "Ground/GrassH2" } } } } Now, obviously I *could* design an additional data structure on the side and an entire system that tracks every sprite, and another system that renders them, and another system that culls it based on your position, etc, etc... I most certainly don't want to do that. The data is already there, it just needs to render it. Additionally, the editor doesn't need blazing fast speed, I just want something that won't absolutely kill the memory. So what I want should look something like this: // We are INSIDE of the Y-Loop at this point... for( let x = tileXStart; x <= tileXEnd; x++ ) { const split = roomData[y][x].id; // assumes we know there's an id here const sheet = split[0]; // example: "Enemy" const spriteName = split[1]; // example: "BossGuy" // Uses the existing atlas textures and sprite references to render here: PIXI.draw( sheet, spriteName, x * 48, y * 48 ); } What's the correct way in PIXI to do this?
  2. Actually, a fluke test may have just shed some light on this. I was temporarily commenting out the baseTexture change just to avoid the bug, and it seems like it transferred between atlases automatically. So am I correct in thinking that all frame names are stored across all atlases, and will automatically assign the appropriate one? Thus also meaning that frame names would have to be unique per atlas?
  3. Okay, I have a peculiar issue. I'm trying to edit a particular sprite that will change it's image AND the atlas it uses. I have like six atlases, each of which focuses on different things (like Characters, Blocks, etc). However, the editor has a bunch of tiles that can be part of any of those atlases. So when I overwrite a tile, I need to also tell it which atlas to change to. Theoretically, not too much of a problem. As far as I can tell, PIXI allows this with a fairly straightforward technique: sprite.texture.baseTexture = getSheet( atlasGroup ); sprite.texture = PIXI.Texture.from(frameName); getSheet( atlasGroup: AtlasGroup ) { return this.loader.resources[atlasGroup].textures; } However, when I do this, it's actually misbehaving. It's almost like other tiles are suddenly having their baseTexture changed as well, which makes me suspect there's some things being changed by reference. Which isn't a problem, but I need a way to change *only* the sprite's atlas. TLDR: How do I change a sprite's atlas AND frame name in the correct way, without causing any by-reference texture updates that can affect other tile rendering?
  4. Ah! Nevermind. The answer was obvious. Just applied 24, 0 in the trim rectangle. Thank you so much!
  5. Okay, I figured out what you meant. I did this: const orig = sprite.texture.frame.clone(); const trim = new PIXI.Rectangle(0, 0, orig.height, orig.width); sprite.texture = new PIXI.Texture(sprite.texture.baseTexture, sprite.texture.frame, orig, trim, 6); That does allow me to use texture realignment potentially, but I would still need to have an offset. It still aligns it to the left, like if I'd used a pivot at (0,0) and then rotated it. See this reference: Basically, I need that platform to align where that red outline is (shifted 24 pixels to the right). How would I go about doing that?
  6. Well, the issue with rotating the texture is that it does it with the 48x24 limits. So when you rotate by 6, for example, it shows it really scrunched up because its trying to fit inside the original 48x24, but with a texture that is now like 24x48. See the reference image: The one on the left is three separate platforms, connected by 48x48 tiles, but they're at the top. The ones on the right are supposed to look like that platform, but rotated to face the right.
  7. I've been trying for hours to find a solution to this, and I can't seem to find one that works without disrupting the bounds / positions of the base object. What I have is a grid of 48x48 tiles, and arbitrarily sized sprites within them. For example, multiple platforms that are 48x24 and which can connect together. What I need is for the platform to be able to rotate left, right, or a half rotation (such that it's upside down). A flip would also suffice for the half rotation. I tried texture rotation, and that definitely wasn't what I needed. It just stretched the image very strangely for me within the platform. I then tried solutions like this: sprite.pivot.set( 0, 0 ); sprite.rotation = 270 * Math.PI / 180; obj.pos.y += 48; Technically, that positions it exactly where I need. The problem is that this doesn't work, because the collision system and bounds are handled separately outside of PIXI. In short, I need the *image* to rotate within the tile, but I need the x, y position to remain at the same location (the upper left corner of the tile). Bonus points if anyone can explain a proper X flip and Y flip, since the examples I found also didn't work (e.g. sprite.texture = new PIXI.Texture(sprite.texture.baseTexture, sprite.texture.frame, null, null, 8); )