+2 -2

site/docs/00-tutorial/00-breakout.mdx site/docs/00-tutorials/BreakOut/00-breakout.mdx

Reviewed

··· 115 115 116 116 Open up your favorite browser and you should see something like this: 117 117 118 118 -  118 118 +  119 119 120 120 That’s neat, but this game is way more fun if things move around. Let’s make the paddle follow the mouse around in the x direction. The paddle will be centered on the mouse cursor. 121 121 ··· 319 319 }); 320 320 ``` 321 321 322 322 -  322 322 +  323 323 324 324 Congratulations! You have just created your first game in Excalibur! You can download this example [here](https://github.com/excaliburjs/sample-breakout). 325 325

site/docs/00-tutorial/00-intro.mdx site/docs/00-tutorials/Excalibird/00-intro.mdx

Reviewed

site/docs/00-tutorial/00-step-ts-env.mdx site/docs/00-tutorials/Excalibird/00-step-ts-env.mdx

Reviewed

site/docs/00-tutorial/01-step-start-engine.mdx site/docs/00-tutorials/Excalibird/01-step-start-engine.mdx

Reviewed

site/docs/00-tutorial/02-step-bird-actor.mdx site/docs/00-tutorials/Excalibird/02-step-bird-actor.mdx

Reviewed

site/docs/00-tutorial/03-step-bird-and-ground.mdx site/docs/00-tutorials/Excalibird/03-step-bird-and-ground.mdx

Reviewed

site/docs/00-tutorial/04-step-flying-bird.mdx site/docs/00-tutorials/Excalibird/04-step-flying-bird.mdx

Reviewed

site/docs/00-tutorial/05-step-plumbing-pipes.mdx site/docs/00-tutorials/Excalibird/05-step-plumbing-pipes.mdx

Reviewed

site/docs/00-tutorial/06-step-refactor-to-scene.mdx site/docs/00-tutorials/Excalibird/06-step-refactor-to-scene.mdx

Reviewed

site/docs/00-tutorial/07-step-refactor-to-constants.mdx site/docs/00-tutorials/Excalibird/07-step-refactor-to-constants.mdx

Reviewed

site/docs/00-tutorial/08-step-periodic-pipes.mdx site/docs/00-tutorials/Excalibird/08-step-periodic-pipes.mdx

Reviewed

site/docs/00-tutorial/09-step-scoring-points.mdx site/docs/00-tutorials/Excalibird/09-step-scoring-points.mdx

Reviewed

site/docs/00-tutorial/10-step-game-over.mdx site/docs/00-tutorials/Excalibird/10-step-game-over.mdx

Reviewed

site/docs/00-tutorial/11-step-images-graphics.mdx site/docs/00-tutorials/Excalibird/11-step-images-graphics.mdx

Reviewed

site/docs/00-tutorial/12-step-bird-graphics.mdx site/docs/00-tutorials/Excalibird/12-step-bird-graphics.mdx

Reviewed

site/docs/00-tutorial/13-step-pipe-graphics.mdx site/docs/00-tutorials/Excalibird/13-step-pipe-graphics.mdx

Reviewed

site/docs/00-tutorial/14-step-ground-graphics.mdx site/docs/00-tutorials/Excalibird/14-step-ground-graphics.mdx

Reviewed

site/docs/00-tutorial/15-step-sound-music.mdx site/docs/00-tutorials/Excalibird/15-step-sound-music.mdx

Reviewed

site/docs/00-tutorial/16-voila.mdx site/docs/00-tutorials/Excalibird/16-voila.mdx

Reviewed

+1 -1

site/docs/00-tutorial/_category_.json site/docs/00-tutorials/_category_.json

Reviewed

··· 1 1 { 2 2 - "label": "Tutorial", 2 2 + "label": "Tutorials", 3 3 "collapsed": true, 4 4 "position": 1, 5 5 "link": {

site/docs/00-tutorial/breakout-final.png site/docs/00-tutorials/BreakOut/images/breakout-final.png

Reviewed

site/docs/00-tutorial/breakout-partial.png site/docs/00-tutorials/BreakOut/images/breakout-partial.png

Reviewed

site/docs/00-tutorial/images/bird-old.png site/docs/00-tutorials/Excalibird/images/bird-old.png

Reviewed

site/docs/00-tutorial/images/bird.ico site/docs/00-tutorials/Excalibird/images/bird.ico

Reviewed

site/docs/00-tutorial/images/bird.png site/docs/00-tutorials/Excalibird/images/bird.png

Reviewed

site/docs/00-tutorial/images/ground.aseprite site/docs/00-tutorials/Excalibird/images/ground.aseprite

Reviewed

site/docs/00-tutorial/images/ground.png site/docs/00-tutorials/Excalibird/images/ground.png

Reviewed

site/docs/00-tutorial/images/pipe.aseprite site/docs/00-tutorials/Excalibird/images/pipe.aseprite

Reviewed

site/docs/00-tutorial/images/pipe.ico site/docs/00-tutorials/Excalibird/images/pipe.ico

Reviewed

site/docs/00-tutorial/images/pipe.png site/docs/00-tutorials/Excalibird/images/pipe.png

Reviewed

site/docs/00-tutorial/images/social.jpg site/docs/00-tutorials/Excalibird/images/social.jpg

Reviewed

site/docs/00-tutorial/sounds/fail.wav site/docs/00-tutorials/Excalibird/sounds/fail.wav

Reviewed

site/docs/00-tutorial/sounds/flap.wav site/docs/00-tutorials/Excalibird/sounds/flap.wav

Reviewed

site/docs/00-tutorial/sounds/flap2.wav site/docs/00-tutorials/Excalibird/sounds/flap2.wav

Reviewed

site/docs/00-tutorial/sounds/score.wav site/docs/00-tutorials/Excalibird/sounds/score.wav

Reviewed

site/docs/00-tutorial/sounds/two_left_socks.ogg site/docs/00-tutorials/Excalibird/sounds/two_left_socks.ogg

Reviewed

+32

site/docs/00-tutorials/How-to's/ECS Primer/00-ecs-primer.mdx

Reviewed

··· 1 1 + --- 2 2 + title: ECS Primer 3 3 + slug: /ecs-primer 4 4 + section: Tutorials 5 5 + --- 6 6 + 7 7 + ## Introduction 8 8 + 9 9 + ExcaliburJS ECS Tutorial Series: Introduction 10 10 + Welcome to ECS in ExcaliburJS 11 11 + 12 12 + If you’ve ever wondered how modern games organize everything from enemies and bullets to UI elements, you’ve probably heard of ECS — Entity Component Systems. ECS is a way of structuring game code so it’s modular, scalable, and flexible, without the headaches of deep inheritance hierarchies. 13 13 + 14 14 + ExcaliburJS embraces ECS principles in its core design. Understanding ECS is the key to making clean, maintainable, and fun games with Excalibur. 15 15 + 16 16 + ### What You’ll Learn in This Series 17 17 + 18 18 + This tutorial series breaks ECS down step by step: 19 19 + 20 20 + 1. Page 1 – ECS Fundamentals: 21 21 + Learn what ECS is, why it matters, and how it compares to traditional object-oriented game design. 22 22 + 23 23 + 2. Page 2 – Components: 24 24 + How to create your own components, attach them to actors, and keep your data clean and reusable. 25 25 + 26 26 + 3. Page 3 – Systems: 27 27 + How systems drive your game logic, query entities, and respond to component state. 28 28 + 29 29 + 4. Page 4 – Systemless Components 30 30 + 31 31 + By the end of the series, you’ll understand how to design game features using ECS, make your code modular, and create behaviors that are easy to expand and maintain. 32 32 +

+140

site/docs/00-tutorials/How-to's/ECS Primer/01-what-is-ECS.mdx

Reviewed

··· 1 1 + --- 2 2 + title: What is an ECS 3 3 + slug: /what-is-ecs 4 4 + section: Tutorials 5 5 + --- 6 6 + 7 7 + import ecspng from './images/ecs.png'; 8 8 + 9 9 + <img src={ecspng} alt="ECS model" style={{ width: "700px" }} /> 10 10 + 11 11 + ## Why ECS Matters 12 12 + 13 13 + Game design often relies on inheritance: you make a Player class, an Enemy class, maybe a FlyingEnemy subclass, and so on. This can get messy quickly: 14 14 + 15 15 + - Hard to reuse logic 16 16 + - Difficult to add new behaviors 17 17 + - Easy to introduce bugs when changing one class 18 18 + 19 19 + ECS flips the model: 20 20 + 21 21 + - Entities are dumb containers 22 22 + - Components are small, focused data 23 23 + - Systems do the heavy lifting 24 24 + 25 25 + ## A Quick Peek at ECS in Action 26 26 + 27 27 + ```ts 28 28 + const player = new ex.Actor({ x: 100, y: 100 }); 29 29 + 30 30 + //Attach the component to the player 31 31 + player.addComponent(new HealthComponent()); 32 32 + 33 33 + //Attach the system to the engine 34 34 + engine.world.add(new HealthSystem()); 35 35 + 36 36 + player.get(HealthComponent).damage(20); 37 37 + ``` 38 38 + 39 39 + Even this small snippet shows the ECS philosophy: 40 40 + 41 41 + - The player has a health component 42 42 + - A system observes and reacts to the health 43 43 + - Logic is centralized and predictable, not scattered across your game objects 44 44 + 45 45 + Let's break this down so we map ECS fundamentals to Excalibur's implementation. 46 46 + 47 47 + ## Entities 48 48 + 49 49 + Excalibur has an [entity](/docs/entities) class, its simply a container of components. 50 50 + 51 51 + Actors are 'premade' entities that come with several commonly used components on them already 52 52 + 53 53 + - Colliders Component 54 54 + - Transform Component 55 55 + - Body Component 56 56 + - Motion Component 57 57 + - Pointer Component 58 58 + - Actions Component 59 59 + - Graphics Component 60 60 + 61 61 + These allow Actors to have, out of the box, these behaviors: movement, shape/size, hit things, have sprites shown, and respond to mouse clicks. 62 62 + 63 63 + We will discuss how to make your own custom Components in this series. 64 64 + 65 65 + ## Components 66 66 + 67 67 + [Components](/docs/components) are simply a collection of data tied to a behavior. 68 68 + 69 69 + For example: for the Motion Component you have: 70 70 + 71 71 + - velocity (vel) 72 72 + - acceleration (acc) 73 73 + - maxVel 74 74 + - torque 75 75 + - inerta 76 76 + 77 77 + These are all 'values' and data that are bolted on to an entity that allows the Motion System to use that data to 'move' the entity over time. 78 78 + 79 79 + ## Systems 80 80 + 81 81 + [Systems](/docs/systems) are where the business logic resides. The process and workflow of a system is as follows. 82 82 + 83 83 + 1. On each update, the system collects ALL entities with the respective components on it needed 84 84 + 85 85 + - These are called [Queries](/docs/queries), the 'search' for all impacted entities 86 86 + 87 87 + 2. For each entity that is affected by the System, it uses the systems logic to modify any or all of the data associated with that entity 88 88 + 89 89 + This is best explained in an example. 90 90 + 91 91 + ```ts 92 92 + import { Actor, Engine, Component, System, SystemType } from 'excalibur'; 93 93 + 94 94 + // 1. Component: Health 95 95 + class HealthComponent extends Component { 96 96 + current = 100; // <---------- THIS IS THE DATA (COMPONENT) 97 97 + 98 98 + constructor(){ 99 99 + super(); 100 100 + } 101 101 + 102 102 + damage(amount: number) { //<---- you can do this too ;) 103 103 + this.current = Math.max(0, this.current - amount); 104 104 + } 105 105 + } 106 106 + 107 107 + // 2. System: Check health and kill actor if zero <----THIS IS THE BEHAVIOR (SYSTEM) 108 108 + class HealthSystem extends System { 109 109 + systemType = SystemType.Update; 110 110 + query: Query<typeof HealthComponent>; 111 111 + 112 112 + constructor(world: World) { 113 113 + super(); 114 114 + this.query = world.query([HealthComponent]); 115 115 + } 116 116 + 117 117 + update(world: any, delta: number) { 118 118 + for (const entity of world.queryEntities(this.types)) { //<--- LOOP THROUGH ALL ENTITIES FOR THIS SYSTEM 119 119 + const health = entity.get(HealthComponent); 120 120 + if (health.current <= 0) { 121 121 + entity.kill(); 122 122 + console.log(`${entity.name} has died!`); 123 123 + } 124 124 + } 125 125 + } 126 126 + } 127 127 + 128 128 + // 3. ENTITY SETUP 129 129 + const player = new Actor({ x: 100, y: 100, width: 32, height: 32 }); // < ----- THIS IS THE ENITY 130 130 + player.addComponent(new HealthComponent()); 131 131 + 132 132 + // 4. Damage the player 133 133 + player.get(HealthComponent).damage(50); // player still alive 134 134 + player.get(HealthComponent).damage(60); // triggers system → player dies 135 135 + 136 136 + ``` 137 137 + 138 138 + What makes ECS so useful is that if you have a certian mechanic that can be re-used for different Actors or Entities, then slap a component on it and the system will just 'pickup' that behavior for that actor, makes it super easy to extend behaviors without re-writing code. 139 139 + 140 140 + In this example, you can give any Actor the ability to have health and die simply by adding the component to it.

