XHXIAIEIN's Forum Posts

  • Really insightful discussion!

    It’s amazing to see how many different ways there are to achieve the same result in Construct.

    I also really liked this old blog post, Common mis-used events and gotchas.

    Ashley: So for maximum performance, avoid "for each" unless you really need it.

    Tips like this are super valuable. I think people really need something like a Construct Cookbook or CheatSheet that shows the best practices for doing things the right way.

    Because there are so many different ways to achieve the same goal, simply taking the time to think about whether to use A or B is already very meaningful.

    — just like Jase00 said, “This is a good example of understanding ‘under the hood’ a bit more so that we can make decisions on what to use and how to structure things.”

  • You do not have permission to view this post

  • Their are the same, there is no difference. The only difference is that the action of Set Layout scale changed to Set Layer scale.

    Eventsheet Clipboard 

    {"is-c3-clipboard-data":true,"type":"events","items":[{"eventType":"variable","name":"minZoomScale","type":"number","initialValue":"0","comment":"","isStatic":true,"isConstant":false},{"eventType":"variable","name":"maxZoomScale","type":"number","initialValue":"0","comment":"","isStatic":true,"isConstant":false},{"eventType":"block","conditions":[{"id":"on-start-of-layout","objectClass":"System"}],"actions":[{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"minZoomScale","value":"ViewportWidth(\"UI\") / LayoutWidth"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"maxZoomScale","value":"minZoomScale * 3"}}]},{"eventType":"block","conditions":[{"id":"on-mouse-wheel","objectClass":"Mouse","parameters":{"direction":"any"}}],"actions":[{"id":"set-layer-scale","objectClass":"System","parameters":{"layer":"\"Game\"","scale":"LayerScale(\"Game\") - Mouse.WheelDeltaY/1000"}},{"id":"set-layer-scale","objectClass":"System","parameters":{"layer":"\"Game\"","scale":"clamp(LayerScale(\"Game\"), minZoomScale, maxZoomScale)"}},{"id":"set-layer-scroll","objectClass":"System","parameters":{"layer":"\"Game\"","scroll-x":"scrollx","scroll-y":"scrolly"}}]}]}

    Layout Clipboard (Tiny) 

    {"is-c3-clipboard-data":true,"type":"layouts","families":[],"object-types":[{"name":"ScrollingBG","plugin-id":"TiledBg","isGlobal":false,"editorNewInstanceIsReplica":true,"instanceVariables":[],"behaviorTypes":[],"effectTypes":[],"image":{"width":8,"height":8,"originX":0.5,"originY":0.5,"originalSource":"","exportFormat":"lossless","exportQuality":0.8,"fileType":"image/png","imageDataIndex":0,"useCollisionPoly":true,"tag":""},"ui-state":[["ScrollingBG",{}]]},{"name":"BoardSprite","plugin-id":"Sprite","isGlobal":false,"editorNewInstanceIsReplica":true,"instanceVariables":[],"behaviorTypes":[],"effectTypes":[],"animations":{"items":[{"frames":[{"width":8,"height":8,"originX":0.5,"originY":0.5,"originalSource":"","exportFormat":"lossless","exportQuality":0.8,"fileType":"image/png","imageDataIndex":1,"useCollisionPoly":true,"duration":1,"tag":""}],"name":"Animation 1","isLooping":false,"isPingPong":false,"repeatCount":1,"repeatTo":0,"speed":0}],"subfolders":[],"name":"Animations"},"ui-state":[["BoardSprite",{"animations":"{\"expanded\":true,\"subfolders\":[]}"}]]}],"items":[{"name":"Layout 1","layers":[{"name":"Background","overriden":0,"subLayers":[],"instances":[{"type":"ScrollingBG","properties":{"initially-visible":true,"origin":"top-left","wrap-horizontal":"repeat","wrap-vertical":"repeat","image-offset-x":0,"image-offset-y":0,"image-scale-x":24,"image-scale-y":24,"image-angle":0,"enable-tile-randomization":false,"x-random":1,"y-random":1,"angle-random":1,"blend-margin-x":0.1,"blend-margin-y":0.1},"tags":"","instanceVariables":{},"behaviors":{},"showing":true,"locked":false,"world":{"x":0,"y":0,"width":1280,"height":960,"originX":0,"originY":0,"color":[1,1,1,1],"angle":0,"zElevation":0}}],"effectTypes":[],"isInitiallyVisible":true,"isInitiallyInteractive":true,"isHTMLElementsLayer":false,"color":[1,1,1,1],"backgroundColor":[1,1,1,1],"isTransparent":false,"parallaxX":0,"parallaxY":0,"scaleRate":1,"forceOwnTexture":false,"renderingMode":"3d","drawOrder":"z-order","useRenderCells":false,"blendMode":"normal","zElevation":0,"global":false},{"name":"Game","overriden":0,"subLayers":[],"instances":[{"type":"BoardSprite","properties":{"initially-visible":true,"initial-animation":"Animation 1","initial-frame":0,"enable-collisions":true,"live-preview":false},"tags":"","instanceVariables":{},"behaviors":{},"showing":true,"locked":false,"world":{"x":645,"y":477,"width":768,"height":768,"originX":0.5,"originY":0.5,"color":[1,1,1,0.5],"angle":0,"zElevation":0}}],"effectTypes":[],"isInitiallyVisible":true,"isInitiallyInteractive":true,"isHTMLElementsLayer":false,"color":[1,1,1,1],"backgroundColor":[1,1,1,1],"isTransparent":true,"parallaxX":1,"parallaxY":1,"scaleRate":1,"forceOwnTexture":false,"renderingMode":"3d","drawOrder":"z-order","useRenderCells":false,"blendMode":"normal","zElevation":0,"global":false}],"scene-graphs-folder-root":{"items":[],"subfolders":[]},"effectTypes":[],"width":1280,"height":960,"unboundedScrolling":false,"vpX":0.5,"vpY":0.5,"projection":"perspective","eventSheet":"Event sheet 1","ui-state":{"propertiesBar":{"properties":[{"name":"Layout","expanded":true,"children":[{"name":"Size","expanded":false,"children":[]},{"name":"Vanishing point","expanded":false,"children":[]}]},{"name":"Effects","expanded":true,"children":[]},{"name":"Editor","expanded":true,"children":[{"name":"Margins","expanded":false,"children":[]},{"name":"Grid size","expanded":false,"children":[]},{"name":"Grid offset","expanded":false,"children":[]}]}],"scrollPosition":0},"layersBar":{"name":"<root>","children":[{"name":"Game","expanded":true,"children":[]},{"name":"Background","expanded":true,"children":[]}]},"grid":{"show":false,"snap":false,"width":32,"height":32,"offsetX":0,"offsetY":0},"marginWidth":1000,"marginHeight":1000,"showCollisionPolygons":false,"showMeshes":false,"showTranslucentInactiveLayers":false,"showSceneGraphConnections":true,"tabColor":[0.9999999999999999,0.95,0.8000000000000002,1],"tabTextColor":null,"layers":[{"name":"Background","propertiesBar":{"properties":[{"name":"Layer properties","expanded":true,"children":[]},{"name":"Scroll & zoom","expanded":true,"children":[{"name":"Parallax","expanded":false,"children":[]}]},{"name":"Appearance","expanded":true,"children":[]},{"name":"Effects","expanded":true,"children":[]},{"name":"Editor","expanded":true,"children":[]}],"scrollPosition":0},"visibleInEditor":true,"locked":false,"parallaxInEditor":false,"opacity":1,"translucent":false},{"name":"Game","propertiesBar":{"properties":[{"name":"Layer properties","expanded":true,"children":[]},{"name":"Scroll & zoom","expanded":true,"children":[{"name":"Parallax","expanded":false,"children":[]}]},{"name":"Appearance","expanded":true,"children":[]},{"name":"Effects","expanded":true,"children":[]},{"name":"Editor","expanded":true,"children":[]}],"scrollPosition":0},"visibleInEditor":true,"locked":false,"parallaxInEditor":false,"opacity":1,"translucent":false}],"instancesRoot":{"expanded":true,"subfolders":[],"misc":{"global":true,"layout":[]}},"view":{"x":769.7980689868821,"y":281.17029110551056,"z":186.15435578388136,"activeLayer":"Game"},"selectedInstances":[],"lockedInstances":[],"instanceCollections":[{"uids":[3],"properties":{"properties":[{"name":"Object type properties","expanded":true,"children":[]},{"name":"Common","expanded":true,"children":[{"name":"Position","expanded":false,"children":[]},{"name":"Size","expanded":false,"children":[]}]},{"name":"Instance variables","expanded":true,"children":[]},{"name":"Behaviors","expanded":true,"children":[]},{"name":"Effects","expanded":true,"children":[]},{"name":"Container","expanded":true,"children":[]},{"name":"Template","expanded":true,"children":[]},{"name":"Properties","expanded":true,"children":[]},{"name":"Editor","expanded":true,"children":[]}],"scrollPosition":0}},{"uids":[2],"properties":{"properties":[{"name":"Object type properties","expanded":true,"children":[]},{"name":"Common","expanded":true,"children":[{"name":"Position","expanded":false,"children":[]},{"name":"Size","expanded":false,"children":[]}]},{"name":"Instance variables","expanded":true,"children":[]},{"name":"Behaviors","expanded":true,"children":[]},{"name":"Effects","expanded":true,"children":[]},{"name":"Container","expanded":true,"children":[]},{"name":"Template","expanded":true,"children":[]},{"name":"Properties","expanded":true,"children":[]},{"name":"Image transform","expanded":true,"children":[]},{"name":"Tile randomization","expanded":true,"children":[]},{"name":"Editor","expanded":true,"children":[]}],"scrollPosition":0}}]}}],"folders":[],"imageData":["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAO0lEQVR4AazPQQ0AMAgDwAYHw+MsTNM0zMY08AUJ8O2PD03u16Sp7PuTnWfJBE0GCksVLNzBBiaaEygAAAD//yTx288AAAAGSURBVAMAHNAj3Wfvb3EAAAAASUVORK5CYII=","data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIklEQVR4AdzKMQ0AAAwCwRb/LqujAQew88lvh9unGxPqAAIAAP//91C77AAAAAZJREFUAwBC2hcRaFLvWgAAAABJRU5ErkJggg=="]}

  • I often need to work with arrays and JSON, using them for data structure conversion, more complex filtering, sorting, and more. However, the Eventsheet ACE functionality is limited and operations can be complex. Using JavaScript can save a lot of time.

    So, I use a function that takes Array.AsJSON and converts it into a true array using JavaScript. Then, I process the data internally, convert it back to a string, set the return value, and then make Array Load. 

    const array = JSON.parse(localVars.arrayJson);
