How to implement AOE2 obscured sprite outlines?

Java 2D
#1

If you don’t know: Age Of Empires 2 is a 2D game with an isometric view. Some buildings are quite large, so unit-sprites can be obscured by them. If a unit is obscured it will be shown only with its outline on the building image, the outline has the player color.
Interesting is, that if a unit is only half obscured, then only that part that is obscured is represented by an outline. This seems to work pixel-perfect.
I think that is a nice solution that no units are forgotten behing buildings and it looks good.

Now I asked myself how to implement his. I would draw units and bulings according to their depth-position. Whenever a building is drawn I would check if it obscures some units. Then i would draw the outline of the units, but masked by the building image, so the outline is not drawn on the visible part of the unit.
But as far as I can see java has no drawImage() with masking.
I tested Graphics.setClip(), but that is not what I wanted. It only works with shapes and gets real slow for complex shapes. A setClip(Image) would be cool.

So is there a way to do quick masking draImage()? Or is there another way to implement this outline drawing?

#2

Just an idea - why not draw in this order (this assumes the outline is part of the sprite itself):

  1. Sprite
  2. Building
  3. Outline of sprite

The sprite get’s painted, then may get overlaid by the building if obscured then the building is overlaid by the outline (and the fills out the visible sprite).

#3

[quote]Just an idea - why not draw in this order (this assumes the outline is part of the sprite itself):
[/quote]
Welll, I have not yet decided if the outline should be part of the sprite itself. That would make things easy, but I think it would look less good. At least in AOE2 outlines are not part of the sprite, and I would prefer if I could avoid making the outline part of the sprite, too.

#4

Hmm, you could precalculate and invert the alphachannel of all things that can be in front of your sprites, save as extra images, and replace the alphachannel of the outline with the overlapping inverted-alpha-image of the front-object.
I don’t know if its fast enough, but its a basic idea…

Greets !
mbw :slight_smile:

#5

I donno if this is the same sort of answer as mbw, but you could have ‘template’ (trying to figure out a good word for this) but basically a mono-colored polygon that has the same shape as the building that you are trying to superimpose the border around, and you place the character model in a relative position to your ‘template’ image (only need 1 per building) and you compare the overlap between the unit (relatively positiontioned to the building) and the pixel color that the unit overlaps. If it the pixel on the unit overlaps the color of the polygon (pick a color that won’t be used by terrain or the units) then you need to draw the outline color at that pixel.

I don’t think this is a very expensive operation, image processing on very small boxes on the screen (such as 30x90) should be very fast…and if you do some up-front collision detection using coarser-grained polygons (like 2 rectangles) you can save yourself the pixel-by-pixel compare every animation loop.

Pops: i don’t think your solution would work because the outline only shows up on the portion of the sprite that is being obscured behind the building, if you draw the outline around the sprite (after a obscurement check is made) the outline will appear around the portion of the unit that is not obscured by the building.

-Chris

#6

chris:
this system will not work. how would you differenciate a sprite in front or behind your mask? if the sprite is in front of a house, the outline is not needed, but the two masks overlap…
Depth needs to be taken in account, and that can be done using a 3d engine.
You have to draw the ground , the houses(3d objects mapped correctly), and the sprites using billboards, then redraw the sprites ( taking care to replace the textures with their outlines) using an inverted Z buffer test. No pixel based test to do, all hardware accelerated.

#7

Ah, good question, I didn’t explain it clearly. You are right, you still need to track if the unit ‘falls behind’ the structure that is obscuring the image, but I was assuming that this condition was met before going into how to draw only the portion of the outline that is being obscured. Sorry about the confusion.

The ‘template’ I was trying to explain was just a polygon that is in an off-screen portion of memory that is only used to define the shape of the building so that you can overlay the unit sprite with this template so that you can figure out (to the pixel) which portion of the sprite is obscured. Naturally, you woudln’t need to do this operation if the unit was physically in front of the building (you don’t need to know which portion of the unit is obscured). If, however, a ‘overlap’ check passes, then you use your off-screen ‘template’ of the building that the unit is walking behind to determine which pixels of the outline should be drawn (if the template pixel is on in the same location as a unit pixel, draw the outline). In fact, now that i think about it more, you only need to use a separeate image for the unit (like a ghost image) that has the outline drawn, so in this case, any template pixel that is covering an outline pixel should be drawn to the screen.
In this case, you have 2 images per unit, the unit image and the ‘ghost outline’ unit image.

I wish I had the vocabulary to explain this, I’m not sure if there’s a game concept of this ‘template’ (…agh, words escape me for how to explain this…) Ok, how about i do this using more mundane props…

Pretend you have a piece of paper, and you draw on the piece of paper the outline of a shape, such as a triangle. Cut the shape out with scissors…this is what I’m calling the ‘template’.

Now, getting back to the game engine, you have your unit moving around the board, and it moves behind a structure. You also have the ‘template’ of the sturcture which could just be a 1-bit depth image of the actual structure. you place the outline unit image on the template in the same relative postion as the acutal unit image is to the actual structure image. if the an outline pixel is in the same position as the template pixel, draw the outline pixel ontop of the actual structure.

Shouldn’t this work? I’m just basically using an off-screen image to store the pixel locations of the actual structure so that i can get a pixel-perfect intersection of the outline and the structure shape.

-Chris

#8

Chris:
Your template thing is simply called a mask.
I’ve been to the site, and watched screenshots. it seems that you can be at the same time under and in front of elements that lie in the same tile. ( deep doors of some big houses or castles) I don’t have the game so i can’t tell more precisely.
Well that might work anyway, but any 2d method sounds like ‘doing complicate when it’s simple’, to me. The best method is to use the 3d cards and the zbuffer. The trick is only to redraw sprites with outline textures, and to change the zbuffer comparison method. Can even be done with J3d, if i remember well.

