Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Fading parts of a sprite

Author
Message
The Zoq2
14
Years of Service
User Offline
Joined: 4th Nov 2009
Location: Linköping, Sweden
Posted: 26th May 2012 13:39
Hello, in the project im working on right now, I want to be able to fade parts of a sprite. To make seams between sand and grass ect. seem less obvious. The problem is that I would need 4 varieties of sprites for every ground type.

So is it possible to use something like an alpha map to do this instead?
bjadams
AGK Backer
16
Years of Service
User Offline
Joined: 29th Mar 2008
Location:
Posted: 26th May 2012 17:40
check the GetImage command.
Rich Dersheimer
AGK Developer
14
Years of Service
User Offline
Joined: 1st Jul 2009
Location: Inside the box
Posted: 26th May 2012 20:16
or how about

SetImageMask

Description
Copies a color channel from one image to another. You can specify the source and destination channels using the values 1,2,3,4 to represent red,green,blue,alpha respectively. This is a slow command and should not be called every frame. The x,y offset values allow you to offset the source image on the destination image so a small source image can be used to mask any part of a large image. Any part of the large image outside the size of the small image will be left unchanged. negative offset values are supported to shift the source


Quote: "The problem is that I would need 4 varieties of sprites for every ground type."


You mean because the sprites have 4 sides? There's actually 16 different combinations of sides, from zero sides up to all 4 sides.
But maybe that's not what you mean.
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 28th May 2012 12:26
Rich is right, setImageMask is the best solution. Just have a transparent image the same size as your tile which fades from white to fully transparent (white where you actually want it transparent) and apply it something like this:
setImageMask(tileImage,maskImage,4,1,0,0)

This sets the white part of the maskImage to the alpha of the tile Image.

Remember that this is setting the image mask, not the sprite. You may need to create a number of copies of the image for different applications.

Rich Dersheimer
AGK Developer
14
Years of Service
User Offline
Joined: 1st Jul 2009
Location: Inside the box
Posted: 28th May 2012 16:55 Edited at: 28th May 2012 16:56
Quote: "Remember that this is setting the image mask, not the sprite. You may need to create a number of copies of the image for different applications."


So true! And keep in mind that the alpha of the mask image completely replaces the alpha of the destination image, so you end up with this...



If you're going to need a fading gradient of the sprite, it's probably just easier to create the original image with a fading transparency.

Attachments

Login to view attachments
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 28th May 2012 17:01
That's a great example Rich!

bjadams
AGK Backer
16
Years of Service
User Offline
Joined: 29th Mar 2008
Location:
Posted: 28th May 2012 18:17
Sounds like a very powerful command

need to experiment a bit with it
Ancient Lady
Valued Member
20
Years of Service
User Offline
Joined: 17th Mar 2004
Location: Anchorage, Alaska, USA
Posted: 28th May 2012 22:38
I just added an example of using it here:
http://forum.thegamecreators.com/?m=forum_view&t=197260&b=41

Cheers,
Ancient Lady
Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 29th May 2012 05:48 Edited at: 29th May 2012 06:02
Quote: "If you're going to need a fading gradient of the sprite, it's probably just easier to create the original image with a fading transparency."

I can help you with this, the following function will create a gradient image for you from no media.

Pass it the size of the image - which should not be bigger than your screen's smallest edge, and a 0 for opaque and 1 for transparent.


Here is an example - Right hand two sprites.

The sprites have been coloured to show the effect, the third one is opaque, the fourth transparent.

The other two sprites are my first look at creating non-square media-less sprites and both use the getImage() command;

The first is a circle - created by rotating a sprite
The second is a mask created from that circle.

The green bar is just there to show the transparency.

Attachments

Login to view attachments
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 29th May 2012 10:39
Very nice!

Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 29th May 2012 20:01 Edited at: 29th May 2012 20:04
In the previous example, the black portion was transparent and the white opaque.

The following function creates the other variation, so that white is transparent and black is opaque.

Since this deals with transparency, it does not need a transparency parameter as it will always be 1.

It calls the first function to save duplicating work.



I'm putting together a collection of these to post as a set.

Attachments

Login to view attachments

Login to post a reply

Server time is: 2024-04-28 16:23:52
Your offset time is: 2024-04-28 16:23:52