Jump to content
  • Advertisement
Sign in to follow this  
Albrektson

All about transparency (and displacements)

This topic is 4842 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I have some questions I need answers to in regard of a game I’m trying to develop. The game will involve many layers of transparent images of different kinds (PNG-files with full alpha-channels, JPEG-files with masking and if possible some sort of displacement-map). The game uses 2D-images only and does not render any form of 3D-graphics. The use of a standard pink color for transparency is out of the question as the images are pre-rendered in 3D using 3ds max and Maya producing full alpha-channels, thus avoiding the aliasing you get with a pink-channel (with exception for pixeling the images by hand, which we don’t do). The language used is C with allegro and due to my lacking experience with C and allegro in general, detailed answers are greatly appreciated – full source code, even better (just enough for me to fill in the gaps and modify for my own use). So let’s get started: Question 1 – PNG Images with alpha included. How do I display a PNG-image that has alpha included (as the topic implies), displaying the alpha-channel as transparency. Also, if displaying several PNG-images: how do I determine the order of the layering (z-index) and can I change this real-time? Note that I’m always looking for the most efficient way of displaying graphics with motion (as all objects/images will be moving around). If one solution is better suited for small images, please describe alternative techniques I might want to use when displaying larger images (such as a background). Example-images: http://www.systemsgo.se/transparency/transp_png.png Question 2 – JPEG-images… First off, I want to know how to display a simple JPEG-file (no transparency in this case). Secondly, I want to be able to use two JPEG-files (one for lets say a spaceship, and one gradient version (where white is 0% transparent and black is 100% transparent) to mask the spaceship-image. Advancing even further, how do I use several JPEG-images (a background image and several mask-images to mask different parts of the background and displacing it a few pixels along let’s say the Y-axis)… For instance, I want to create a shockwave-like-effect using a background-image of a road and a bunch of partial circles (which together make up a donut-like shape) – let’s call these “rings”. In total, there are 24 rings (jpeg-images used as masks) and one background-image (also jpeg). The idea is to take the rings, put them centred on top each-other and have the background shown separately in each ring with a slight displacement along the Y-axis. Lastly the background will also need to be displayed as the bottom-layer and a specular-shine-image (a transparent PNG-image) on top. (see example-images for a better idea) The next step would then be to animate the shockwave using larger and larger rings until one can then let the shockwave “fade out” by simply gradually lowering the displacement along the Y-axis until it hits 0, and the ring-masks are disabled. Someone told me about a geta(), getc() and makecol()-technique… could someone elaborate on this further if it’s the way to go. Starting out at sizes around 80x60 px, in the end, the mask-files will be as large as 800x600. However, only a thin few-pixel-stripe of this will need to be displayed. Example-images: http://www.systemsgo.se/transparency/output.jpg http://www.systemsgo.se/transparency/background.jpg http://www.systemsgo.se/transparency/24_rings.jpg http://www.systemsgo.se/transparency/just_a_visual.jpg http://www.systemsgo.se/transparency/specular_shine.png http://www.systemsgo.se/transparency/rings.rar (Also) Displacement-values on Y-axis: http://www.systemsgo.se/transparency/values.txt Question 3 – displacement map using directX or something? The advanced part of question 2 would if possible produce a sort of displacement-map (like the Photoshop-effect going by the same name). I’ve heard that directX has a feature build in, able to replicate this effect in a highly efficient way (probably more efficient than masking 24 images, animated in real-time). The displacement-map would then only include the background-image and a gradient image of the donut described in question 2, where black is 0% displacement up to white, 100% displacement. The min/max-value of displacement along the Y-axis has to be specifiable like min=0 px and max=20 px) Is this possible and if so, how would one do this? Example-images: http://www.systemsgo.se/transparency/background.jpg http://www.systemsgo.se/transparency/displacement_map.jpg Looking forward to your replies! Thanks!

Share this post


Link to post
Share on other sites
Advertisement
Come on... 44 views and no answers? It can't be that hard, can it?
If you know answers to ANY of the questions, please post!

Thx!

Share this post


Link to post
Share on other sites
If it's a 2-D game I don't see why you wouldn't want to use a certain color for seethrough pieces of the image..

Share this post


Link to post
Share on other sites
Quote:
Original post by Albrektson
I have some questions I need answers to in regard of a game I’m trying to develop. The game will involve many layers of transparent images of different kinds (PNG-files with full alpha-channels, JPEG-files with masking and if possible some sort of displacement-map). The game uses 2D-images only and does not render any form of 3D-graphics. The use of a standard pink color for transparency is out of the question as the images are pre-rendered in 3D using 3ds max and Maya producing full alpha-channels, thus avoiding the aliasing you get with a pink-channel (with exception for pixeling the images by hand, which we don’t do).

The language used is C with allegro and due to my lacking experience with C and allegro in general, detailed answers are greatly appreciated – full source code, even better (just enough for me to fill in the gaps and modify for my own use).

So let’s get started:


Question 1 – PNG Images with alpha included.

How do I display a PNG-image that has alpha included (as the topic implies), displaying the alpha-channel as transparency.
Also, if displaying several PNG-images: how do I determine the order of the layering (z-index) and can I change this real-time?

Note that I’m always looking for the most efficient way of displaying graphics with motion (as all objects/images will be moving around). If one solution is better suited for small images, please describe alternative techniques I might want to use when displaying larger images (such as a background).

Example-images:

http://www.systemsgo.se/transparency/transp_png.png




Question 2 – JPEG-images…

First off, I want to know how to display a simple JPEG-file (no transparency in this case).

