🎯Objective
Using Google Antigravity to make a 2D Level editor
🛠️Components to Use
Google AntigravityThe AI lead architect and developer behind the project.
antigravity.googleKonva.jsPowers the 2D canvas with high-performance layer management.
konvajs.orgHTML5 & CSS3Providing the structure and a premium glassmorphic UI.
Vanilla JavaScriptHandling the complex physics simulation and state logic.
Pure, zero-dependency engine logic.
📜Use the webapp
You can check it a https://misterm.itch.io/mr-level-designer-2d
😧Antigravity is free (you need a google account)
Download from https://antigravity.google/
The interface is similar to Visual Studio Code (is a fork of the code) and Cursor.
💡The Story Behind the Code
Building a level designer is usually a months-long endeavor. Between managing coordinate systems, implementing undo/redo stacks, and ensuring physics feel "right," the technical debt can mount quickly. However, MR Level Designer 2D was built with a different philosophy: AI-First Development , my prompt:
I need a cool web app Html5+javasscript for itch.io , graphics 1200x1024, no javascript popup, only modals. dark theme.
No using node, just html5 + javascript + javascript libraries + js
Make it in MVC format.
resolution 1200x1024
You can use konja.js. the app should work offline , so no ACN.
Then in my agent.md file I pasted a chatgpt detail of a 2D level editor.
I did many changes with prompt to improve the interface, add tiles, add layers, add a simulator and export of a game in html .
Collaboration is Key: Working with Google Antigravity wasn't just about asking for code snippets. It was a high-level dialogue. I provided the creative vision—a fast, procedural, and instant tool—and Antigravity translated that into a robust, object-oriented JavaScript architecture.
One of the project's most impressive feats is the Procedural Tileset Generator. Instead of manually drawing dozens of tiles, we developed a system where AI algorithms generate seamless assets based on selected color palettes. This allows users to jump from a blank canvas to a vibrant game world in seconds. 🎨
🚀Core App Features
🏗️ Advanced Toolset : Precision editing with Brush, Rectangle, Line, and Flood Fill tools. Every stroke is tracked in a robust Undo/Redo history system.
🖼️ Multi-Layer Logic : Separate Background, Main (Collision), and Object layers allow for complex parallax effects and precise hitbox definitions.
✨ Procedural Generation : Don't have art assets? Generate them instantly! Create unique wall, floor, and corner tiles with a single click using the AI-assisted engine.
🕹️ Standalone Game Export : The ultimate feature: Export your map + engine as a single HTML file. Share it anywhere, play it instantly on any device.
Furthermore, the Instant Physics Simulation was bridged from concept to reality within hours. By leveraging Antigravity's ability to handle complex mathematical models, we implemented a built-in player controller that respects gravity, friction, and multi-layer collisions.
The "Magic Moment" occurred when we realized we could package the entire editor and engine into a Standalone HTML Export. Using AI to optimize the data serialization, players can now "Export a Game" that is literally a single file. This level of portability is only possible when you have an AI partner that understands the full stack from logic down to memory efficiency. 📦✨
🚩Conclusion & Recommendations
The birth of MR Level Designer 2D proves that the future of game development isn't just about more power, but more accessibility. By using Google Antigravity as a Co-Pilot, creative barriers are demolished.
The takeaway? Don't just use AI to search for answers—use it to build architectures, refine aesthetics, and breathe life into your most ambitious ideas. 🌈🚀