XHXIAIEIN's Forum Posts

  • I made a example.

    ---

    This is a simple counter page.

    Demonstrates how to communicate between the iframe and Construct via postMessage() and addEventListener().

    How to get/set Construct variables in the iframe

    How to get/set iframe variables in Construct

    Webpage

    There is a text showing the counter,

    and 2 buttons.

    Button 1, updates the iframe count only.

    Button 2, updates the iframe count and postMessage() to Construct, makeruntime to set the variable.

    The iframe is also listening for an Event from Construct. and when it is triggered, it will update its counter to the parameter value.

    • Preview
    • html
      <!DOCTYPE html>
<html>
<head>
 <style>
 #content {
 display: inline-block;
 border: 1px solid #FF0000;
 padding: 6px;
 }
 </style>
</head>
<body>
 <div id="content">
 <p>Count: </p><div id="counter">0</div>
 <button id="ButtonA">Set iframe Only</button>
 <button id="ButtonB">Set C3 Both</button>
 </div>
 <script>

 const appData = {
 count: 0
 };

 const addCounter = (value = 1) => {
 appData.count = Math.min(appData.count + value, 99);
 displayText();
 };

 const setCounter = (value = 0) => {
 appData.count = Math.min(value, 99);
 displayText();
 };

 const displayText = () => {
 document.getElementById('counter').innerText = appData.count;
 };

 const sendMessage = () => {
 const target = window.location.origin;
 window.parent.postMessage({ type: 'increment', value: appData.count }, target);
 };

 document.getElementById('ButtonA').addEventListener('click', () => {
 addCounter(2);
 });

 document.getElementById('ButtonB').addEventListener('click', () => {
 addCounter();
 sendMessage();
 });

 window.addEventListener('changeDataFromC3', (event) => {
 setCounter(event.detail.value || 0);
 displayText();
 });

 document.addEventListener('DOMContentLoaded', () => {
 displayText();
 });

 globalThis.appData = appData;
		
 </script>
</body>
</html>

    html 

    <html>
	<head>
		 <style></style>
	</head>
	<body>
 <div id="counter">0</div>
 <button id="ButtonA"></button>
 <script>
 document.getElementById('ButtonA').addEventListener('click', () => {
 window.parent.postMessage({ type: 'message', value: value });
 });
 </script>
</body>
</html>

    postMessage 

    const sendMessage = () => {
 const targetOrigin = "*";
 window.parent.postMessage({ type: 'message', value: data}, targetOrigin);
};

    globalThis 

     const appData = {
 count: 0
 };

globalThis.appData = appData;

    Eventsheet

    Load the page in Construct

    Add Listener Events

    const messageHandlers = {
	increment: data => {
		const { value } = data;
		runtime.globalVars.Variable1 = value; // Set Construct Global Variable
		console.log(`on message: ${value}`);
	},
	default: data => {
		console.log(`no event: ${data.type}`);
	}
};

const handleMessage = ({ data = {} }) => {
	const { type } = data;
	(messageHandlers[type] || messageHandlers.default)(data);
};

window.addEventListener('message', handleMessage);

    Signal 

    runtime.signal("clear-input");

    Some Event for Testing

    Send Event to webpage

    const value = 0;
const event = new CustomEvent('message', { detail: { value } });
window.dispatchEvent(event);

    Get webpage data via globalThis

    const key = localVars.key; // Construct Local Variable & Function Parameter
