Skip to main content

Installation

GameByte Framework can be installed via npm or used directly in the browser via CDN.

🎮Hello World - Verify Your Installation
⛶
Loading demo...
npm install @gamebyte/framework

Peer Dependencies​

GameByte requires these peer dependencies based on your usage:

# For 2D games
npm install pixi.js

# For 3D games
npm install three

# For 2D physics
npm install matter-js

# For 3D physics
npm install cannon-es

TypeScript Configuration​

GameByte is written in TypeScript and includes type definitions. No additional @types packages needed.

// tsconfig.json (recommended settings)
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true
  }
}

CDN (Browser)​

For quick prototyping or simple games, use the UMD build:

<!DOCTYPE html>
<html>
<head>
    <title>My Game</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <!-- Load Pixi.js from CDN (required for 2D) -->
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.js"></script>

    <!-- Load GameByte -->
    <script src="https://cdn.jsdelivr.net/npm/@gamebyte/framework/dist/gamebyte.umd.js"></script>

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

Optional CDN Dependencies​

<!-- For 3D rendering -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

<!-- For 2D physics -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/matter.min.js"></script>

<!-- For 3D physics -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cannon-es.js"></script>

Module Formats​

GameByte provides multiple module formats:

FormatFileUse Case
ESMdist/index.jsModern bundlers (Vite, Webpack 5)
CJSdist/index.cjs.jsNode.js, older bundlers
UMDdist/gamebyte.umd.jsBrowser script tag

ESM Import​

import { createGame, UIButton, BaseScene } from '@gamebyte/framework';

Selective Imports​

For smaller bundles, import specific modules:

// Only 2D rendering
import { PixiRenderer } from 'gamebyte-framework/2d';

// Only 3D rendering
import { ThreeRenderer } from 'gamebyte-framework/3d';

// Only 2D physics
import { MatterPhysics } from 'gamebyte-framework/physics2d';

Verification​

Verify installation with a simple test:

import { createGame } from '@gamebyte/framework';

const game = createGame();
console.log('GameByte version:', game.version);
// Should output: "GameByte version: 1.0.0"

Next Steps​