Author Topic: FadeIn/FadeOut Transitions  (Read 13275 times)

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
FadeIn/FadeOut Transitions
« on: May 07, 2012, 04:58:16 AM »
Is this possible guys?

Looking for something like this



SKIP TO 1:42

Also, if it's possible could there be two functions such as FadeIn()

Which makes visibility 0 (just black) -------> 1 (full visibility)

and then FadeOut()

Which makes visibility 1 ------------> 0

For example in working code, I could use this....

Code: [Select]
if IsiOS() then
                FadeIn()
SetCameraPosition(850,550)
SetCameraZoom(6000)
WaitReal(2)
Message("01_SEND_SEED", true, 1.0, "Centre")
WaitMessage(true)
                FadeOut() --- READY FOR NEXT MESSAGE TO FADE IN
else
MessageBox("01_01")
WaitDialog()
end

Pilchard123

  • Tester
  • Old Oak
  • ****
  • Thank You
  • -Given: 4
  • -Receive: 24
  • Posts: 932
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #1 on: May 07, 2012, 05:43:08 AM »
Try SetVignetteAlpha(X) , that may be what you are looking for.

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #2 on: May 07, 2012, 05:46:37 AM »
So how would I go about implimenting that into the game? Sorry about this, I have no clue, beginner :/

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #3 on: May 07, 2012, 06:05:48 AM »
Actually??

Code: [Select]
function FadeIn()
for i = 1,255 do
SetVignetteAlpha(i)
end
end

Code: [Select]
function FadeOut()
for i = 255,1 do
SetVignetteAlpha(i)
end
end

??
« Last Edit: May 07, 2012, 06:21:02 AM by Tomfloria »

Pilchard123

  • Tester
  • Old Oak
  • ****
  • Thank You
  • -Given: 4
  • -Receive: 24
  • Posts: 932
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #4 on: May 07, 2012, 06:27:58 AM »
Something like that, yeah. Try using GetGameTime() in there to make it not go quite so fast. I can't remember exactly how, but Annikk.exe used it in a couple of his maps.

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #5 on: May 07, 2012, 06:58:24 AM »
I'll have a look in Annikk's levels, but isn't there some math I could use to make it do more? like multiply everything by 10? 10,2550

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #6 on: May 07, 2012, 07:30:14 AM »
Been snooping around in Annikk's EverSwarm


This is in levelsetup
Code: [Select]
-- set backdrop and vignette
bw = math.random(0,1)

SetBackdropColour(bw*210,bw*227,bw*224)

SetVignetteAlpha(0)
if bw == 1 then
SetVignetteAlpha(255)
bw = 255
end

This is whats in while gamerunning()

Code: [Select]
if GetGameTime() < 10 then

Globals.Structures.RootSpeed=15


if GetGameTime() > 1 then
if bw > 50 then
bw = bw - 1
SetVignetteAlpha(bw)
end
end

Having a bit of trouble understanding though?

annikk.exe

  • Achiever
  • Ent
  • ****
  • Thank You
  • -Given: 0
  • -Receive: 4
  • Posts: 1,809
Re: FadeIn/FadeOut Transitions
« Reply #7 on: May 07, 2012, 09:07:25 PM »
Let me insert myself here and dispel a few mysteries..


The vignette is a darkening of the edges of the screen.
You can see a great example of it in action in the level EXTREME PWN LAZ0RZ!!  http://www.dyson-game.com/smf/index.php?topic=1222.0
During the opening of this level, there is a heavy vignette around the edges (you can notice it if you look for it) which keeps the visual focus on the centre of the screen.  After a few moments, the vignette starts to fade, creating the feeling of the level "opening up"; then the player gains control of the mine and the level begins.


I suspect from your description that the vignette is not what you really want.  I think you probably want the entire screen to fade in and out, rather than just the edges.

If that's the case, I guess the way I would suggest to do it is to have a very large sprite that fills the screen.  It would be 100% opaque when the level loads, then becomes gradually more and more transparent until it's 100% transparent, then you're done.
Hopefully this would hide any asteroids/seedlings behind it.

That's the way I'd tackle this problem, anyway.  I'd be interested to hear how you get on with this. :>




Also,

Code: [Select]
-- set backdrop and vignette
bw = math.random(0,1)

This creates a variable called "bw" and sets it to either 0, or 1.
This will be used to decide whether the level will have a black background, or white background - and which set of star effects will be used.


