Drawings to Game Levels using Image Segmentation

Background

Most game engines compose levels out of a number of different assets. For 2D games, assets are usually images and code, but can also be engine-specific constructions like animations or collision boxes. Usually, game developers create these assets one at a time, and then design complete levels by combining separate assets in the engine.

I felt that the existing workflow for creating game levels separated the creative process (in content creation) from game design. Instead, I wanted to be able to draw complete levels, and load them easily into the engine. This way, entire areas could be prototyped quickly, and tested immediately. Tweaks can easily be done in-engine, and finished products are built naturally from the prototype.

The Project

To acheive drawn game levels, I wrote a set of scripts that segment an input drawing into its constituent assets. The major dependency was OpenCV, and tasks included:

• Finding contours,
• Computation of minimum bounding boxes,
• Image transformation and saving,
• Construction of engine-compliant level files, and
• Design of complete assets, including colliders.

As an example, below was my test-case image; this version is a flattened JPG, but artists could take advantage of layering to specify item types as they were creating the level.

In a single pass, the above image was converted into a game level, with constituent assets (images and colliders).

Current Status and Future Work

Although the underlying process is sound, this approach requires that asset types are predefined, so the program can adquately translate images into complete levels. In addition, much of the code can be optimized to take advantage of Godot’s scene files, rather than constructing assets entirely in-code. I’ve tabled this project for now, but the basic scripts should work in a variety of cases.