A lightweight, modular 2D game engine built with JavaScript, designed for creating browser-based games with ease and efficiency.
The RedFox Studios 2D Game Engine is a JavaScript-based game development framework that provides essential tools and components for creating 2D games that run in web browsers. This engine focuses on simplicity and performance, making it ideal for small to medium-sized game projects.
- Scene-based game structure
- Entity-Component System
- Fixed timestep game loop
- Smooth camera system with following behavior
- Basic 2D physics simulation
- Collision detection and response
- Vector-based movement and calculations
- Shape-based rendering system
- Basic animations support
- Camera system with smooth following
- Flexible rendering pipeline
- Keyboard input handling
- Audio playback system
- Sound effects and background music support
- Asset loading and management
- State management system
- UI management system
- Debug utilities
- Modern web browser
- Node.js (version 12.0.0 or higher)
- npm (usually comes with Node.js)
-
Clone the repository:
git clone https://github.com/RedFox-Studios/Website_2D_GameEngine.git
-
Navigate to the game engine directory:
cd Website_2D_GameEngine/game-engine -
Install dependencies:
npm install
-
Build the engine:
npm run build
-
Create a new HTML file:
<!DOCTYPE html> <html> <head> <title>My First Game</title> </head> <body> <canvas id="gameCanvas" width="800" height="600"></canvas> <script type="module" src="game.js"></script> </body> </html>
-
Create a new game file (game.js):
import GameEngine from './path/to/game-engine.js'; import Entity from './path/to/core/Entity.js'; import Shape from './path/to/rendering/Shape.js'; // Initialize the engine const engine = new GameEngine('gameCanvas'); // Create a simple game object class GameObject extends Entity { constructor(x, y) { super({ x, y, width: 50, height: 50 }); this.setShape(new Shape('rectangle', this.width, this.height, 'blue')); } update(deltaTime) { // Add your game logic here } } // Start the game async function startGame() { const scene = engine.createScene({ width: 800, height: 600 }); const gameObject = new GameObject(400, 300); scene.addEntity(gameObject); engine.setActiveScene(scene); engine.start(); } startGame();
The GameEngine class is the main entry point for the engine. It manages all core systems and coordinates their interaction:
const engine = new GameEngine('canvasId');Key responsibilities:
- Scene management
- System coordination
- Game loop management
- Asset loading
Scenes represent different states or levels in your game:
const scene = engine.createScene({
width: 800,
height: 600
});
engine.setActiveScene(scene);Entities are the basic game objects. They can have positions, shapes, and behaviors:
class Player extends Entity {
constructor(x, y) {
super({ x, y, width: 32, height: 32 });
this.setShape(new Shape('rectangle', this.width, this.height, 'blue'));
}
update(deltaTime) {
// Update logic
}
onCollision(other) {
// Collision handling
}
}The engine includes basic physics simulation:
- Vector-based movement
- Gravity simulation
- Collision detection
- Velocity and acceleration
Example of physics implementation:
class PhysicsObject extends Entity {
constructor(x, y) {
super({ x, y, width: 32, height: 32 });
this.velocity = new Vector2D(0, 0);
this.acceleration = new Vector2D(0, 0);
}
update(deltaTime) {
// Apply physics
this.velocity.add(this.acceleration.multiply(deltaTime));
this.position.add(this.velocity.multiply(deltaTime));
}
}The engine provides a simple input management system:
// Check for key press
if (engine.input.isKeyDown('ArrowLeft')) {
// Move left
}
// Multiple key support
if (engine.input.isKeyDown('Space') && !this.isJumping) {
// Jump
}Handle game audio with the built-in audio system:
// Play a sound effect
engine.audioManager.playSound('jump');
// Play background music
engine.audioManager.playMusic('bgm');
// Stop sounds
engine.audioManager.stopSound('jump');
engine.audioManager.stopMusic();class GameEngine {
constructor(canvasId)
async loadAssets(assetManifest)
createScene(sceneConfig)
setActiveScene(scene)
start()
}class Entity {
constructor(config)
update(deltaTime)
fixedUpdate(fixedDeltaTime)
render(ctx)
setShape(shape)
onCollision(other)
}class Vector2D {
constructor(x = 0, y = 0)
add(vector)
subtract(vector)
multiply(scalar)
divide(scalar)
magnitude()
normalize()
static distance(v1, v2)
}Check out the examples directory for complete game examples:
- Simple Platformer: A basic platforming game demonstrating physics and collision
- More examples coming soon!
We welcome contributions to the RedFox Studios 2D Game Engine! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For support, please open an issue in the GitHub repository or contact us through our website.
Made with ❤️ by RedFox Studios.