🎮 GameByte Framework

Modern Mobile-First Game Development Framework

A comprehensive JavaScript game framework that unifies 2D and 3D game development with Laravel-inspired architecture.

✨ View Live Demos • 📖 Quick Start • 🎨 UI Components

✨ Features

🎨 Modern UI System - Beautiful components with gradients, glow, shadows, animations
🚀 Laravel Architecture - Service providers, dependency injection, facades
🎬 Scene Management - Smooth transitions & lifecycle management
⚡ Physics Integration - Matter.js (2D) & Cannon.js (3D)
🔊 Audio System - Spatial audio, music, SFX with mobile optimization
📱 Mobile-First - 44px touch targets, performance optimizations
🎯 TypeScript - 100% type safety
🎮 Dual Rendering - Pixi.js v8 (2D) & Three.js (3D)

🚀 Quick Start

Installation

npm install gamebyte-framework

Basic 2D Game

import { createGame } from 'gamebyte-framework';
import * as PIXI from 'pixi.js';

// Create and initialize
const game = createGame();
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

await game.initialize(canvas, '2d');

// Get services
const renderer = game.make('renderer');
const sceneManager = game.make('scene.manager');

// Start game loop
game.start();

UMD Build (Browser)

<!DOCTYPE html>
<html>
<head>
    <title>My Game</title>
</head>
<body>
    <!-- Load Pixi.js from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.js"></script>

    <!-- Load GameByte -->
    <script src="./dist/gamebyte.umd.js"></script>

    <script>
        const game = GameByteFramework.createGame();
        // Your game code...
    </script>
</body>
</html>

🎨 UI Components

Modern Button

import { UIButton } from 'gamebyte-framework';

const button = new UIButton({
    text: 'PLAY',
    width: 200,
    height: 60,
    backgroundColor: 0x4CAF50,
    gradient: { enabled: true, colorTop: 0x66BB6A, colorBottom: 0x388E3C },
    glowEffect: true,
    shadowEffect: true,
    rippleEffect: true
});

button.on('click', () => console.log('Clicked!'));
scene.addChild(button.getContainer());

TopBar with Resources

import { TopBar, TopBarItemType } from 'gamebyte-framework';

const topBar = new TopBar({
    width: 800,
    items: [
        {
            id: 'coins',
            type: TopBarItemType.RESOURCE,
            icon: coinTexture,
            value: 1000,
            format: 'abbreviate', // "1K"
            animated: true
        },
        {
            id: 'timer',
            type: TopBarItemType.TIMER,
            value: 60,
            format: 'time' // "1:00"
        }
    ]
});

scene.addChild(topBar.getContainer());
topBar.updateItem('coins', 1500, true);

🎬 Scene Management

import { BaseScene } from 'gamebyte-framework';

class MyScene extends BaseScene {
    constructor() {
        super('my-scene', 'My Scene');
    }

    async initialize() {
        await super.initialize();
        // Setup your scene
    }

    update(deltaTime: number) {
        super.update(deltaTime);
        // Update game logic
    }
}

// Add and switch scenes
const scene = new MyScene();
sceneManager.add(scene);
await sceneManager.switchTo('my-scene', {
    type: 'fade',
    duration: 500
});

🏗️ Architecture

Service Container

// Bind services
game.bind('my.service', () => new MyService());
game.singleton('global.service', () => new GlobalService());

// Resolve services
const service = game.make('my.service');

Service Providers

import { AbstractServiceProvider } from 'gamebyte-framework';

export class MyServiceProvider extends AbstractServiceProvider {
    register(app: GameByte): void {
        app.singleton('my.feature', () => new MyFeature());
    }
}

game.register(new MyServiceProvider());

Facades

import { Renderer, Scenes, UI, Audio } from 'gamebyte-framework';

Renderer.start();
await Scenes.switchTo('game');
const button = UI.createButton({...});
Audio.playMusic('background');

🎮 Core Systems

Physics

import { Physics } from 'gamebyte-framework';

// 2D Physics (Matter.js)
Physics.create2DWorld({ gravity: { x: 0, y: 1 } });
const body = Physics.createBody({ x: 100, y: 100, width: 50, height: 50 });

// 3D Physics (Cannon.js)
Physics.create3DWorld({ gravity: { x: 0, y: -9.8, z: 0 } });

Audio

import { Music, SFX, Spatial } from 'gamebyte-framework';

Music.play('background', { loop: true, volume: 0.7 });
SFX.play('click');
Spatial.play('explosion', { position: { x: 10, y: 0, z: 5 } });

Input

import { Input } from 'gamebyte-framework';

