You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Parts/CharacterMovement.ts
+1Lines changed: 1 addition & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -18,6 +18,7 @@ export class CharacterMovement extends Part {
18
18
19
19
act(_delta: number): void{
20
20
if(!this.input){
21
+
if(!this.warned.has("MissingInput"))this.top?.warn(`CharacterMovement <${this.name}> (${this.id}) is missing an input property. Please create an input on the scene and pass it.`) ? this.warned.add("MissingInput") : null;
constseen=this.top?.warn(`AnimatedSprite <${this.name}> attached to ${this.parent?.name} does not have a Transform component. Skipping rendering. This will only show once.`);
244
-
if(seen)this.warned.add("TransformMissing");
253
+
this.top?.warn(`AnimatedSprite <${this.name}> attached to ${this.parent?.name} does not have a Transform component. Skipping rendering. This will only show once.`) ? this.warned.add("TransformMissing") : null;
245
254
}
246
255
return;
247
256
}
@@ -271,7 +280,7 @@ export class AnimatedSprite extends Renderer {
271
280
// Create a neat little vertical progress bar for the current animation using an embedded HTML div
272
281
constbarHeight=15;// px
273
282
constbarWidth=6;// px
274
-
constprogress=delta/duration;
283
+
constprogress=this.lastFrameTime/duration;
275
284
this.hoverbug=// use a different loop emoji for loop and bounce
this.top?.warn(`Button <${this.name}> (${this.id}) does not have a Collider sibling. It may not function correctly without a collider for input detection.`) ? this.warned.add("MissingBoxCollider") : undefined;
This guide will walk you through the basics of creating a game with the Forge engine.
3
4
4
-
Game is a part -> act -> defers to currentScene.act()
5
-
Scene is a part -> act -> loops through layers -> layer.act();
6
-
Layer is a part -> act -> loops through GameObjects -> gameObject.act();
7
-
GameObjects are parts -> act -> goes through child parts and calls act on those (maybe renderers, maybe physics engines, movement, etc)
5
+
## Project Structure
6
+
7
+
The Forge engine is organized into the following files and directories:
8
+
9
+
-`helpers.ts`: A collection of helper functions.
10
+
-`types.ts`: Contains the TypeScript interfaces used throughout the engine.
11
+
-`README.md`: The main README file for the project.
12
+
-`docs/`: Contains the documentation for the engine.
13
+
-`engine/`: Contains the engine page for creating games.
14
+
-`Math/`: Contains the `Vector.ts` file, which is a simple vector library.
15
+
-`Parts/`: Contains the core components of the engine.
16
+
-`public/`: Contains the public assets for the game, such as images and scripts.
17
+
-`src/`: Contains the source code for the game.
18
+
19
+
## Overview
20
+
21
+
The Forge engine is build on the core concept of trees. We consider each node on the tree a "Part" in the game. The tree always begins with a Game part, and then it can be built further from there.
22
+
A typical game structure might look like the following:
23
+
24
+
```
25
+
Game
26
+
-> Start Scene
27
+
----> Text
28
+
--------> Transform
29
+
----> Start Button
30
+
--------> Transform
31
+
32
+
-> Game Scene
33
+
----> Player
34
+
--------> Transform
35
+
--------> SpriteRender
36
+
--------> BoxCollider
37
+
----> Enemy
38
+
--------> Transform
39
+
--------> SpriteRender
40
+
--------> BoxCollider
41
+
----> Coin
42
+
--------> Transform
43
+
--------> SpriteRender
44
+
--------> BoxCollider
45
+
... etc
46
+
```
47
+
48
+
In order to build a game, you would mix and match Parts together to build your game. There are a few prebuilt parts that exist to simplify the development process, but you will need to build the core functionality yourself.
49
+
50
+
## Your First Game: "Hello, World!"
51
+
52
+
Let's create the simplest possible game to see the engine in action. This game will display the text "Hello, World!" on the screen.
53
+
54
+
### 1. Set up your HTML file
55
+
56
+
First, you need an HTML file to host your game. Create an `index.html` in your project's `public` directory.
57
+
58
+
```html
59
+
<!DOCTYPE html>
60
+
<htmllang="en">
61
+
<head>
62
+
<metacharset="UTF-8">
63
+
<title>My Forge Game</title>
64
+
<style>
65
+
body { margin: 0; overflow: hidden; background-color: #333; }
66
+
canvas { display: block; }
67
+
</style>
68
+
</head>
69
+
<body>
70
+
<canvasid="game-canvas"></canvas>
71
+
<scriptsrc="script.js"></script>
72
+
</body>
73
+
</html>
74
+
```
75
+
76
+
### 2. Create the main script
77
+
78
+
Next, create a `script.js` file (or `main.ts` if you are using TypeScript) in your `src` directory. This is where your game's code will live.
// All GameObjects need a Transform for position, rotation, and scale
106
+
newTransform({
107
+
position:newVector(400, 300) // Center of the 800x600 canvas
108
+
}),
109
+
// The TextRender component will draw our text
110
+
newTextRender({
111
+
name:'MyText',
112
+
textContent:'Hello, World!',
113
+
font:'48px Arial',
114
+
color:'white',
115
+
align:'center'
116
+
})
117
+
);
118
+
119
+
// 5. Add the GameObject to the Scene
120
+
mainScene.addChild(helloText);
121
+
122
+
// 6. Add the Scene to the Game
123
+
myGame.addChild(mainScene);
124
+
125
+
// 7. Start the game!
126
+
myGame.start(mainScene);
127
+
128
+
```
129
+
130
+
### 3. Run your game
131
+
132
+
You will need a local development server to run your game. If you have one set up, navigate to your `public/index.html`. You should see "Hello, World!" displayed in the center of the canvas.
133
+
134
+
Because `devmode` is on, you can also see the node tree on the right side of the screen, which is a powerful tool for debugging and understanding your game's structure.
135
+
136
+
Congratulations, you've made your first game with the Forge engine! From here, you can explore the other `Part`s to add images, player input, physics, and more.
0 commit comments