New Flowcharts feature in r370

Post reply
1 favourites
From the Asset Store
Kids Game
$24.50 USD
50% off
New Sounds Added Update: 115 new sound effects added for no additional cost!
Epic Stock Media's avatar
Epic Stock Media

  • I've been tinkering a bit more with the feature, but since I wanna do more stuff in javascript I was bit limited since there's no API for the flowchart (yet). But the point is I just couldn't resist finding some ways to circumvent the restrictions with the power of javascript. Thought I'd share.

    The ~ denotes an option with an expression inside and I use eval() to then execute the logic inside the value. If the result is an empty string, the option is not added. 

    	async function addOption(optionName, optionValue) {

	var evalOption = /^~/i;
	
	if(evalOption.test(optionName)) {
		optionValue = eval(optionValue);
		if(optionValue === "") return;
		await globalThis.UImain.insertContent(`<div class="option" id="${optionName}">${optionValue}</div>`, "html", true, ".options");
	}
	
}

    It's moderatly elegant I'd argue unless you're scared of eval() lol.

  • I'm loving the flowchart feature. A few people have pointed out the inability to loop nodes back on each other and I'd just reiterate this - for dialogue trees, behaviour trees, etc. this is a pretty critical functionality. I've played around with workarounds but they're clunky and not really sustainable. Is it safe to assume this is in the works?

    Additional question: Is it possible to have multiple tags per node? It doesn't appear so but I may be missing something.

  • I've spent a few days working with flow charts to implement a simple dialogue system in my next project. After working on Bilkins' Folly and dealing with all the complex dialogue trees in that game (composed in Dialogue Designer), I really wish flow charts were a thing a few years ago!

    I have a few recommendations, at least some of them I suspect are already planned.

    • Select multiple nodes at once using drap and drop. Right now, it seems like only one node can be moved at a time, which is a problem when trying to organize large charts.

    • Drag from a node to create a new node. Much like how Unreal's BP allows you to quickly create a new node if you drag from a pin to an empty space.

    • Duplicate nodes - dragging a node while holding alt should create a copy of that node.

    • More workspace – preferably infinite. Creating nodes left-to-right, it didn't take long to reach the end of the workspace. It doesn't help that the default node starts in the middle of the workspace instead of over to the left.

    • More zoom out. Right now it seems you can infinitely zoom in, but zoom out gets stopped before revealing the full canvas.

    • A mini-map. Once devs start making huge flowcharts, it's useful to have a minimap available that can be used to quickly pan through the workspace.

    • Commenting an area. Preferably in the style of BP that allows colour coding and grouping of nodes.

    Other node types and tweaks. This is probably a bit more specific to treating flow charts as a dialogue builder, however I feel these suggestions would make flowcharts even more powerful:

    • Character fields - Specifically for a dialogue system, you often need to know what character is speaking and what animation (or frame if it's a static image) to display. A character field (or some other way of accessing additional data on a per-node basis) would be handy for this. Right now, it's possible to do this by utilizing the default field, but that's kind of annoying as you're always making new fields on node creation.

    • The 'execute code' node - Right now, I'm using the tag field to execute specific pieces of code using tokens. It's a bit clunky as an entire node needs to be created in order to access this. An 'execute code' would essentially just be a tag and nothing else. It would help reduce bloat and is actually a super powerful way of handling logic inside of a dialogue loop. For Bilkins, I had over 30 different codes that I could call from a simple tag-like node and signal the game to do something.

    • Conditional branches - a binary node that outputs either true or false based on a condition. Could either take in a global Boolean (or flowcharts could be given their own variables) or it could remain up to the developer to determine how to feed conditions into it. This can be expanded with logic operators to make it more powerful.

    • Random branches – this node has multiple outputs and randomly picks one to go next. Useful for dialogue in situations like greetings where you might want an npc to mix up their message each time the player interacts with them.

    Ta!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • It makes sense to support connecting to parent nodes and own nodes

    For example, in some games there are some "trap" or "ask" options that will return to the current node when player select. 

    What do you want to know?
 - What is {quest}?
 - Who is {npc}?
 - Option 3
 - Option 4

    what do you do first
 - use hand			-> die
 - use tools		-> survive
 - shout for help	-> die
 - do nothing		-> die

    After their process ends, they will return to the parent node.This is common in many games.

    Currently, although it is possible to manually add an special Output Name to record the parent node, And through the eventsheet and then position it. But it is not a convenient visualization solution, Just an auxiliary field. it would be more convenient if it could be supported directly.

    But supporting this function will also face a problem, the lines will become confusing.

    a by flowchart demo Adrian Raudaschl

  • But supporting this function will also face a problem, the lines will become confusing.

    I work with in-house tool to build branching dialogue and we minimise this issue with a 'link to' node - a simple node that, upon entered, immediately redirects to another, somewhere else in the flow.

  • XHXIAIEIN Agreed!!! We need the ability to link back to a parent node and link a node back to itself very badly. I don't think messy arrows is a big deal. I can live with it for a while as long as the functionality is there. But arrow management will also need to come *eventually*.

  • I've spent a few days working with flow charts to implement a simple dialogue system in my next project. After working on Bilkins' Folly and dealing with all the complex dialogue trees in that game (composed in Dialogue Designer), I really wish flow charts were a thing a few years ago!

    I have a few recommendations, at least some of them I suspect are already planned.

    • Select multiple nodes at once using drap and drop. Right now, it seems like only one node can be moved at a time, which is a problem when trying to organize large charts.

    • Drag from a node to create a new node. Much like how Unreal's BP allows you to quickly create a new node if you drag from a pin to an empty space.

    • Duplicate nodes - dragging a node while holding alt should create a copy of that node.

    • More workspace – preferably infinite. Creating nodes left-to-right, it didn't take long to reach the end of the workspace. It doesn't help that the default node starts in the middle of the workspace instead of over to the left.

    • More zoom out. Right now it seems you can infinitely zoom in, but zoom out gets stopped before revealing the full canvas.

    • A mini-map. Once devs start making huge flowcharts, it's useful to have a minimap available that can be used to quickly pan through the workspace.

    • Commenting an area. Preferably in the style of BP that allows colour coding and grouping of nodes.

    Other node types and tweaks. This is probably a bit more specific to treating flow charts as a dialogue builder, however I feel these suggestions would make flowcharts even more powerful:

    • Character fields - Specifically for a dialogue system, you often need to know what character is speaking and what animation (or frame if it's a static image) to display. A character field (or some other way of accessing additional data on a per-node basis) would be handy for this. Right now, it's possible to do this by utilizing the default field, but that's kind of annoying as you're always making new fields on node creation.

    • The 'execute code' node - Right now, I'm using the tag field to execute specific pieces of code using tokens. It's a bit clunky as an entire node needs to be created in order to access this. An 'execute code' would essentially just be a tag and nothing else. It would help reduce bloat and is actually a super powerful way of handling logic inside of a dialogue loop. For Bilkins, I had over 30 different codes that I could call from a simple tag-like node and signal the game to do something.

    • Conditional branches - a binary node that outputs either true or false based on a condition. Could either take in a global Boolean (or flowcharts could be given their own variables) or it could remain up to the developer to determine how to feed conditions into it. This can be expanded with logic operators to make it more powerful.

    • Random branches – this node has multiple outputs and randomly picks one to go next. Useful for dialogue in situations like greetings where you might want an npc to mix up their message each time the player interacts with them.

    Ta!

    For Conditional and Random branches. I reckon being able to decouple outputs from options/values by manipulating the routing of outputs with conditions in events

    would bring that and much more requested in this thread.

    I am myself also looking into using it as dialogue editor for a Point n Click adventure game and the flowchart would actually look really close to the UI for in-game dialogue options (very user friendly), if I did not have to create a lot more nodes just to specify routing and conditions, which works against the visual appeal of using Flowcharts in my opinion.

  • I haven't seen this yet, and will look at it today, but can someone who has seen it tell me if the flow chart has the following:

    Ability to change variables

    Has IF/THEN/ELSE commands?

    I've been using a program called Arcweave, and created an interface that allows me to have Construct 3 understand it. It's not been easy, and I shelved the project when I saw Construct was getting FlowCharts, but it needs to be more or just as powerful as Arcweave.

  • How should Flowcharts solve the localization?

    If I Duplicate a flowchart file for each language, If I want to change Something, I have to edit it again n times, which is obviously unreasonable and error prone.

    If working with i18n plugin, I need to create a JSON file to manage it. This means that I need to maintain a path similar to flowchart in the JSON file again. And fill in the placeholder for this path in the flowchart.But this obviously loses the convenience of visualizing flowcharts. What better way to cooperate with the i18n plug-in?

    For example: #open=flowchart-questionnaire

    • Tab 1

      I extracted the JSON file of Flowchart from the project file and cleaned up other data: file.json

    • Expand
      {
	"name": "Questionnaire",
	"locale": "en-GB",
	"strings": {
		"nodes": [
			{
				"outputs": [
					{
						"name": "Message",
						"value": "What kind of content do you want to make?"
					},
					{
						"name": "Option1",
						"value": "Games"
					},
					{
						"name": "Option2",
						"value": "Animations"
					}
				]
			},
			{
				"outputs": [
					{
						"name": "Message",
						"value": "Try Construct Animate! Use the timeline to build sequences of movements and changes over time, and export as a video, GIF, or image sequence."
					},
					{
						"name": "Link",
						"value": "https://animate.construct.net/"
					}
				]
			},
			{
				"outputs": [
					{
						"name": "Message",
						"value": "Are you interested in using coding to develop games?"
					},
					{
						"name": "Option1",
						"value": "Yes"
					},
					{
						"name": "Option2",
						"value": "No"
					}
				]
			},
			{
				"outputs": [
					{
						"name": "Message",
						"value": "Try using Construct 3 with its event block system. It's a drag-and-drop alternative to programming languages which is easy to learn and yet powerful enough to build sophisticated games with."
					},
					{
						"name": "Link",
						"value": "https://editor.construct.net/"
					}
				]
			},
			{
				"outputs": [
					{
						"name": "Message",
						"value": "Do you already know how to code with JavaScript or TypeSript?"
					},
					{
						"name": "Option1",
						"value": "Yes, I know JavaScript"
					},
					{
						"name": "Option2",
						"value": "Yes, I know TypeScript"
					},
					{
						"name": "Option3",
						"value": "No"
					}
				]
			},
			{
				"outputs": [
					{
						"name": "Message",
						"value": "See our tutorial 'Construct for JavaScript developers quick start guide' for an introduction on how to use your existing JavaScript coding knowledge with Construct."
					},
					{
						"name": "Link",
						"value": "https://www.construct.net/en/tutorials/construct-javascript-2866"
					}
				]
			},
			{
				"outputs": [
					{
						"name": "Message",
						"value": "See our tutorial 'Using TypeScript in Construct' for a guide on how to use your existing TypeScript coding knowledge with Construct."
					},
					{
						"name": "Link",
						"value": "https://www.construct.net/en/tutorials/using-typescript-construct-3003"
					}
				]
			},
			{
				"outputs": [
					{
						"name": "Message",
						"value": "See our free 13-part course 'Learn JavaScript in Construct', which teaches the basics of JavaScript coding in Construct!"
					},
					{
						"name": "Link",
						"value": "https://www.construct.net/en/courses/learn-javascript-construct-79"
					}
				]
			}
		]
	}
}

  • That's actually an important question, the two plugins need to work together somehow. The simpler the better of course.

  • I think it's straightforward to have translatable flowcharts: instead of an actual piece of text in a value, put the translation key, and look it up for the current language when displaying it.

  • I think it's straightforward to have translatable flowcharts: instead of an actual piece of text in a value, put the translation key, and look it up for the current language when displaying it.

    It may not be necessary to fill in the translation key, but to find a better way to manage the path. When obtaining output content, point to the translation file based on the relative path.

    But the question now is, how to organize this structure? 

    strings.nodes[NodeIndex].outputs[OutputIndex].value

    Especially for this NodeIndex, Once it can be identified, localization can be achieved by directly editing the JSON source file of Flowchart, utilizing its existing structure.

  • I think it's straightforward to have translatable flowcharts: instead of an actual piece of text in a value, put the translation key, and look it up for the current language when displaying it.

    Hmm it would be great though if there would be a way to preview the result though... Because this would obfuscate everything quite a bit.

  • I haven't seen this yet, and will look at it today, but can someone who has seen it tell me if the flow chart has the following:

    Ability to change variables

    Has IF/THEN/ELSE commands?

    I've been using a program called Arcweave, and created an interface that allows me to have Construct 3 understand it. It's not been easy, and I shelved the project when I saw Construct was getting FlowCharts, but it needs to be more or just as powerful as Arcweave.

    Just had a look at the new flow chart, and without meaning to sound offensive, I'm honestly massively disappointed. You can't even create loops back to an earlier piece of dialogue without having to create a link and some events that control this. Which means for every future project, you need to jump through the same hoops just to achieve this result.

    Did anyone look into the software I recommended? I understand being able to combine the flow chart with the event sheet, but NEEDING to connect it to the event sheet is another thing entirely.

    I just looked through the example project, and it's incredibly hard to navigate. I'm constantly having to flick from one flow chart to the event sheet, then back over to the first flow chart again to see where you're meant to look next.

    In the software I posted, you literally just create a "Jump"... then double click on the Jump and you're at the next point. Also, you can easily create loops.

    The other version allows me to place sprites directly into the flow chart, allowing me to choose backgrounds, characters, etc, quickly and efficiently.

    My point is, if there are examples of incredible and efficient ways of doing flow charts, why are we given something that feels like it's so incredibly outdated?

    Again, I want to emphasise that I am not meaning to sound rude or ungrateful. I was very excited for this feature, and I understand that it's likely to get more work in the future, but it just feels like it's heading in the wrong direction, imo.

    It's like looking at Discord, then creating MSN Messenger and considering it a good alternative.

  • Take this as an example:

    Options 1 and 2 are both fruit... so why can't I have both options connect to the respective branch?

    Instead, I have to change option 2 so it's a tag, and then create an event that tells it to jump to the correct message.

    This means that I might as well not bother with the link at all, and just use tags everywhere, but this will quickly get messy, especially if I want to make any changes to the flow in the future.

    I just don't get it.

    Also, if I want to remove a link from A to B, I have to destroy ALL links that connect to one or the other. Most programs simply allow us to drag the link away from the connection point to delete it, but here I have to right click it, then click delete??? Why? Why add this extra step?

    Say I had (for whatever reason) 10 links connecting from A, and 10 connected to B. What are my options for removing just 1 of those links? Why can't I just click on the actual line and delete it?

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)