TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published


    v2.0.0 released! Changelog

    | Docs | Wiki | Getting Started | Demos | Download |

    Build Badge Release Badge License Badge wakatime Lint Badge Format Badge code style: prettier

    A 2D Game Engine for the web.


    • Customizable Hitbox Based Physics Engine
    • Multiple Scenes
    • Fast & Performant
    • Sprites & Spritesheets
    • Many GameObjects
    • Plugins & PluginManager
    • Multiple Cameras with Effects
    • Animations & State Machines & Cutscenes
    • Hitboxes and Colliders
    • Keyboard, and Mouse Inputs
    • DPR / Mobile Scaling
    • Advanced Particle System
    • Cache & Fast Loading Times
    • Effects and Presets
    • Advanced UI System
    • Groups & Management
    • Advanced Tilemap System
    • Small Package Size
    • Static Lighting
    • Asset Preloader & Manager
    • Textures & Manager
    • Made fully in TypeScript
    • Typedefs
    • Docs
    • A lot more...

    Performance & Compatibility

    Browser Requirements

    1. Browser supports ES6 (EcmaScript2015)
    2. Browser supports Canvas APIs


    1. Chromium Based Browsers, includes Chrome, Opera, Edge, Vivaldi, and Brave
    2. Safari
    3. Firefox | Bugs


    • Google Chrome or any other Chromium based browser

    Browser Bugs

    Firefox Bugs

    • More stuttering than Chromium Browsers and Safari.
    • Garbage collection occurs more often than Safari and Chromium Browsers. (Causes very minor and not noticeable stutters.)



    1. Download the latest release.
    2. Setup an asset bundler like webpack or parcel.
    3. Import DuckEngine.
    4. Read the docs.


    1. Run npm install duckengine.
    2. Setup an asset bundler like webpack or parcel.
    3. Import DuckEngine.
    4. Read the docs.


    1. Setup an asset bundler like webpack or parcel.
    2. Import DuckEngine from URL
    3. Read the docs.

    1. Download DuckEngine from
    2. Import DuckEngine into your project.
    3. Read the docs.


    Learn how to use DuckEngine with simple, clean, documentation with typings and more.


    Ask questions, share ideas, engage with the community, and share your work with DuckEngine Discussions.


    Read and learn about DuckEngine with the DuckEngine wiki.

    How to use with Typescript

    How to use DuckEngine with Typescript.

    1. Setup webpack/parcel and tsconfig.
    2. Import DuckEngine and Duck for types.

    Not working ? Add the following to your tsconfig.json

        "typeRoots": [
        "types": [

    Duck Namespace

    The Duck Namespace has types such as gameobject, every class config, all classes, and more.

    Typescript Example

    Developers' Guide


    1. Knowledge of TypeScript, Git, and HTML Canvas.
    2. Reading and agreeing to the Contributing and Code of Conduct documents.
    3. Basic knowledge of how DuckEngine works.

    How to contribute

    1. Reading and agree to the Contributing and Code of Conduct documents.
    2. Fork the repository and create a new branch following the branch guidelines.
    3. Clone the fork to your device.
    4. CD (change directories) into the cloned directory.
    5. Run yarn upgrade.
    6. Run yarn run build or ctrl + shift + b for vscode users.
    7. Make your changes.
    8. Test your changes on codesandbox by forking this codesandbox and updating the duckengine.js file. (Or any other way you would like to test it.)
    9. Create a pull request.
    10. Wait for it to be reviewed and revised and possibly merged.

    Dev Scripts

    1. yarn run test - Opens the codesandbox test.
    2. yarn run build - Compiles typescript, bundles files, creates minified version, builds docs, and copies package.json to dist.
    3. yarn run build:docs - Uses TypeDoc to build docs.
    4. yarn run webpack - Bundles files in lib directory.
    5. yarn run minify - Uses uglifyjs to minify bundled file.
    6. yarn run format - Uses Prettier to format files.
    7. yarn run format:watch - Watches for changes and formats once changes are saved.
    8. yarn run lint - Uses ESLint to lint all files in the src directory.
    9. yarn run lint:watch - Watches for changes and fixes all fixable issues found by ESLint.
    10. yarn run lint:fix - Uses ESLint to fix all fixable issues found by ESLint.
    11. yarn run tree - Prints out all files and directories used in readme.
    12. yarn run serve - Serves the docs on :8080.
    13. yarn run checkout - Runs the checkout shell script with bash. Run before thinking about publishing a release.


    1. main - main branch
    2. staging - stage changes to this branch


    DuckEngine follows SemVer.


    Simple Demo Game

    Test Template

    Particle Test

    Tilemap test


    The cube in the DuckEngine Logo is by José Manuel de Laá from the Noun Project.




    Bleart Emini


    npm i duckengine

    DownloadsWeekly Downloads






    Unpacked Size

    67.8 MB

    Total Files


    Last publish


    • ksplat