Sprite Canvas

Saurabh Kanyal — Mon, 15 Sep 2025 06:36:28 +0000

Sprite Canvas is an AI-powered web application designed to be a game developer's creative assistant. Its primary purpose is to streamline the creation of 2D game assets. Users can generate unique, high-quality sprite sheets and tilemaps simply by describing what they want in plain text. It combines AI generation with a hands-on editing environment, allowing for both rapid prototyping and detailed customization of game graphics.

What Problem This Solves
This application directly addresses a major bottleneck in game development, especially for independent developers, small teams, or participants in game jams: the creation of custom art assets.

Skill Gap: Not every developer is a skilled artist. SpriteCanvas empowers programmers and designers to create professional-looking graphics without needing artistic expertise.
Time and Budget: Creating art is time-consuming and can be expensive if outsourced. This tool drastically reduces the time and cost associated with asset creation, allowing developers to focus on gameplay and other core mechanics.
Prototyping: It enables rapid prototyping of visual ideas. A developer can quickly generate placeholder or even final-quality assets to see how they look and feel in their game engine.

Tech Stack
The application is built with a modern, performant, and maintainable tech stack:

-Frontend Framework: Angular (v20+), utilizing its latest features like standalone components for a modular architecture and signals for efficient, fine-grained state management. It runs in a zoneless configuration for improved performance.
-Styling: Tailwind CSS is used for the utility-first styling, loaded directly from a CDN. This is supplemented with custom CSS to achieve the app's unique "neo-brutalist" aesthetic (e.g., hard shadows, bold borders).
-Language: TypeScript.
-AI Integration: Google's Gemini API is accessed through the official @google/genai JavaScript SDK.

This application built with Google AI Studio. The application leverages Gemini's powerful text-to-image generation capabilities.
-Model: It specifically uses the imagen-3.0-generate-002 model, which is optimized for generating high-quality images from text prompts.

App Link : https://ai.studio/apps/drive/1PIpT6FjGNBvpWA3Hr0s4O-6BeTwbNX2k

YouTube Demo :

Functionality:
In the Sprite Generator, it takes a detailed character description and a list of animations to create a complex sprite sheet.In the Tile Canvas, it generates individual, context-aware tiles that are designed to fit seamlessly within a larger tilemap.The application is a prime example of using a generative model to create structured, usable content (game assets) from unstructured text input.

Features

AI Sprite Sheet Generator: Generate multi-frame sprite sheets from a text prompt. Select from common animation types (Idle, Walk, Attack, etc.) to include in the sheet.The AI is prompted to create assets with transparent backgrounds, suitable for in-game use.
Interactive Tilemap Editor:
Image-to-Tilemap: Automatically slice an existing image into a 3x3 tile grid to start your map.
AI Tile Generation: Select any tile on the canvas and generate its content using a specific prompt.
Dynamic Canvas: Add or remove rows and columns to create maps of any dimension.
Seamless View: The editor grid is designed without borders or gaps to provide a true preview of the final, continuous tilemap.
Transparency Support: A checkerboard background is used to clearly visualize transparent areas.
Unified Asset Management: -Asset Gallery: All generated assets (spritesheets, individual tiles, and downloaded tilemaps) are automatically saved to a central gallery. -Asset Re-use: Click any asset in the gallery to load it back into the appropriate editor for viewing or further modification.
Usability & UX: -Canvas Controls: Zoom in/out and reset zoom for precise editing. -Download: Combine the tiles on the canvas into a single PNG image and download it. -Modern UI: A clean, responsive, and visually distinct "neo-brutalist" interface.

This is a submission for the Google AI Studio Multimodal Challenge

DEV Community: Saurabh Kanyal

Sprite Canvas