Movatterモバイル変換

[0]ホーム
URL:

Construct for JavaScript developers quick start guide

UpvoteUpvote18DownvoteDownvote

Features on these Courses

    Stats

    10,041 visits, 12,895 views

    Tools

    Share

    • TwitterTwitter
    • FacebookFacebook
    • RedditReddit
    • VKVK
    • LinkedInLinkedIn

    Translations

    This tutorial hasn't been translated.

    License

    This tutorial is licensed underCC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

    This tutorial is recommended by the Construct team! This means it contains useful, high quality information that will help grow you as a game developer.
    Published on 1 Apr, 2022. Last updated 19 Jul, 2024

    Construct supports writing JavaScript code in both script files and event sheets. If you are new to the JavaScript programming language, consider taking theLearn JavaScript in Construct tutorial course. However if you already have some knowledge of JavaScript coding, this guide will help you quickly get up to speed with JavaScript in Construct.

    Introductory video

    You can also find avideo introduction to using JavaScript in Construct on our YouTube channel.

    TypeScript

    If you are interested in usingTypeScript in Construct, see the separate guideUsing TypeScript in Construct.

    Modules

    All JavaScript code in Construct runs in modules. This is based on the JavaScript language provided module system, also known asJavaScript Modules,ES Modules orESM. Construct does not currently directly support other module patterns like CommonJS or AMD.

    Modules allow for using theimport andexport syntax, which is supported in Construct.

    The main script

    In Construct themain script is automatically loaded. This file appears bold in the Project Bar and has itsPurpose property set toMain script. However other scripts are not automatically loaded by default - instead they must be imported in order to load and execute them.

    Top-level scope

    If you've not worked with JavaScript Modules before, note thattop-level scope works differently in modules. Each module (script file) has its own top-level scope. This means top-level declarations are not globally accessible. Using imports and exports are preferable to global variables, but if you have to, useglobalThis to access the global namespace, as demonstrated below.

    // In a module, this is scoped only to the same file.let myGlobal = 0;// In a module, this is now global.globalThis.myGlobal = 0;

    Strict mode

    Modules also run code instrict mode. This eliminates common problems such as silent errors, typos accidentally creating variables, and fixes some aspects of the language considered mistakes. This can be used outside of modules with the"use strict" directive, which is a best practice to help catch mistakes. However remember this directive is not necessary in modules as it always uses strict mode automatically.

    Importing third-party scripts

    Third-party scripts written in the modern ES Modules style should work normally in Construct. If you can, use a script based on ES Modules, or ask the third-party developer to provide one.

    If you import an older third-party script that does not use ES Modules, it may try to add something to the global namespace by using a top-level declaration. Since modules have their own scope, this means the script won't actually declare anything usable in other script files. These scripts have to be lightly modified to get them to work as modules. An example is shown below.

    // A third party script may try to declare a global// function like this, which won't work in a module.var SomeGlobal = function () { ... };// Add an extra line to add it to global scope like this// to make sure it really is accessible globally.globalThis.SomeGlobal = SomeGlobal;

    Often this is the only change necessary to get the script working again.

    Similarly older scripts may try to use a variety of ways to identify the global object, relying on a mix ofwindow,self orglobal. The modern way to access the global object is withglobalThis. You may need to update the way the global object is referenced as shown in the example below.

    // A third party script may use the following pattern to// try to identify the global object and pass it to an IIFE.(function (global) {// ... code using 'global' ...global.SomeGlobal = function () { ... };})(window || self || global);// <-- this code tries// to identify the global object// The complicated code trying to identify the global object// can be replaced with a simple reference to globalThis.(function (global) {// ... code using 'global' ...global.SomeGlobal = function () { ... };})(globalThis);// easy way to get global object

    Scripts in event sheets

    When adding JavaScript code in an event sheet, it actually runs inside an async function. This allows use ofawait in such code snippets. The event system can then wait for a previous block of JavaScript code to finish using theWait for previous actions to complete system action.

    Note that since these code snippets are inside functions, the use ofimport andexport is not allowed, as the JavaScript language does not permit these inside functions. Further, any variable or function declarations will only be available in that snippet. Global variables can still be accessed usingglobalThis.

    Referring to script files in event sheets

    Scripts in event sheets are a concept unique to Construct. Therefore the way modules are accessed in scripts in event sheets is slightly different to the way script files work.

    Scripts in event sheets are all combined in to a single script file. If a script in the project has the purposeImports for events, its content is inserted to the top of that combined script file. This provides a way to use modules in scripts in event sheets.

    For example suppose theImports for events script uses the following import:

    import * from "./mymodule.js" as MyModule;

    This then means all scripts in event sheets in the entire project can now refer toMyModule.

    In fact theImports for events script can declare variables and functions that can then be used in scripts in event sheets. However usually it is preferable to import a script, as that can also be shared with other script files.

    TheImports for events script can also import the main script. This provides a convenient way to call functions exported from the main script from event sheets.

    import * from "./main.js" as Main;

    Construct APIs

    Construct provides a range of APIs to access Construct-specific features. These are typically accessed viaruntime, which refers to theruntime script interface.

    In scripts in event sheets,runtime is automatically defined and so can be used directly.

    In script files,runtime is passed to a callback in the special Construct-providedrunOnStartup global function. The default code snippet in a newly added script file demonstrates using that. From there on, it is up to your own code to passruntime to code that needs to use it.

    Note thatrunOnStartup runs while the loading screen is showing, and so not all Construct features are ready to use yet. The "beforeprojectstart" event fires just before actually starting the first layout, which sometimes is the right place to put initialisation code.

    Construct objects are typically accessed viaruntime.objects, e.g.runtime.objects.Sprite is anIObjectClass representing the Sprite object. Note this does not represent an instance, and so does not have properties specific to instances such asx ory representing a position. Instead you must retrieve an instance from theIObjectClass.

    For example if there is only one instance of Sprite, then it can be retrieved usinggetFirstInstance() like so:

    const inst = runtime.objects.Sprite.getFirstInstance();// now can use inst.x, inst.y etc.

    If there are multiple instances they can be iterated with methods such asinstances() like so:

    for (const inst of runtime.objects.Sprite.instances()){// now can use inst.x, inst.y etc.}

    The specific APIs for instances depends on the plugin type. These interfaces are all documented in the scripting reference section of the manual, such asISpriteInstance for Sprite instances, which provides APIs for things like animations. Note that these interfaces also inherit fromIWorldInstance andIInstance (depending on the kind of plugin). For example common properties likex andy are part ofIWorldInstance.

    Note that Construct's expressions are not JavaScript code. You cannot paste something you'd use in a Construct expression in to JavaScript and expect it to work. Refer to the scripting reference for the available features.

    Integrating scripts and events

    Strings and numbers can be exchanged between event sheets and JavaScript code using global and local variables in event sheets. Local variables are accessible vialocalVars inside scripts in event sheets, and global variables are accessible viaruntime.globalVars. There is more information in the manual section onScripts in event sheets.

    Strings and numbers can also be exchanged via instance variables via theinstVars property ofIInstance.

    See also the example projectIntegrating events with script for an example of some useful techniques.

    Using an external editor

    Construct has special features to let you use an external code editor like VS Code to write your project's code if you prefer. See the guideUsing an external editor.

    Learn more

    Here are some more resources to learn more about using JavaScript in Construct.

    Examples

    There are lots of example projects using JavaScript coding in Construct which you can find in theScripting category in theExample Browser.

    Debugging

    You can still use the browser developer tools to debug JavaScript code that you write in Construct. For a quick-start guide on debugging, see the manual section onDebugging script.

    Minifying

    Minifying on export also applies to your JavaScript code written in Construct. Code minification is done with Google's Closure Compiler, an industry-standard tool.Simple minify mode should never affect how your code runs. However if you enableAdvanced minify mode on export, you may need to adjust how you write your code. See the manual guide onExporting with Advanced minification for more details.

    Worker mode

    Construct is capable of running its entire engine in a Web Worker, rendering via OffscreenCanvas. However by default projects using JavaScript code run in the main page ("DOM mode") to ensure compatibility with code that expects to be able to use DOM features likedocument. If your JavaScript code is compatible with running in a Web Worker, you can re-enable worker mode for improved performance by changing the project propertyUse worker toYes (in theAdvanced section). There is more information about this in the manual sectionJavaScript in Construct.

    Reference

    See theScripting section of the manual for full documentation on using JavaScript in Construct.

    TypeScript

    Construct also supports writing code inTypeScript, which is an extension of JavaScript that adds static types. This can provide improved tooling such as better autocomplete. See the guideUsing TypeScript in Construct to learn more.

    • 10 Comments

    • Order by
    Want to leave a comment?Login orRegister an account!

    • Nice, this helps alot!

    • how to make a for loop?

    • Do you think it'll be possible to import "resemble.js"

    • does improved performance running Web Worker apply at all the NWjs?

        • [-][+]
        • UpvoteUpvote1DownvoteDownvote
        • Ashley's avatar
        • Ashley
        • Construct TeamFounder
        • 1 points
        • (4 children)

        The performance benefits of worker mode are covered inthis blog post. It applies to all platforms that support worker mode.

        • Hi, I've read that post before and I just reread it, just in case I missed something. But not once does it mention NWjs and I still don't understand if it applies to NWjs! NWjs as I understand it is its own browser with nothing else running but your game. If "under the hood" Windows sees NWjs as just another Chrome process and groups it with other Chrome processes running, then I could see it being a major benefit. But if NWjs is only "based on chrome" but not actually chrome how would worker help? Sorry if that blog post spells it out and I am just not getting it, but I honestly don't understand.

            • [-][+]
            • UpvoteUpvote1DownvoteDownvote
            • Ashley's avatar
            • Ashley
            • Construct TeamFounder
            • 1 points
            • (2 children)

            NW.js is for all intents and purposes the same as Chrome. It is separate to the Chrome browser so there aren't other web pages that might jank the page. But there are other benefits that still apply to NW.js, such as allowing main thread work to happen in parallel.

            • I see, so some tasks that can only be done on the main thread can be done in parallel with worker. It's not a burning question but the only follow-up I would have are what exactly are those tasks and do they apply to me specifically? I don't do anything with SVGs, preview and debugger are N/A. The reason I am asking all this is I am looking into doing some scripting for Greenworks.js specifically (allowing player to use Steam Workshop) that I think will disqualify me from using Worker. So I want to know exactly what I am giving up. Maybe its a non-issue to not run Worker for a game in NWjs that doesn't use "specific" things that would benefit from running in parallel?

    [leaderboard-score]
      [8]ページ先頭
      ©2009-2025 Movatter.jp