How to create a "grid" using actionscript like the image below?

Basically you have an area of 1100x615 which should be filled with shapes that could be rotated and scaled...

Collision detection perhaps or something less cpu intensive for flash (as3) to manage?


  • 1
    \$\begingroup\$ What do you mean by grid? I was expecting a tessellation. I don't see anything in that image that I'd describe as a grid. Do you just mean that the space is filled with shapes? \$\endgroup\$
    – Anko
    Feb 18, 2014 at 18:50
  • \$\begingroup\$ I'm not good with this kind of stuff, but perhaps you are looking for Image Segmentation? \$\endgroup\$
    – Grey
    Feb 18, 2014 at 18:52
  • \$\begingroup\$ Looks like he wants to fit sprites into an atlas, but unlike usual rectangles bin packing, these are freeform shapes allowed to rotate and scale \$\endgroup\$
    – Kromster
    Feb 18, 2014 at 19:22
  • 2
    \$\begingroup\$ Your "specs" are very much lacking. Why do you want to create something like this? Do shapes have to have a precise position in the image? How much can they be scaled or rotated? There are shapes appearing multiple times in your image, what about it? Do they have to be spaced by a certain distance? \$\endgroup\$
    – Vaillancourt
    Feb 18, 2014 at 21:54
  • \$\begingroup\$ Your image was most likely composed by hand and without needing to place a set number of images. Some images repeat and were probably chosen just to fill space. Doing the same with an algorithm may be a fun exercise but serves no practical game dev purpose. \$\endgroup\$ Feb 18, 2014 at 22:03

1 Answer 1


(1) You may be able to adapt an algorithm used for creating word clouds.

Here's one example algorithm, based on Wordle's strategy. This works by choosing a start position/size/orientation for each object (generally starting with the biggest/most important ones), and trying to place it there. If it collides with an already-placed object, move it incrementally along a spiral expanding outward from the start position, and try again until you find a valid placement or you run out of places on the canvas.

This trial-and-error approach is slow, so you'll want a good way to accelerate your collision tests (some ideas at the links above), and possibly do the work in the background - say by generating level 2 off-screen while the player works on level 1.

(2) Another approach would be to use a force-directed graph to make objects jostle each other out of the way until a locally optimal spacing is found. Doing this with irregularly-shaped objects is nontrivial though. Once again this is a time-intensive iterative process, although you might be able to show it to the player before it's fully settled, turning the jello-like bobbing of the objects into an element of your game's style.

(3) A more experimental method would be to break your play space into polygonal cells (say, using a Voronoi tesselation), then assign an object to each cell. You then try to fit each object within its cell confines as best you can by rotating & scaling within tolerances. This is likely to produce more gaps than either option above, but has the advantage that it can be done in one pass without massive iteration, or collision tests between two arbitrary shapes.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .