Bay 12 Games Forum

Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2 3 ... 9

Author Topic: curses_vector - ∞x∞  (Read 67804 times)

DragonDePlatino

  • Bay Watcher
  • [HABIT:COLLECT_WEALTH]
    • View Profile
curses_vector - ∞x∞
« on: October 31, 2016, 03:05:24 pm »


Resolution is an issue that has always plagued tilesets. Downscaling always ruins quality and upscaling causes blurriness. Artists can work hard on tilesets only to find they're unusable on some monitors. The solution? Vector tilesets!

Spoiler (click to show/hide)

Traditionally, raster graphics represent images as a grid of pixels. But vector graphics represent images with mathematical perfection. Built by adding and subtracting geometric shapes, vector graphics work well on all monitors and are resolution independent. As an experiment, I spent a few days vectorizing curses_640x300.bmp. I closely traced each glyph, cleaning up and realigning some characters in the process. This tileset might need more work, but I'm pleased with the results so far.

Spoiler: Preview (click to show/hide)

In the future, I might expand this tileset to include non-default glyphs. A full graphics set would be an impossibly difficult task but some basic glyphs like barrels and walls would be reasonable. Any thoughts? Input?


Installation


If you want to edit or export this tileset for your monitor, open the download's .SVG in a vector program like Inkscape. To calculate your ideal tileset resolution, divide your monitor's horizontal resolution by 5 and use that as the width of the tileset. If you want pixel-perfect glyphs without any anti-aliasing, highlight everything then go to Filters -> Pixel Tools -> Pixellize. The next time you export, the file will only use full white and full black.

If that sounds like too much work for you, here are some pre-exported versions from default all the way up to 4k:

Spoiler: curses_vector_8x12 (click to show/hide)
Spoiler: curses_vector_12x18 (click to show/hide)
Spoiler: curses_vector_16x24 (click to show/hide)
Spoiler: curses_vector_24x36 (click to show/hide)
Spoiler: curses_vector_32x48 (click to show/hide)
Spoiler: curses_vector_40x60 (click to show/hide)
Spoiler: curses_vector_48x72 (click to show/hide)


Tutorial / License

As 1080p and 4k monitors become more commonplace, I hope more people in the future will make vector tilesets. They're time-consuming, but not artistically challenging to create. If you can combine and subtract simple geometric shapes, you can make vector art. Give it a shot! I made a nice Inkscape tutorial if you want to get your feet wet with vector design.

You may edit and redistribute the content of curses_vector for any purpose, even commercially. It is reserved under a CC-BY-SA-4.0 license.
« Last Edit: September 02, 2018, 02:08:21 pm by DragonDePlatino »
Logged

ANickel

  • Bay Watcher
    • View Profile
Re: curses_vector - ∞x∞
« Reply #1 on: October 31, 2016, 09:18:43 pm »

This is an interesting idea, but are the advantages of creating a vector-based tileset greater than the time and energy required to make the tileset?
If the only advantage is multiple resolution support, I'm not sure the idea will pick up much steam.
Logged

DragonDePlatino

  • Bay Watcher
  • [HABIT:COLLECT_WEALTH]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #2 on: October 31, 2016, 10:14:42 pm »

Possibly. Progress was slow for me at first but after a while I got into a rhythm. I'd estimate this tileset took a combined 12 hours of work which can probably be said for a lot of raster tilesets.

One perk with vector art is that you can produce very clean, sharp lines that aren't possible with bitmaps. Fonts, clipart, app icons, logos and flash animations are almost always vector art. Another advantage is that it's very easy to apply filters and effects without loosing your lineart. All of the following effects are completely reversible without layering or undo:



Not the best example, but others could probably do better since I'm still learning.
« Last Edit: October 31, 2016, 10:23:01 pm by DragonDePlatino »
Logged

Max™

  • Bay Watcher
  • [CULL:SQUARE]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #3 on: November 01, 2016, 06:50:15 am »

Well shit man, if that's "still learning" I'm straight up dumbfounded.
Spoiler (click to show/hide)
Logged

CLA

  • Bay Watcher
    • View Profile
Re: curses_vector - ∞x∞
« Reply #4 on: November 01, 2016, 07:13:43 am »

You can do a lot of reversible effects easily with bitmap tilesets in Photoshop too. The advantage of vector graphics for DF lies mostly in getting larger resolutions cleaner with less work.
With a 12x12 tileset or something, you're better of polishing pixel by pixel in the end for the best results, as the vector>bitmap export doesn't leave you with enough control at those resolutions (The 'W', 'Z', and '«'/'»' tiles in your smallest export look quite soft and unsharp for example).

