I am making a soccer game that needs a large pitch image (the whole play field area is about 3300 * 1200 pixels).

I know I should use the Tiled map editor to create a tile map so that I can create the whole soccer pitch by using just a few tiles, but I'm not sure how I can create a tile set that will allow me to create good-looking fields like in these games:

enter image description here enter image description here

As you can see, the soccer pitch is not a rectangle but more of a trapezoid, so it changes the way we draw border and grass stripes. The grass stripes are sloping, and the slope changes the closer they are to the goal. That makes it very hard to replicate in a limited amount of tiles.

Currently, I have 3 layers for my field. Each tile is 64 * 64 in size, and I create them this way:

  1. The border tiles. Since the border is not repeating, I take the border, cut it up into tiles, and add them to the tile set. It's fussy, but it seems this is the only way.

  2. Light colored grass. I have a single, repeating 64 * 64 tile that is used to cover the base layer of the field.

  3. Deep colored, sloping stripe grass. This is the one I can't figure out how to create.

How can I create that last set of tiles or otherwise achieve my effect?

  • \$\begingroup\$ can you afford to do run time image manipulation for that? I mean doing a image transform when drawing? \$\endgroup\$ Commented Dec 5, 2013 at 9:40
  • \$\begingroup\$ @freak, you mean the standard tile map(including borders) is rectangle,but in runtime transform it sloping? \$\endgroup\$
    – Captain
    Commented Dec 5, 2013 at 9:44
  • \$\begingroup\$ yeah exactly like that \$\endgroup\$ Commented Dec 5, 2013 at 9:45
  • \$\begingroup\$ I dig for a while, many posts are related to this question, but I found none of those has code guide for 2d matrix transformation, Do you have any clues about that? \$\endgroup\$
    – Captain
    Commented Dec 5, 2013 at 14:59
  • \$\begingroup\$ you'll want a perspective transform so when y becomes smaller (to the top), x gets scaled down \$\endgroup\$ Commented Dec 5, 2013 at 15:01

3 Answers 3


I would recommend you to have just one, unshaded grass texture and create the bright and dark stripes procedurally by making the texture brighter or darker.

  • \$\begingroup\$ you mean the shader way? do you have any clues about how to achieve this kind of effect?Thank you. \$\endgroup\$
    – Captain
    Commented Dec 6, 2013 at 2:25

I'm not sure tiles are necessarily the way you'd want to approach this ideally. I think a better fashion would be to use non-tile-aligned sprites, or some other method such as rendering the base field as a single textured polygon and rendering the "stripes" as alpha-blended polygons on top of it.

That said, I can see a way you could potentially organize your dark grass tiles, based on the information and screenshots you provided:

Each strip of dark grass is oriented at some fixed angle from vertical. The middle strip might be completely vertical, the next stripe ten degrees off, the next twenty degrees, and so on. You can evenly fit into a tile set any angle that will completely bisect a column of N tiles from one corner to another. For example, here are three tiles that might be used:

enter image description here

The left image is a single 64x64 tile, and the right is two tiles stacked on top of each other to allow for a different stripe angle. Similarly, you could use three tiles, or four, and so on.

You will need a set of tiles for each edge angle. You will be able to mirror the tiles horizontally around the center stripe, and rotate them to handle both borders of an edge. Finally, you may need a single solid dark grass tile as well.

This approach is fairly limiting, however, because the size of the tiles will determine how many angles you have available to you, and how wide your stripes must be (which may result in non-uniform stripe widths).

You can alleviate the problems somewhat if you build your game so that you don't have to actually align tiles to a fixed grid, because you can tile the stripes "off the grid" and use only one tile per edge angle. At that point, however, you are already well on your way to my (and everybody else's) suggestion of not bothering to constrain yourself to a tile set anyway, and so you might as well go all out.

  • \$\begingroup\$ Inspiring!I used to think about bisecting tile, then stuck on how to combine the the stripe body part by 2n bisecting tiles.How dumb I am.And What you mean by "you can tile the stripes "off the grid" and use only two tiles per edge angle. "? \$\endgroup\$
    – Captain
    Commented Dec 6, 2013 at 3:21
  • \$\begingroup\$ I mean you could overlay tiles on top of your base grass layer so that they did not align precisely to the grid that the base tiles are in. Then you would have fewer angle limitations and fewer tiles (you'd actually just need one per angle, I had failed to account for rotations of the tile when I wrote the answer). \$\endgroup\$
    – user1430
    Commented Dec 6, 2013 at 3:26
  • \$\begingroup\$ Tiles in that 'off-the-grid' case wouldn't have to bisect corner-to-corner. \$\endgroup\$
    – user1430
    Commented Dec 6, 2013 at 3:27
  • \$\begingroup\$ You mean draw the stripe on another layer and this layer is not align to base grass layer?If you mean this,I could not do this in the tiled map editor (it only support offset by integer tile numbers), so I have to do it in runtime. And why only need one tile per angle?If I use three tiles for edge angles, third tile can be achieved by rotating first tile, but I still need to create second tile. \$\endgroup\$
    – Captain
    Commented Dec 6, 2013 at 8:00

I think you might need to do quite a lot of work to fit the square peg of non-uniform diagonals into the round hole of a tile grid.

Will your environment/tech constraints allow you to mix-in some arbitrary textured polygons? You could build a row of simple quad stripes with a repeated texture each, or one large quad with some shader math to blend between textures. Then render the rest of your sprites on top.

Either approach will likely require significantly less texture memory than baking every possible variation in light/dark slope into a tileset, and it should give you much more flexibility to iterate and refine the look without re-generating the tileset every time you change something.

  • \$\begingroup\$ Sorry, I don't figure what do you mean by "mix-in some arbitrary textured polygons".Actually my worst plan is to draw horizontal stripes instead, which upper stripes are thinner. \$\endgroup\$
    – Captain
    Commented Dec 6, 2013 at 2:47
  • \$\begingroup\$ I was wondering if your language/engine allows you to use the GPU to render 3D polygons which aren't clamped to the screen axes. This is similar to Philipp's suggestion. The idea would be to render the field as a collection of triangles, which can be oriented independent of the tile grid to create the shape you need. Then you can use texture mapping and/or shaders to create your grass effect on this geometry. \$\endgroup\$
    – DMGregory
    Commented Dec 6, 2013 at 2:48
  • \$\begingroup\$ Yeah, I am afraid it is a little complicated for cocos2d-x. I will try Josh's advice first. \$\endgroup\$
    – Captain
    Commented Dec 6, 2013 at 3:23

You must log in to answer this question.

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