Jump to content
  • Advertisement
Michael Aganier

How to make art like that?

Recommended Posts

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.

Share this post


Link to post
Share on other sites
Advertisement
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Posted (edited)

@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

 

Edited by Yog Joshi

Share this post


Link to post
Share on other sites
Posted (edited)

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.

Edited by Kryzon

Share this post


Link to post
Share on other sites
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.

:)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Posted (edited)
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.

Edited by Kryzon

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!