...
runtime.setReturnValue(JSON.stringify(array));

    This part of the JavaScript is perfect for AI to help. Simply tell it the data structure you want and the desired result, and it will handle it perfectly.

  • About scale and offset scroll specific layers, Now is easy to make in Construct 3, The Layer has many properties and expressions:

    • LayerScale(layer)
    • LayerScaleRate(layer)
    • LayerScrollX(layer)
    • LayerScrollY(layer)

    For Construct 2, If I remember correctly, c2 should contain these examples. If not, that's okay, you can check them out in Construct 3, which is also available in the free version.

    1. Touch: Panning
    2. Touch: Zooming

    Since these two samples only demonstrate specific gestures, you need to combine them if you want to both zoom and pan gestures.

    ===

    By the way, these three examples are also worth reading. They all apply drag and drop to practical examples.

    1. Hidden Objects
    2. Place Stickers
    3. Kitty Katcher

  • Tom I have an idea. Maybe can allow Affiliates to publish their own offers or discounts, Others people can subscribe C3 at a discounted price?

  • They have moved from X to Bluesky

    Construct: bsky.app/profile/construct.net

    Ashley: bsky.app/profile/did:plc:foxdqaopnh3x6nypnuafx6mz

  • C3 for vanilla JSON ACE is poor, so I'll opt to use Javascript to help me with this.

    Note that to keep the function simple, the parameter passed in here is the array containing those items, not the outer JSON object. 

    JSON.GetAsCompactString("leaderboard")

    Export asJSON to the Function, Convert the jsonString to json object and process it via Javascript. Finally, convert the json object back to a string and return it. 

    // [...]