#9

I will have to think about some possible solutions you posted…, but:

MBW, that should work, some extra blits, but it should work.
CKNOLL, if you propose I should check individual pixel colors then it will possibly be too slow.

But the problem is that any fancy drawing has the danger to remove acceleration of the images, and then I would be back at the image-speed of jdk1.3 and losing the 1.4 speed.

PEPE, I have several problems with switching to Java3D.
-I would have to work myself more into it (oh…)
-it wouldn’t run with a basic JRE
-it might not be fast enough on older computers, but even gfx boards that are several years old have decent 2d hardware units

#10

Yeah, I can’t attest to the speed of this at all, and I’m not sure if 3d libs are an option in this case, since it’s a 2d based game (although I know you can use 3d based libs for 2d based games, I was just saying that for this case they may be limited by 2d libs).

Yes! Mask is the word i was looking for, if there was a real fast way to build an image based on 2 other images (like through the use of a filter) sorta like a transparancy mask, that you have your image outline and the mask filtered into a final ‘cropped’ outline image that you can draw on the game screen, that’d be the way I’d go about it (If i was to roll it myself, i’d first start with comparing pixels and to improve performance i’d see if there was a way to do a binary compare between the two byte arrays of pixels)…donno…if I have some time i’llt ry to put together something demonstrating it.

-Chris

#11

Oh, did not know that had to run with standard jre. Of course there is also the lwjgl option, but you’ll have to make everything by hand… more work, again.
But by using standard 2d APIs, you are right, you will not benefit from accelerations of 1.4, or very few.
By the way, if the machine are old, processor will be old also and as you run in software mode, the graphic card will still be the fastest. ;D ;D
There might be a 2d only solution, but it would involve using special compositing modes that i’m not aware the actual PC cards can do. ( would work on Amiga, AFAIR… AHH, that blitter. :slight_smile: ) If you can blit using two source buffers and a comparison method (and, not), that could be done 100% hardware …
… with some tons of blits, or course.

#12

Heh, I didn’t post this initially, Themroc would have to be the one to say if it was restricted to 2d libs (I just made the assumption based on the comparison to AOE (which i dont’ think uses 3d?) and the forum he posted in) but if I was limited in this way, I’d say that what I was tyring to accomplish would be the way I go, I think any solution will involve lots of blits and such, but my experience with the game is that I never had dozens and dozens of troops behind buildings or trees and such for this special image processing to occur (to produce the outlines) maybe the performance would be acceptable if it only had to blit a few small rects of outlines per frame (if it was hundreds I could imagine a horrible slowdown). Hmm, donno…I was just trying to throw something together, and I was going to take your head image as the unit image and i was going to make a skeleton as the ‘highlight’ image, and have a structure shaped like an hourglass to be the mask that would define which portion of the image should show either the outline or the main image, but I started to turn your head into a skeleton and thought ‘God, what am i doing?? I’m not a graphics artist!’ Heh, it looked kinda funny tho.

Talk to you later.

-Chris

#13

Hey, Sir Trembovetski, if you read this thread can you please tell me if the multisource/operation system is still something possible nowadays? (i mean using hardware…) that was quite a powerful thing, looong time ago.
For example, in the case we’re actually discussing about , i think it would be possible if done like this:

  • blit the backgrounds on display buffer (or to be displayed)
  • For each and every tile, from the back to the front
    • blit the characters that are on that tile on display buffer (or to be displayed)
    • blit the building over it
    • blit the outlines of the characters using the mask as source A, the outline as source B, a AND operator for the two sources ‘blend’, and destination would be the display buffer (or to be displayed)

the mask would have to be a full bits on or full bits off mask, whatever the depth selected.

Did not see any ‘AND’ composite mode in jdk docs to be used with Graphics2D, but if there were one, and if it could be hardware accelerated, you could do the A/B/DEST system yourself using an intermediate buffer of the size of the building. Blitting that over the display buffer (or to be displayed) would give the needed result.
That would then be a 100% hardware accelerated solution, without any pixel reading.

#14

Um, I’m really not well versed in the different operations that you are asking about, but I did try to implement a sort-of motion blur to make this animation of a race game look smoother…anyways, the operator AND you were talking about made me remember something I read in about AlphaChanel at http://java.sun.com/j2se/1.4/docs/api/java/awt/AlphaComposite.html but I don’t think that applies here (only XOR operations are mentioned). Do you think that the image processing in JDK 1.4 wrt images with alpha composite will be hardware accelerated? Maybe there’s something here that could be used?

-Chris

#15

[quote]sort-of motion blur
[/quote]
You mean persistence of vision, i guess. i always wanted to see a game do real mothin blur. Will never happen (and be playable, as the frame rates would drop considerably), i think, but that would be fun. I remember there was a Quake3 demo of a strange buffer of the voodoo ‘something’ that did something approaching, but i guess that was a 2d trick with a motion buffer…

#16

[quote]Do you think that the image processing in JDK 1.4 wrt images with alpha composite will be hardware accelerated?
[/quote]
Can’t answer that, but i guess the big guys know. Maybe a post from them soon… ;D

#17

Well, I found an old copy of it, I wish I could post a zip here, but give me an email addr and I’ll show it to you.

-Chris

#18

i would be happy to see it.
Mail pepe at the url of the site that is in my profile. (will not give a mail directly in the forum, i fear robots… )
Thanks.

#19

Ok, sent. Hope you like it.

-Chris

#20

(to stay on topic)