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

    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
    +1 -1Share on Facebook

    Comments

    • evsevs Member
      Hello,

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

      cheers

      evs
      +1 -1Share on Facebook
    • mertocanmertocan Member
      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

      My Games. Mert Can KURUM
      +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
      +1 -1Share on Facebook
    • 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?


      +1 -1Share on Facebook
    • 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()
      +1 -1Share on Facebook
    • 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 :) )

      +1 -1Share on Facebook
    • myspsmysps Member
      @caroline thank you very much. i will try that. im understanding a tad bit more now!

      +1 -1Share on Facebook
    • CyberienceCyberience Member
      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
      ---------------------------------------
      +1 -1Share on Facebook
    • 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
      tweets: @ insidebowerhaus blog: http://bowerhaus.eu/blog/blog.html
      +1 -1Share on Facebook
    Sign In or Register to comment.