Imports for events
Previously we used scripts in event sheets. Using imports here requires another step. The problem is the code for scripts in event sheets is actually run inside a function, and import and export statements are not allowed inside a function. So there needs to be another way to make use of imports for scripts in event sheets.
Exporting from scripts in event sheets is not supported - you have to use a script file for that. However importing is supported with the use of a special file with the purpose Imports for events. In short, everything imported in that file is available to all scripts in event sheets.
Download and open the project below for an example of this.
In this example we have the following:
- In main.js a function named
GetMessage is exported, which just returns a string with a message. (The main script can still export things and be imported elsewhere.)
- There is another script file named importsForEvents.js, which has the Purpose property set to Imports for events. Anything imported in this special script file can be used in scripts in event sheets. This file imports
GetMessage from main.js. Therefore GetMessage can now be used in all scripts in event sheets.
- In Event sheet 1, a script runs in On start of layout, which logs
GetMessage() to the console. Preview the project, and you'll see the message appear in the console.
Instead of calling a function to retrieve a value, you could also use a function to do some work. For example if you have a long function with lots of code, it's often more convenient to put it in a script file, and then call that function from a script in an event sheet. That's done exactly the same way as the above example, just that the GetMessage function would do something else (and be called something else).
Using global variables is another way to do this, since globalThis is accessible both in script files and in scripts in event sheets. But as previously noted, using global variables has several pitfalls, so using modules this way is preferable.
Another useful approach is to put this in importsForEvents.js:
import * as Main from "./main.js";
Then your scripts in event sheets can call any function exported from main.js, e.g. Main.GetMessage(). In larger projects you could repeat this for other script files to make it easy to call functions in different script files from scripts in event sheets.
Scripts in event sheets are a concept unique to Construct, so this approach of using modules to expose functions there is part of Construct's own design. When working with scripts in event sheets, there's not always as much room to type (especially in the actions section, as the left side is taken up with conditions), and there's often a lot of events too. So a good style to adopt is to write any long chunks of code as functions in script files, and call those functions in scripts in event sheets, via imports for events. This keeps JavaScript code in event sheets short and simple, and makes it easier to call other functions and imports in the script file.
Conclusion
In this part we've covered:
- How each script file is its own module, which by default keeps its contents private
- Using
export to share something outside a script file
- Using
import to use another script file's export
- How Construct only loads the main script, and other scripts must be imported
- Other ways to use
import and export, including the default export
- How exports are read-only, and how using object properties instead of variables for exports can be useful
- Using the Imports for events script to call a function in a script file from a script in an event sheet
Learn more
We only covered a few of the ways import and export can be used. There's lots more ways they can be used, to both import and export things with both defaults and named items, using a subset of items, renaming items, and more. Check these links on the MDN Web Docs for more details.
- export statement
- import statement (which also covers dynamic import)
- The MDN section on JavaScript Modules has more details about using modules
- The Ghost Shooter code example shows a fully JavaScript coded version of the 'Ghost shooter' example, using modules to share things between script files.
Part 13
When you're ready to continue, head on to the next and final part of this guide at Learn JavaScript in Construct, part 13: Onwards!