XHXIAIEIN's Forum Posts

  • 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.

  • 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"
					}
				]
			}
		]
	}
}

  • 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

  • You can edit the CSS style.

    for example 

    textarea
{
	font-family: 'Lato', sans-serif;
	font-size: 35px;
	line-height: 40px;
	color: #ecf0f1;
	background-color: #34495e;
}

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • You can check this example: #open=multiplayer-chat. In fact, the user client page part of this example is completed by just a few textarea components.That is the custom html page you want.

    Or if you want to access the SDK of multiplayer objects through Javascript

    #open=multiplayer-scripting

  • You can use BBcode 

    [outlineback=#FFFFFF]Hello World[/outlineback]
[outline=#FFFFFF]Hello World[/outline]

[lineThickness=2][outlineback=#FFFFFF]Hello World[/outlineback][/lineThickness]

  • There doesn't seem to be a good way to check wrapping characters. So can only manually calculate the position where you want to wrap the line.

    cdn.discordapp.com/attachments/1115561404754305024/1187628614246727750/Scroll_Text.c3p

    This is based on this Example by dop2000.

  • try to use FILE (WEBVIEW2)

  • Here is a example

  • You can check this example.

    #open=touch-zooming

    ---

    If you want it to be bound to the the viewport, you can add this section 

    {"is-c3-clipboard-data":true,"type":"events","items":[{"eventType":"comment","text":"Viewport"},{"eventType":"variable","name":"boundLeft","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"boundRight","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"boundTop","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"boundBottom","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"comment","text":"ZoomScale"},{"eventType":"variable","name":"UseWidthScale","type":"boolean","initialValue":"false","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"WidthScale","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"HeightScale","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"minZoomScale","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"maxZoomScale","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"block","conditions":[{"id":"on-start-of-layout","objectClass":"System"}],"actions":[{"type":"comment","text":"Viewport Bound"},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"boundLeft","value":"(ViewportLeft(\"UI\") + ViewportMidX(\"UI\")) / LayoutScale"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"boundRight","value":"LayoutWidth - (ViewportRight(\"UI\") -ViewportMidX(\"UI\")) / LayoutScale"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"boundTop","value":"(ViewportMidY(\"UI\") - ViewportTop(\"UI\")) / LayoutScale"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"boundBottom","value":"LayoutHeight - (ViewportBottom(\"UI\") - ViewportMidY(\"UI\")) / LayoutScale"}},{"type":"comment","text":"Viewport Aspect Ratio"},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"WidthScale","value":"ViewportWidth(\"UI\") / LayoutWidth"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"HeightScale","value":"ViewportHeight(\"UI\") / LayoutHeight"}},{"type":"comment","text":"Zoom Scale"},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"minZoomScale","value":"UseWidthScale ? max(WidthScale, HeightScale) : min(WidthScale, HeightScale)"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"maxZoomScale","value":"minZoomScale * 3"}}]}]}

    Used: 

    clamp(scrollx, boundLeft, boundRight)
clamp(scrolly, boundTop, boundBottom)
clamp(LayoutScale, minZoomScale, maxZoomScale)

    And uncheck the Unbounded scrolling property

  • construct.net/en/tutorials

    Tom The delete button is placed here and it is very easy to press it by mistake, Please make it a text hyperlink and Swap the their position.

    OR placed on the tutorial page.

  • Thank you for your great work!!

    I think it would be perfect for a game like Choice of Life: Middle Ages and Yes, Your Grace and Sort The Court and Pilgrims

    ----

    I have a few polishing ideas:

    • New r373

      8. When Output is selected, the context menu use 'Remove' output to distinguish 'Delete' Node options

      I had a bold idea, if Flowcharts can work like JsonCrack?

      jsoncrack (github)

      1. Add a format button, Automatically sort node, no need to manually organize spaghetti.

      2. displayed as JSON (without editor node data)

      the editor's zoom and search functions also make sense.

      1. Zoom to fit

      2. Collapse Nodes

      3. Focus to First Node

      4. Search Node

    • Tab 1

      Content

    • Archived

      7. If the node can be named, it will help better manage the flowchart page

      6. Allow top-down organizational structure (Flowchart properties)bold text

      5. Context Menu on Out component Add a 'Go to' function, allowing the editor to focus on nodes.

      4. importing/export the flowchart AsJSON for external editing. If it can converted to data files, it would be even cooler! people can write flowchart data from external excel and import it into the flowchart with just a simple work.

      3. Allow 'Add Output' in the property bar (like add instance variables) which can better utilize the working habits of Construct

      the same context applies to nodes

      2.delete confirmation

      1. When dragging the node, keeping the output width small, But rather drag the column of Value.

    -

  • C3 plug-ins are stored in the browser cache. If you clear the browser cache, the data will not exist.

    But you can check Bundle addons in the project properties, it can help you store the third-party add-ons used in the project along with the project file.

  • That doesn't usually happen, did you manually clear the browser cache? Or using a different browser ?