How do character/object interaction animations work in isometric games?

Question

I am planning an isometric business simulation game where the player sees an office with the usual furniture such as desks, whiteboards etc.

Characters (Staff/NPC's) within the game should interact with these objects by performing some pre-defined tasks such as typing on the keyboard at the desk or writing on the whiteboard etc.

What I am interested in, specifically, is the following scenario:

Character moves across the office (1) to his desk (2) and sits down and starts to type (3).

From what I understand I would have a sprite sheet for the character movement (1) and a static sprite for the desk (2) but I don't quite understand how the third step would be handled?

Is there a combined sprite that contains both desk and character? I assume not, otherwise I would need to have a sprite sheet for every desk and character combination.

How is this normally handled?

EDIT:

Here is a specific example animation from the game Theme Hospital. You can see the video here.

As far as I can see the animation is split into several steps.

Step 1 - Character moves between desk and chair.

This suggests that chair and desk are in fact separate sprites.

Step 2 - Character sits down animation

Notice how in the very last frame the chair is closer to the desk.

Step 3 - Desk animations

Step 4 - Stand up animation

Is the same as sit down but played in reverse.

Step 5 - Move away

Use normal move animation to move away.

The questions I have is how are these animations best separated and how would a graphic artist usually provide these animations?

Is the character sitting and typing on the desk actually three different sprites (desk, character and chair)? Does anyone know any example sprites of similar animations?

EDIT 2:

I guess my biggest concern is that I have the right expectations on how the sprites will actually look like. I can't draw them myself so I will have to pay someone to do it and I assume there is some kind of best practice way to do these kind of animations?

Answer 1

Short answer? Dont combine sprites.
That is, if you combine, you'll have to have the animation for every single combination. Seems strange if you just want one chair. But lets pretend your office could be expanded in the middle game, where the chairs now have a sprite nicer. Would you just add a chair sprite, or will you recombine and add all the animation of every employer again?

Lets make some calcs.

Pretend you have 6 sprites on a employer sitting typing animation, you have 5 different chairs, and 10 different employers type.

If you just draw the employer on top of the chair, this would take 10 * 6 + 5 sprites, 65 sprites.
If you combine, and make every combination, this would take 10 * 6 * 5 sprites, that is, 300 sprites. Will be such a pain for you to make a spritesheet this large for just a simple animation!

EDIT:

Well, if you dont know how to, it would be better to define your chair as a background, and the staff as active sprites. Easier for you.

Background.draw();
Foreach(employer i in staff)
    I.draw();

That should keep your staff separated from your chais(background) Also, update the frames of the staff animation indepently too.

EDIT2:

I saw your edit and your samples. I would keep the same approach. All different sprites. The chair would go in front of the character anyway!

To move the chair closer, update its position to some pixels up and left, or do this on the sprite itself.

Do you understand about Z align? that should play a lot of things...

You can see that some parts of the chair stays behind the character, others appear in front. So how is this possible if it is just one sprite? Z align!

Two ways to achieve the effect. Keep a mask(Not that easy) or divide your sprite in two.

I'll just mention the second method, as I dont have much time now. You should cut your chair sprite, in the parts that would be in the front, and what will be behind. Then put them in the same position. easy! What plays is the Z Align here, The parts behind should be drew behind, the character in the middle and the front chair parts in the front.

I don't know which lib/api/sdk/toolset you're using. But the most do this way: use a z Align factor that determines what is behind or what is in front or What is drew first go behind, what's drew last go in front. So you should keep this in mind.

Answer 2

An alternative idea would be to include a Depth/Z Buffer image with your sprites similar to how 3D APIs (OpenGL) ensure polygons don't overlap. For a basic sprite game it could just be a bunch of 0/1 bits (black and white bitmap) (although you could use more levels of depth if you want).

If you have a combined 'deskchair' sprite and want the chair to appear in front of any other sprites (ie people) on that square you would make the Z-Buffer version of the char 'black' while the desk would be 'white'.

When you render the dynamic sprite (a person) on that tile it would check to see what color is in the depth buffer. For pixels that are 0 (black) you skip drawing the person sprites pixels and just leave the chair ones there.

Rather than check every pixel 1 at a time, a simpler way to do the check would be to multiply the sprite pixels by the depth buffer value since the closer depth would be 0 and cancel out the. Then of course you have to colorkey (unless you have a alpha color channel).

This of course adds overhead (although you could skip it for anything that doesn't need multiple depth levels like a deskchair). You also need to sync your animations (ie the person would have to match up with the desk chair anim). It doesn't give you the same flexibility of just having a whole bunch of separate sprites.