Corona SDK: Display Object Rotation

We already have the platforms in Rolly Bear World and we can move them around. In this post we extend our code base so that the user can rotate them. In case you missed the post about making display objects in Corona SDK drag and moveable on the screen, click here.

Watch the movie of the implementation.

I’m still in Thailand, we celebrated New Year’s directly on the Beach in Koh Lipe, the Thai people really love fireworks and to celebrate new years. We took the boat for a few days to Koh Lanta, which is north of Koh Lipe and did some hiking in the nearby Jungle, which was quite a nice experience I have to say. Tomorrow we take a ferry and minivan up to Krabi, which is one of the main transportation hubs in (mid) and southern Thailand. From there we will go Sunday the 6th to Khao Sok, which is one of the oldest jungles in the world. Most famous of it’s King Cobra snakes :). I hope we will see one :).

Open your level01.lua file. For making the platforms able to rotate we have to make two changes. First we need to make some changes in the function movePlatform (in case you missed the previous tutorial how to create this function click here). Second, we need to create a function that the platform can rotate.

In addition, want some indicator for the user that the platforms can be rotated. For this I created the rotation.png file.

When the user is done with moving the platform this indicator needs to appear, so that, the user knows (s)he can rotate the platform. As this needs to happen by the end of the moving function (this is the work flow I thought was best) we create the rotation.png in the event.phase “ended” of the movePlatform function. Besides loading and positioning the PNG file we add an eventlistener to the rotationalert variable. Finally, there is one more change we need to make to the movePlatform function and that is to remove the rotationalert object when a user starts a new drag and move action. Besides removing the display object from the screen we should remove it completely by setting it to “nil”. This way it helps the performance of the game.

Btw, remember that the movePlatform function was called from the event listener we created earlier when we created the platforms.

The new updated movePlatform function:

local function movePlatform(event)
	 platformTouched = event.target
   	
        if (event.phase == "began") then
                display.getCurrentStage():setFocus( platformTouched )
 				
 				
 		display.remove( rotationalert )
 		rotationalert = nil 
 		
	
 		-- here the first position is stored in x and y 	         
                platformTouched.startMoveX = platformTouched.x
		platformTouched.startMoveY = platformTouched.y

		platformTouched.x1 = event.x
                platformTouched.y1 = event.y


        	elseif (event.phase == "moved") then

                -- here the distance is calculated between the start of the movement and its current position of the drag	 
                platformTouched.x = (event.x - event.xStart) + platformTouched.startMoveX
		platformTouched.y = (event.y - event.yStart) + platformTouched.startMoveY

						
                elseif event.phase == "ended" or event.phase == "cancelled"  then
              	
 		rotationalert = display.newImage ("images/rotation.png")
                rotationalert.x = platformTouched.x
                rotationalert.y = platformTouched.y 
                rotationalert.alpha = 0.5 
                rotationalert:addEventListener ("touch", rotatePlatform)
                group:insert(rotationalert)


                display.getCurrentStage():setFocus( nil )
                  	

                end
                 return true
        end

The second part is to create the rotatePlatform function. First we set the event.target to a variable called alertTouched. This means the function takes the event when the user actually touch the earlier created PNG file called rotationAlert. Then we want the last touched platform to rotate and not the alert. So therefore we should not use the variable platform but platformTouched, as the movePlatform function already stored the right platform for us in the variable platformTouched.
Second we have to do some maths, and calculating the differences between the two angles created by the rotation. You can use object.rotation (in our case platformTouched.rotation) to get the current rotation, to get the new position we need to substract the difference between the two angles. In the “ended” phase we need to remove again the focus of the object and remove the rotationalert.

The rotate platform functions looks like this:

local function rotatePlatform(event)
	 alerttouched = event.target

	    	
        if (event.phase == "began") then
                display.getCurrentStage():setFocus( alerttouched )
 				
 		  
              
	       elseif (event.phase == "moved") then

	       		    platformTouched.x2 = event.x
	                    platformTouched.y2 = event.y
						
			    angle1 = 180/math.pi * math.atan2(platformTouched.y1 - platformTouched.y , platformTouched.x1 - platformTouched.x)
	                    angle2= 180/math.pi * math.atan2(platformTouched.y2 - platformTouched.y , platformTouched.x2 - platformTouched.x)
	                  
	                    differencebetweenangles = angle1 - angle2
	 						
	 		     --rotate it
	                     platformTouched.rotation = platformTouched.rotation - differencebetweenangles
	                     
	                        
	                     platformTouched.x1 = platformTouched.x2
	                     platformTouched.y1 = platformTouched.y2


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

	       	display.getCurrentStage():setFocus( nil )

	       	display.remove( rotationalert )
	       	rotationalert = nil 


           end 

end 

See the GitHub as well for the changes made.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*