Building a 2D Shooter with Cocos + Trae: A Complete Zero-Code AI Programming Walkthrough

Introduction: The Era When Anyone Can Make a Game

Game development used to be the exclusive domain of programmers. But with the maturation of AI programming tools, even a complete beginner with zero coding experience can build a playable 2D Roguelike shooter in just a few hours.

Roguelike is a game genre originating from the 1980 classic Rogue, characterized by procedurally generated levels, permadeath mechanics (starting over when your character dies), and turn-based or real-time combat systems. In recent years, Roguelike fusions with other genres have produced massive hits. Vampire Survivors, for example, combined Roguelike progression mechanics with bullet-hell shooting to create the entirely new "survivors-like" subgenre. After its official release in 2022, it sold over ten million copies worldwide. Its minimalist controls (attacks can even be automatic) and highly addictive progression loop made it one of the most imitated games among indie developers.

This article provides a complete walkthrough of how to develop a Vampire Survivors-style mini-game from scratch using Cocos Creator + Trae CN (ByteDance's AI programming tool), covering the entire process from environment setup and requirements design to AI code generation and iterative debugging.

Tool Selection: Why Cocos + Trae CN

Cocos Creator: The Ideal Choice for Lightweight 2D Games

Cocos Creator is a flagship Chinese game engine, particularly well-suited for 2D games and web-based mini-games. Developed by Xiamen Yaji Software, it holds one of the highest market shares among game engines in China, especially dominating platforms like WeChat Mini Games and Douyin Mini Games. Compared to Unity and Unreal Engine, Cocos's core advantages include: extremely small package sizes (ideal for mini-game platform size limits), native Web export support (based on HTML5/WebGL), and deep integration with Chinese platform SDKs. Cocos uses TypeScript/JavaScript as its scripting language, which is one reason AI code generation tools work so efficiently with it — TypeScript training data is extremely abundant in large language models, resulting in far higher generation quality than niche engine-specific scripting languages.

The installation process is straightforward: visit the Cocos official website to download the launcher, log in after installation, select an editor version (the latest stable release is recommended), and create a new "Empty 2D" project. The entire process takes less than 10 minutes.

One tip: it's recommended to install the Cocos launcher and editor on a non-system drive to avoid consuming system disk space. The language can be switched to Chinese in the preferences to lower the learning curve.

Trae CN vs Cursor: The Advantage of a Free AI Programming Tool

When it comes to AI programming tools, two mainstream products each have their strengths:

• Cursor: An early mover with widely recognized strong programming capabilities, but expensive
• Trae CN: Developed by ByteDance for the Chinese market, currently completely free

Trae CN, Cursor, and similar AI programming tools all rely on the code generation capabilities of large language models (LLMs) under the hood. They work by converting users' natural language requirements into structured programming tasks, then generating complete projects through context understanding, code completion, and multi-file collaborative editing.

Trae CN offers two modes: Solo Mode (fully automated programming — just type Chinese instructions) and IDE Mode (developer-oriented with node-by-node control). For zero-experience users, Solo Mode is the best choice — you simply describe your requirements in natural language, and the AI automatically handles all code scaffolding and logic connections. Solo Mode is essentially an Agent workflow: the AI autonomously plans task steps, creates file structures, writes code, runs tests, and automatically attempts fixes when errors occur. This "Agentic Coding" paradigm is the most important shift in AI programming from 2024–2025, transforming the developer's role from "code writer" to "requirements describer and quality reviewer."

AI Model Selection Strategy

Trae CN comes with multiple built-in AI models, each with different strengths:

• GLM and DeepThink: Strongest programming capabilities, precise algorithms, fewer bugs
• Doubao: Excels at documentation, screenshots, and UI-to-code conversion
• Kimi: Strong screenshot reading and comprehension abilities

Practical development experience suggests: use GLM as the primary model for daily development, switch to GLM 5.1 (which supports image understanding) for complex frameworks, and use the auto-select model for simple queries to avoid queue wait times.

Game Design: Driving AI Development with a Requirements Document

Core Elements of the Requirements Document

Before writing any code, the most critical step is drafting a game design document. This document serves directly as the AI's input instructions, and its quality determines the completeness of the generated code. A thorough design document should cover the following elements:

• Game genre: A 2D Roguelike shooter similar to Vampire Survivors
• Perspective & orientation: Portrait mode, top-down view
• Controls: Left joystick for movement, right joystick for aiming
• Core mechanics: Move to dodge, kill enemies to level up, choose upgrades
• UI elements: Level display, countdown timer, kill count, pause button, health bar
• Upgrade options: Increase bullet damage, increase bullet count, increase fire rate
• Item drops: Explosive bullets (area damage), homing bullets (lock on and track enemies)
• Elite enemy mechanics: Spawns every 30 seconds, larger size, faster movement, higher HP, with three skills: dash, area explosion, and skeleton summoning
• Map elements: Random wall obstacles, enemies need pathfinding to navigate around them

Leveraging Trae CN's "Optimize" Feature

Trae CN provides a very useful "Optimize Content" button. When clicked, the AI automatically restructures your requirements text: extracting keywords, organizing by category, and filling in details. For example, it will automatically specify "how many times larger elite enemies are compared to regular enemies" and "by how much each attribute increases." These default values are based on the AI's game design experience and can usually be adopted directly, with adjustments made later based on actual gameplay feel.

First Version: The Quality of AI-Generated Code

Impressive Technical Implementation

After sending the design document to the AI, you'll receive complete game code within moments. The first version delivered several noteworthy technical highlights:

• Object pooling: Bullets and enemies are reused — recycled on death rather than destroyed and recreated, significantly improving performance
• Collision detection system: Complete physics collision logic
• Frustum culling: Off-screen enemies are not rendered, saving performance
• Low-dependency design: Minimal external dependencies for easier deployment

Object pooling is a classic performance optimization design pattern in game development. In shooters, bullets and enemies are frequently created and destroyed. Each new object creation involves memory allocation and component initialization overhead, while frequent destruction triggers garbage collection (GC), causing game stuttering. The object pool solution: pre-create a batch of objects and place them in a "pool." When needed, retrieve and activate objects from the pool; when no longer needed, return them to the pool instead of destroying them. This amortizes object creation costs to the initialization phase, achieving near-zero overhead at runtime. The fact that the AI automatically adopted this pattern indicates its training data includes extensive game development best practices.

Frustum culling is another fundamental optimization technique in the rendering pipeline. The camera's visible range forms a cone-shaped area (simplified to a rectangle in 2D games), and only objects within this area need to be submitted to the GPU for rendering. For off-screen enemies, even though they logically exist and participate in AI calculations, no draw calls need to be executed. In a Roguelike game that might have dozens or even hundreds of simultaneous enemies, frustum culling can significantly reduce GPU load — especially valuable on performance-constrained platforms like mobile and web.

The generated game can run directly in a browser or be previewed in Trae CN's built-in browser. The first version already includes basic movement, shooting, leveling up, item pickup, and death screen functionality, achieving roughly 50% completion.

Typical Issues in the First Version

The AI-generated first version is never perfect. Actual testing revealed the following issues:

1. Explosive bullets deal no damage: Area damage logic not correctly implemented
2. Initial fire rate too high: Bullet firing frequency needs to be reduced
3. Pathfinding failure: Enemies stuck behind walls just vibrate in place, unable to navigate around obstacles
4. Enemy overlap: Multiple enemies can stack on the same position
5. Camera initial position anomaly: Camera slides in from the screen edge at game start
6. Popup interaction issues: Unable to select upgrade options with the joystick when the level-up popup appears

Among these, pathfinding failure is a very typical problem. Pathfinding is one of the most complex modules in game AI. Common solutions include the A* algorithm (grid-based shortest path search), NavMesh navigation meshes (pre-computed walkable areas), and flow field pathfinding (suitable for large numbers of units moving simultaneously). In 2D Roguelike games, since walls are randomly generated, pathfinding data needs to be dynamically updated, further increasing implementation difficulty. The AI's first version typically uses the simplest "direct pursuit" strategy — enemies move straight toward the player and get stuck when hitting obstacles. Fixing this usually requires introducing raycasting or a simplified A* pathfinding algorithm.

Iterative Debugging: Conversational Bug Fixing with AI

The Conversational Debugging Methodology

An important point: everyone's first-version generated code will be different, even when using the exact same prompts. This phenomenon stems from the sampling mechanism of large language models — when generating each token, LLMs sample from a probability distribution, with the temperature parameter controlling the degree of randomness. Even with identical inputs, different random seeds lead to different output paths, producing code with significantly different structures. This non-determinism is both an advantage (avoiding cookie-cutter results) and a challenge (making reproduction and standardization difficult). This also explains why AI game development tutorials cannot provide "follow these exact steps to succeed" instructions — everyone needs to debug based on their own specific code version.

Therefore, the debugging process cannot be copied verbatim. You need to engage in conversational repair with the AI based on your actual situation. Here's the approach:

1. Run the game and identify issues
2. Describe the problem in natural language (e.g., "Explosive bullets aren't dealing damage to enemies")
3. Send it to the AI and wait for the fix
4. Refresh, test, and repeat

For each feedback round, it's best to describe multiple issues at once (around 6 is ideal), and use the "Optimize" feature before sending to make your instructions more structured. Choose a powerful model (like GLM) for complex framework changes, and use the auto-select model for simple issues.

Five Iterations to a Satisfying Result

After a total of five feedback iterations, you can achieve a satisfying result. The final version includes:

• Player fires arrow-shaped bullets at a reasonable fire rate
• Wall system works properly, adding strategic depth
• Elite bosses appear on schedule with complete skill sets (including the design choice to let lasers penetrate walls, increasing difficulty)
• Homing bullets automatically lock onto enemies, no manual aiming required
• Explosive bullet area damage works correctly
• Death screen displays kill count, survival time, level, and other stats

These modifications are all "minor framework changes" that don't affect already-completed feature modules, demonstrating the architectural rigor of AI programming tools.

Lessons Learned and Next Steps

Key Takeaways for Zero-Code AI Game Development

• The design document is everything: AI output quality directly depends on input quality — investing time in a good requirements document matters more than anything else
• Don't aim for perfection on the first try: If the first version runs, that's good enough — improve iteratively
• Be specific when describing problems: Don't say "the game has bugs" — say "explosive bullets don't deal damage when they hit enemies"
• Leverage each model's strengths: Different models excel at different tasks — switch flexibly

Future Development Directions

Once the core gameplay is validated, the next phase is "reskinning" — replacing art assets, tuning numerical balance, then importing the HTML version into Cocos Creator for final publishing and deployment. Cocos Creator supports one-click export to WeChat Mini Games, Douyin Mini Games, Web H5, iOS, Android, and other platforms, which is a key reason for choosing Cocos as the final publishing engine.

For zero-experience users, the core insight from this entire process is: AI programming has lowered the barrier to game development from "knowing how to code" to "knowing how to describe what you want." You don't need to understand every line of code — you just need to know clearly what you want and tell the AI in natural language. This trend is profoundly reshaping the creative industry landscape — when technology is no longer the bottleneck, creativity itself becomes the scarcest resource.