I found this picture that is self explanatory....

Thanks for all of you who tested our game Puzzle You and gave us feedback. The feedbacks were extremely valuable and most will already be incorporated in the final version of the game.

Just to give you guys a outlook about our games release schedule:

• Puzzle You: final version should be released around Feb 8th;
  
• FootSoccer: our football game should be released on mid February;
  
• Revenge Rag: our platform game should be released on March;

We also have some new game ideas being discussed and soon I give more info about them.

Today we have published the Puzzle You beta version on the Google Play. You can download to your android device here.

I would like to share the new promo video that was made for Puzzle You. The video is not finished yet, but it shows well the game play. I hope you like it.

Hi people.

Just let you know that we are in the final week of adjustments and next week the beta version of Puzzle You game will be released only for beta testers.

If you would like to be one of the first to play that new game, please email ([email protected]) me so I can insert your name in the beta testers list.

All beta testers will receive a gift (we have not decided what it would be yet) for their time testing our game.

See you.

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:

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:

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.

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:

Lets say that we want to reduce the width of the image by half. We can do that by writing the following code:  

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.

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:

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.

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.

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