🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

How to make art like that?

Started by
17 comments, last by Kryzon 6 years ago
5 hours ago, Michael Aganier said:

I'll show some results as soon as possible.

I am happy it is useful but try not to rush things. I know from experience that Blender is not the easiest to learn, so take your time and work at your own pace. :)

Advertisement

Great Advice everyone! Even though this style looks simple, it's actually quite challenging. For an artist with 8 years of experience, approaching a simple style like this still seems challenging. There is a lot that goes behind this such as understanding the basics of animation, anatomy, body language, color/light, perspective, composition, and story telling. And to develop such a style takes a lot of practice and patience, at least a few year. The hardest part of achieving a simple style like this is deciding what's most important in the image. It's an act of balance trying not to deliver too much or too little detail. 

What I use to create vector art like this is adobe illustrator. Currently for animation I use Adobe After Effects but a better option would probably be Adobe Animate (Which I will probably start learning soon). There are also other programs like Toon Boom and TvPaint. 

I am still fairly new to vector based art but here are some examples of environments I made.

Volcanoes_Demo_Video.mp4 ScifiCity.mp4 Forest_Pathway_Demo_Video.mp4 Volcanoes_Demo_Video.mp4
5 hours ago, Yog Joshi said:

Even though this style looks simple, it's actually quite challenging.

Well it definitely is when you go into that kind of depth. Amazing work :) The blue speculars on the rock is a amazing idea on the first vid.

 

The one thing that I wonder about a bit, is the gradients, it would have to be rasterized to get it into a engine with perfect quality. A shader could be made for the gradients and a importer but that is only if your team has a skilled programmer. Most indie teams would be stuck with what tools they have; so no gradients.

So how would you recommend your own art is used? Do you provide your own shaders?

I'm also curious about the way @Yog Joshi would prefer to import those graphics into an engine.

I can think of three possible ways:

  • To prerender the vector graphics into bitmaps with transparency.
  • To convert the curves to meshes and use vertex colouring (with the proper triangulation) to get the gradients. Vertex colours come for free after all and are interpolated by the GPU, very fast.
  • To render the vector graphics in realtime with the GPU using a shader: https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.html

@Scouting Ninja @Kryzon Thank you! Sorry but I am just a 2D artist. I started making these recently and don't know how things run in an engine.  I was looking at sites like Graphicriver and saw several artists providing artwork with gradients so I figured it would be okay for game developers to use. I did talk to a few about the gradients and they said it should not a problem to use these in an engine. As far as shaders go, I do not provide any. My plan is to just provide image files. If you would like to see all the files I provide, here is a link http://www.yogjoshi.com/game-backgrounds/

Cheers

 

So this is trying some vertex colouring in Blender, just the built-in tools...

blenderVertexColour.png.79fb4bf62dbc7ff72456a4ab6f622f8a.png

- Current release of Blender doesn't have vertex alpha, so no transparency (that shadow is an illusion, it fades to the background grey. Edit: and it has a wrong direction too lol...).
- It's a pain having to rip faces to be able to paint colour changes at the same corner.

So manually creating the graphics in 3D, eh... I wouldn't do it. I'd much prefer to find some way to convert the vector curves that you imported from a genuine vector app (Illustrator, Gravit, Inkscape etc.) into meshes by means of a tool or automated process, instead of by hand.

On 6/16/2018 at 10:31 AM, Scouting Ninja said:

The one thing that I wonder about a bit, is the gradients, it would have to be rasterized to get it into a engine with perfect quality

Realistically, that's exactly how most people buying assets from an asset store are going to use them - they'll save as png or whatever raster format in the size they need, and then import that in to their chosen engine.

Using vectors directly just isn't that well supported in most popular engines or libraries. Many commercially available assets also provide png formats in a couple of popular sizes for that reason.

:)

- Jason Astle-Adams

8 hours ago, Yog Joshi said:

As far as shaders go, I do not provide any. My plan is to just provide image files.

Thanks for the response. I was really hoping to you had a solution for vector importing.

8 hours ago, Kryzon said:

To convert the curves to meshes and use vertex colouring (with the proper triangulation) to get the gradients. Vertex colours come for free after all and are interpolated by the GPU, very fast.

The problem with this method is that it's accuracy depends on how much a gradient is aligned with vertices and how many vertices the mesh has.

I am also using a shader similar to the shader you linked here. However I only have an GLSL version. It was also custom made by me so the performance is really bad.

 

7 hours ago, jbadams said:

Realistically, that's exactly how most people buying assets from an asset store are going to use them - they'll save as png or whatever raster format in the size they need, and then import that in to their chosen engine.

Yes, for now it looks to be the best option. Normally I provide a texture set; for developers who can't use my shader; or don't want to.

 

With mobiles the difference between raster and vector is clearly visible; so I hope to find a universal solution.

19 hours ago, Scouting Ninja said:

With mobiles the difference between raster and vector is clearly visible; so I hope to find a universal solution.

That's interesting, I assume you mean that vector looks better?

If the device has a fixed resolution then you don't need raster graphics with more resolution than what the device can display (this is related to DPI and such, like the size of objects on screen, if you can zoom in etc.).
In order to accommodate different devices with many resolutions you'd have to ship your game with assets of the biggest fidelity possible, then load each and downscale them to save memory (in-game), at the cost of having a large install size from all this high-def stuff.

Something that could help with that is to ship your game with vector assets (which are just kilobytes in size, really small) and use a software library in your game during load time to rasterise the vectors into textures that will always be at an ideal resolution -- having the same DPI as the device, looking pixel perfect.
An example of such a library is the cross-platform Skia: https://skia.org/

I think there are some commercial Unity plugins that do that.

This topic is closed to new replies.

Advertisement