Positioning your display objects

One of the most important features required by developers is the ability to position the display objects, after all the most simple way of providing non-static objects is moving the object by altering it’s x and y position.
While the way to do so is simple, simply re-assign the values to the object as

 -- Corona SDK method
 object.x = xPos
 object.y = yPos

or 

 -- Gideros SDK Method
 object:setX(xPos)
 object:setY(yPos)
 -- or in one statement
 -- object:setPosition(xPos, yPos)

The object is displayed at the x and y position as set.
image_01

Note: When using CoronaSDK, this can become funny as even though you work with the referencePoint as TopLeft, CoronaSDK keeps changing it to the center and that could become quite irritating if you forget to set the reference point back to the TopLeft.

Note: With Gideros, Bitmaps have the ability to have a referencePoint set, the best part is that this is a value between 0.0 and 1.0, where 0.0 is the left or the top and 1.0 is the right or bottom and 0.5 being the center. While with CoronSDK you can only set the 9 positions, with Gideros you can set any position as the anchorPoint. However, non Bitmaps cannot have an anchorPoint, which means that most of the other objects cannot be set according to anchorPoints specified.

A Generic Solution

Let’s first look at this image and see how the anchorPoints or referencePoints are set when selecting one of the 9 settings.

image_02

We can see that we can position the object based on the position and alignment that we want with the simple formula that is

 offX = width * (-1 * xAnchor)
 offY = height * (-1 * yAnchor)

Where the width or the height is the object width or height and the anchorX and anchorY are the positions to set the anchorPoint or referencePoint which is between 0.0 and 1.0, (think of this number in percentages, makes it easier to visualise, where 0% is the left and 100% the right and 0% as the top and 100% as the bottom).

so we can write a simple function to position the object as required

 -- Gideros Version
 function setPositionWithAnchor(object, x, y, xAnc, yAnc)
  local _wd = object:getWidth()
  local _ht = object:getHeight()
  local _offX = _wd * (-1 * xAnc or 0)
  local _offY = _ht * (-1 * xAnc or 0)
  object:setPosition(x + _offX, y + _offY)
 end

This can be further modified to act seamlessly with every new object if you make a class that overrides the functions setPosition and save the anchorPoints as members on the object.

Note: The only probkem is when you are rotating the objects, the math for calculating the andhorPoints is not so simple

The CoronaSDK version of the same code to allow for setting the referencePoint to any point on the image using the 0.0 to 1.0 we can define it as

 -- CoronaSDK Version
 function setPositionWithAnchor(object, x, y, xAnc, yAnc)
  local _wd = object.contentWidth
  local _ht = object.contentHeight
  local _offX = _wd * (-1 * xAnc or 0)
  local _offY = _ht * (-1 * xAnc or 0)

  object:setReferencePoint(display.TopLeftReferencePoint)
  --The line above is very important to position the object as CoronaSDK reverts to center referencePoints
  object.x = x + _offX
  object.y = y + _offY
 end

Hope that allows for some interesting positioning

Comments are closed.