For full documentation, see FrostFlake Docs! For a crude demo, check out my tiny example game called AtmosphereZero, with full sourcecode available on GitHub.
I originally started FrostFlake in 2014 as a way to have fun while learning the deeper aspects of JavaScript. I wanted to build a game engine with a lean, but functional, feature set and few dependencies so I wrote it in ES5. I rewrote the original engine in TypeScript in 2017 but then converted it to ES6 because I hoped to have zero dependencies. ES6 support was a mess and creating a build system that worked required tons of dependencies. So, we converted the engine back to TypeScript as a community effort.
This iteration of the engine has no dependencies outside of TypeScript itself. It uses a canvas renderer, not WebGL. The goal was to make it as simple as possible for a beginner to start playing with the engine.
If you use this, I'd love to know how you're using it and what you think.
The master branch is currently where all new work happens. PRs should target the master branch.
A "release" for FrostFlake means a new package uploaded to NPM. Releases should branch from main and be tagged with semantic versioning.
A.B.C.D
- A - Major version. This will probably be "1" forever.
- B - Minor version. Releases that add new features increment this number
- C - Revision. Fixes to a minor version should increment this number
- D - Build. This is not in use. If we get to an automated build system, this number should be incremented by CI/CD
- FrostFlake: the core engine provides a game loop with a
GameTimeobject tracking the time elapsed between game updates and the total time elapsed. - Camera: a camera supporting position, velocity, acceleration, drag, and resolution scaling.
- CanvasRenderer: a simple-but-fast canvas renderer (no WebGL).
- Render Targets: the renderer can draw with a custom sprite list, camera and unique canvas. A
DataUrlcan be extracted from the unique canvas and used as a new sprite texture. - Input: a class that provides mouse and keyboard input management.
- View: the entry point for the scene graph, which manages a list of
Positionableobjects. - Positionable: the base class for most game objects, provides basic physics
- Sprite: a common base class for game objects. Supports spritesheeting, frame-based animation, drawscaling, collision, and parent/child relationships with relative coordinate systems.
- MathUtil: a utility class that provides some common 2D geometry calculations.
- Collision: FrostFlake provides two shapes, Circle and (axis-aligned) Rectangle, which support collision testing, repositioning, and simple bounce physics. This is more than enough for most 2D games!
We are in the process of refactoring and testing this engine in TypeScript. We'll update this section as soon as we have implemented and tested a recommended path to get started!
We are in the process of refacotring and testing this engine. Once that is complete, we'll file issues and label issues that are good for new contributors!
Here are features I'd like to add. This is a good place to start if you want to contribute. Keep in mind that the point of this engine is simplicity for beginners so please reach out if you plan to PR a new feature!
- Define docs pattern, docs should be in a
docsfolder and should be GitHub markdown - Complete TypeScript conversion: annotate variables and method arguments with Types
- Improve TMX Tilemap map support
- Implement LDtk map support
- Test building with Electron and document
- Touch input system (currently only Mouse and Keyboard are supported)
- Text rendering system
- Improve asset loading and texture buffering
- Change callback-based loading system to use Promises
- Improved build system (source map generation is not working correctly)
- Use ES6 modules
- Add color property to shapes and use it when rendering debug outlines
- Render target demo
- Audio playing system
- Circle vs circle collision with basic physics
- AAR vs AAR collision with basic physics
- AAR vs circle collision with basic physics