Advertisement Jump to content
Sign in to follow this  

All about transparency (and displacements)

This topic is 4906 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: 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: (Also) Displacement-values on Y-axis: 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: Looking forward to your replies! Thanks!

Share this post

Link to post
Share on other sites

This topic is 4906 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.

This topic is now closed to further replies.
Sign in to follow this  

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!