Hilo

Hilo is an HTML5 game engine for building 2D games that run across browsers and devices. It renders graphics through Canvas, DOM, or WebGL backends, automatically selecting the best option for the target environment. The engine provides a complete game development solution with sprite, skeletal, and particle animation, along with a texture atlas system for efficient image loading and rendering.

The framework distinguishes itself through its integration of the DragonBones skeletal animation engine, which drives bone-based character movement without frame-by-frame sprites, and its Chipmunk physics simulation for realistic collisions, gravity, and rigid body interactions. It offers a plugin-based module architecture for assembling game logic from independent, reusable components, and a unified pointer event system that maps mouse and touch input into a single cross-platform interface. A command-line project scaffolding tool generates complete game directories with build configuration and starter code.

The engine includes asynchronous asset loading with progress tracking, audio playback via HTMLAudioElement and Web Audio APIs, and a scene graph display hierarchy for organizing visual objects. It supports bitmap caching for performance optimization, camera and viewport management with target following and zoom, and a range of UI components including multi-state buttons. Example implementations demonstrate the framework's capabilities through recreations of popular game genres such as 2048, Flappy Bird, and Fruit Ninja.

Features

Multi-Backend Renderers - Renders game graphics using Canvas, DOM, or WebGL renderers, automatically selecting the best option for the target browser.
2D Game Engines - Provides a complete 2D game engine with sprite, skeletal, and particle animation across multiple rendering backends.
Chipmunk Physics Simulators - Applies real-time physics simulation using Chipmunk for collisions, gravity, and rigid body interactions.
Chipmunk Physics Engines - Integrates the Chipmunk 2D physics engine for gravity, collisions, and rigid body interactions.
Animation Tweening - Provides property tweening with configurable easing curves for animating object attributes over time.
Value Tweens - Ships value tweening that transitions properties between start and end values with easing.
Visual Object Tree Organizations - Groups child visual objects within a container for hierarchical rendering and transformation.
Chipmunk-DragonBones Integration - Integrates Chipmunk physics with DragonBones skeletal animation for realistic character movement.
Asynchronous Asset Loading - Queues and loads images, sounds, and other assets asynchronously with progress tracking.
Multi-Backend Rendering Frameworks - Renders graphics through Canvas, DOM, or WebGL backends for cross-browser compatibility.
Scene Graphs - Organizes visual objects in a parent-child tree rooted at a stage for coordinated rendering.
Game Asset Management - Ships an asynchronous asset queue that loads texture atlases and audio files with progress tracking.
Game Modules - Assembles game logic from independent, reusable modules using a plugin-based architecture.
Modular Scene Assemblers - Assembles game scenes from reusable visual objects like sprites, bitmaps, buttons, and text elements.
Scene Object Manipulators - Constructs game scenes from reusable visual components like sprites, bitmaps, and buttons.
2D Visual Object Creators - Creates and manages sprites, bitmaps, buttons, and text objects for 2D game scenes.
Sprite Sequence Animations - Animates sprite objects using frame sequences across multiple rendering backends.
Display Object Containers - Groups multiple visual objects together so they can be transformed or managed as a single unit.
Display Stage Managers - Acts as the root container for all display objects, managing the render loop and coordinate system.
2D Scene Layer Managers - Provides depth-sorted layer management with camera scrolling and parallax for 2D game scenes.
Object Hierarchy Management - Organizes visual objects in a parent-child tree structure for collective positioning and rendering.
Scene Organizations - Groups visual objects into a container hierarchy rooted at a stage for structured rendering.
Scene Constructions - Creates and manages visual objects like bitmaps, sprites, and graphics within a structured scene hierarchy.
2D Rendering Engines - Provides a 2D rendering engine that draws sprites, vectors, and text across Canvas, DOM, and WebGL backends.
DragonBones Skeletal Animation Engines - Plays bone-based animations from DragonBones data for character movement without frame-by-frame sprites.
2D Sprite Composers - Displays bitmap-based characters and objects with animation and layering support.
2D Skeletal Animation Engines - Integrates the DragonBones engine for bone-based 2D character animation without frame-by-frame sprites.
DragonBones Animation Engines - Integrates the DragonBones skeletal animation engine for bone-based character movement.
DragonBones Skeletal Animations - Integrates the DragonBones skeletal animation engine for bone-based character movement.
Object Grouping - Organizes multiple visual objects into a container so they can be moved or transformed together.
Game Input Interactions - Implements pointer input, drag-and-drop, multi-state buttons, and Chipmunk physics for game interactions.
HTML5 JavaScript Games - Provides a complete HTML5 game engine for building browser-based 2D games with sprite animation and audio.
Movement Physics Simulation - Applies gravity, velocity, and collision to game objects for natural movement and interactions.
Collision Detection - Applies basic collision detection and response between game objects for movement and interaction.
Holiday Interactive Experiences - Plays musical notes triggered by player actions, such as collecting items, to form a melody.
Web Audio API Sound Engines - Loads and plays sound effects and music using HTMLAudioElement and Web Audio APIs.
Audio Playback - Plays audio in the browser using either WebAudio or HTMLAudio for sound effects and music.
Bitmap Rendering - Renders a static image or a rectangular region of an image onto the display canvas.
Canvas Rendering - Draws vector shapes, images, and text onto an HTML canvas element for display in the game.
Text Rendering - Renders text strings using canvas drawing and DOM elements for game interfaces and labels.
Texture Atlases - Packs multiple small images into a single large texture for efficient loading and rendering.
Atlas Frame Extractors - Loads texture atlases and extracts individual frames for sprite rendering.
Multi-Backend Shape Drawers - Provides methods to create and render vector shapes across multiple rendering backends.
Programmatic Shape Renderers - Renders shapes, lines, and fills programmatically without external image assets.
Particle Effects - Generates and animates a large number of small images to simulate fire, smoke, explosions, or other visual phenomena.
WebGL Rendering - Draws visual objects using WebGL on a canvas element for hardware-accelerated rendering.
Custom Event Emissions - Attaches and dispatches custom named events on game objects for decoupled logic communication.
Event Listener Attachments - Attaches event listeners to visual objects so they respond to user clicks or touches.
Named Event Dispatchers - Binds event handlers to objects and fires named events in response to user or system actions.
Plugin-Based Architectures - Assembles game logic from independent, reusable modules using a plugin-based architecture.
Event Handling - Attaches event listeners to display objects for responding to user interactions.
Input Event Dispatchers - Captures and propagates mouse, touch, and key press events to display objects.
Pointer Event Handlers - Maps mouse and touch events into a single pointer event system for cross-platform input consistency.
Cross-Platform Pointer Event Mappers - Maps mouse and touch events into a single pointer event system for cross-platform input consistency.
DOM-Based Rendering - Renders visual objects as DOM elements for text-heavy or complex layouts.
Unified Pointer Input Handlers - Captures mouse and touch events on visual elements to enable clickable buttons and draggable objects.
Multi-State Game Buttons - Creates clickable buttons with distinct up, over, down, and disabled visual states.

