Re-scale Corona SDK display Objects based on Location

It has been a while since my last post. In this post we use Corona SDK to rescale display objects based on the location on the screen. Depending on the level in the Rolly Bear game a user has more or less platforms available to use. In case of many platforms we don’t want to much cluther on the screen, so we want them to be smaller when the user doesn’t need them. We can achieve this by adding a runtime listener to the platforms to check for its location. Accordingly we can re-scale the platforms.

See the small video how it works:

In the last weeks we have been to Khao Sok, Bangkok and Cambodia, it was quite some traveling and moving around between places. I just want to shortly update you on our adventure in Khao Sok. Khao Sok is one of the oldest jungles in the world and this jungle is located in South West Thailand. The jungle is known for it’s wildlife (big spiders, King Cobra’s and monkeys). In the heart of the jungle is a huge lake with raft houses. We stayed in the jungle for two nights and spent most of our time around the lake kayaking, swimming, and hiking. The sounds you hear at night are amazing peaceful (and sometimes a bit scary).

Open your levels01.lua file. We will start adding the function checklocation in the enterScene function of Storyboard. But first we need to make a small change to our for-loop for creating the platforms. In a previous post were we created the platforms we did not store the platforms in a table, in a way that we can retrieve them easily from other parts of our code. So, first add, a global table variable to hold the platforms:

local totalnumPlatforms = {}

The table is initialized empty but in the for-loop we will add 1 every time a platform is created:

totalnumPlatforms [#totalnumPlatforms+1] = platform

So your complete platform for-loop should look like this:

platformNames = {"platform-brown128", "platform-brownbrick128", "platform-green64", "platform-rock128", "crate64"};

for x =1, #platformNames do
	local platformNum = platformNames[x]
	platform = display.newSprite( myPlatformSheet , {frames={sheetInfo:getFrameIndex(platformNum)}} )
	platform.x = display.screenOriginX + 100
	platform.y = 150 + 75 * x 
	totalnumPlatforms [#totalnumPlatforms+1] = platform -- added in this post
	platform.platformNum= platformNum
	physics.addBody( platform, physicsData:get(platformNum))
	platform.bodyType = "static"  
	platform:addEventListener("touch", movePlatform)
	group:insert(platform)
end

Now open the fixedScene.lua. This file contains all fixed background elements of the game. We will add a so called platformboard, this is a wooden board on which all platforms are positioned (see the youtube movie above)

platformboard = display.newImageRect ("images/platform_board.png", 150, 400)
	platformboard.x = display.screenOriginX + 100
	platformboard.y = 310 + 75 
	platformboard.alpha = 0.8
	physics.addBody(platformboard, "static" ,{isSensor = true } )
	platformboard:toBack()

Now we have everything set to create the checkLocation function to determine when we re-scale a platform based on its position on the screen.

Add the following function in your enterScene:

function checkLocation()

	for x = 1, #totalnumPlatforms do
		--print(#totalnumPlatforms)
		local platformScale = totalnumPlatforms[x]
	
		if platformScale.x > platformboard.x + 0.5*(platformboard.x) then
			platformScale.xScale = 1.0
			platformScale.yScale = 1.0
		end
		if platformScale.x <= platformboard.x + 0.5*(platformboard.x) then
			platformScale.xScale = 0.7
			platformScale.yScale = 0.7
			platformScale.rotation = 0
		end

	end
end

We use the earlier created table totalnumPlatform and loop through this table based on its total children in the table (#). We create a new variable for reference called platformScale. For each one of them we check it’s location. The first if-statement checks if the x coordinate is larger than the platformboard where each platform is in positioned in. If thats the case, we set the xScale and yScale to 1.0. When the x coordinate is smaller than the platformboard, with other words, the platform is dragged back onto the board we set the xScale and yScale to 0.7. As a user might have rotated the platform and then decided to move it back to the platformboard we set it’s rotation back to zero (platformScale:rotation = 0 ).

We need to add a runtime listener to this function as the location of the platforms can be updated or changed with respect to the initialization of the objects. So add to your enterScene function:

Runtime:addEventListener("enterFrame", checkLocation)

There is one small thing we need to do, to make things more appealing. When a user drags the plaform back to the board and release the touch movement, the rotationAlert will be displayed. We don’t want this as we automatically set the rotation to 0. So add in your movePlatform function the following if-statement.

  elseif event.phase == "ended" or event.phase == "cancelled"  then

              	
              		if platformTouched.x >= platformboard.x + 0.5*(platformboard.x) then
	              		rotationalert = display.newImage ("images/rotation.png")
	                	rotationalert.x = platformTouched.x
	                	rotationalert.y = platformTouched.y 
	                	rotationalert.alpha = 0.5 
	                	group:insert(rotationalert)
	                	rotationalert:addEventListener ("touch", rotatePlatform)
                	end 
	
                	display.getCurrentStage():setFocus( nil )
                end

This if-statement checks if the platform has been released by the user outside the platformboard, if so, we will create the rotationalert. In case you missed the post about creating the moving platforms and the rotationAlert click here.

This is all, now you can scale objects based on its position on the screen.