Version 1.16
Contact Me

Hillmix - Box2D Scene Editor

  
Download
(for Windows)

How It Works

Hillmix is a useful tool for 2D games or other projects based on Box2D, before you get to coding. It helps easy to edit game levels and physics. Select folder with images that will be used for a project. Place images as bodies on scene. Draw bodies shape as rectangles, circles, polygons, polylines and set up physical properties of each object. Save that all to JSON format. Use saved file and any engine or programming language that fits best for your game in order to bring it all together. See video tutorial how it works.

Output Data Structure

Here is an example of a simple game scene, that was created via Hillmix. Highlighted properties used to configure workspace when you open a project. All else contains layers and objects with their properties. To make file smaller Hillmix saves only properties of objects which differs from the default properties.

{
   "map_width": 900, // Scene width
   "map_height": 520, // Scene height
   "map_color": "F0F0F0", // Background color
   "grid_color": "FFFFFF", // Grid color
   "shape_color": "A5C100", // Shapes color
   "selection_color": "3399FF", // Selection color
   "grid_size": 32, // Grid size
   "snap_grid_size": 16, // Snap to grid size
   "snap_grid": true, // Snap to grid
   "show_grid": true, // Show grid
   "folder": "", // Project folder if project file is not in the same folder as images
   "images": ["hero.png",...,"ground.png"], // Used images
   "layers": [ // Layers
      {
         "name": "elements", // Layer name
         "visible": true, // Layer visibility
         "locked": false, // Layer lock
         "objects": [ // Layer objects
            {
               "name": "sky", // Object name
               "image": 0, // Object image. Index of the element in array of used images
               "x": 448, // Horizontal position from the left corner of the scene
               "y": 256 // Vertical position from the top corner of the scene
            },
            ...,
            {
               "name": "cake",
               "physics": true, // Physics enabled
               "sensor": true, // Body is sensor
               "image": 6,
               "x": 576,
               "y": 304
            },
            ...,
            {
               "name": "hero",
               "image": 9,
               "shape_type": "circle", // Type of the body shape is circle
               "shape_values": [0,0,94], // [X, Y, Diameter]
               "x": 224,
               "y": 307
            },
            ...,
            {
               "name": "stone",
               "physics": true,
               "body_type": "dynamic", // Body type is dynamic
               "density": 10, // Body density
               "friction": 0.2, // Body friction
               "image": 10,
               "shape_type": "polygon", // Type of the body is polygon
               "shape_values": [-18,-10,-3,-20,17,-27,30,-12,40,5,40,
               		        19,31,25,-29,25,-38,13,-39,2,-30,-9],
                               // Polygon verticies (x1, y1, x2, y2, x3, y3, ...) 
               "shape_separate": [
               			   [30,-12,40,5,40,19,31,25,-29,25,-38,13,-39,2,-30,-9],
               			   [-30,-9,28.38,-13.87,30,-12],
               			   [28.38,-13.87,-18,-10,-3,-20,17,-27]
                           	 ], // Array of convex polygons if polygon is concave
               "x": 831,
               "y": 327
            }
         ]
      },
      {
         "name": "ground",
         "visible": true,
         "locked": false,
         "objects": [
            ...,
            {
               "image": 12,
               "shape_type": "rectangle", // Type of the body shape is rectangle
               "shape_values": [0,0,352,32], // [X, Y, Width, Height]
               "x": 720,
               "y": 368
            }
         ]
      }
   ]
}
© 2025 OlDen