+83

site/docs/00-tutorials/How-to's/ECS Primer/02-custom components.mdx

Reviewed

··· 1 1 + --- 2 2 + title: Custom Components 3 3 + slug: /custom-components 4 4 + section: Tutorials 5 5 + --- 6 6 + 7 7 + import keypress from './images/keypress.png'; 8 8 + 9 9 + ## Custom Components 10 10 + 11 11 + Components are the building blocks of ECS. They store an entity’s state in a modular way. By creating custom components, you can: 12 12 + 13 13 + - Encapsulate reusable data 14 14 + - Expose helper methods to manipulate that data 15 15 + - Keep logic separate from systems (or complement systems later) 16 16 + 17 17 + A component should describe “what an entity has”, not “what it does.” Systems are where behavior happens — but components can have convenience methods that make life easier. 18 18 + 19 19 + There are two ways you can build out a component: 20 20 + 21 21 + 1. The traditional way 22 22 + 2. [Systemless Components](./systemless-components) (advanced) 23 23 + 24 24 + Let's focus on traditional components first 25 25 + 26 26 + ### Example: Keyboard Control 27 27 + 28 28 + <img src={keypress} alt="Pressing Keyboard" style={{ width: "500px" }} /> 29 29 + 30 30 + ```ts 31 31 + import { Component, Engine } from 'excalibur'; 32 32 + 33 33 + type Directions = 'Left'|'Right'|'Up'|'Down'; 34 34 + 35 35 + export class PlayerMovementComponent extends Component { 36 36 + _enabled: boolean = true; 37 37 + speed = 150; 38 38 + heldKeys: Directions[] = []; 39 39 + keyboard: Keyboard; 40 40 + 41 41 + constructor(engine: Engine,speed?:number){ 42 42 + super(); 43 43 + if(speed) this.speed = speed; 44 44 + this.keyboard = engine.input.keyboard; 45 45 + } 46 46 + 47 47 + set enable(enable: boolean){ 48 48 + this._enabled = enable; 49 49 + } 50 50 + 51 51 + get enable(){ 52 52 + return this._enabled; 53 53 + } 54 54 + 55 55 + ``` 56 56 + 57 57 + To add this component to your Actor that you want controlled by keypress, simply: 58 58 + 59 59 + ```ts 60 60 + import { Engine, Actor, Color } from 'excalibur'; 61 61 + import { PlayerMovementComponent } from './PlayerMovementComponent'; 62 62 + import { MovementSystem } from './MovementSystem'; 63 63 + 64 64 + const engine = new Engine(); 65 65 + const player = new Actor({ x: 100, y: 100, width: 32, height: 32, color: Color.Red }); 66 66 + player.addComponent(new PlayerMovementComponent(engine, 100)); 67 67 + 68 68 + engine.add(player); 69 69 + engine.start(); 70 70 + ``` 71 71 + 72 72 + and to access this componet in your code you simply use: 73 73 + 74 74 + ```ts 75 75 + let keyboardControl = player.get(PlayerMovementCompontent); 76 76 + // now keyboardControl has the speed, enable, and heldKeys properties on it! 77 77 + // also it will have the engine reference to the keyboard input 78 78 + ``` 79 79 + 80 80 + We will look at the keyboard system in the next section. 81 81 + 82 82 + 83 83 +

