Adventures of an Entrepreneur
  • Creating a Mobile Apps/Games Company

Image in Corona:  width/height, contentWidth/contentHeight, x/yScale and stroke (border)

1/5/2013

0 Comments

 
Our first game is a puzzle one, so we had to deal a lot with image manipulation. In this post I would like to share some basic knowledge about dealing with image in Corona and also some details that could save you some time in the future.

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")
In the code above we displayed the image (dolpin.jpg) in the screen and created the variable img that will handle the image. Our screen will look like below:
Picture
Using the image properties (accessible by the variable name, in our case, img) we can specify the image position, increase/decrease its height or width and modify other properties. You can see the common image properties here.

Now lets change the image position just a little away from the margin.
img:setReferencePoint(display.TopLeftReferencePoint)
img.x = 50
img.y = 100
In the first line of the code above, we just specify what point of the image (e.g: Center of the image, top-left corner,...) Corona must use to position the image. In our case, we specified that we want the top-left corner of the image to be at the (x,y) = (50, 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:
Picture
Lets say that we want to reduce the width of the image by half. We can do that by writing the following code:  
img.yScale = 0.5
The code above reduces the original y-dimension (image height, that in our case is 276 pixels) of the image by a factor of 0.5. Just be careful that yScale (or the xScale) is based on the original image dimensions (height or width). I.e, if we write the code above again in the file, nothing will change in the screen. If I would like to reduce the size by half again, I would have to set the yScale factor to 0.25. 

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.
Picture
Since the image height is maintained unmodified, if we would like to get the image height that we see in the image (i.e, half of the original), we could use the properties contentHeight (img.contentHeight) instead of the height property (img.height). I will show a summary in the end of the post that will clarify that difference.

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
In the first line of the code above, we define what color (in RBG) the border will have. In the next line, we define the border width.  You need to specify the border width or the border will not show in the screen.

Lets see how our image (without the yScale = 0.5) would be with the code above.
Picture
Now you already know how to show an image in the screen, how to set its position, reduce its dimensions and also set a border to it.

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.
Picture
I ask you to pay attention to the border of the images. Did you notice that when you use xScale or yScale properties the border width is also modified?

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).
0 Comments



Leave a Reply.

    Author

    This blog it not updated anymore.  

    Archives

    February 2015
    June 2014
    May 2014
    April 2014
    March 2014
    January 2014
    December 2013
    November 2013
    October 2013
    September 2013
    August 2013
    July 2013
    May 2013
    April 2013
    March 2013
    February 2013
    January 2013
    December 2012
    November 2012
    October 2012
    September 2012
    August 2012
    July 2012

    Categories

    All
    Data
    Event
    Fun
    Games
    Key Success Factors
    Management
    Marketing
    Mobile
    Monetization
    Movies
    Startup
    Statistics
    Technical
    Tutorial
    Videos

Powered by Create your own unique website with customizable templates.