Learn TypeScript in Construct, part 14: Onwards

UpvoteUpvote 5 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

157 visits, 197 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

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

Published on 31 Jul, 2025. Last updated 1 Aug, 2025

How event blocks compare to code

Before we finish, it's worth mentioning how code compares to event blocks, for those of you who have worked with Construct's event sheets before.

Event blocks are a fundamentally different paradigm to text-based languages like TypeScript. This means there is often no short or convenient TypeScript code equivalent to an event block. This is because event blocks are a much higher level concept than code. A seemingly simple event block can actually involve running a large amount of complex code to do something that seems straightforward in an event sheet. This is the whole purpose of event blocks: by taking care of so many details for you, they make game creation much quicker and easier and accessible to people with no experience of programming at all.

If you're coming from working with event sheets, you'll frequently need to adopt a different approach if you want to do the same thing in TypeScript code, which may take some getting used to. Alternatively you can adopt a mix-and-match approach where you use event blocks for some purposes, and TypeScript code for others. The ability to add TypeScript code in event sheets is specifically designed to help make this mix-and-match approach easy to use.

Here are two examples that demonstrate the conceptual difference between event blocks and code.

Picking

Conditions in event blocks "pick" the instances that meet the condition. Further conditions filter down the picked instances to only those that meet all the conditions. Then the actions run on the picked instances.

This concept of "picking" is unique to event sheets - there is no built-in concept of picking in TypeScript. The same concept can be applied in TypeScript, such as by creating an array of instances, and progressively filtering it down, and then iterating the array performing some action on the remaining instances. However TypeScript code is not typically written like that.

A more typical pattern to use in TypeScript would be to iterate all instances with a 'for-of' loop. For example consider an event block that tests Sprite: X < 500, with an action Sprite: Set X to Self.X + 100 * dt. This will move all Sprites to the right until they are past the X = 500 line. The TypeScript equivalent would look something like this:

function Tick(runtime: IRuntime)
{
	for (const inst of runtime.objects.Sprite.instances())
	{
		if (inst.x < 500)
		{
			inst.x += 100 * runtime.dt;
		}
	}
}

Notice it does not use a picking process - the code iterates every Sprite instance, and inside the loop it uses an 'if' statement to check if it should move the sprite.

On collision

The On collision event actually does quite a lot of work. Is overlapping is continually true while instances intersect. However On collision remembers if the instances were previously intersecting, and is only true the first time they intersect, which acts as a trigger for when two instances first touch.

In Construct's API, there is only a testOverlap method, which is essentially the equivalent of Is overlapping. There is no equivalent to On collision: the part that remembers the previous state is part of the event system.

Sometimes testing overlap is sufficient, such as if the objects are destroyed on touching, as they won't keep touching. However when coding in TypeScript, it's up to your code to remember if two instances were previously overlapping and do something different the first time it happens. This highlights how event sheets do a lot of extra work for you behind the scenes to make your life easier than the equivalent in a programming language. Often tasks that are simple in event sheets take a lot more work as code.

Some advice

Here are a few extra bits advice about programming to help you along the way.

  • Programming often requires patience. When things don't work, try to adopt an attitude of being curious to find out what's going on. While it can be an understandable reaction, try to avoid getting angry or frustrated - it will only make it harder to solve the problem. If you need to, take some time out. Often taking a break, or coming back the next day, is what it takes to solve a problem.
  • If you're serious about learning to code well, then try to practice a lot. Writing a lot of different kinds of code to solve different problems is a great way to learn.
  • AI chatbots are generally pretty good at writing or identifying problems in beginner-level code. This can help you if you get stuck. However sometimes they make mistakes - including producing code or answers that look plausible, but are wrong in subtle ways. If you want to have a meaningful knowledge of how to code, avoid using AI chatbots too much. It is all too easy to just get them to generate code that you don't fully understand, or doesn't work for reasons you can't figure out. If you rely on them too much you'll never fully understand coding and you might not be able to progress past a certain level of ability. They can be a useful learning tool, but you should still form your own understanding of how code works.
  • As with most long-lasting technologies, the features of TypeScript and JavaScript evolve over time. Some older parts of these programming languages been superseded by newer, better features, to the extent there's no reason to use the old features at all any more. One good example of this is how in JavaScript let has replaced var for declaring variables. There's loads of information about JavaScript and TypeScript on the web, but when finding resources check the date it was published - the older it is, the more likely that it would be written differently now. There's also no need to learn about how the old legacy features work unless you have to work with some old code that uses it.
  • TypeScript and JavaScript is also a constantly improving language, gaining new features regularly. However new features don't always arrive in all browsers or platforms at the same time. Check what the browser support for new features is, so you don't accidentally write code that doesn't work in other browsers. Testing your code works in all major browser engines (Chrome, Firefox and Safari) is also a good way to check that.
  • It's great to feel a sense of accomplishment when you write some complicated code that works. However remember that for any given task, the best code is as simple and easy to read as possible while still getting the job done. Good programmers avoid obscure tricks or unnecessary complexity wherever possible.

Closing remarks

This guide has hopefully given you a solid grounding in the TypeScript programming language, while pointing you towards further resources to deepen your understanding of TypeScript. Construct provides a great place to learn to code, allowing you to mix and match event blocks and TypeScript code to help ease your transition to coding, as well as providing an editor and APIs to handle many otherwise tedious tasks of game programming such as level design and rendering.

The TypeScript programming language, and all the APIs available in browsers and tools like Construct, represent a huge amount to learn about. Programming is also often difficult and can be a time-consuming process to get your code right. Finishing this guide is only the very beginning of your journey in to the world of programming. If you're serious about getting in to programming, recognize that like many fields of work, it will probably take a year or more of regular practice to become proficient, and many years further to become an expert. However even with basic skills you can get useful and interesting things done - and you'll be learning skills in an industry-standard programming language, which makes what you learn highly transferable to other TypeScript-based tools and frameworks. And if you go further, TypeScript is the kind of language you can get a job working with!

Congratulations for finishing this guide, good luck with your future efforts and happy coding! 🎉

  • 0 Comments

Want to leave a comment? Login or Register an account!