First, create a empty text file and save it as main.lua.
Now let show a image, my dolphin.jpg file, in the screen. We can do that by writing the following code inside the main.lua:
local img = display.newImage( "dolphin.jpg")
Now lets change the image position just a little away from the margin.
img:setReferencePoint(display.TopLeftReferencePoint)
img.x = 50
img.y = 100
Just remember that top-left corner of the screen is the (0,0) coordinate and as you move to the right the x-axis increases. As you move down you increase the y-axis.
Our updated screen is like below:
img.yScale = 0.5
The xScale and yScale reduce the respective image dimension by the factor specified, leaving unmodified the original image dimension (height, width).
So, now our screen is as below.
We could have changed the image height by setting the property height of the image (img.height). In that case, just make sure that you reset yScale to 1 (or the final image would still be affected by the scale factor).
Now lets learn how to create a border (stroke) in an image. To do that, we just have to write the following code:
img:setStrokeColor(255,255,255)
img.strokeWidth= 5
Lets see how our image (without the yScale = 0.5) would be with the code above.
To summarize all that we saw above, I created the screen below in which I show the same image with different xScale and yScale. I printed in the screen the main properties of the image so you can see how the xScale / yScale affect them.
So, be careful if you want to include a border to an image that has a xScale or yScale different from 1. If the image is reduced and you want to include a border width = 1, you probably have to set it with a width value more than 1 (since the border width will be reduced).