This guide will walk you through the basics of creating a game with the Forge engine.
The Forge engine is organized into the following files and directories:
helpers.ts: A collection of helper functions.types.ts: Contains the TypeScript interfaces used throughout the engine.README.md: The main README file for the project.docs/: Contains the documentation for the engine.engine/: Contains the engine page for creating games.Math/: Contains theVector.tsfile, which is a simple vector library.Parts/: Contains the core components of the engine.public/: Contains the public assets for the game, such as images and scripts.src/: Contains the source code for the game.
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. A typical game structure might look like the following:
Game -> Start Scene ----> Text --------> Transform ----> Start Button --------> Transform -> Game Scene ----> Player --------> Transform --------> SpriteRender --------> BoxCollider ----> Enemy --------> Transform --------> SpriteRender --------> BoxCollider ----> Coin --------> Transform --------> SpriteRender --------> BoxCollider ... etc 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.
Let's create the simplest possible game to see the engine in action. This game will display the text "Hello, World!" on the screen.
First, you need an HTML file to host your game. Create an index.html in your project's public directory.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>My Forge Game</title><style>body{margin:0; overflow: hidden; background-color:#333} canvas{display: block} </style></head><body><canvasid="game-canvas"></canvas><scriptsrc="script.js"></script></body></html>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.
import{Game}from'../Parts/Game';import{Scene}from'../Parts/Scene';import{GameObject}from'../Parts/GameObject';import{Transform}from'../Parts/Children/Transform';import{TextRender}from'../Parts/Children/TextRender';import{Vector}from'../Math/Vector';// 1. Create the Game instanceconstmyGame=newGame({name: 'HelloWorldGame',canvas: 'game-canvas',// The ID of the canvas in your HTMLwidth: 800,height: 600,devmode: true// Enable debug tools});// 2. Create a SceneconstmainScene=newScene({name: 'MainScene'});// 3. Create a GameObject for our textconsthelloText=newGameObject({name: 'HelloWorldText'});// 4. Add components to the GameObjecthelloText.addChildren(// All GameObjects need a Transform for position, rotation, and scalenewTransform({position: newVector(400,300)// Center of the 800x600 canvas}),// The TextRender component will draw our textnewTextRender({name: 'MyText',textContent: 'Hello, World!',font: '48px Arial',color: 'white',align: 'center'}));// 5. Add the GameObject to the ScenemainScene.addChild(helloText);// 6. Add the Scene to the GamemyGame.addChild(mainScene);// 7. Start the game!myGame.start(mainScene);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.
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.
Congratulations, you've made your first game with the Forge engine! From here, you can explore the other Parts to add images, player input, physics, and more.