const value = globalThis.appData?.[key] ?? 0; // Set globalThis data
runtime.setReturnValue(value); // Set Function Return Value

    {"is-c3-clipboard-data":true,"type":"events","items":[{"functionName":"getDataFromIframe","functionDescription":"","functionCategory":"","functionReturnType":"number","functionCopyPicked":false,"functionIsAsync":false,"functionParameters":[{"name":"key","type":"string","initialValue":"","comment":""}],"eventType":"function-block","conditions":[],"actions":[{"type":"script","script":"const value = globalThis.appData?.[localVars.key] ?? 0;\nruntime.setReturnValue(value);"}]}]}

  • I make a quick example to demonstrate the use of For-each.

    You will observe that the "red box" all have the same angle.

    When you operate directly on the multiple instance object, you don't need to use For-each.

    Sprite: Set Angle to random(360)

    But if you want to use function/action for multiple instance, you need to use For-each.

    If not, although each object will be executed function, but the results of their execution are the same.

    Sprite: Call Function RotateAction(random(360))

    So, you need to use a For-each to make each sprite to rotate a different Angle.

    For Each Sprite → Call Function RotateAction(random(360))

  • You can try this: 

    runtime.callFunction(...localVars["command"]
.split(",").map(e => e.trim())
.map(e => (isNaN(e) ? e : Number(e))));

    Add it to a Function and call it with a string parameter. 

    {"is-c3-clipboard-data":true,"type":"events","items":[{"functionName":"Call","functionDescription":"","functionCategory":"","functionReturnType":"none","functionCopyPicked":false,"functionIsAsync":false,"functionParameters":[{"name":"command","type":"string","initialValue":"","comment":""}],"eventType":"function-block","conditions":[],"actions":[{"type":"script","script":"runtime.callFunction(...localVars[\"command\"]\n.split(\",\").map(e => e.trim())\n.map(e => (isNaN(e) ? e : Number(e))));"}]}]}

  • Just sharing some of my weird ideas recently:

    When I made event triggers, I made some modular objects and check whether it has a specific child object to gave them specific functions and.

    For example, when I needed this event to show a dialogue, I added the dialogue icon to the trigger.

    The green blocks as triggers, they are all the same, And they don't have any instance variables. when player collision or overlapping trigger, check the trigger's hierarchy to see if a specific child object exists.

    In each child icon, there are instance variables that determine what events they will trigger.

    Some of the instructions are:

    • trigger when entering the area
    • Press the interaction key to trigger when overlapping the area
    • Hide after triggering(Destroy but reset at next time when enter the Layout)
    • Permanently remove from current game(Destroy + Persistent & Local Storage)
    • Send signal when trigger

    ~~~

    These icons are from: game-icons.net

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Try using 'On any touch end' or 'On any touch start' instead of 'On tap' here.

  • I noticed someone posted this example, but it was based on NW.js. Can WebView2 export "transparent background" and "borderless" application modes? Ashley

    Why do we need it?

    This feature allow to make a "desktop ranch" and "desktop pendants" games, like:

    Of course, I know this may be a very difficult work, because that may also warrant attention Technical points:

    1. Borderless windows

    2. Always on top

    3. Allow click-through

    4. Allow background running

    5. Allows movement between different monitors

    6. Notification requested

  • In the for-loop event, we can use wait 0.1 * loopindex seconds to wait for 0.1 second in each loop.

    However, when I try to use loopindex at the same time, it is reset to 0. it is not a static variable in this scope.

    The result is failure:

    The current solution is to add a static variable to record it. But I think this is very troublesome.

    I'm wondering if there is a more elegant way to do it?

  • You can do this using a Tween behavior and playing a 0 - 1 animation using the Tween Value.

    Here is an example: download

  • When I think of Egyptian games, the first thing that comes to my mind is Senet, a very ancient tabletop game. Some people say that Senet is the world's first board game.

    I recall seeing some video games before. I don't know if it has anything to do with egyptian, but I think they may have some very similar aesthetics.

    Chants of Sennaar

    store.steampowered.com/app/1931770

    Heaven's Vault

    store.steampowered.com/app/774201

    Egypt: Old Kingdom

    store.steampowered.com/app/646500

    Lost in Art: a Miniature Realm

    store.steampowered.com/app/2900050

    Apotheon

    (Ancient Greek Mythology)

    store.steampowered.com/app/208750

    Assassin's Creed Origins

    store.steampowered.com/app/582160

    (Wait! also thinking of Temple Run, Zuma, Yu-Gi-Oh! )

  • {"is-c3-clipboard-data":true,"type":"events","items":[{"eventType":"block","conditions":[{"id":"on-any-touch-start","objectClass":"Touch"}],"actions":[{"id":"create-object","objectClass":"System","parameters":{"object-to-create":"DrawingCanvas","layer":"0","x":"Piggy.X","y":"Piggy.Y","create-hierarchy":false,"template-name":"\"\""}},{"id":"set-size","objectClass":"DrawingCanvas","parameters":{"width":"Piggy.Width","height":"Piggy.Height"}},{"id":"paste-object","objectClass":"DrawingCanvas","parameters":{"object":"Piggy","effects":"with-effects"}},{"id":"tween-one-property","objectClass":"DrawingCanvas","behaviorType":"Tween","parameters":{"tags":"\"FadeOut\"","property":"offsetOpacity","end-value":"0","time":"0.3","ease":"easeinoutsine","destroy-on-complete":"yes","loop":"no","ping-pong":"no","repeat-count":"1"}},{"id":"set-animation-frame","objectClass":"Piggy","parameters":{"frame-number":"Self.AnimationFrame+1\n"}}]}]}

  • You need to use the LocalStorage

    /#open=localstorage-hiscore

    /#open=level-selection

  • You are mixing up the order of the two things you are about to do. You may want to first check if the corresponding userID and password exist in userArray, and if true, stop loop and use localStorage to check the item for this user.

    你可以加QQ群 180911504

  • You need to wait for Check userID to complete asynchronously before use userArray Load data. Just like you add the LocalStorage callback condition below. But you have already done this because you use another array object user_data below. And you don't have any information about AJAX here, so you may have written it wrong.

    And, the user_check function, This loop Array condition, you may need to use it as a sub-condition.

    I don't quite understand whether the two array objects user_data and userArray are the same thing, But what you want to load from LocalStorage is already in the user_data array object.

    中文版回答：

    LocalStorage 是一个异步动作，你需要等待异步完成才能得到请求的数据。不能直接挨着写 userArray 读取数据。要像下面一样： 先检查是否存在，如果存在再获取数据，获取到了再读取。

    不过，你已经是知道了要这么做的，因为你已经在 On item userID get 里面，用另一个数组 user_data Load 到了本地数据。本地数据都在这里面。

    我不是很理解 user_data 和 userArray 这 2 个数组对象是否是相同的东西，但如果你希望从 LocalStorage 中读取存档，再进行遍历数据，你需要将上面的 userArray 的 Load 动作，也放到下面的 On item get 里面。

    或者在中间夹一个 "等待前面异步完成" 动作，然后继续用 userArray 读取数据。然后添加一个子条件，把开头系统循环的事件放在子条件继续执行

  • XHXIAIEIN you mentioned that it isn't optimized. Did you bring that up because you noticed a significant slowdown, especially compared to pasting frames? I thought shifting uvs would be faster.

    Yes, it still uses the full iamge size(216x288) in memory, not the size of a single frame(70x70). If you use more pictures in the future, it is not healthy

    I think a possible optimization method is to pre-process the image after get the strip info. that is, before "LoadStrip()" in this example, cut each frame contained in the Strip, and save it into the animation frame of Sprite. Then use the sprite normally.

  • Here is an example of using the advanced random selection of empty positions in a 2D array.

    cdn.discordapp.com/attachments/225550155531812865/1244194000370532365/RandomPickArrayItem.c3p