const arrayData = JSON.parse(localVars.jsonString);

// Sort Function
const sortArray = (arr, key, asc = true) =>
 [...arr].sort((a, b) => asc ? a[key] - b[key] : b[key] - a[key]);

// Sort
const sortedData = sortArray(arrayData, 'score', false);

// return String
runtime.setReturnValue(JSON.stringify(sortedData));

    Function Clipboard. Need 'JSON' Object 

    {"is-c3-clipboard-data":true,"type":"events","items":[{"eventType":"block","conditions":[{"id":"on-start-of-layout","objectClass":"System"}],"actions":[{"id":"parse","objectClass":"JSON","parameters":{"data":"Functions.sortArray(JSON.GetAsCompactString(\"leaderboard\"))"}}]},{"functionName":"sortArray","functionDescription":"","functionCategory":"","functionReturnType":"string","functionCopyPicked":false,"functionIsAsync":false,"functionParameters":[{"name":"jsonString","type":"string","initialValue":"","comment":""}],"eventType":"function-block","conditions":[],"actions":[{"type":"script","language":"javascript","script":["// [...]","const arrayData = JSON.parse(localVars.jsonString);","","// Sort Function","const sortArray = (arr, key, asc = true) =>"," [...arr].sort((a, b) => asc ? a[key] - b[key] : b[key] - a[key]);","","// Sort","const sortedData = sortArray(arrayData, 'score', false);","","// return String","runtime.setReturnValue(JSON.stringify(sortedData));"]}]}]}

  • Update:

    I solved this by using the sub-layer mask trick. Thank you Skymen for help

    blend-mask-layer.c3p

  • You can use the qarp() system expression 

    qarp(startX, midX, endX, t)