godotengine/godot-demo-projects

8,250View on GitHub

This repository is a comprehensive collection of functional 2D and 3D demo projects and implementation samples for the Godot Game Engine. It serves as an interactive tutorial and reference library, providing a working codebase to demonstrate how to apply engine features in real-world scenarios. The collection focuses on practical implementation guides, covering a wide array of technical capabilities from basic engine fundamentals to advanced rendering and scripting techniques. It allows users to study the application of node-based composition, asset pipelines, and game logic through direct ex

jonobr1/two.js

8,636View on GitHub

Two.js is a multi-backend graphics engine and vector drawing library that provides a unified API for creating two-dimensional graphics and animations. It functions as a renderer-agnostic abstraction layer, allowing users to generate vector shapes and paths that can be rendered via SVG, Canvas2D, or WebGL. The engine includes a scene graph manager to organize objects into hierarchical groups, enabling the propagation of collective transformations and parent-child relationships. It also features a headless graphics renderer, providing a node-based implementation for generating 2D drawings in se

melonjs/melonJS

6,319View on GitHub

melonJS is a lightweight HTML5 game engine for building 2D games in the browser using JavaScript. It provides a complete framework for sprite animation, tilemap loading, physics simulation, input handling, and audio playback, with a unified rendering system that automatically switches between WebGL and Canvas2D backends without code changes. The engine distinguishes itself through several integrated capabilities. It features a per-sprite shader pipeline for custom fragment shader effects, a SAT-based collision engine with swappable physics adapters (including built-in SAT, Matter.js, and Plan

flame-engine/flame

10,646View on GitHub

Flame is a 2D game engine for Flutter and Dart. It provides a component-based game framework for managing entities and their lifecycles through a hierarchical architecture, alongside a dedicated system for game asset management and input handling. The engine distinguishes itself through a specialized integration layer for external physics engines to handle rigid body dynamics and collision detection. It also features a high-performance task model that uses isolates to offload heavy computations and prevent main thread blocking. The framework covers a broad range of capabilities including vis

hiloteamHilo

Features