Introducing JavaScript coding in Construct

59
Official Construct Post
Ashley's avatar
Ashley
  • 23 May, 2019
  • 2,041 words
  • ~8-14 mins
  • 18,714 visits
  • 26 favourites

We're excited to announce a major new feature for Construct 3, allowing you to write JavaScript code in the editor! You'll be able to start off with snippets of code in the place of actions or events, and then move all the way up to writing entire JavaScript files.

Why coding?

We are well aware that not programming has been central to the design of Construct since Construct 2. We know many of our users will have chosen Construct specifically for this reason. Some may even have no intention of ever using coding. We're still committed to this approach and also fully intend to keep developing features for events. So why are we doing this?

At Scirra we've always aimed to help get more people involved with and excited about technology. We want to make amazing tools that make incredible technologies accessible to all, allowing them to be active creators rather than passive consumers. With the rising profile of technology in the world today and more people than ever getting involved with technology and programming, we think this is an important step towards that goal.

Not only should this attract a new audience to Construct, we think it makes a lot of sense for many existing Construct users too. Here's a few examples where we think it will be useful:

  1. Many indie developers and hobbyists use Construct as their first tool to get them started in the world of game development. After using Construct for some time they may then decide to move on to other programming-based tools to advance further in the game development world. Being able to use JavaScript code in Construct will help them learn the skills they'll need to advance in future - and achieve more of what they want to do in Construct.
  2. Construct is increasingly used in education. For teachers and students it's important to cover real-world skills that will be useful later in life. JavaScript is one of the most popular and widely-used programming languages in the world. For example for 6 years in a row JavaScript has been the most popular programming language in StackOverflow's developer survey - ensuring students are learning the kind of language you can get a job in. Construct also provides the best block-based tool on the market, providing a uniquely good way to get students started, and then gradually introduce snippets of code along the way towards fully coding games and apps.
  3. Professional and business users sometimes already have some programming skills, or have other systems they need to integrate Construct with. Using JavaScript code in Construct makes it easy to arrive at a quick and well-integrated solution, without having to use the full addon SDK.
  4. In practice many Construct users already use snippets of JavaScript code. One of the most popular third-party Construct 3 addons is for running JavaScript, and we regularly see users on the forums using the Browser object's features to execute strings of JavaScript code. Since this is already something many users need and use, adding direct support for it in the editor will make it much easier and quicker to achieve.

We're also excited about the many possibilities around integrating JavaScript and events. For example you could make an event function that runs some JavaScript code, and then use that as an action anywhere in your events - essentially hiding the JavaScript code behind the event system.

Why JavaScript?

Since Construct itself is written in JavaScript, it's the logical choice for a language to use with Construct. The browser provides the language, making it easy to integrate, ensuring it's always up-to-date with the latest features, and removing the need for us to maintain the language itself so we can dedicate our time to other parts of the product. However Javascript has many great qualities that make it a good choice in its own right.

As mentioned JavaScript is one of the most popular languages in the world. It is the language of the web, and is also well-supported on the server-side with tools like node.js, helping you learn skills that will be useful everywhere from web design to back-end services. It's also one of the fastest - if not the fastest - dynamically-typed languages out there, with all major browsers employing sophisticated JIT engines to compile JavaScript to optimised low-level machine code. Better yet they can do it in the blink of an eye, without lengthy build times. On most platforms the browser engine or OS provides the language runtime, so there is virtually no file size overhead for your apps. It's also in very active development with entire teams of developers working solely on optimising and improving the language. For example take a look at the V8 blog to see what Google have been working on with the JavaScript engine used in Chrome and Node.js. There's also a huge developer ecosystem around JavaScript, as evidenced by being the top language on GitHub, and the availability of over 800,000 packages on node's package manager npm. It's also easy to find mature developer tools for JavaScript, including powerful debuggers and advanced performance profilers, since they come free with every browser.

The JavaScript language has also changed radically over the past several years - for the better. It's formally called ECMAScript, and it has an active standards process that has been steadily introducing major new language features that make it a powerful, flexible modern language. Just some of its features include classes, closures, arrow functions, default parameters, rest parameters, async functions, exceptions, generator functions and iterators, template strings, powerful Regular Expressions, advanced data structures including objects, arrays, Maps and Sets, and much more. There are also plenty of language proposals in development, including private methods and fields, decorators, and more - so it is sure to continue improving over time.

Of course you don't have to tackle that all in one go - JavaScript also has comprehensive support for the basics shared by many languages, such as variables, if statements, loops and functions. So you can easily start small, and then work your way up to the full power of the language.

Custom languages suck