Secondly, I want to be able to use two JPEG-files (one for lets say a spaceship, and one gradient version (where white is 0% transparent and black is 100% transparent) to mask the spaceship-image.

Advancing even further, how do I use several JPEG-images (a background image and several mask-images to mask different parts of the background and displacing it a few pixels along let’s say the Y-axis)…
For instance, I want to create a shockwave-like-effect using a background-image of a road and a bunch of partial circles (which together make up a donut-like shape) – let’s call these “rings”.

In total, there are 24 rings (jpeg-images used as masks) and one background-image (also jpeg). The idea is to take the rings, put them centred on top each-other and have the background shown separately in each ring with a slight displacement along the Y-axis.
Lastly the background will also need to be displayed as the bottom-layer and a specular-shine-image (a transparent PNG-image) on top. (see example-images for a better idea)

The next step would then be to animate the shockwave using larger and larger rings until one can then let the shockwave “fade out” by simply gradually lowering the displacement along the Y-axis until it hits 0, and the ring-masks are disabled.

Someone told me about a geta(), getc() and makecol()-technique… could someone elaborate on this further if it’s the way to go.
Starting out at sizes around 80x60 px, in the end, the mask-files will be as large as 800x600. However, only a thin few-pixel-stripe of this will need to be displayed.

Example-images:

http://www.systemsgo.se/transparency/output.jpg
http://www.systemsgo.se/transparency/background.jpg
http://www.systemsgo.se/transparency/24_rings.jpg
http://www.systemsgo.se/transparency/just_a_visual.jpg
http://www.systemsgo.se/transparency/specular_shine.png
http://www.systemsgo.se/transparency/rings.rar


(Also) Displacement-values on Y-axis:

http://www.systemsgo.se/transparency/values.txt




Question 3 – displacement map using directX or something?

The advanced part of question 2 would if possible produce a sort of displacement-map (like the Photoshop-effect going by the same name). I’ve heard that directX has a feature build in, able to replicate this effect in a highly efficient way (probably more efficient than masking 24 images, animated in real-time). The displacement-map would then only include the background-image and a gradient image of the donut described in question 2, where black is 0% displacement up to white, 100% displacement.
The min/max-value of displacement along the Y-axis has to be specifiable like min=0 px and max=20 px)

Is this possible and if so, how would one do this?

Example-images:

http://www.systemsgo.se/transparency/background.jpg
http://www.systemsgo.se/transparency/displacement_map.jpg



Looking forward to your replies! Thanks!




As far as displaying PNG and JPEG's go you'll have to use a library as Allegro doesn't come with PNG and JPEG support. You can try FreeImage. I can't help you with source code because I've never tried using Allegro for PNG and JPEG. You might consider switching to SDL because it's more suited for those who need to write their own image loaders. That and the Wiki on the SDL site has some information and examples on loading JPEG and PNGs. I am not saying it couldn't be done in Allegro just that I believe it will be more effient in SDL.

You said you don't have much experiance with C and Allegro, how much experience do you have? Just curious.

If you give us some details on the type of game your trying to make we can come up with some specific solutions. There are lots of way to just about anything and some are better than other in a given situation.

I hope this helps at least a little.

Share this post


Link to post
Share on other sites
Update:

Ok, to describe further: yes, the game is purely a 2D-game. You might say the perspective is isometric (though not following the standard 30/45 degree formula). The project started out as a remake of the old Ironman/RC Pro AM/Rock n Roll Racing-genre... something like what Deathrally managed to mess up ;) Basically a car/tank-game viewed from an isometric view.

The graphics are constructed in an advanced 3D-application and rendered out to 2D-images (JPEGs and PNGs) with the correct orthographic camera-settings.
What I want to do is to have images in different Z-indexed layers (background, animated background-objects, the track/road, water-masks and faked reflections in the road, shadows from cars, the cars themselves, shadows for: & lamp-poles/tunnels/etc, shadows from a cloudmap, volumetric light from lamps, etc, rain, .... As you probably understand, in total, there will be a lot o layers of different kinds of images to be finally displayed (or blitted I guess?)

The final result will give the possibility of reproducing a somewhat photorealistic quality...


I initially tried to do the whole thing in Macromedia Director, as Director already supports JPEGs, PNGs, masking, animated objects, and everything I thought I would need. Well, almost everything. Getting stuck on vsync-issues, etc made me go with C instead. Thus, here I am... trying to convert about 16.000 lines of code (written over a couple of years as a hobby, including mathematical calculations for zone-triangulation using multiple layers of pythagoream theorem and standard trig combined with acceleration-formulas - just fpr the heck of it).

Experience-wise, my knowledge in C and allegro extends only as far as the content of two books ("C++ in 24 days" and Jonathan Harbour's "Game Porgramming All in One"), however I've previously used variations of basic, lingo, actionscript, among other things... so I wouldn't claim to be a newbie, nor a pro of any sort.


I was also recommended to use jpgalleg for JPEG-support in allegro (anyone with experience, please comment usage as the usage.txt included was a bit fuzzy)...
LibPNG and LoadPNG was also recommended for PNG-support in allegro.
... if this is the wrong way to go, knock yourselves out with a why, what and how (after all, it is what I'm here looking for).


Oh, and the reason I can't use a single color for transparency is quite simple, and if I recall, described in the original post:
A single transparent color will give that GIF-like edge-ness to the graphics, also restricting the use of SEMI-transparant gradients (imagine a spectrum of light, where different colors and intensity of these colors are able to produce different grades and colorations of the transparency). The alpha-channel in PNG-images automatically take care of what would otherwise be an impossible task - in a neat, easy renderable, relativly space-efficiant way.
Thus, just using a single pink color as transparent is NOT an option.


Questions? Thx.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!