Possible to dynamically change properties of a graphic?

[mjohnsonsa]

Lets say you have an options screen where you are outfitting a character. The character is in the middle of the screen (like a cartoon viking) and he is animated on a loop (swinging ax). The user has a properties palette at the bottom of the screen where they can outfit their character (add a hat, change color of armor, change ax to a bat, etc.) how do you make the character who is an animated vector dynamically change to reflect the changes the user is making to that character? Do you start with a standard vector and layer on top of it? the problem I see is I want him animated as he stands their (some games you see the character kind of bouncing, looking around, etc while you are building them) so I am not sure how to programmatically change attributes of an animated graphic... any help on how this would be accomplished would be appreciate....

Matt

[mattstyles]

I think for some simple colour changes you might get away with some kind of filter but, more generally, the usual way I've seen of doing this is exactly the type of sprite layering you describe. This is relatively easy if you only have one character (or, more likely, one animation loop) but gets time-consuming to create all the required assets when you have multiple different types i.e. if character type A swings their weapon but character type B flips it in the air then you have to draw all of those frames for each new item or new character type you want to introduce.

[b10b]

There are a few decent tools aimed at this - in particular Spine2D (fee) and DragonBones (free).  Both have runtimes for displaying with most popular H5 game engines (or just canvas).  Their strategy is to separate the concerns of what a character is (bones), what the outfit is (skins) and what the animation is (state).  By blending the state, or using dynamic inputs to adjust target points (using inverse kinematics) the results are quite versatile.  The drawback to these cool toys are runtime payload increase, complexity of asset pipeline, supplemental licenses, yet more skills to be awesome at.

Alternatives might include nested SVG or 3D Meshes (even if used as simple 2D billboards).

[samid737]

To change attributes programmatically,  you can try  an object oriented approach.

An example on how to achieve this in Phaser,: 

In the example, you basically extend the standard Phaser.Sprite object by adding some of your own requirements. The main requirement is that the Sprite must be swappable and so you define your own Swappable object.

To switch properties of A character, you would need some sort of swap functionality. In the example, A swap function is added to the Phaser.Sprite prototype object. The swap function just keeps track of some index, and when you want to change that index, it does so via this function. You can customize the way you want to switch your objects (previous, next) by editing this function.  

Another requirement is to change properties, like sprite color, texture, maybe position etc. In Javascript there is A convenient way to assign properties to an Object, Object.assign(). In the example, you predefine some characters attributes (the beginning part of the code), and when you swap(), use Object.assign() to dynamically change your sprite to match those attributes. Note that these attributes must be valid Phaser.Sprite attributes, otherwise you are assigning things without any purpose, or worse, you could override some properties required by the engine.  

I think it should work for animated sprites too within Phaser, but the problem might be figuring out the display order. You could try to look at groups to deal with this.