+141

site/docs/00-tutorials/How-to's/ECS Primer/03-custom-systems.mdx

Reviewed

··· 1 1 + --- 2 2 + title: Wiring Custom Components 3 3 + slug: /wiring-up-your-custom-components 4 4 + section: Tutorials 5 5 + --- 6 6 + import moveGif from './images/movement.gif'; 7 7 + import sample1 from '!!raw-loader!./code/ecs-1.ts'; 8 8 + 9 9 + ## Connecting the Component to the System 10 10 + 11 11 + Let's continue the keyboard control system from the previous page. 12 12 + 13 13 + If we define our System as: 14 14 + 15 15 + :::note 16 16 + I'm using WASD keys here to improve the user experience of the Playground below. 17 17 + I'm not using arrow keys as it moves the browser. 18 18 + ::: 19 19 + 20 20 + 21 21 + ```ts 22 22 + // KeyBoardControlSystem.ts 23 23 + 24 24 + import { System, Engine, Actor, Keys, MotionComponent, SystemType, World, Vector } from 'excalibur'; 25 25 + import { PlayerMovementComponent } from './PlayerMovementComponent'; 26 26 + 27 27 + export class KeyboardControlSystem extends System { 28 28 + public systemType = SystemType.Update; 29 29 + query: Query<typeof PlayerMovementComponent | typeof MotionComponent>; 30 30 + 31 31 + constructor(world: World) { 32 32 + super(); 33 33 + // this tells the query which entities are needed 34 34 + this.query = world.query([PlayerMovementComponent, MotionComponent]); 35 35 + } 36 36 + 37 37 + update() { 38 38 + for (const entity of this.query.entities) { 39 39 + // get your components 40 40 + const keyboardControl = entity.get(PlayerMovementComponent); 41 41 + const movementComponent = entity.get(MotionComponent); 42 42 + 43 43 + // check enable flag on keyboard control 44 44 + if (!keyboardControl.enable) break; 45 45 + let speed = keyboardControl.speed; 46 46 + 47 47 + // set tracked velocity to zero 48 48 + let vX = 0; 49 49 + let vY = 0; 50 50 + 51 51 + // Check the input keys... 52 52 + 53 53 + //Up 54 54 + if (keyboardControl.keyboard.isHeld(Keys.W)) { 55 55 + // set held direction 56 56 + if (!keyboardControl.heldKeys.includes("Up")) keyboardControl.heldKeys.push("Up"); 57 57 + vY += -speed; 58 58 + } else { 59 59 + // clear held direction 60 60 + const index = keyboardControl.heldKeys.indexOf("Up"); 61 61 + if (index !== -1) keyboardControl.heldKeys.splice(index, 1); 62 62 + } 63 63 + 64 64 + //Down 65 65 + if (keyboardControl.keyboard.isHeld(Keys.S)) { 66 66 + // set held direction 67 67 + if (!keyboardControl.heldKeys.includes("Down")) keyboardControl.heldKeys.push("Down"); 68 68 + vY += speed; 69 69 + } else { 70 70 + // clear held direction 71 71 + const index = keyboardControl.heldKeys.indexOf("Down"); 72 72 + if (index !== -1) keyboardControl.heldKeys.splice(index, 1); 73 73 + } 74 74 + 75 75 + //Left 76 76 + if (keyboardControl.keyboard.isHeld(Keys.A)) { 77 77 + // set held direction 78 78 + if (!keyboardControl.heldKeys.includes("Left")) keyboardControl.heldKeys.push("Left"); 79 79 + vX += -speed; 80 80 + } else { 81 81 + // clear held direction 82 82 + const index = keyboardControl.heldKeys.indexOf("Left"); 83 83 + if (index !== -1) keyboardControl.heldKeys.splice(index, 1); 84 84 + } 85 85 + 86 86 + //Right 87 87 + if (keyboardControl.keyboard.isHeld(Keys.D)) { 88 88 + // set held direction 89 89 + if (!keyboardControl.heldKeys.includes("Right")) keyboardControl.heldKeys.push("Right"); 90 90 + vX += speed; 91 91 + } else { 92 92 + // clear held direction 93 93 + const index = keyboardControl.heldKeys.indexOf("Right"); 94 94 + if (index !== -1) keyboardControl.heldKeys.splice(index, 1); 95 95 + } 96 96 + 97 97 + //Set velocity on entity 98 98 + movementComponent.vel = new Vector(vX, vY); 99 99 + } 100 100 + } 101 101 + } 102 102 + ``` 103 103 + ### Key takeaways 104 104 + 105 105 + - We are using a Query to collect all impacted entities 106 106 + - We are grabbing their components 107 107 + - We are performing our 'logic' to manipulate the data for each update tik 108 108 + 109 109 + ## Implementing the system 110 110 + 111 111 + Systems get added to each [Scene](/docs/scenes) that uses them. For the sake of this example, we'll add it to the root scene. 112 112 + 113 113 + ```ts 114 114 + const game = new ex.Engine({ 115 115 + width: 800, // the width of the canvas 116 116 + height: 600, // the height of the canvas 117 117 + canvasElementId: '', // the DOM canvas element ID, if you are providing your own 118 118 + displayMode: ex.DisplayMode.FitScreen, // the display mode 119 119 + pointerScope: ex.PointerScope.Document // the scope of capturing pointer (mouse/touch) events 120 120 + }); 121 121 + 122 122 + let rootWorld = game.currentScene.world; 123 123 + // add your new system to the scene's world 124 124 + rootWorld.add(new KeyboardControlSystem(rootWorld)) 125 125 + 126 126 + game.start(); 127 127 + 128 128 + ``` 129 129 + 130 130 + Now if you test this out, the actor you place the component on should move with the WASD Keys, try it below! 131 131 + 132 132 + ## Try it out, using Excalibur Playground 133 133 + 134 134 + :::note 135 135 + Note on importing. There are two ways of importing Excalibur, you can import `* as ex` which is in the playground sample. 136 136 + Or you can import like above, and each specific module you want to pull in. It is up to you, we show both here. 137 137 + ::: 138 138 + 139 139 + <PlaygroundEmbed code={sample1} /> 140 140 + 141 141 + Finally, we'll discuss Systemless Components next

