Using 8-Directional Movement and Subclassing with Pure JavaScript in Construct 3

Learning 8-Directional Movement and Subclassing in Construct 3 with Pure JavaScript

If you're new to scripting in Construct 3 and want to learn the basics of JavaScript subclassing while utilizing the 8-direction movement behavior, this tutorial is for you. We'll create a simple game where the player can move in 8 directions using only JavaScript, without any event sheets. Additionally, we’ll organize our code by creating a subclass for the player instance.

Before starting, I recommend checking out the [Scripting API documentation](https://www.construct.net/en/make-games/manuals/construct-3/scripting) and tutorials by Ashley, which cover many essential topics.

---

Setting Up the Player Sprite and 8-Direction Behavior

1. Add a sprite to your layout: Create a sprite in your project and name it player. Here's an example of how it should look:

2. Add the 8-direction behavior: Select the player sprite, go to the Behaviors tab, and add the 8-direction behavior:

3. Disable default controls: Since we'll be controlling the player entirely through scripting, make sure to disable the default controls for the 8-direction behavior:

4. Add the keyboard to your layout

---

Creating and Organizing Scripts

1. Create a new script file: In the Scripts folder, create a new script named Player.js. You'll notice that main.js is already created as the main script file:

2. Subclassing the Player Instance: Open Player.js and declare a subclass for the player sprite. This subclass will allow us to store additional properties and methods directly in the player instance.

Write the following code in Player.js:

   export class Player extends globalThis.InstanceType.player {
       constructor() {
           super();
           this.isMoving = false;
       }
   }
   

This subclass adds an isMoving property to the player instance, which can be used later to track whether the player is moving.

3. Import and Apply the Subclass: Open main.js and import the Player class. Then, assign the subclass to the player sprite like this:

   import * as Player from "./Player.js";

   runOnStartup(async runtime => {
       runtime.objects.player.setInstanceClass(Player.Player);
   });
   

---

Adding Movement and Controls

At this point, running your game won’t do much because we haven’t added movement controls yet. Let’s define methods in the subclass to handle movement and check if the player is moving.

1. Add Methods to the Subclass: Update Player.js to include the following methods:

   checkIsMoving() {
       // Check movement vectors
       if (this.behaviors["8Direction"].vectorX !== 0 || this.behaviors["8Direction"].vectorY !== 0) {
           this.isMoving = true;
           console.log("Player is moving");
           return true;
       }
       // Player is not moving
       console.log("Player is not moving");
       this.isMoving = false;
       return false;
   }

   movePlayer(direction) {
       // Simulate movement based on direction
       this.behaviors["8Direction"].simulateControl(direction);
   }
   

These methods:

- checkIsMoving: Checks if the player is moving by analyzing the 8-direction behavior's movement vectors.

- movePlayer: Simulates movement based on the provided direction string (e.g., "up", "down").

2. Add Keyboard Controls: Open main.js and add the following logic:

- Get the player instance:

     let myPlayer = runtime.objects.player.getFirstInstance();
     

- Create a handleMovement function to check for keyboard inputs and move the player:

     function handleMovement(runtime) {
         if (runtime.keyboard.isKeyDown("KeyW")) {
             myPlayer.movePlayer("up");
         }
         if (runtime.keyboard.isKeyDown("KeyS")) {
             myPlayer.movePlayer("down");
         }
         if (runtime.keyboard.isKeyDown("KeyD")) {
             myPlayer.movePlayer("right");
         }
         if (runtime.keyboard.isKeyDown("KeyA")) {
             myPlayer.movePlayer("left");
         }
     }
     

Add the function to the every tick event in main.js:

   // Handle movement, pass runtime to the function to access keyboard
   handleMovement(runtime);

   // Example to check movement
   myPlayer.checkIsMoving();
   

---

Finalizing the Setup

Now that everything is in place:

1. When you start the game, you should be able to move the player using the W, A, S, and D keys.

2. The console will log whether the player is moving or not, based on their 8-direction movement vectors.

Here’s how the full scripts should look:

- main.js:

- Player.js:

---

And that’s it! You now have a working example of 8-direction movement with a subclassed player instance using pure JavaScript in Construct 3. Experiment further by adding new methods to the subclass or extending the functionality to include animations or additional behaviors!