Simulating moving clouds on the sky

bravcm · February 2013

Hi,

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

Thanks!

yvz5 · February 2013

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

bravcm · February 2013

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)

zvardin · February 2013

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)

bravcm · February 2013

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!

bravcm · February 2013

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?

ar2rsawseen · February 2013

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"}}
   }
}

bravcm · February 2013

Thanks ar2rsawseen, but this is not the case. My goal is smooth moving. Please look at attached project ...

zvardin · February 2013

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)

thanhquan1512 · 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

bravcm · February 2013

@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!

Scouser · February 2013

@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)

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Simulating moving clouds on the sky

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Simulating moving clouds on the sky

Comments