November 29, 2020, 05:13:13 PM

### Author Topic: How to make transitions(Transparency)  (Read 2248 times)

#### Borislav

• Jr. Member
• Posts: 42
##### How to make transitions(Transparency)
« on: May 17, 2018, 08:37:16 PM »
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.

#### Matty

• Hero Member
• Posts: 1254
##### Re: How to make transitions(Transparency)
« Reply #1 on: May 18, 2018, 01:37:44 AM »
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.

#### Borislav

• Jr. Member
• Posts: 42
##### Re: How to make transitions(Transparency)
« Reply #2 on: May 20, 2018, 02:30:44 AM »
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.
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.

#### Matty

• Hero Member
• Posts: 1254
##### Re: How to make transitions(Transparency)
« Reply #3 on: May 20, 2018, 02:54:13 AM »
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.

#### RemiD

• Hero Member
• Posts: 1077
##### Re: How to make transitions(Transparency)
« Reply #4 on: May 21, 2018, 07:39:57 PM »
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....
DualCore AMD E-450, 1646 MHz - 6 Go DDR3 1333 SDRAM - AMD Radeon HD 6320 Graphics (384 Mo) - Windows 7 Home Premium - DirectX 11.0

#### Borislav

• Jr. Member
• Posts: 42
##### Re: How to make transitions(Transparency)
« Reply #5 on: May 22, 2018, 03:31:07 PM »
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.

#### Borislav

• Jr. Member
• Posts: 42
##### Re: How to make transitions(Transparency)
« Reply #6 on: June 04, 2018, 06:50:15 PM »
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?

#### Naughty Alien

• Hero Member
• Posts: 701
##### Re: How to make transitions(Transparency)
« Reply #7 on: June 05, 2018, 01:50:41 AM »
..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..

#### Borislav

• Jr. Member
• Posts: 42
##### Re: How to make transitions(Transparency)
« Reply #8 on: June 05, 2018, 12:11:50 PM »
..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.

#### RemiD

• Hero Member
• Posts: 1077
##### Re: How to make transitions(Transparency)
« Reply #9 on: June 06, 2018, 08:11:07 PM »
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
DualCore AMD E-450, 1646 MHz - 6 Go DDR3 1333 SDRAM - AMD Radeon HD 6320 Graphics (384 Mo) - Windows 7 Home Premium - DirectX 11.0

#### Borislav

• Jr. Member
• Posts: 42
##### Re: How to make transitions(Transparency)
« Reply #10 on: June 06, 2018, 10:22:53 PM »
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.