A particular pitfall we wanted to avoid was designing our own language. Several tools on the market do this, and we think it is a mistake. It makes your skills less transferrable, as no other tools or languages use it. Usually the chance of getting a job working in a tool's own language is remote. Often these one-off languages have oddball features not found anywhere else, impose needless limits, and suffer from a poor or confusing design. And generally they have much inferior performance, perhaps only using an interpreter due to lacking a JIT engine, or using primitive garbage collectors that can jank the game as opposed to the mature generational, incremental, parallel collectors used by modern JavaScript engines. Sometimes they have long build times to compile your app. And then every app you publish has to bundle the complete language runtime. The developer ecosystem is usually tiny relative to major languages, and the developer tools rarely match the comprehensive tooling already available in the very browser you're reading this post with.

Custom languages also require a huge amount of work to develop, maintain and optimise, distracting away from efforts to improve the rest of the tool - especially painful for small teams. On the other hand industry-standard languages are mature, widely-used, are thoughtfully designed (even if they have historical quirks), and are developed by teams of expert engineers across the industry, usually supported by big, well-resourced companies like Google, Apple, Microsoft and Mozilla.

To us it's a no-brainer: just use an existing language.

How will it work?

So what will coding look like in Construct? The pictures below are from an early prototype - we'll have more features like full syntax highlighting later down the line. However it still gives a good impression of what it'll be like.

Scripts in actions

Suppose you're comfortable with using events and you're ready to try some JavaScript. You can write JavaScript code to run as an action. It's a really nice way to dip your toe in the water - you can start off with just a single line of code.

Congratulations, you just wrote your first line of JavaScript code!

Scripts in events

Once you're ready to go further, you can write a block of JavaScript. This goes in the same place as an entire event, so can be used as a sub-event, or at the top level of the event sheet to run every tick (as normal events do).

Script files

Once you feel like you're getting the hang of JavaScript, you can add a script file to your project!

You can write a whole JavaScript file right inside Construct. Here you can write global functions that can be used by other scripts, or called from scripts in actions or blocks. There's a callback to run some code on startup, where you can also do your own initialisation, listen for events, and so on. (In this example the "tick" event is used, which is called every tick like in an Every tick event.)

The goal is to support all the APIs necessary so you could implement your entire game in JavaScript if you wanted to. Alternatively you can use this to implement parts of your game in JavaScript, and other parts in events. We're keen to make sure there is smooth and comprehensive integration between the two, so it's convenient to use whichever you prefer for the task at hand.

Notice also how it is easy to start with small snippets of JavaScript, and gradually work your way up to entire JavaScript files. We think this will be a great way to learn JavaScript!

Integration with events

To demonstrate how closely we want to integrate events and JavaScript coding, here's an example of some code that uses the instances picked by an event, and runs code to manipulate the instances.

The code in the action is the same as the action Set X to Self.X + 10. However it shows how closely you can combine events and code, switching between the two as you see fit.

Getting the scripting feature

Once we're ready to launch it, the scripting feature will be sold as a separate add-on for Construct. However anyone who's ever had a Construct 3 subscription - of any kind, past or present - will get the scripting add-on for free, for life, at no additional cost. Currently this still applies to new subscribers too, so if you want to use the feature and have been thinking about subscribing, you'll save money if you subscribe now! We'll announce the cut-off date for this offer in the near future.

Conclusion

Construct has long focused on its event system, but we think coding is increasingly important for a wider audience, so it's the right time to add the option to use a major programming language. We're excited about helping people to learn how to code - as well as the huge new capabilities it brings! Using code in events is an excellent way to get started with a low barrier to entry. Ultimately you'll even be able to fully code your games in JavaScript, without using events at all! There's still a lot of work ahead of us before we reach that point, but we'll be working on it. And we haven't forgotten about events either - we'll be continuing to add new features there too, since we know lots of you will be happy to stick to events only.

We are aiming to have an early version of the scripting feature in the next beta release of Construct some time in the next couple of weeks. If you're already a subscriber, you'll be able to test it as soon as the next beta. The feature will continue to develop and expand over time, and we'll likely have more news about it in future. So stay tuned and we look forwards to seeing what you can all do with it!

Subscribe

Get emailed when there are new posts!

  • 82 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • yea this is really nice.. i'm teaching small coding introduction class and struggled somewhat with it because while I really know / use Construct.. it isn't really teaching coding directly enough.. now i might see if i can perhaps use this as a framework to show simple coding concepts but allow the nice shortcuts the non-coding elements of construct offers.. like importing graphics and easily naming them.. so yea exciting stuff.

  • This is incredible!! Nice work again Scirra, this is a game changer. Also I love that it's javascript.

  • I wonder who's "one of the most popular third-party Construct 3 addons for running JavaScript" is that

  • This is really awesome! Great and wise decision. All the latest features you added to C3 like wait for previous action, timeline and more, are simply the best, congrats!

  • Thank you!

  • This is pretty awesome, I hope this brings in many new devs to Construct!

  • brilliant

  • holyshitballz.js O:

  • Hat's off, what a great move.

  • The speed that new features are being added to C3 is absolutely amazing.

  • Load more comments (72 replies)