Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
How can I change scenes AFTER fading in an image? — Gideros Forum

How can I change scenes AFTER fading in an image?

I guess I don’t understand “onComplete” in the GTween function.

Here is what I want to do: My splashScene has a start button to take the player to the game. It works fine. But I’ve added an image as bitmap with alpha=0 that I want to fade in BEFORE the scene changes to the playScene.

Here is what I did (the code is below):
1. The event listener for the button calls the “onClick” function.
2. The “onClick” function calls the GTween function to increase the alpha to 1 over 5 seconds.
3. The GTween function has an “onComplete” argument to call startButton:goToPlay(), which changes the scene.

What actually happens: When I click the start button, the scene changes without the image fading in.

Testing (various changes to the “onClick” function and the results:
1. If I just add a call to startButton:goToPlay(), without GTween, clicking the button takes me to the play scene as expected.
2. If I just add the GTween function with only increasing alpha to 1 over 5 seconds WITHOUT the call to startButton:goToPlay(), clicking the button results in the image fading in and nothing else, as expected.
3. And as I said before, with the GTween set to do the fade in and the call to startButton:goToPlay(), it doesn’t show the fade in and just goes straight to the play scene.

So how can I get this to do the fade in and THEN go to the play scene?
	function startButton:goToPlay()
		print("going to play")
		sceneManager:changeScene("play", conf.transitionTime, conf.transition, conf.easing)
	end
 
	function startButton:onClick()
		print("start button function started")
		GTween.new(goodLuck, 5, {alpha=1, onComplete=startButton:goToPlay()})	
	end
 
	startButton:addEventListener("click", startButton.onClick)

Comments

  • olegoleg Member
    edited January 2018 Accepted Answer
    I do not use GTween
    I think it should be done so
    local tween = GTween.new(sprite, 10, animate, properties)
     
    --adding event on animaiton complete
    tween:addEventListener("complete", function()
        startButton:goToPlay()
    end)
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • Thanks, Oleg.

    First, if you don't use GTween, how would you create this behavior (fade an image before changing scenes) or haven't you done this (or wouldn't do it)?

    I'm not sure how to implement what you suggested, but I tried changing the code of the "onClick" function to the code below. But with this code, I get the fading, but it doesn't switch the scenes. Based on the output of print statement the "onClick" function is called, but the "startButton:goToPlay()" is NOT called.
    	function startButton:onClick()
    		print("start button function started")
    		local tween = GTween.new(goodLuck, 5, {alpha = 1})	
    		tween:addEventListener("complete", function()
    		print("calling startButton:goToPlay()")
    		startButton:goToPlay()
    		end)	
    	end
  • keszeghkeszegh Member
    edited January 2018 Accepted Answer
    in the properties of GTween you need to add that it should fire the complete event:
    local tween = GTween.new(goodLuck, 5, {alpha = 1, dispatchEvents = true})
    EDIT: sorry, it should be (hopefully this time this works):
    local tween = GTween.new(goodLuck, 5, {alpha = 1}, {dispatchEvents = true})
  • I think I discovered the problem. With the code in my last post there's no "dispatchEvents" in the tween. When I add this, it works.
    local animate = {}
    animate.alpha = 1
    local properties = {}
    properties.dispatchEvents = true
     
    		print("start button function started")
    		local tween = GTween.new(goodLuck, 5, animate, properties)	
    		tween:addEventListener("complete", function()
    		print("startButton:goToPlay()")
    		startButton:goToPlay()
    		end)
  • Thanks, keszegh.
    As you can see from my post before this one, I figured out that I needed the dispatchEvents, but your way of adding it is simpler than the way I did it and I prefer your way.
    Thanks again.
  • Well, keszegh, I may like your way better but apparently Gideros doesn't. I copied and pasted your code into mine and when I ran it I got:
    classes/gtween.lua:404: Parameter 'param' must be one of the accepted values.
    stack traceback:
    classes/gtween.lua:404: in function 'init2'
    classes/gtween.lua:229: in function 'setPosition'
    classes/gtween.lua:86: in function
    I looked at your code and it appeared correct. When I removed the dispatchEvents=true, the code worked fine. It did the fading, but, of course it didn't change scenes.

    Any idea why your way didn't work, but mine did. I'd prefer to not use making those animate and properties tables if it's not necessary.
  • rpallen said:

    Thanks, Oleg.

    First, if you don't use GTween, how would you create this behavior (fade an image before changing scenes) or haven't you done this (or wouldn't do it)?

    I just do it with standard Gideros functions
    function speed_fade(sprite,alpha2,speed)
     
            alpha1 = sprite:getAlpha()
            speed=speed/1000*60
            sprite.fade = MovieClip.new{
                    {1, speed, sprite, {alpha = {alpha1, alpha2, "linear"}}} 
            }
            sprite.fade:gotoAndPlay(1)
     
     function fadeout()
    			 print("complete")
    		end
    		sprite.fade :addEventListener(Event.COMPLETE, fadeout)  
     
     
    end
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • @rpallen, see my previous post, i edited it and hopefully i got it right this time.
  • and @oleg is right, nowadays the built in movieclip class can do most what gtween can.
  • @keszegh this is true regarding the tweening functionality of MovieClip is very inefficient, making all those bitmap objects for an animation when it could just swap TextureRegions instead.
  • @antix, at least when doing only tweening stuff, then movieclip is probably at least as efficient as gtween.
  • antix said:

    @keszegh this is true regarding the tweening functionality of MovieClip is very inefficient, making all those bitmap objects for an animation when it could just swap TextureRegions instead.


    I do not understand what you are.

    Give me a short example of using GTween and textureregions


    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • @oleg, I was only referring to MovieClip :)
  • Even if movieclip does make sprites of each tween, it doesn't really matter - it's not like it's making textures so even a load of them won't be that much.
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • Thanks all for your suggestions and help.

    Keszegh, I tried your edited code and it works fine. Thanks.

    Regarding the discussion of MovieClip, I'll try that in a future project, but for completing this one, I'll stick with gtween since I've got it working.

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.