Best tools for graphic designers to work for Pixi.js

[SubtePass]

Hi, I'm hoping you can share some ideas with me! I'm making web based games with Pixi.js and I'm having a bit of a hard time working with the graphics design team (this is not a developers vs designers issue!). I'm trying to find the best workflow that might help us both do our jobs faster, but I can't seem to find the right tool for it!

The designers sketch and build the app in Photoshop, and I work in Typescript with Pixi. So... what we've tried so far was: they sketch up in PS and then generate all assets with TexturePacker, leaving me with a json file which I can easily import into my game. The downside of this is that I have to position every asset and create every container manually (or rather using a config file, but still that's kinda manual work).

Our second attempt was that they sketch up in PS, then export that to Adobe Animate, and using the PixiAnimate plugin, they then create the files for me to use. This has improved our workflow, because I don't need to position anything nor create the containers, but there are still some flaws as they are not able to test interactive elements (they can't see how a button actually reacts unless I implement it), and I would love to not depend on Animate which seems fairly deprecated nowadays, and on an external plugin which is out of our control.

Plus, designers (at least ours) do not think as programmers, and they don't make variable names easy for us. PixiAnimate creates objects using the instance name they put on Animate, but they don't follow any guidelines. If they have four items of the same group, they call them "item_1", "item2", "this_is_the_third_item", and "last_one". If there's a tool that can validate this prior to exporting (setting some kind of rules, like prefixes for elements), that would be awesome.

So yeah, I'm asking for a magical tool. I know it doesn't exists, and I know some adjustments are necessary on both sides, but I'd love to hear from you guys, how do you work with your graphics team, what do they use and how do they deliver the assets to you!

 

Thanks! 

[ivan.popelyshev]

Congrats with first post! 

@bigtimebuddy is the author of pixi-animate.

There's a way to do something with tiled through https://github.com/eXponenta/pixi-tiled , and if you are making playable ad there's even a project with it: https://github.com/eXponenta/pixi5-playables-boilerplate

One of the problems is that pixi doesn't have attach function like in https://github.com/mrdoob/three.js/blob/dev/src/core/Object3D.js#L436 , another is the naming problem you mentioned. Author of pixi-tiled and playable-ads knows how to solve them, its possible and i saw several projects on it. 

One deep future possibility is the direct support of SWF format. I'm working on it for 2 years already, but i dont think i can publish it this summer, maybe it'll be ready for public release in autumn

[SubtePass]

Thanks for you answer, Ivan! Ideally I'd love to not depend on SWF files, or Flash based solutions at all, our designers here never worked with Flash before, they usually work with Illustrator, Photoshop, etc... is there a magic tool that can take a PSD and convert it to something PIXI would understand?

[ivan.popelyshev]

Here's Tiled: https://www.mapeditor.org/

Yeah, the problem is that all big teams who use pixi have their own pipelines

[ericente]

On my team, when making games with PixiAnimate, typically there needs to be a fair bit of communication between the developers and designers. One thing that can make this process easier, especially with designers less experienced with Animate is if the developer creates a structure in Animate with "programmer art", with instances names, etc already in place that the designer can then open up and make changes to. This way, there is already functionality for things like buttons and the designer can see their changes in context right away. Early in a project, there needs to be a tight communication loop between designers and developers, but toward the end of the project, it's very easy for designers to independently go in and make updates.

PixiAnimate is open-source, so while it's not totally in your control, you could start using your own fork of the plugin (not preferred), or make improvements and submit a pull request back to the main project (much appreciated!). PixiAnimate is not the perfect tool for every project, but it is great for getting designers more involved throughout the project, taking a lot of the burden of making visual updates off of the shoulders of developers. The biggest "gotcha" bug I'm currently aware of is with text objects on an animated timeline - there are some issues with exporting the positioning of text when its position (or existence) changes over the course of a timeline. This can be worked-around by containing the text in a Symbol before animating it. PixiAnimate is not yet compatible with Pixi.js v5, which was released about a month ago, but I expect to have it updated by the end of the summer. 

For validating naming conventions, perhaps you could try writing a JSFL script to run as a Command in Animate. Speaking of JSFL scripts, this one is very useful for working with PixiAnimate, it non-destructively converts a layered timeline into bitmaps (and also back to the original art), which is useful if you have complex vector or compound bitmap graphics, or need to rasterize an large object at the size it is being used: https://github.com/SpringRoll/FlashToolkit/blob/master/src/Commands/Utilities/Copy Layers To Bitmap.jsfl

[SubtePass]

Thank you ericente! This is absolutely marvelous  I agree completely on what you say, maybe we just need to improve communications, we've discussed several times about naming conventions and things like that, but in the end sometimes they do what it's best for designers, which is not naming things... I thought that maybe having a tool that would force them to follow certain guidelines would help. Using a JSFL script is actually a pretty good idea!

Ideally, I'd love to be able to discard Animate completely, I don't really like it much, but that's more of a personal opinion I think.

Anyway, thanks for your feedback!

[PixelPicoSean]

You can find a tool to generate JSON file and write a custom PIXI loader for it. I've done similar stuff, here's my in-house framework: https://github.com/pixelpicosean/voltar It is PIXI based, and I have scripts to convert Godot scenes into JSON and load. I've gone that way too far, even heavily modified PIXI to support this workflow though. You can do same thing without modify PIXI at all, only write scripts for features you want (layout with containers/sprites) which I think is fairly easy.

[jonforum]

dont forget https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop
it also create a json and template from photoshop projets

[SubtePass]

Thank you for your answers! I was thinking about creating a custom tools, but I figure this should be a fairly common issue so there had to be a solution out there

I didn't know about that PS to Spine exporter, that looks really promising! I'll take a look at it! Thanks!

[jonforum]

look the video, it will inspire you to make you own importer.
It optimised for spine2D , but the json have all information.
You can also try make your own actionScript and copy some code from this script.
Just read licence carefully, am not sure if is M.I.T and you allow to copy source.