Image Fade In/Out

Monkey Forums/Monkey Programming/Image Fade In/Out

erebel55

(Posted 2014) [#1]

I would like to fade an image in and out, from 0 alpha to 1 and vice verse.

Has anyone written anything they would share?
Is there a better way than WritePixels?

Thank you

Danilo

(Posted 2014) [#2]

Just use SetAlpha before DrawImage:

Strict

Import "image.png"

Import mojo

Class Program Extends App

    Field img:Image
    Field alpha:Float = 0.0
    Field switch:Bool = False

    Method OnCreate:Int()
        SetUpdateRate(60)
        img = LoadImage("image.png")
        Return 0
    End


    Method OnRender:Int()
        Cls 0,0,0
        SetBlend AlphaBlend
        SetAlpha alpha
        DrawImage(img,50,50)
        Return 0
    End
    
    Method OnUpdate:Int()
        If switch = False
            alpha += 0.01
            If alpha > 1.0
                alpha = 1.0
                switch = True
            Endif
        Else
            alpha -= 0.01
            If alpha < 0.0
                alpha = 0.0
                switch = False
            Endif
        Endif
        Return 0
    End
End

Function Main:Int()
    New Program
    Return 0
End

erebel55

(Posted 2014) [#3]

Thank you! :)

dawlane

(Posted 2014) [#4]

Another way

Strict

Import mojo

Class Game Extends App
	Field alpha:Float
	Field image:Image
	Field dir:Float
	
	Method OnCreate:Int()
		SetUpdateRate(60)
		Self.image=LoadImage("test.png")
		
		Self.alpha=0.0
		Self.dir=0.01
		Return 0
	End Method
	
	Method OnUpdate:Int()
		Self.alpha += Self.dir
		If Self.alpha > 1.0 Or Self.alpha < 0.0 Then Self.dir = -Self.dir
		Return 0
	End Method
	
	Method OnRender:Int()
		Cls
		SetAlpha(Self.alpha)
		DrawImage(Self.image,0,0)
		Return 0
	End Method
End Class

Function Main:Int()
	New Game
	Return 0
End Function

erebel55

(Posted 2014) [#5]

Cleaner, thank you! :)

dawlane

(Posted 2014) [#6]

And here's a variation that will do pausing between fades. Note: Doesn't allow for different update rates.

Strict

Import mojo

Class Game Extends App
	Field alpha:Float
	Field image:Image
	Field dir:Float
	Field fade:Bool		' 
	
	Field last_tick:Int
	
	Method OnCreate:Int()
		SetUpdateRate(60)
		Self.image=LoadImage("test.png")
		
		Self.alpha=0.0
		Self.dir=0.01
		Self.fade = True		
		Self.last_tick = Millisecs()	' Get the current time
		
		Return 0
	End Method
	
	Method OnUpdate:Int()
		Local current:Int = Millisecs()
		Local duration:Int		
		If Self.fade									' While fade it true/on then do the fading
			If Self.fade Then Self.alpha += Self.dir	' Only adjust alpha if the fade is active this fixes the slight dimming when fading is disabled
			If Self.alpha > 1.0 Or Self.alpha < 0.0	' If alpha is above or below limits. Then change the direction for the alpha and disable the fade
				Self.dir = -Self.dir					' Flip the sign of the amount of fade to add/subtract
				Self.fade = False			
			Endif		
		Else	' If the fade is false/off then time a delay before fading can start again
			If Self.alpha >= 1.0 Then duration = 4000 Else duration = 1000 	' Make the fully visable display the longest
			If current >= last_tick + duration		' If current time is greater or equal to last time plus the duration then restart the fade and save current time
				last_tick = current
				Print "duration " + duration
				Print "ticks " + ((last_tick + duration)- current)
				Self.fade = True
			Endif
		Endif
		Return 0
	End Method
	
	Method OnRender:Int()
		Cls
		SetAlpha(Self.alpha)
		DrawImage(image,0,0)
		Return 0
	End Method
End Class

Function Main:Int()
	New Game
	Return 0
End Function