qarp(startY, midY, endY, t)

    Here's a more complex example

    file.c3p

  • How can I blend two mask effects and keep their intersection?

    ask-file.c3p

    Maybe what I want is the XOR blend mode?

    Tagged:

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • I just found that when I opened the C3 editor in iOS Safari, I couldn't drag the event block in the event table. It seemed to lack relevant interaction methods. I looked through the documentation and didn't find any relevant gesture instructions. do I missing some steps? Ashley

    Tagged:

  • You can use SVG in HTML Elements to made this curved text input.

    Here is an example: Curved_Text_Input.c3p

  • > normally a text adventure will be translated to many languages and right now it doesn't allow to be edited outside construct, reconstructing one by one by hand each dialogue is tedious on big storylines.

    You definitely shouldn't make a flowchart per language. Just have one flowchart for all languages, and instead of putting the actual text in the flowchart, just put the key to look up in the Internationalization object.

    Is that what you wanted the save/load JSON feature for? If so you shouldn't need it after all, as using one flowchart for all languages is a better solution.

    I tried a solution, first generate the md5 hash value for the original language, and then generate the JSON file. Other languages ​​also create their own JSON files and use the corresponding hash as the key.

    example: Flowchart_with_Multi-language.c3p

    You only need to maintain a Array/spreadsheet/CSV file: 

    en-US, pt-BR, zh-CN
Home, Início, 主页
About, Sobre, 关于我们

    you can directly use English with the flowchart, and display the text by using a function. 

    Functions.Translate("Home")
Functions.Translate(FlowchartController.OutputValue("Text"))

    Then use the tool to automatically generate the JSON file.

    ---

    The working principle of it is that it will generate a Hash for your original language and correspond it with other languages.

    When you search for a language through the Functions, it will first generate a Hash for the original language, and then look for the corresponding Key in the JSON. For the Hash algorithm, the `hashFnv1a64` algorithm is used here, which is very fast and has very small collisions. It is also synchronized and has very little impact on performance.

    This way, you no longer need to use an ID like `home.title` to refer to it.

    en-US.json 

    {
 "hash1": "Home",
 "hash2": "About"
}

    pt-BR.json 

    {
 "hash1": "Início",
 "hash2": "Sobre"
}