Code: [Select]
SetBackdropColour(bw*210,bw*227,bw*224)
Sets the backdrop colour.
At this point, bw is either 0 or 1.  If it's 0, the colour ends up being 0,0,0 which is black.  If it's 1, the colour ends up being 210,227,224 which is very light grey.
   
Code: [Select]
SetVignetteAlpha(0)
Sets the vignette alpha to be 100% opaque.  The "alpha" is how transparent it is; 0 means opaque, 255 means transparent.


Code: [Select]
if bw == 1 then
Did we select 1 for bw?  (as opposed to 0)

Code: [Select]
SetVignetteAlpha(255)
Assuming bw == 1, we now proceed to set the Vignette to 100% opaque.


Code: [Select]
bw = 255
end

The bw variable is recycled at this point to be used for the vignette fade...



Then we get to the next section:

Code: [Select]
if GetGameTime() < 10 then
For the first 10 seconds of game time, do the following:
      
Code: [Select]
Globals.Structures.RootSpeed=15
Set the root speed... I think this was so the player can watch the roots travelling to the centre of the asteroid more slowly during the intro.
         
         
Code: [Select]
if GetGameTime() > 1 then
If more than 1 second has passed (and, logically, less than 10 seconds, as per above)

Code: [Select]
if bw > 50 then
Check if the bw value (which we set to 255 earlier) is more than 50.

Code: [Select]
bw = bw - 1
Assuming it was more than 50, reduce the value of bw by 1.


Code: [Select]
SetVignetteAlpha(bw)
end
end

Now set the vignette to the value of bw.



bw is going to count down from 255 until it reaches 51, then the vignette will stay at that value.

The game processes a while GameRunning() loop 60 times per second, so we can calculate that it will take a little over 3 seconds for the transition to complete.
IE, 255 - 51 = 204.  204/60 = 3.4




Hope that explains it.  The example you've chosen is heavily convoluted by all the extra stuff I wanted to do; a very simple vignette fader would be something like this:



Code: [Select]
--To be placed inside LevelSetup
-- set vignette alpha

-- starts on 255 (fully opaque)
vig=255

-- set the initial vignette
SetVignetteAlpha(vig)


Code: [Select]
--To be placed inside a While GameRunning() loop inside LevelLogic
-- set vignette alpha

-- if the fade is not yet complete...
if vig > 0 then

-- fade out one more step..
vig = vig - 1

-- set the vignette to the value of vig
SetVignetteAlpha(vig)

end


That will cause the vignette to be there when the level loads, but to fade out, disappearing completely at 0:04:25 game time (ie after 4 and a bit seconds).
As per above though, I suspect this is not really the effect you want..
« Last Edit: May 07, 2012, 09:12:17 PM by annikk.exe »

Aino

  • Ent
  • ******
  • Thank You
  • -Given: 4
  • -Receive: 30
  • Posts: 1,527
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #8 on: May 07, 2012, 09:21:50 PM »
Annikk, it's iPad and that means no Screen/LevelDraw :/

I guess we had some cases with people drawing stuff in Levellogic, possible it works?

annikk.exe

  • Achiever
  • Ent
  • ****
  • Thank You
  • -Given: 0
  • -Receive: 4
  • Posts: 1,809
Re: FadeIn/FadeOut Transitions
« Reply #9 on: May 07, 2012, 09:26:40 PM »
Vignette alpha is used in levellogic, not screendraw or leveldraw :>

Aino

  • Ent
  • ******
  • Thank You
  • -Given: 4
  • -Receive: 30
  • Posts: 1,527
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #10 on: May 07, 2012, 09:28:12 PM »
You were talking about a sprite, and they are drawn in ScreenDraw or LevelDraw :P

Also, just to throw it out there: Got a new level soon, I might need a beta test :)

annikk.exe

  • Achiever
  • Ent
  • ****
  • Thank You
  • -Given: 0
  • -Receive: 4
  • Posts: 1,809
Re: FadeIn/FadeOut Transitions
« Reply #11 on: May 07, 2012, 09:33:29 PM »
Ah yes, that's right... the sprite approach won't work, then.


Well, if you don't have any asteroids or seedlings onscreen during the fades, you could just fade the background colour and the text.  Although, once again, the DrawText function isn't going to work on the ipad..


Hmmm, tricky one. :>

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #12 on: May 07, 2012, 09:34:51 PM »
what about this guys?

