Shadows

Shadows

Shadows are an important part of Material-Design. They give depth to object and make them feel part of our world.

Computing shadows is kinda expensive on the hardware, that is why instead of using a shader I went for 9 patch. 9 patch is the technique used in older Android devices (pre L) to render the shadows (more info in the Nine Patch page).

Z-Depth

Shadows in Material Design increase their sizes to tell that an object is on top of others, this is called z-depth.

In order to simulate this effect the library provides 5 levels of depth, you can access through the depth parameter.

Take into account that you are limited to this 5 levels, you CAN'T use a floating point value to get an intermediate depth, they are presets and they are integers, from 1 to 5.

How do I use shadows?

First you need to require the shadow.lua file into your project, this returns a function that expects the path to the assets folder, this function returns a table with the shadow information.

local f = require "material-love.libs.shadow"
local shadow = f("material-love/assets")

You can do this in a single step:

local shadow = require "material-love.libs.shadow" ("material-love/assets")

Then you need to process this table with nine.process, which returns the shadow PatchObject.

In order to do this you first need to require nine.lua.

local nine = require "material-love.libs.nine"
shadow = nine.process(shadow)

That is it, now you can use shadows in your project using the following function:

nine.draw(shadow,x,y,w,h,pad,depth)

or it's equivalent method

shadow:draw(x,y,w,h,pad,depth)

• PatchObject shadow: Is the shadow patch object generated before.
• Numbers x,y: This are the x and y position of the box.
• Numbers w,h: This two values are equal to the width and the height.
• Boolean pad (defaults to false): Whether padding should be taken into account (it's cero though, nothing will change).
• Number depth (defaults to 1): Is the Z-Depth described above

##Shapes Shadows are just 2D box drop-shadows, they can't do custom shapes.

You could somewhat trick the eye by drawing the object on top with a higher width/height.

For example to draw a rounded corner rectangle with 2 pixel radius and put shadows behind it you need to make the rounded rectangle 1 pixel bigger than the shadow box in each direction

local roundrect = require "material-love.libs.roundrect"

x,y,w,h = 40, 40, 500, 200
local polygon = roundrect(x, y, w, h, 2, 2)

love.draw = function ()
	shadow:draw(x - 1, y - 1, w - 2, h - 2, false, false, 3)
	lg.polygon("fill", unpack(polygon))
	lg.polygon("line", unpack(polygon))
end

This works for rounded rectangles because their shape is still a box, other forms may be difficult to get right

For example circles, they wouldn't look right, that is why we provide an special function for them, if you want that instead, check the FAB library which is designed to provide circles with drop-shadows.

For any other shape (not rectangles nor circles) you will need to find other method.

##Files

This files are required in order to use shadows in your project, be sure to have them all

• libs/shadow.lua
• libs/nine.lua
• assets/shadow-1.png
• assets/shadow-2.png
• assets/shadow-3.png
• assets/shadow-4.png
• assets/shadow-5.png