Notifications
Article
10 Quick, Visually Stunning Tricks
Published 2 years ago
17.6 K
10
Art Tips & Tricks from _PRISM
Hi everybody!  I'm Clint Siu, a solo indie dev and visual effects artist.  I'll be showing you some art tips and tricks that I used for _PRISM, which is nominated for Gamer's Voice at SXSW and Best Upcoming Game at IMGA.  _PRISM is a puzzle game about exploring a microcosmic galaxy and unfolding sacred geometry.  Inspired by Plato's classical elements, each geometric solid represents the five elements (fire, earth, air, water, and ether).  Players touch colored dots, lines, and geometry to drag, rotate, and slide into matching circles to solve puzzles and reach the core of each element.  Click here to check out _PRISM on the Appstore!
 
Here's some tricks that used during the development of _PRISM, that hopefully you can use with your own games:
 
1. Scope Down
 
    As a one person indie, I had to do everything myself, which made time limited.  So I stuck with geometric shapes.  This made it possible for me to actually finish the game while making things look as good as possible.  I think finishing is the most difficult part in making games, so make sure you give yourself the highest chance to finish!
 
2. Color Palette
 
    The first thing towards making things look good was to set a color palette.  I've been an artist for a while, so that came more natural to me.  But if you're not an artist, here are some tricks that can help.
    -- Limit the number of colors.  The fewer colors you have, the easier it is to get them working together.  Monochrome is perfectly valid too.
    -- Find a photo that feels like the emotion you want to evoke, then pick some colors out of it.  It may help to blur the photo first.
    -- Adobe Color (color.adobe.com) is a great tool for getting harmonious colors.
 
3. Gloss or Specular Maps Make Things Look More Real
 
    Objects in the real world have specular highlights that are uneven across the surface.  That's what usually differentiates photographs from sterile computer renders.  The gloss map defines what is smooth and shiny or rough and dull.  **Technical note--In the Standard Shader, the gloss map goes into the alpha channel of your metal map.
 
4. Optical Effects Feel Cinematic
 
    Vignette, Chromatic Aberration, and Lens Blur are a big part of what makes _PRISM look nice.  It's an image effect included with the standard assets.
 
     -- Vignetting is the darkening at the corners of a photograph because of shading from the lens barrel.  Vignetting helps draw focus towards objects in the center of the frame.  The gradient falloff also adds more interesting texture to corners.
 
     -- Chromatic aberration is color fringing that happens when color wavelengths are bent by the camera lens.  In film/tv, using chromatic aberration makes computer graphic renders integrate better into real footage because the edges look more optical, like it was shot with a real camera.  Similar things apply to games as well.
 
    -- Edge Blur creates blurring that starts from the outside edge of the frame, decreasing in strength as it moves towards the center.  This gives the feeling of a camera lens using selective focus and depth of field.
 
5. Lens Flares!!!
 
    Lens flaring is an optical effect that happens when light shines into different lens elements of a camera.  This adds realism to computer graphics and an extra dynamic feel when you move the camera around.  Lens dirt also adds some nice realism when you point the camera at a light source and can see the light scatter unevenly.
 
6. Use the Asset Store
 
    Most of the time, when I was trying to do something tricky, there was already an asset on the store for it (i.e. How do I make lens flares?).  Here are the ones that I use and think are totally worth picking up:  Particle Playground, Proflares, Colorify, LeanTween, and Easy Touch!
 
7. Rigging with Empty Gameobjects
 
    I used empty game objects as pivot points for rotating, scaling, or zero-ing out positions.  That way I could animate everything inside Unity and save a bit of time.  I just moved the empty transform to where I want geometry to pivot, then assign the geometry as the child.
[[{"fid":"40978","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"","field_file_image_title_text[und][0][value]":"","field_file_tags[und]":""},"type":"media","attributes":{"height":"268","width":"411","class":"media-element file-default"}}]]
 
8. Reusing Animations
 
    If my hierarchy naming was the same, I could reuse the same animation on a different set of objects.  All I needed was different root objects (empty game object pivots) to shift the position or rotation for the other group.
 
9. Animation Curves
 
    Animations look and feel more natural when the movement isn't just a straight, linear line.  Objects take a little bit of time to accelerate up to full speed.  They also take time to slow down to a stop.  That's called easing in and out.  You can also get even more interesting animations when you put in some bounce or overshoot to a curve.  You can use AnimationCurve.Evaluate(float time).  Or just use LeanTween, it's super awesome.
 
10. Parallax To Add Depth
 
    Parallax is the change of an objects position depending on the viewing angle.  Objects closer to you have a larger parallax than objects far in the distance.  Since I didn't have an environment or background objects (remember scope down!), I filled the scene with particles.  When the camera rotates around, it feels very three dimensional because the particles and geometry overlap each other.  Without parallax or overlaps, things will feel very flat.  Slight movement in the particles also help to add life into the scene when everything else is still.
 
Those are the 10 quick tricks that I've used extensively for _PRISM.  I know some of the technical stuff has been breezed through, if you need more in-depth explanations, feel free to message me in the forums!
 
Other Projects
CS
Clint Siu
2
Comments
Unity Game Developer - Programmer
Interesting article with alot of learning.
0
MP
Maurice Pape
2 months ago
Interesting article and very helpful!
1
CH
Charlotte Hughes
5 months ago
I'm about to begin learning how to design for VR and this has got me really excited. :)
1
Digital Wizard - Programmer
Thanks for the article, you have a little parsing problem on the 7th point ;)
0
Kyonru - Student
Thank you! Very useful!
0