Code: [Select]
if IsiOS() then -- This asteroid
FadeIn()
WaitReal(0)
Message("This Unknown Asteroid...", true, 1.0, "Right")
WaitMessage(true)
FadeOut()
else
MessageBox("01_01")
WaitDialog()
end

Code: [Select]
function FadeIn()

for imageview = 100,0 do
ImageBox("res/Transition-(imageview).png",512, "Transition-(imageview)")
end

function FadeOut()

for imageview = 0,100 do
ImageBox("res/Transition-(imageview).png",512, "Transition-(imageview)")
end

Aino

  • Ent
  • ******
  • Thank You
  • -Given: 4
  • -Receive: 30
  • Posts: 1,527
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #13 on: May 07, 2012, 09:37:38 PM »
I got no idea what ImageBox does...

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #14 on: May 07, 2012, 09:42:41 PM »
(click to show/hide)

Image Box

Aino

  • Ent
  • ******
  • Thank You
  • -Given: 4
  • -Receive: 30
  • Posts: 1,527
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #15 on: May 07, 2012, 09:46:59 PM »
So the imagebox is... the entire image?

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #16 on: May 07, 2012, 09:50:10 PM »
Yeah, it would go from the actual game to that image...

I don't know how to get rid of the ok sign though, might have something to do with 512?

Aino

  • Ent
  • ******
  • Thank You
  • -Given: 4
  • -Receive: 30
  • Posts: 1,527
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #17 on: May 07, 2012, 09:54:49 PM »
I think 512 is resolution, though I don't really know :P

annikk.exe

  • Achiever
  • Ent
  • ****
  • Thank You
  • -Given: 0
  • -Receive: 4
  • Posts: 1,809
Re: FadeIn/FadeOut Transitions
« Reply #18 on: May 07, 2012, 09:59:27 PM »
Your code won't work.


What you have causes 100 image boxes to be displayed onscreen 60 times a second, lasting a total of 1/60th of a second.

What you need is 1 image box to be displayed onscreen 60 times per second, lasting a few seconds. :>

My previous vignette examples should show you how to create the effect you want.  You'd just use the ImageBox command instead of the SetVignetteAlpha command..

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #19 on: May 07, 2012, 10:05:26 PM »
Well the last part Transition-(imageview) relates to the lang.scv file

and okay annikk, i'll have a play around...

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #20 on: May 07, 2012, 10:55:05 PM »
It's pointless to do it with imagebox because you have to click ok to continue... whch I don't want, I'll just have to live with it

tried doing

      DrawSprite("1", 0,0, 0,0,0,100, 1000)

but nothing happens

Aino

  • Ent
  • ******
  • Thank You
  • -Given: 4
  • -Receive: 30
  • Posts: 1,527
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #21 on: May 07, 2012, 11:15:20 PM »
If nothing happens I guess that's good?

And the text in the DrawSprite you have there is supposed to be a number, change "1" to 1 and the colors range from 0-1, so having 100 won't help it :)

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #22 on: May 07, 2012, 11:34:13 PM »
oh so the alpha is only 0-1 oh haha

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #23 on: May 07, 2012, 11:36:28 PM »
Is this right?

Code: [Select]
DrawSprite(1, 0,0, 255,255,255,1, 1000)
Still doesn't work though?

annikk.exe

  • Achiever
  • Ent
  • ****
  • Thank You
  • -Given: 0
  • -Receive: 4
  • Posts: 1,809
Re: FadeIn/FadeOut Transitions
« Reply #24 on: May 08, 2012, 06:24:21 PM »
It does work, but it can't go inside function LevelSetup or function LevelLogic.  It can go inside either function ScreenDraw or function LevelDraw
I think those functions aren't available on the ipad version at the moment.. :/

Aino

  • Ent
  • ******
  • Thank You
  • -Given: 4
  • -Receive: 30
  • Posts: 1,527
  • Eufloria: Yes
Re: FadeIn/FadeOut Transitions
« Reply #25 on: May 08, 2012, 10:02:13 PM »
It can actually be in LevelLogic and draw on screen... That's PC version though...

Tomfloria

  • Shrub
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 232
Re: FadeIn/FadeOut Transitions
« Reply #26 on: May 09, 2012, 12:27:18 AM »
It still doesn't work anyway...

It will just be an iPad Limitation...