SyntaxBomb - Indie Coders

Languages & Coding => Blitz2D, BlitzPlus, Blitz3D => Topic started by: Borislav on May 17, 2018, 20:37:16

Title: How to make transitions(Transparency)
Post by: Borislav on May 17, 2018, 20:37:16
How do you make an image transition into an another image.
I heard that you need to do something with readpixelfast, can someone please tell me more about it.  :)
Title: Re: How to make transitions(Transparency)
Post by: Matty on May 18, 2018, 01:37:44
Lots of ways.

Do you want a simple fade?

Or do you want a slide across the screen?

Do you want chunks of the image in squares to be replaced gradually?

Do you want the image to disintegrate and reform?

There are lots of ways.

All different techniques of coding to do it.
Title: Re: How to make transitions(Transparency)
Post by: Borislav on May 20, 2018, 02:30:44
Quote from: Matty on May 18, 2018, 01:37:44
Lots of ways.

Do you want a simple fade?

Or do you want a slide across the screen?

Do you want chunks of the image in squares to be replaced gradually?

Do you want the image to disintegrate and reform?

There are lots of ways.

All different techniques of coding to do it.
Sorry for late reply.
I am talking about simple fading like this one but between images.
https://stackoverflow.com/questions/4411306/transition-of-background-color
I kind of know how would that work by counting the millisecs and adding a number to the lapha basically.
Title: Re: How to make transitions(Transparency)
Post by: Matty on May 20, 2018, 02:54:13
Display image 1

Display image over the top '2' with alpha 0.

Each frame add '0.x' to the alpha value of image 2...it will then fade into view.

Alpha:

With modern graphics methods a simple setalpha call or similar will work.

With 2d blitz (not 3d accelerated) you would have to use readpixelfast and writepixelfast.

Title: Re: How to make transitions(Transparency)
Post by: RemiD on May 21, 2018, 19:39:57
if you just want to have a "normal" image / GUIelement, and a "mouseover" image / GUIelement, just use 2 different images (one for normal, one for mouseover)

if you want to have a progressive change from one image to another image (like fade in or fade out), in Blitz3d, you would have to use a pixel perfect quad (rectangle mesh) + texture, and then you can play with the alpha of the mesh / surface....
Title: Re: How to make transitions(Transparency)
Post by: Borislav on May 22, 2018, 15:31:07
Quote from: RemiD on May 21, 2018, 19:39:57
if you just want to have a "normal" image / GUIelement, and a "mouseover" image / GUIelement, just use 2 different images (one for normal, one for mouseover)

if you want to have a progressive change from one image to another image (like fade in or fade out), in Blitz3d, you would have to use a pixel perfect quad (rectangle mesh) + texture, and then you can play with the alpha of the mesh / surface....
That would need loads of recoding, I guess I would be okay with non-transitioned buttons.
Title: Re: How to make transitions(Transparency)
Post by: Borislav on June 04, 2018, 18:50:15
Quote from: RemiD on May 21, 2018, 19:39:57
if you just want to have a "normal" image / GUIelement, and a "mouseover" image / GUIelement, just use 2 different images (one for normal, one for mouseover)

if you want to have a progressive change from one image to another image (like fade in or fade out), in Blitz3d, you would have to use a pixel perfect quad (rectangle mesh) + texture, and then you can play with the alpha of the mesh / surface....
I tried to apply a texture to a rectangle mesh, it looked horrible, it had terrible quality.
Is there any way to make it the same quality as the 2D one?
(https://media.discordapp.net/attachments/288759522703573003/451755890945818626/unknown.png)
Title: Re: How to make transitions(Transparency)
Post by: Naughty Alien on June 05, 2018, 01:50:41
..i believe its related to the size of the texture applied on to quad..in other words..if your texture is 64x128 pixels, for example, and quad drawn on the screen occupy 256x512 pixels of screen space, what you going to see is for sure, blurry..
Title: Re: How to make transitions(Transparency)
Post by: Borislav on June 05, 2018, 12:11:50
Quote from: Naughty Alien on June 05, 2018, 01:50:41
..i believe its related to the size of the texture applied on to quad..in other words..if your texture is 64x128 pixels, for example, and quad drawn on the screen occupy 256x512 pixels of screen space, what you going to see is for sure, blurry..
Actually, it takes up not the screenspace but it is the scale of the plane probably.
Title: Re: How to make transitions(Transparency)
Post by: RemiD on June 06, 2018, 20:11:07
Quote
I tried to apply a texture to a rectangle mesh, it looked horrible, it had terrible quality.
Is there any way to make it the same quality as the 2D one?
yes, the bluring of the texture texels is caused by "bilinear filtering", but you can disable it using a .dll, see :
https://www.syntaxbomb.com/index.php/topic,3892.0.html
Title: Re: How to make transitions(Transparency)
Post by: Borislav on June 06, 2018, 22:22:53
Quote from: RemiD on June 06, 2018, 20:11:07
Quote
I tried to apply a texture to a rectangle mesh, it looked horrible, it had terrible quality.
Is there any way to make it the same quality as the 2D one?
yes, the bluring of the texture texels is caused by "bilinear filtering", but you can disable it using a .dll, see :
https://www.syntaxbomb.com/index.php/topic,3892.0.html
Thank you, but it turns out that there is a built-in Blitz3D function called cleartexturefilters.
EDIT: It turns out turning off mipmapping didn't make it fully perfect.