How to make transitions(Transparency)

Started by Borislav, May 17, 2018, 20:37:16

Previous topic - Next topic

Borislav

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

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

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.

Matty

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

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....

Borislav

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.

Borislav

#6
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?

Naughty Alien

..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

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.

RemiD

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

Borislav

#10
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.