Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Image fade in lua — Gideros Forum

Image fade in lua

myspsmysps Member
edited April 2012 in Game & application design
I am super new to lua but learning! I'm starting with the ebook example and I would like an image to fade in. So far my super code I have this:

self.courtarrow = Bitmap.new(TextureRegion.new(Texture.new("gfx/arrows.png", true )))
self.courtarrow:setX(650)
self.courtarrow:setY(100)


yeah.. nothing special just the coordinates. the graphic section of the guide to lua isnt complete so as a newbie im not sure how to get it working

thanks for any pointers where to find out to do this im sure simple code

Comments

  • evsevs Member
    Hello,

    Have a look at the Fading Stars sample that comes with Gideros Studio

    cheers

    evs
  • I am new too but i have been learning so much thing from the example samples. Try to find source codes of the games which was developed with Gideros Studio and have a look at that codes , try to understand.

    By the way , the solution of your problem is adding child. You should use that self:addChild(self.courtarrow) then you have to call that class in the main like that blabla=ClassName.new()
    stage:addChild(blabla)

    Mert

    Dislikes: anneMurielle

    +1 -1 (+0 / -1 )Share on Facebook
  • myspsmysps Member
    Thanks!

    I've tried however, the image does not appear.

    Page0 = gideros.class(Sprite)

    function Page0:init( pageNo, parent)
    self.no = pageNo

    self.background = Bitmap.new(TextureRegion.new(Texture.new("gfx/page4.png", true)))


    self.courtarrow = Bitmap.new(TextureRegion.new(Texture.new("gfx/arrows.png", true )))
    self.courtarrow:setX(650)
    self.courtarrow:setY(100)

    self:addChild(self.background)
    self:addChild(self.courtarrow)


    end

    function Page0:onTimer(timer)

    local arrow = Bitmap.new(Texture.new("gfx/star.png"))
    arrow:setPosition(400, 100, timer:getCurrentCount() * 80 - 60)


    timer = Timer.new(500, 5)
    timer:addEventListener(Event.TIMER, onTimer, timer)
    timer:start()

    local fade = Fade.new(arrow)
    stage:addChild(fade)

    end
  • CarolineCaroline Guru
    edited April 2012
    If you just want to add an image to the stage, then you don't need to create a class.

    Of course when you come to write your apps, then you will be using classes, but just to test things out while you're learning, it's easier not to.

    This will add an image to the stage and fade it in:
    local arrow = Bitmap.new(Texture.new("arrow.jpg"))
    arrow:setPosition(100,200)
    arrow:setAlpha(0)
    stage:addChild(arrow)
     
    function onTimer(timer)
    	local currentAlpha = arrow:getAlpha()
    	currentAlpha = currentAlpha + 0.1
    	arrow:setAlpha(currentAlpha)
    	if currentAlpha == 1 then
    		timer:removeEventListener(Event.TIMER)
                    timer:stop()
    	end
    end
     
    timer = Timer.new(500, 0)
    timer:addEventListener(Event.TIMER, onTimer, timer)
    timer:start()
    That has a pulsing fade, because the timer is called every half second.

    change it to
    timer = Timer.new(100,0)
    and
    currentAlpha = currentAlpha + 0.01

    for a smoother fade in.

    ----

    In your code, where is the Fade class defined?


  • myspsmysps Member
    edited April 2012
    Thanks im getting there. learning the classes and terminology.. i think i've called the class here. It works just great!

    edit: maybe not, i see the image on every page now..:(
     
    Page0 = gideros.class(Sprite)
     
     
    function Page0:init( pageNo, parent)
    	self.no = pageNo
     
    	self.background = Bitmap.new(TextureRegion.new(Texture.new("gfx/page4.png", true)))	
     
     
    	self:addChild(self.background)
     
     
     
    end
     
    local arrow = Bitmap.new(Texture.new("gfx/arrows.png"))
    arrow:setPosition(650,100)
    arrow:setAlpha(0)
     
     
     
     
    function onTimer(timer)
     
        local fade = Fade.new(arrow)
    	stage:addChild(arrow)
     
    	local currentAlpha = arrow:getAlpha()
    	currentAlpha = currentAlpha + 0.01
    	arrow:setAlpha(currentAlpha)
    	if currentAlpha == 1 then
    		timer:removeEventListener(Event.TIMER)
                    timer:stop()
    	end
    end
     
    timer = Timer.new(100, 0)
    timer:addEventListener(Event.TIMER, onTimer, timer)
    timer:start()
  • CarolineCaroline Guru
    edited April 2012
    You only need to add arrow to the stage once - actually, the way this seems to work (I don't know the code), you add the arrow to the page rather than the stage. Your onTimer function is called every 1/10th of a second, so that line is being executed lots of times.

    Try this - this is my entire code for page0.lua, which fades in a bird at the top left.
    Page0 = gideros.class(Sprite)
     
    function Page0:init( pageNo, parent)
    	self.no = pageNo
     
    	self.background = Bitmap.new(TextureRegion.new(Texture.new("gfx/background.png", true)))	
     
    	self:addChild(self.background)
     
    	self:addEventListener(Event.ADDED_TO_STAGE, self.onAddedToStage, self)	
     
    	self.bird =  Bitmap.new(TextureRegion.new(Texture.new("gfx/bird.png", true )))	
    	self.bird:setX(0)
    	self.bird:setY(0)
    	self:addChild(self.bird)
    	self.timer = Timer.new(100, 0)
     
    end
     
    function Page0:onAddedToStage()
    	self.bird:setAlpha(0)
    	self.timer:addEventListener(Event.TIMER, self.onTimer, self)
    	self.timer:start()
    end
     
    function Page0:onTimer()
    	local currentAlpha = self.bird:getAlpha()
    	currentAlpha = currentAlpha + 0.01
    	self.bird:setAlpha(currentAlpha)
    	if currentAlpha >= 1 then
    		self.timer:removeEventListener(Event.TIMER, self.onTimer, self)
            self.timer:stop()
    	end
    end
    I think you might want to read more of the documentation in the Gideros Academy, especially Classes and Events:

    http://www.giderosmobile.com/documentation/classes_in_gideros.html
    http://www.giderosmobile.com/documentation/events.html

    (That might not be the best way to do that in this ebook example, it's just a quickie :) )

  • myspsmysps Member
    @caroline thank you very much. i will try that. im understanding a tad bit more now!

  • Though this is an old thread, wouldnt it be easier to do Movieclip fade in?
    local mc = MovieClip.new{
    {1, 100, sprite1, {x = {0, 200, "linear"}}},
    {50, 150, sprite1, {y = {0, 100, "linear"}}, {alpha = {0, 1, "easeOut"}}},
    {100, 200, sprite2, {x = {0, 200, "linear"}}},
    }
    REAL programmers type copy con filename.exe
    ---------------------------------------
  • bowerandybowerandy Guru
    edited March 2013
    @Cyberience, I may be misunderstanding something but to do fading in and out I just define the following in my "helpers" library:
    function Sprite:fadeUp(duration, optFinalAlpha, completionFunc)
    	GTween.new(self, duration, { alpha=optFinalAlpha or 1 }, { onComplete=completionFunc })
    end
     
    function Sprite:fadeDown(duration, optFinalAlpha, completionFunc)
    	GTween.new(self, duration, { alpha=optFinalAlpha or 0 }, { onComplete=completionFunc })
    end
    FWIW, I also define these two useful methods too:
    function Sprite:pulse(period, factor, optCount, optCompletionFunc)
    	local trueXFactor=factor/self:getScaleX()
    	local trueYFactor=factor/self:getScaleY()
    	self._pulseTween=GTween.new(self, period/2, {scaleX=trueXFactor, scaleY=trueYFactor}, {repeatCount=optCount or 0, reflect=true, onComplete=optCompletionFunc})
    end
     
    function Sprite:cancelPulse()
    	if self._pulseTween then
    		self._pulseTween:toEnd()
    		self._pulseTween:setPaused(true)
    		self._pulseTween=nil
    	end
    end
    best regards
Sign In or Register to comment.