Option to choose the colors of the arrows between nodes

[Barbarezza]

It could be very useful to quickly identify sections and have more visual clarity

[blurymind]

can you elaborate on that? Different arrow colour depending on node it comes from?

[Barbarezza]

More like the possibility of being able to independently choose the color of an arrow, a bit like it happens for the upper part of the nodes

[blurymind]

how would that work? it will use the same color as the node?

[FaultyFunctions]

Oh it would be cool if the arrow took the color of the starting node and faded into the color of the ending node?

[blurymind]

that would be awesome, but maybe should be optional? It may get a bit distracting with big files having rainbows all over the place :) not sure how taxing it would be if done with css

[FaultyFunctions]

Not sure why it would be done with CSS. This can be accomplished by adding a gradient to the html5 canvas when the arrows are being drawn inside workspace.js.

[blurymind]

Either way it would be worth investigating performance with the stress test as well as somehow making it optional even somehow theme sensitive

…

On Tue, 6 Jul 2021, 21:03 Faulty, ***@***.***> wrote: Not sure why it would be done with CSS. This can be accomplished by adding a gradient to the html5 canvas when the arrows are being drawn inside workspace.js. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://github.com/YarnSpinnerTool/YarnEditor/issues/270#issuecomment-875044915>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVI26GPWVIO2MR3XCHTTWNOSZANCNFSM46QPDLNA> .

[Barbarezza]

I apologize for the late reply, evidently I did not notice the email that advised me.

It would be very useful to be able to actually change the color of the arrow independently of the nodes, to be able to visualize perhaps some groupings as a whole or to be able to give meanings to colors (for example, a green arrow means access towards a good ending and a red arrow towards a bad ending, and having some independent colors for the nodes could give more visual information on the content of that node, for example "aggressive npc reaction" or "accommodating npc reaction")

Such a system would also allow some flexibility to organize one's work as one prefers.

Sorry for my bad english :(

[blurymind]

it could be that only selected nodes display that gradient indication too. Non selected ones render normally

[Barbarezza]

I totally agree that it should be optional in any case. Surely there would be those who would not use a similar feature and would indeed find it annoying

[FaultyFunctions]

Good ideas. Do you have any thoughts on how color selection for arrows would work? Currently arrows are drawn by looking at the "linked nodes" array list on individual nodes, so there is no actual data for the arrows themselves. Once the UI is figured out, that'll determine the implementation details I think.

[blurymind]

The nodes themselves already have a color selector.I think the node color should be what drives the gradient

This could however be problematic for contrast in some themes.

To be honest i dont see much benefit in such a feature - it may look cool, but has potential corner case issues and adds to the codebase for stuff to maintain. It doesnt really improve usability imo - just creates potential usability issues

[FaultyFunctions]

No I think @Barbarezza is suggesting you be able to choose the arrow color individually for more of an organizational benefit and not have it be linked to the nodes themselves.

[blurymind]

so by arrow color - its one color - not a gradient, correct? In that case we will need to be selective as to what colors can be set - similar to nodes - or we can straight out give you a color selector

How will that data be stored in the yarn format and the json format? Remember that we will need to parse it?
The node links are drawn based on syntax used in the node body.If you remove a link from the node body text, you will also need to clear its color data somehow.
As I see it if you want to color links, you will have to do it where they are created - the syntax.
[[ go to node2 | node2 ]]
maybe we can do this without breaking yarnspinner, knowing this will also affect the player choice color?
[[ [color=red] go to node2[/color] | node2 ]] //colors connection red
another idea is to set the color with a comment like this
[[ go to node2 | node2 ]] //color=red

Also will this new color marker on connections be useful for the actual story of the game? It seems like a lot of extra work for no practical benefit to the game being made with yarn.

A connection is a jump to a node,usually triggered by a player choice or variable

[FaultyFunctions]

Perhaps storing the data in header tags would be a better option similar to position and colorID?

Could be something like:

colorID: 0
position: 256,-448
arrowColorIDs: node2|0,node1|2
tags: 
title: Node_6
---
[[ go to node2 | node2 ]]
[[ go to node1 | node1 ]]

[blurymind]

that could work too :) would @desplesda be happy with adding that to the yarn file spec?

[blurymind]

I am thinking of implementing this in a simpler way for now.

This is so the way the arrow is colored depends on the color of the node it targets.
A nice usability improvement would also be to have a tooltip of the node name when you hover over the arrow - maybe something to look into.