Critique => 2D & 3D => Topic started by: Indigo on November 29, 2012, 08:11:15 pm

Title: Lucky Space Art
Post by: Indigo on November 29, 2012, 08:11:15 pm
For some time I've been working at a social games company called A Bit Lucky.  Our first game was Lucky Train which I've posted here about before and was a fun pixel art project.  Our second project was called Lucky Space and was a resource management sim of sorts.  Unlike Lucky Train, we decided to go with pre-rendered 3D graphics to give a more depthy look, and allow us to do lots of animations relatively cheap.  However I really wanted to keep to our pixel-roots, so I put in a lot of effort to develop techniques and make render shaders all to give the same sort of pixel-level attention that our users came to expect.  Unfortunately, when A Bit Lucky was acquired by Zynga recently the old games where shut down.  -So I put together this tribute webpage showcasing many of the buildings we made for the project by myself and Monsoon2D.  I wrote a script to parse the animation data from our game for your viewing.  :)

Here was the result of our hard work:  (warning, 22mb worth of images on this page)

Title: Re: Lucky Space Art
Post by: Dr D on November 29, 2012, 10:35:55 pm
Dammit Zynga, why do you have to ruin everything good.  :yell:

This stuff is fantastic and needs to be used on something.
Title: Re: Lucky Space Art
Post by: kriss on November 30, 2012, 12:35:41 am
Yes it's really a very good job you made :o

How do you manage to make those "3D" objects, amazing
Title: Re: Lucky Space Art
Post by: yaomon17 on November 30, 2012, 04:00:25 am
Almost crashed my browser TT.TT
but wow, those bouncing balls are well smoothly animated!
Title: Re: Lucky Space Art
Post by: Indigo on January 19, 2013, 01:02:20 am
here are some steps following the development of our level 3 large alien artifact...

It all starts off with some concept art of course.  Mark Paulik did all the concept art for the game and decided to do so in vectors for this particular game.  Not only was it generally fast, but it also allowed us to drop in some template art fairly quickly while the final art was being produced.

One of the things that was important to us for this project was to keep a pixel-art feel even though the game was being pre-rendered.  To achieve this look we kept our shapes fairly simple and geometric and our texture maps were pretty dang flat-shaded with basic outlining. Since the game was pre-rendered, we generally didn't care to pack the UV's efficiently or keep the texture sizes down.  With a bit of trig we ensured that our render camera was positioned as such to provide pixel-perfect renders to the size of our isometric tiles in-game.  No scaling it down after rendering.

So here's the basic setup of the render-material I developed for the game.  For a finer level of control I opted not to use scene lights, but rather a various falloff-maps that connect to a composite map - this composite map is pretty much exactly like using layers in photoshop and allowed me to control the blending of each element in a consistent way. The "toplight" layer i'd sometimes use if a building needed some extra contrast. The composite map then leads to the outline material which adds a 1-pixel outline around the buildings, again, to feel more like pixel art and compliment the texture style.

Here's an example that shows the buildup of the 'layers' of the composite map:
Texture -> Ambient Occlusion -> Shading and Shadows

Every building in our game has an "ON" state when it's connected to power.  To show this, we wanted parts of the building to glow.  We'd start by using a luminance map to render out a mask of areas we want to glow.  For this particular building we also wanted the electricity ball in the center to emit light, so I also rendered out a light-pass for that. I'd then composite them together in photoshop and add a bit of outer glow.

Some elements of the glow sheet we would animate by hand in photoshop:

We'd then assemble all the frames into spritesheets.  For the glow layer, we needed to prep it for the engine so we could have the color glow through 100% saturation before burning hot-white.  This meant multiplying the red channel x2. I can talk about the glow tech alone for quite a while.

Since we're dealing with pretty large sprite sheets here (some as large as 2016x1260) we wanted to reuse as many frames as possible during the course of an animation. (ex. if something is bobbing up and down, we only want to render it moving up then cycle backwards)  To make this possible, I wrote an spritesheet sequencing tool in javascript that allowed us to preview on the fly and iterate quickly.  We'd do this for both the building and glow spritesheets.

The final result would look something like this (pulsing and non-pulsing versions)

Other levels of this building:

Title: Re: Lucky Space Art
Post by: Howard Day on January 24, 2013, 11:25:38 pm
This stuff looks amazing. As a fellow tiny building creator, I've got nothing but respect for you guys - sorry Zynga shut it down.
Title: Re: Lucky Space Art
Post by: kriss on January 25, 2013, 06:22:44 pm
it seams reaaly easy when you explain it, but what a work !!

I hope you'll use your skill in a good game :)
Title: Re: Lucky Space Art
Post by: PypeBros on February 05, 2013, 12:15:04 pm
The connect-the-boxes interfaces seem to work very well to create sophisticated rendering effects. What software is that ?
Title: Re: Lucky Space Art
Post by: Indigo on February 05, 2013, 09:43:29 pm
The connect-the-boxes interfaces seem to work very well to create sophisticated rendering effects. What software is that ?

It's the slate material editor in 3ds max - it's quite nice. :)