+44

site/docs/00-tutorials/How-to's/ECS Primer/04-systemless-components.mdx

Reviewed

··· 1 1 + --- 2 2 + title: Using Systemless Components 3 3 + slug: /systemless-components 4 4 + section: Tutorials 5 5 + --- 6 6 + 7 7 + ## Systemless Components 8 8 + 9 9 + Excalibur has a unique feature that not all ECS's contain. You can extend the gameclock update tick to the component. What this unlocks, is the ability to build simple logic into your component and skip the building of a system. 10 10 + 11 11 + This is explained very nicely in this [article](https://mattjennings.io/blog/systemless-components-with-excalibur-js) by Matt Jennings: 12 12 + 13 13 + Let's setup the example: 14 14 + 15 15 + ```ts 16 16 + import { Component, Entity, ActorEvents} from 'excalibur'; 17 17 + 18 18 + export class MyCustomSystemlessComponent extends Component { 19 19 + constructor(){ 20 20 + super(); 21 21 + } 22 22 + 23 23 + onAdd(owner: Entity): void { 24 24 + owner.on("preupdate", this.update.bind(this)); 25 25 + } 26 26 + 27 27 + onRemove(previousOwner: Entity): void { 28 28 + // this ensures you don't have a memory leak by creating a bunch of hanlders that don't get removed 29 29 + previousOwner.off("preupdate", this.update.bind(this)); 30 30 + } 31 31 + 32 32 + update(event: ActorEvents["preupdate"]){ 33 33 + // this fires with parent onPreUpdate() 34 34 + 35 35 + let engine = event.engine; // engine reference 36 36 + let elapsed = event.elapsed; // elapsed time since last update 37 37 + 38 38 + //... Add your behavior logic here that would normally be in a System 39 39 + 40 40 + } 41 41 + } 42 42 + ``` 43 43 + 44 44 + The magic shows up in a variety of ways. First let's wire up the onPreUpdate() tick from the owner actor. We do this by using the built in onAdd and onRemove methods for the Component class. Finally, you can add your 'system' logic in the update method. This is handy if you have a simple system you want to add, and this reduces the boilerplate a bit!

