Items

[takashy]

Hello guys im new here, i have some doubt about items equipment..

I have several spritesheet one for body and one for each items, hair ...

I want to know what is the best approach for pixijs ?

I tried to add hair spritesheet as children on my exisiting body spritesheet this work but i need to modify anchor.

This is good ? or there is another solution ?

 

Best regards

[ivan.popelyshev]

There's defaultAnchor mechanic in pixi textures, added by texturePacker author. It should work.

As for best approach - PixiJS is not an engine, and it doesnt have a part for characters. at all. there are no characters and rigs in vanilla pixi. You have to write it yourself or use something like Spine / Dragonbones.

[takashy]

Hello ivan thanks for you reply.

what you mean by defaultAnchor mechanic in pixi textures, added by texturePacker ?

I use shoebox or http://free-tex-packer.com/

And i think i have to write nothing. spritesheet are ready to use example : 

 

as you can see sprite sheef of armor follow sprite sheet of body, all i need to do is combining this sprites i think.. so i tried to create a sprite (body) and push armor on children of body.

But for that i need to play with anchor.y 

you think i can go on this way ?

 

 

 

[Jammy]

Hi, I've achieved this before in two different ways

Long way but good performance after initial run:

1. Create a Pixi.Container
2. Add the body sprite
3. Add the armour sprite
4. use renderTexture to turn this into a texture and store it
5. Repeat this for every direction
6. When character changes direction, swap to the previously mentioned textures

Spine way but not as good performance with many objects:
1. Create a spine of the character (build it up from scratch with skeleton and sprites)
2. With PixiJS, swap the slots of the armour when required, and set the animations for different directions

Edit: There are other ways of course, just setting the position of both the character and its armour sprite to be the same etc, anchoring... But I avoided them. Added below

Container method (probably works quite well actually):

1. Create a Pixi.Container call this player
2. Add the body sprite to it, call it body (player.body) (player.body = new Pixi.Sprite(etc) OR Animated sprite then player.addChild(player.body))
3. Add the armour sprite to it, call it armour (player.armour, repeat above)
4. When updating player (the pixi.container) position the body and armour will move with it, since its in the same container
5. When the player swaps direction, swap both player.body and player.armour texture (if using an animated sprite, use gotoAndStop i guess)

Whichever approach you take with it, shouldn't be a problem really. Trust in pixi.

Edited July 18, 2020 by Jammy

[ivan.popelyshev]

When I said "defaultAnchor"  - I cant really describe it all here. You have to look in source code, search for that word and figure out whether you can use it  Also, AnimatedSprite is a basic animation, its definitely not enough for spritesheets that you use - so you have to look in the source, copy it , adjust to your case.

[takashy]

Hello,

Thanks for help.

Jammy i go for container method, this work well.

Anyone know how i can generate a json for pixi from an existing sprite sheet ? like posted above?

The only solution iv found is to split spritesheet on multiples images and then create a spritesheet.. 

 

[Jammy]

Can you explain what you mean by make it from an existing sheet? The tools you mentioned do appear to export JSON/Pixijs. i think if you have a sheet with no JSON right now, you will need some tool to section it up and name each sprite I guess?

Alternatively be a savage and write your own, sample below in nodejs (this is by no means re-usable and i've just c+p'd it from my source).

 

atlas = {};

atlas.frames = {};

atlas.meta = {
	"app": "Jammys fudge packer",
	"version": "1.0",
	"image": "png/tileset.png",
	"format": "RGBA8888",
	"size": {"w":1088,"h":1216},
	"scale": "1"
};

for (var i=1; i < 17; i++) {

	for(var j=1; j < 17; j++) {
	
		refName = i + "," + j;
		

			x = (i-1)*tileSize;
		
		
			y = (j-1)*tileSize;
		
		
		
		atlas.frames[refName] = {
			"frame":{"x":x,"y":y,"w":tileSize,"h":tileSize},
			"rotated": false,
			"trimmed": false,
			"spriteSourceSize": {"x":x,"y":y,"w":tileSize,"h":tileSize},
			"sourceSize": {"w":tileSize,"h":tileSize},
			"pivot": {"x":0.5,"y":0.5}		
		};
	
	}

}



fs.writeFile(relativeFolder+'/atlas.json', JSON.stringify(atlas), function(err) {
	if(err) {
		return console.log(err);
	}

	console.log("The json file was saved!");
}); 

 

[ivan.popelyshev]

14 hours ago, takashy said:

Hello,

Thanks for help.

Jammy i go for container method, this work well.

Anyone know how i can generate a json for pixi from an existing sprite sheet ? like posted above?

The only solution iv found is to split spritesheet on multiples images and then create a spritesheet.. 

 

there are tools to detect those frames, but if you have a formulae you can just do regular "new PIXI.Texture(baseTexture , new PIXI.Rectangle(x,y,w,h));` 

 

[takashy]

Hello,

Thanks again.

 

Yes i have an existing spritesheet and i want to export a json of it..

@ivan.popelyshev Can you tell me which tool can do that ? tried free text packer, shoe box and others but the only way iv found is to export first on multiples images (split sheet) and then create a sprite sheet of this multiples images.. but i don't want to do this i already have a spritesheet

 

[ivan.popelyshev]

there was one guy in one russian chat that had to do it for phaser, and published it somewhere on github ) I will search for him , but no guarantees

[takashy]

Ok thanks really appreciate.

 

[takashy]

Hello guys, finally i followed savage method mentionned by @Jammy

Riguarding items on sprite.. i tought if instead of manupulating textures.. what about merging directly spritesheet png and reload this?

anyone tried this way ?

ex:

I have body sprite sheet

When player equip armor, the spritesheet of armor merge with spritesheet of body so i have a ready equipped spritesheet and manipule only one sprite.

 

Edited July 22, 2020 by takashy

[Jammy]

You savage! Haha.

In my opinion the method you have suggested will work only if there are not many combinations, for example if you have 100 bodies and 100 armors, thats 100x100 = 10,000 textures. You may also introduce boots, hats, etc which would then square this further. The same example with separate sprites would mean just 200 textures (for 1 direction/sprite).

edit; Further to this, if you have used the container method, you could extend the container (class Player extends PIXI.Container) and then inside the class have "setDir" as a function, which updates both sprites.)

Edited July 22, 2020 by Jammy

[takashy]

With method mentionned i created one spritesheet (body.png) so maybe 20 textures..

If player equip an item (hat), i would merge spritesheet of hat with spritesheet of body and got a finally spreetsheet named body.png with hat on it

So textures not changing.. is always 20 textures

if i open body.png spreet sheet and open hat sprite sheet on it over photoshop, i got a spriteeshet with body and hat..

so i can just merge png without pixi and when spritesheet change, reload it over pixi

understand what i want to do?

 

 

Edited July 22, 2020 by takashy

[Jammy]

Yup, this method works but is not flexible (e.g. adding new armours to the game later, etc) but if you want just the two sprites combined, for sure do it in photoshop or something.
 

But again, keep in mind this is exponential, every time you add a new "layer" e.g. hat or armour or a new sprite sheet, that is a new amount of textures required goes up exponentially.

Also this will have an impact on the network, for each PNG the user will have to download that spritesheet, rather than the raw sprites that are later stacked.

Have to say though, this is going very deep into the rabbit hole, and it's always best to KISS (keep it simple silly). Get something working and experiment.