Ability Blueprints

[andretchen0]

#1469

I'm trying to implement abilities in the Vue offshoot of the project.

I'm playing around with the FSM approach I asked about here a little while ago. So far, so good. But one thing it doesn't address is approachability, I think.

To my mind, this is a bit of a problem area. It's currently pretty tough to add/change abilities. I think an FSM is a more natural fit, but it'll still be a lot of code.

I wondered if something like Blender's node editor (or Unreal Blueprints) UI would make things more approachable.

Rete

I found the npm library Rete, which doesn't have a slick UI, but it does have a Vue plugin. What's more, the graphs can be converted to executable code, or run as is.

Too bulky?

The current UI is a little bulky, though. This is more or less what would be needed just for the requirements check of a single ability:

• Does the activeCreature have at least 30 energy?
• Is there at least 1 creature opposing activeCreature?

Here's the equivalent JS pseudocode, just for a size comparison. It's a lot more compact.

const matchStore = useMatchStore();

const activeBeast = matchStore.activeBeast;
const energyCost = 30;
const hasRequiredEnergy = activeBeast.energy >= 30;
const hasOpponents = matchStore.beasts.filter(other => other.playerId != activeBeast.playerId).length >= 1;

if (hasRequiredEnergy && hasOpponents) {
    console.log("can run ability");
}

Is the UI too bulky for no more than it does?

More

Note that neither version checks if there are enemies around activeCreature. I'd need to make another custom node – maybe one that lets the writer define affected hexes directly in the node by clicking on graphics. That could really make the UI version a lot more interesting.

Note that the nodes are defined in JS and I have them pulling fields directly from the pinia data store of the project – match and beast nodes just loop through the fields make them available as sockets. That's pretty neat.

Thoughts?

Is this worth following up on?

Just wanted to take the pulse. No promises or obligations.

[DreadKnight]

It's an interesting idea. Looking into Rete, seems like a pretty cool project. I'm all for visual programming / drag'n'drop if done right.
Blender's nodes rock, though I'm not that good with them for now, but that's the direction it's heading, everything nodes ideology.

While the code is easier to read and such, I'm bad with coding and I think the future or coding should be more graphical.
A dark background and less saturated colors for the nodes (or grey) would have helped with readability quite a lot imho.
Hopefully those nodes can be easily be themed via some CSS config file or so, to be darker, maybe use black/grey/red.

[andretchen0]

While the code is easier to read and such, I'm bad with coding and I think the future or coding should be more graphical. A dark background and less saturated colors for the nodes (or grey) would have helped with readability quite a lot imho. Hopefully those nodes can be easily be themed via some CSS config file or so, to be darker, maybe use black/grey/red.

I haven't tried styling the components, but there's this example which is styled by CSS.

[DreadKnight]

That looks pretty good overall, except the purple color. We could fork it I guess 😆

[andretchen0]

We'd have to write our own components anyway. Overriding the colors with CSS doesn't look too difficult.