+117

site/docs/00-tutorials/How-to's/ECS Primer/code/ecs-1.ts

Reviewed

··· 1 1 + import * as ex from 'excalibur'; 2 2 + type Directions = "Left" | "Right" | "Up" | "Down"; 3 3 + 4 4 + // Component Definition 5 5 + class PlayerMovementComponent extends ex.Component { 6 6 + _enabled: boolean = true; 7 7 + speed = 150; 8 8 + heldKeys: Directions[] = []; 9 9 + keyboard: ex.Keyboard; 10 10 + 11 11 + constructor(engine: ex.Engine, speed?: number) { 12 12 + super(); 13 13 + if (speed) this.speed = speed; 14 14 + this.keyboard = engine.input.keyboard; 15 15 + } 16 16 + 17 17 + set enable(enable: boolean) { 18 18 + this._enabled = enable; 19 19 + } 20 20 + 21 21 + get enable() { 22 22 + return this._enabled; 23 23 + } 24 24 + } 25 25 + 26 26 + // System Definition 27 27 + class KeyboardControlSystem extends ex.System { 28 28 + public systemType = ex.SystemType.Update; 29 29 + query: ex.Query<typeof PlayerMovementComponent | typeof ex.MotionComponent>; 30 30 + 31 31 + constructor(world: ex.World) { 32 32 + super(); 33 33 + // this tells the query which entities are needed 34 34 + this.query = world.query([PlayerMovementComponent, ex.MotionComponent]); 35 35 + } 36 36 + 37 37 + update() { 38 38 + for (const entity of this.query.entities) { 39 39 + // get your components 40 40 + const keyboardControl = entity.get(PlayerMovementComponent); 41 41 + const movementComponent = entity.get( ex.MotionComponent); 42 42 + 43 43 + // enable flag on keyboard control 44 44 + if (!keyboardControl.enable) break; 45 45 + let speed = keyboardControl.speed; 46 46 + 47 47 + // set tracked velocity to zero 48 48 + let vX = 0; 49 49 + let vY = 0; 50 50 + 51 51 + // Check the input keys... 52 52 + 53 53 + //Up 54 54 + if (keyboardControl.keyboard.isHeld( ex.Keys.W)) { 55 55 + // set held direction 56 56 + if (!keyboardControl.heldKeys.includes("Up")) keyboardControl.heldKeys.push("Up"); 57 57 + vY += -speed; 58 58 + } else { 59 59 + // clear held direction 60 60 + const index = keyboardControl.heldKeys.indexOf("Up"); 61 61 + if (index !== -1) keyboardControl.heldKeys.splice(index, 1); 62 62 + } 63 63 + 64 64 + //Down 65 65 + if (keyboardControl.keyboard.isHeld( ex.Keys.S)) { 66 66 + // set held direction 67 67 + if (!keyboardControl.heldKeys.includes("Down")) keyboardControl.heldKeys.push("Down"); 68 68 + vY += speed; 69 69 + } else { 70 70 + // clear held direction 71 71 + const index = keyboardControl.heldKeys.indexOf("Down"); 72 72 + if (index !== -1) keyboardControl.heldKeys.splice(index, 1); 73 73 + } 74 74 + 75 75 + //Left 76 76 + if (keyboardControl.keyboard.isHeld( ex.Keys.A)) { 77 77 + // set held direction 78 78 + if (!keyboardControl.heldKeys.includes("Left")) keyboardControl.heldKeys.push("Left"); 79 79 + vX += -speed; 80 80 + } else { 81 81 + // clear held direction 82 82 + const index = keyboardControl.heldKeys.indexOf("Left"); 83 83 + if (index !== -1) keyboardControl.heldKeys.splice(index, 1); 84 84 + } 85 85 + 86 86 + //Right 87 87 + if (keyboardControl.keyboard.isHeld( ex.Keys.D)) { 88 88 + // set held direction 89 89 + if (!keyboardControl.heldKeys.includes("Right")) keyboardControl.heldKeys.push("Right"); 90 90 + vX += speed; 91 91 + } else { 92 92 + // clear held direction 93 93 + const index = keyboardControl.heldKeys.indexOf("Right"); 94 94 + if (index !== -1) keyboardControl.heldKeys.splice(index, 1); 95 95 + } 96 96 + 97 97 + //Set velocity on entity 98 98 + movementComponent.vel = new ex.Vector(vX, vY); 99 99 + } 100 100 + } 101 101 + } 102 102 + 103 103 + const game = new ex.Engine({ 104 104 + canvasElementId: 'preview-canvas', 105 105 + displayMode: ex.DisplayMode.FitContainer, 106 106 + width: 600, 107 107 + height: 400 108 108 + }); 109 109 + 110 110 + let rootWorld = game.currentScene.world; 111 111 + // add your new system to the scene's world 112 112 + rootWorld.add(new KeyboardControlSystem(rootWorld)); 113 113 + 114 114 + const player = new ex.Actor({ x: 300, y: 200, width: 32, height: 32, color: ex.Color.Red }); 115 115 + player.addComponent(new PlayerMovementComponent(game, 100)); 116 116 + game.add(player); 117 117 + game.start();

site/docs/00-tutorials/How-to's/ECS Primer/images/ecs.png

Reviewed

This is a binary file and will not be displayed.

site/docs/00-tutorials/How-to's/ECS Primer/images/keypress.png

Reviewed

This is a binary file and will not be displayed.

site/docs/00-tutorials/How-to's/ECS Primer/images/movement.gif

Reviewed

This is a binary file and will not be displayed.

+10

site/docs/00-tutorials/How-to's/_catagory_.json

Reviewed

··· 1 1 + { 2 2 + "label": "How-to's", 3 3 + "position": 1, 4 4 + "collapsed": true, 5 5 + "link": { 6 6 + "type": "doc", 7 7 + "title": "How-To Series", 8 8 + "description": "Different Game Dev Topics Explained" 9 9 + } 10 10 + }

+1 -1

site/docusaurus.config.ts

Reviewed

··· 70 70 'classic', 71 71 { 72 72 docs: { 73 73 - sidebarCollapsed: false, 73 73 + sidebarCollapsed: true, 74 74 sidebarPath: './sidebars.ts', 75 75 // Please change this to your repo. 76 76 // Remove this to remove the "edit this page" links.