Forum Discussion
Controlling Illustrated Characters via JS?
I haven't had much professional call to use the illustrated characters much, but I do appreciate them, especially after learning about the expressions, poses, and perspectives that can all be LEGO'd together. A huge variety of characters and poses can be created, especially since "off-label" uses multiply their potential.
Being able to control all of those with JavaScript would enable us to develop better narrative training more efficiently. I've been stumbling around a bit with the obj.state assignment but neither 'happy' nor '_happy' work, so I'm probably grasping in the dark.
I do get that I can create states of an image and build the combinations of poses, expressions, and perspectives in there, but then they'll be cemented, won't they?
If anyone instead knows a way to dynamically change a character's expression, perspective, or pose with JS--or if this is on the way--I think we may have the beginnings of a visual novel engine... 🤔
3 Replies
You can use the object().state property to set slide objects to either the "Normal" state or a custom state. When you add characters to the slide, they adopt the Normal state and whatever pose/expression you selected is assigned to that state. Under the States tab, you can edit and add additional states for a slide object. You can select the character state you desire from the list of possible states, and add that to the state list. The names will match the list, so something like "Surprised", or "Disappointed", etc.
When adjusting states in JavaScript, use Normal to set the normal state, or use one of the custom state names you added (matching the case of the name). You have to explicitly add the state to the list for it to be available from JavaScript.
Note: When testing from the developer panel, if an invalid state was assigned to the object, for example object("####").state = "Default", then all later state assignments also failed, even if correct. I don't know if this issue persists within Storyline project triggers, but it may be a bug and should be kept in mind. If you accidentally assign an invalid state via JavaScript, then they may stop working altogether.
Also, you can assign a Disabled or _disabled state, but I'm not sure what that does since it does not actually become disabled. You can also assign a Hidden state, but if you do you can't unassign it via JavaScript. It just stays hidden.
Thank you, Nathan, this is really helpful. I'd definitely been hoping for a way that didn't require concreting a state for each combination of expressions and poses. I think the sitting-down-talking-on-the-phone pose emoting sixteen expressions as easily as the pointing pose or any other is really multiplicative, and being able to instantly replace either the pose, expression, or perspective of a paper-doll character seems a no-brainer to me for programmatic narrative development.
I mentioned the underscore because I could've sworn I'd recently seen a post where normally-unavailable states could be accessed by prepending them with an underscore. That the expression states exist in the trigger dropdown but not in the API makes me think they're just cordoned off (and if so, for a reason.)
If expressions and poses can be changed via the API and their names are consistent across characters, we just need an abstraction layer. I'm developing a partial prototype that takes something like the below and manipulates objects on the canvas much like visual novel engines do.
let Carl = new Character(object(objID)); // objID maps to Carl's character image
Carl.enters('fromLeft');
Carl.smiles().says('Welcome to this course.');
Carl.waves().says('Follow me!');
For it to scale though I'm thinking would hinge on either a .story template with characters preloaded and fully-mapped (less-than-ideal homebrew) or exposure to also programmatically setting the Character poses and perspectives along with the expressions.
Nedim made a post a while back that mentioned some underscored state names as possibilities, although I'm not sure if they actually work (or work anymore). '_default' is a synonym for Normal.
I believe the character graphics are only downloaded to the project if specifically requested at design time. Once downloaded, they are assigned to a state, or the Normal state. Likely the only way to access these is to setup all those you need (i.e., download each) during design.
Another possibility, still tedious but a one and done for all future uses, is to download all of the poses for a character, export them as images, include them into your project as a package (e.g., web object), and then programmatically cycle through them (i.e., swap image sources) as needed according to an established index map, potentially skipping states altogether. I posted some kind of example related to this several months ago.
