Pages

Creating seamless 2D grass tiles in vectors using Inkscape

It's been a while and I still haven't managed to make a video of it but here's the step-by-step for the grass tile to get things started again.

The workflow is based on the video tutorial I posted earlier on Creating tileable patterns for seamless background.




Note:

It's a good idea to make a copy of the design before creating the clip as there might be a problem with access images when releasing the clip later on to edit the design.



Note:
When exporting the tiles from inkscape to bitmap, set the size to 2x or 3x the size of your ingame assets. Scale the art assets down in tools like gimp or krita. A good practice to avoid antialiasing on the edges is to export to e.g. 514x514 pixels and then reduce the canvas [not scale but crop] to 512x512 pixels to cut the 1 pixel around the tile. The loss should not be visible if then ingame art works with tiles of 128x128 pixels or smaller.  

I hope you enjoyed the tutorial as much as I did finally getting back into writing it. :)

Chris Hildenbrand

2D game artist, pixelpusher, vector bender, face turner for over thirty years. I worked on more games than I can remember... The most recent release is "Super Crossbar Challenge" for iOS (Android coming soon) with Shattered Box, Fredbear Games and PlayPlayFun.

25 comments:

  1. OMG! sunday 29... i can see the future :)

    ReplyDelete
  2. Yaaaaay ! Finally <3
    Very nice and beautiful presentation !

    ReplyDelete
  3. Very useful. It's great to see you back!

    ReplyDelete
  4. Simply brilliant and brilliantly simple.
    Love it. :)

    ReplyDelete
  5. We miss you Chris.

    Nice work. Beautiful and easy.
    Thanks.

    ReplyDelete
  6. Great tutorial, thank you! Good to see you back in making tutorials! :)

    ReplyDelete
  7. I love to see you arround here again. a really happy day when somebody feels better. And for the tutorial, what can i say you are a master in that field, i am more Krita artist :D
    Take care!

    ReplyDelete
  8. Thank you Chris! And i will wait for another tutorial for you!

    ReplyDelete
  9. Great to have you back, and with such an excellent tutorial. You have no idea how much I needed this, thank you. :)

    ReplyDelete
  10. Everything worked great and I was able to achieve a seamless texture, but for some reason there is a tiny hairline (less than one pixel) when i duplicate and move the square. Any idea what could cause this?

    ReplyDelete
    Replies
    1. Is this line in the display in inkscape or in the art when you export it?

      Delete
    2. Yeah it is on both. It is very strange I did some reading up it might be AA? I see a little bit of it on your examples. In inkscape it seems that the zoom makes it look better/worse. Very strange.

      Delete
    3. The only real solution I found was once its all tiled, to change step to like 0.1 pixels and shimmy the gap closed lol.

      Delete
    4. I haven't encountered the problem in inkscape but it's a big problem in illustrator and coreldraw - the antialiasing is putting in 1/2 pixels that end up being transparent.

      I work around it by exporting the tiles in a larger scale to start with and then take 1 pixel off on all sides in the bitmap tool [e.g. gimp] by reducing the canvas size before scaling to the desired in-game size.

      Delete
    5. I too have the slight gap when making the final step (inkscape) in the tutorial here. Might be a setting I have.

      Delete
    6. I held down the Alt key (in windows) and selected each tile one at a time then one push of the arrow key tightened it all up =)

      Delete
  11. sorry, but i am really stupid at this,i can't make a first step in this tutorial. can you explain in more details, please..

    ReplyDelete
    Replies
    1. i mean,how to make the triangle elongated like the picture

      Delete
    2. I would suggest starting the with the basics. The directory on zeef might help pick the easier tutorials first:
      https://2d-game-art-tutorials.zeef.com/chris.hildenbrand

      Delete
  12. You are simply awesome in making people understand complex things in simple ways!

    ReplyDelete
    Replies
    1. Thanks. I try to show that most things actually are a lot simpler when you sit down and think for a moment before diving in.

      Delete
  13. Thanks Chris, you're a life saver! Please add more tutorials on sand tiles, water tiles, etc. Maybe you can write a PDF that we can purchase. Anyway, your way of teaching is very effective, please add more yt videos and tutorials!

    ReplyDelete
    Replies
    1. There is a pdf here:
      https://sellfy.com/p/wE4s/

      Delete