And if you want to produce a look that doesn't appear too clean and vector-y (non-linear gradients, or paint-like effects for example), at some point you'll have to put in more effort with a vector graphics program than you'd have to with a bitmap editor.

Still, I think there's definitely a use for it with larger resolutions, as shown with your bigger tilesets.
Logged
CLA - an ASCII-like Graphic Pack with simplified letter-like creature graphics. The simple and clean looks of ASCII with distinct creature graphics - best of both worlds!

http://www.bay12forums.com/smf/index.php?topic=105376.0

DragonDePlatino

  • Bay Watcher
  • [HABIT:COLLECT_WEALTH]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #5 on: November 01, 2016, 07:39:03 am »

@Max™
Thanks! Yeah, if you look through the official Inkscape gallery you can see some insane stuff. Not even close to that level yet. 8I

@CLA
I almost forgot to mention that! Yes, first and foremost vector art makes HQ art a cinch. Admittedly, it's pretty poor at organic-looking art but I'm a fan of its distinctive look. I imagine it would look nice on mobile devices. :D

I'll look into fixing those glyphs. Vector rasterization will never be as clean as good 'ol pixel pushing but if I do a better job of aligning nodes on pixel margins, it'll show up better at low resolutions.
« Last Edit: November 01, 2016, 07:41:25 am by DragonDePlatino »
Logged

Max™

  • Bay Watcher
  • [CULL:SQUARE]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #6 on: November 01, 2016, 03:26:55 pm »

Actually now I'm mad at you because I have to see if I can figure out how to use that method for my vorpalcurses set since the whole scaling thing was kinda my goal.

Incidentally, I know the math on the 640x300 would scale up to 1280x600/1920x900 but that would probably confuse the shit out of people who don't recognize the tileset dimensions offhand. I like to rename sets to the tile size for that reason, 8x12/16x24/24x36/32x48/36x56 and so forth. The 1920x900 set fits 1920x1080 at 80x30 grid size, it's what I took that screenshot with.
Logged

DragonDePlatino

  • Bay Watcher
  • [HABIT:COLLECT_WEALTH]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #7 on: November 01, 2016, 03:50:02 pm »

Yeah, the naming convention is pretty bad but it's what I went with since it sounded the most "official". I think I'll change it next update to something like curses_vector_8x12.

If you're interested, I can give you a crash course in vectorizing tilesets. After doing 256 glyphs I've built up a pretty fast workflow.

Max™

  • Bay Watcher
  • [CULL:SQUARE]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #8 on: November 01, 2016, 03:58:15 pm »

Well, considering I never really "got" vector art until seeing it in tileset form, and that it would be a great resource for more talented artists? Uh, yeah.
Logged

DragonDePlatino

  • Bay Watcher
  • [HABIT:COLLECT_WEALTH]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #9 on: November 01, 2016, 08:48:43 pm »

The tutorial is up if anyone's interested in how I made this tileset. I included a link at the bottom of the first post.

Max™

  • Bay Watcher
  • [CULL:SQUARE]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #10 on: November 02, 2016, 12:07:56 am »

Well fuck, that'll take me some time to really get the hang of but it's a lot simpler than I expected, since some of it is kinda familiar from screwing with GIMP. Can get Inkscape from the Arch repo too, nice.
Logged

DragonDePlatino

  • Bay Watcher
  • [HABIT:COLLECT_WEALTH]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #11 on: November 02, 2016, 11:04:55 am »

New version is up! I realigned the 8 and cleaned up a number of glyphs including v, w, circles and double arrows. Everything should be more or less acceptable now. I also switched the naming convention so it's immediately clear what you're using.

jecowa

  • Bay Watcher
    • View Profile
Re: curses_vector - ∞x∞
« Reply #12 on: November 02, 2016, 02:31:51 pm »

I like the new naming system. I prefer seeing the tile sizes instead of the minimum resolutions needed to display them.
Logged

Taffer

  • Bay Watcher
    • View Profile
Re: curses_vector - ∞x∞
« Reply #13 on: November 03, 2016, 12:34:35 pm »

Interesting work! There's still some odd antialiasing in the small sets, but I suppose that's unavoidable?
« Last Edit: November 03, 2016, 12:50:45 pm by Taffer »
Logged

DragonDePlatino

  • Bay Watcher
  • [HABIT:COLLECT_WEALTH]
    • View Profile
Re: curses_vector - ∞x∞
« Reply #14 on: November 03, 2016, 01:59:03 pm »

Antialiasing can be removed with Inkscape's pixellize filter, but then I'd just have the default tileset. :P

Any glyphs in particular that look bad? I can minimize antialiasing by aligning things on pixel boundaries whenever possible.
Pages: [1] 2 3 ... 9