Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Simulating moving clouds on the sky - Gideros Forum

Simulating moving clouds on the sky

bravcmbravcm Member
edited February 2013 in Step by step tutorials
Hi,

Can anybody help me with code snippet which emulates moving cloud(s) on the sky (from left to right and back).

Thanks!
Tagged:

Comments

  • try to do it in your way. if you show us something, we could improve it.

    Likes: bravcm

    +1 -1 (+1 / -0 ) Share on Facebook
  • sorry, I can move sprite "Cloud1.png" to the right edge of the screen. How to move it back to the left edge and do this in infinite loop?
    local sprite = Bitmap.new(Texture.new("Cloud1.png"))
    local mcLR = MovieClip.new{{1, 100, sprite, {x = {0, 320-sprite:getWidth(), "linear"}}}}
    stage:addChild(mcLR)
     
    --adding event on animation complete
    mcLR:addEventListener("complete", function()
                                        --start moving to the left side
                                        --mcLR = nil 
    									end)
  • You can add more to your Movie Clip, so it moves off screen on the left when the first animation finishes and then set it to loop using setGotoAction like so:
    -- this is assuming your width is 320?  I'd use a variable and get 
    --application:getContentWidth() in case you ever change resolution
     
    local sprite = Bitmap.new(Texture.new("Cloud1.png"))
    local mcLR = MovieClip.new{
       {1, 100, sprite, 
          {x = {0, 320-sprite:getWidth(), "linear"}}
       },
       {101, 110, sprite,
          {x = {-sprite:getWidth(), 0, "linear"}}
       }
    }
    mcLR:setGotoAction(110,1)
    stage:addChild(mcLR)
  • Thanks zvardin, but why cloud "jumps" when appears on the left side of the screen? What about two clouds:
    local sprite1 = Bitmap.new(Texture.new("Cloud1.png"))
    sprite1:setPosition(0, 10)
     
    local sprite2 = Bitmap.new(Texture.new("Cloud2.png"))
    sprite2:setPosition(130, 40)
     
    local mc1 = MovieClip.new{
       {1, 100, sprite1, 
          {x = {0, 320, "linear"}}
       },
       {101, 110, sprite1,
          {x = {-sprite1:getWidth(), 0, "linear"}}
       }
    }
    mc1:setGotoAction(110,1)
     
    local mc2 = MovieClip.new{
       {1, 100, sprite2, 
          {x = {0, 320, "linear"}}
       },
       {101, 110, sprite2,
          {x = {-sprite2:getWidth(), 0, "linear"}}
       }
    }
     
    mc1:setGotoAction(300,1)
    mc2:setGotoAction(110,1)
     
    stage:addChild(mc1)
    stage:addChild(mc2)
    How to set different speed for animations???

    Thanks!
  • yes! I figured myself:
    local sprite1 = Bitmap.new(Texture.new("Cloud1.png"))
    sprite1:setPosition(0, 10)
     
    local sprite2 = Bitmap.new(Texture.new("Cloud2.png"))
    sprite2:setPosition(130, 40)
     
    local mc1 = MovieClip.new{
       {1, 100, sprite1, 
          {x = {0, 320, "linear"}}
       },
       {101, 110, sprite1,
          {x = {-sprite1:getWidth(), 0, "linear"}}
       }
    }
    mc1:setGotoAction(110,1)
     
    local mc2 = MovieClip.new{
       {1, 200, sprite2, 
          {x = {0, 320, "linear"}}
       },
       {201, 210, sprite2,
          {x = {-sprite2:getWidth(), 0, "linear"}}
       }
    }
     
    mc1:setGotoAction(110,1)
    mc2:setGotoAction(210,1)
     
    stage:addChild(mc1)
    stage:addChild(mc2)
    But clouds "jumps" when appears on the left side of the screen? Why?

    P.S.
    Which tag I must use to display properly lua source code in posts?
  • Use <pre lang="lua"> your lua code </pre>
    And most probably you also need to provide constant y position as:
    local mc1 = MovieClip.new{
       {1, 100, sprite1, 
          {y = 10, x = {0, 320, "linear"}}
       },
       {101, 110, sprite1,
          {y = 10, x = {-sprite1:getWidth(), 0, "linear"}}
       }
    }

    Likes: bravcm

    +1 -1 (+1 / -0 ) Share on Facebook
  • Thanks ar2rsawseen, but this is not the case. My goal is smooth moving. Please look at attached project ...
    zip
    zip
    Clouds.zip
    22K
  • zvardinzvardin Member
    Accepted Answer
    Oh, the problem is I just threw in the numbers quick to show how it could be done, but we need to calculate how many frames it should actually take vs the rest of the animation. The easiest way to do this honestly would be if your clouds could setup off screen the first time so we can do it in one tween as opposed to 2, like so:
    local mc1 = MovieClip.new{
       {1, 300, sprite1, 
          {y = 10, x = {-sprite1:getWidth(), 320, "linear"}}
       }
    }
    Otherwise, you would need to calculate how many frames it should take to come in from off screen:
    -- 320 pixels in 300 frames, multiply by how many pixels we need to move (the width)
    local mc1frames = math.floor(320/300 * sprite1:getWidth())
     
    local mc1 = MovieClip.new{
       {1, 300, sprite1, 
          {y = 10, x = {0, 320, "linear"}}
       },
       {301, (301+mc1frames), sprite1,
          {y = 10, x = {-sprite1:getWidth(), 0, "linear"}}
       }
    }
    mc1:setGotoAction(301+mc1frames,1)
  • edited February 2013
    In my case I don't use a movie clip. I create cloud on enterFrame event, use a frameCount to control it like this:
    local function createCloud()
             if frameCount%300 == 0 then
    		local cloud = clsCloud.new(-92, math.random(0,contentHeight/2), math.random(1,5))
             --you can custom where cloud appear in clsCloud
    		grpCloud:addChild(cloud)
             end
    end
     
    local function runGame(event)
    	if gameIsActive then
    		frameCount = frameCount + 1
    		moveCloud()
    		createCloud()
    	end
    end
     
    local function moveObject()
            for i = grpCloud:getNumChildren(), 1, -1 do
    		local cloud = grpCloud:getChildAt(i)
    		cloud:move(CLOUD_SPEED)
     
    		if cloud:getX() > contentWidth + 90 then --custom when we destroy cloud
    			cloud:destroy()
    		end
    	end
    end

    This is class clsCloud, to use it include this: local clsCloud = require("cloud")
    clsCloud = gideros.class(Sprite)
     
    function clsCloud:init(originX, originY, cloudType)
    	local cloudTexture
    	if cloudType == 1 then
    		cloudTexture = Texture.new("images/cloud_01.png",true)
    	elseif cloudType == 2 then
    		cloudTexture = Texture.new("images/cloud_02.png",true)
    	elseif cloudType == 3 then
    		cloudTexture = Texture.new("images/cloud_03.png",true)
    	elseif cloudType == 4 then
    		cloudTexture = Texture.new("images/cloud_04.png",true)
    	else
    		cloudTexture = Texture.new("images/cloud_05.png",true)
    	end
     
    	cloud = Bitmap.new(cloudTexture)
    	cloud:setPosition(originX, originY)
    	self:addChild(cloud)
     
    	function self:move(moveSpeed)
    		local currentX = self:getX()
    		self:setX(currentX + moveSpeed/2)
    	end
     
    	function self:destroy()
    		self:removeFromParent()	
    		self = nil
    	end
    end
     
    return clsCloud


    Look at my games for a result https://play.google.com/store/apps/details?id=com.ultimategamestudio.cupidgameoflove
  • @zvardin: thank you , everyting is ok now.

    @thanhquan1512: your game is very attractive and I want to simulate clouds like you do. I've attached example based on your class, but it doesn't work!?!? :((( Can you check why not??? Thx!

    Dislikes: DoradoLab

    zip
    zip
    Clouds2.zip
    35K
    +1 -1 (+0 / -1 ) Share on Facebook
  • @bravcm: You could try something like this
    local sprite1 = Bitmap.new(Texture.new("Cloud1.png"))
    local sprite2 = Bitmap.new(Texture.new("Cloud2.png"))
     
    local mc1 = MovieClip.new 
    {
    	{1, 300, sprite1, {y = 10, x = {-sprite2:getWidth(), 320, "linear"}}},
    }
     
    local mc2 = MovieClip.new
    {
    	{1, 500, sprite2, {y = 50, x = {-sprite2:getWidth(), 320, "linear"}}},
    }
     
    mc1:setGotoAction(300,1)
    mc2:setGotoAction(500,1)
     
    stage:addChild(mc1)
    stage:addChild(mc2)
Sign In or Register to comment.