Input.keyboard.on('KeyW', () => console.log('W pressed'));
Input.touch.on('tap', (e) => console.log('Tapped at:', e.x, e.y));
Input.gamepad.on('button-a', () => console.log('A pressed'));

Assets

import { Assets } from 'gamebyte-framework';

await Assets.load([
    { key: 'player', url: 'player.png', type: 'texture' },
    { key: 'music', url: 'music.mp3', type: 'audio' }
]);

const texture = Assets.get('player');

🌐 3D Rendering

GameByte supports 3D rendering with Three.js:

UMD Build: Use direct Three.js API (see docs/3D_RENDERING_GUIDE.md)
ESM/CJS: Import ThreeRenderer and BaseScene3D directly

// ESM/CJS approach
import { createGame } from 'gamebyte-framework';
import * as THREE from 'three';

const game = createGame();
await game.initialize(canvas, '3d');

// Use Three.js API directly for 3D scenes
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
// ... rest of Three.js setup

📖 Full 3D Rendering Guide →

📁 Project Structure

gamebyte-framework/
├── src/
│   ├── core/              # Framework core
│   ├── rendering/         # 2D/3D renderers
│   ├── ui/                # UI components
│   ├── scenes/            # Scene management
│   ├── physics/           # Physics engines
│   ├── audio/             # Audio system
│   ├── input/             # Input handling
│   ├── assets/            # Asset management
│   ├── services/          # Service providers
│   ├── facades/           # Static facades
│   └── index.ts           # Main entry
├── dist/
│   ├── index.js           # ES module
│   ├── index.cjs.js       # CommonJS
│   ├── gamebyte.umd.js    # UMD bundle (2D only)
│   └── renderers/
│       └── three3d.js     # 3D renderer bundle
├── docs/
│   └── 3D_RENDERING_GUIDE.md
├── index.html             # Demo hub
├── test-*.html            # Demo pages
└── README.md

🎓 Live Demos

Demo Hub - All demos in one place
Modern UI - Beautiful button components
TopBar System - Complete UI system
2D Simple - Basic 2D rendering
3D Direct API - Three.js integration
Graphics API - Graphics abstraction

🛠️ Development

# Install dependencies
npm install

# Build framework
npm run build

# Development mode (watch)
npm run dev

# Run tests
npm test

# Start demo server
npx http-server -p 8080

📚 Documentation

📖 3D Rendering Guide - Complete 3D setup guide
📝 Changelog - Version history
🤝 Contributing - Contribution guidelines
🗺️ Roadmap - Development roadmap

🎯 Roadmap

✅ v1.0 - Core Framework (Current)

✅ Service container & providers
✅ 2D rendering (Pixi.js v8)
✅ 3D rendering (Three.js)
✅ Scene management
✅ Modern UI components
✅ Physics (Matter.js, Cannon.js)
✅ Audio system
✅ Input handling
✅ Asset management

🚧 v1.1 - Enhanced UI (In Progress)

Enhanced animations
More components (Slider, Toggle, Modal)
Visual effects system

📋 v2.0 - Tools & Services (Planned)

Level editor
Analytics integration
Cloud save system
A/B testing framework

🤝 Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

Fork the repository
Create a feature branch
Commit your changes
Push to the branch
Open a Pull Request

📄 License

MIT License - see LICENSE file for details.

🙏 Credits

Built on amazing open-source libraries:

Pixi.js - 2D rendering
Three.js - 3D rendering
Matter.js - 2D physics
Cannon.js - 3D physics

Inspired by Laravel Framework architecture.

Built with ❤️ for Game Developers

⭐ Star us on GitHub — it helps!

Live Demos • Quick Start • Documentation

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
.claude		.claude
.github		.github
assets		assets
docs		docs
src		src
tests		tests
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
ROADMAP.md		ROADMAP.md
babel.config.test.js		babel.config.test.js
demo-archero-3d.html		demo-archero-3d.html
demo-archero-hybrid.html		demo-archero-hybrid.html
demo-archero-responsive.html		demo-archero-responsive.html
demo-archero-simple.html		demo-archero-simple.html
demo-archero-style.html		demo-archero-style.html
index.html		index.html
jest.config.js		jest.config.js
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js
rollup.umd.config.js		rollup.umd.config.js
test-3d-simple.html		test-3d-simple.html
test-graphics-api.html		test-graphics-api.html
test-ui-umd.html		test-ui-umd.html
tsconfig.json		tsconfig.json

License

gamebyte-ai/gamebyte-framework

Folders and files

Latest commit

History

Repository files navigation