Making Apps with the Lua Programming Language and Corona SDK – Lesson 3

posted in: Tutorial | 0

Welcome to Lesson 3!

 

So far we’ve only be working with the language features of Lua and using the console (Corona Output window) to see the output of our results.

In the previous lessons you would have noticed the Corona Simulator (iPhone view) is shown but all we had was a blank screen.

Now it’s time to use what we’ve learned so far… and we’ll start using Corona’s Display Library. This might possibly be the library you will use most frequently when developing your apps with Corona SDK!


Overview Map: Lesson 3


 

But first let’s see where we are in the big picture.

 

Learn Lua and Corona Lesson 3 - Overview 1000px

 

We’ll be working within “Main.lua” again and we’ll see how easy it is to get images, text and shapes on the screen with Corona SDK.

 




 

Create a New Project –

Similar to Lesson 2,  we will first create a new Project within Corona SDK.

 

Open up Corona SDK, and create a New Project – 

 

Learn Lua and Corona Lesson 1 - Workflow1

 

When the New Project windows comes up –

  • For Application Name: Call it something like “Lesson 3”
  • For Project Folder: Select a location on your computer where you want to store the project (or leave it as the default location)
  • For Project Template: Leave the radio button selected as “Blank”
  • Leave the Upright Screen Size to “Phone Preset”
  • Leave the Default Orientation radio button as “Upright”

 

 




 

 

Similar to Lesson 2, I don’t want you to worry about any other file except “main.lua“. This is the  file where we’ll type all our code in this lesson.

 

Open up “Main.lua” –

 

 

Similar to Lesson 2…. First, open up “main.lua” in Sublime Text 3 (or whatever text editor you use). In Sublime Text 3, go to File and choose Open Folder.. as shown below. Then navigate to your project folder and choose ‘Select Folder.

 

Also, ensure that your Syntax highlighting settings are either set to Corona SDK Lua (preferred) or Lua. To find this setting in Sublime Text 3… in the menu navigate to View. Then choose Syntax and make sure Corona SDK Lua is selected.

 

What you should see within Main.lua is the following commented code –

 

The Content Area

 

The first thing to understand in Corona is the visual content area and the way objects are positioned in your App. If you assume we place a Red dot on the screen at a location x = 100 and y = 100, we would get it showing up like that show in the Figure below.

 

Unlike, a standard 2-dimensional Cartesian co-ordinate axis that we learn about in school where the x-axis points to the right and the y-axis points directly upward, Corona SDK (and many mobile devices for that matter) has the global content co-ordinate frame located in the top left hand corner, with the positive directions of the x-axis and y-axis as shown below.

 

Then, x = 100 means… 100 pixels (rightward) on the global content x-axis and y = 100 means… 100 pixels on the global content y-axis (downward).

 

Your display object will be placed depending on it’s Anchor position, which by default is at the center of the object.

 

Corona Simulator - Showing Global Axes 300px

 

To make the object appear like it does in this Figure, simply type in the following code:

 

 

Note: It will default to the color “white”. Although this will get a circle on the screen, unless we allocate it to a variable we have no way to manipulate it later on in the code (such as move it’s position, or change it’s color). The better way to put it on the screen is –

 

The new circle on the screen is a display object assigned to variable “myCirc”. We can then access any of this display object’s properties and functions by simply using that variable name. If you come from an Object Orientated (OOP) background… you might call these the display object’s attributes and methods.

 

For example, if we wanted to change it’s position and color later in the code you would write –

 

 

If you are using Sublime Text 3, you can right-click on the function name “newCircle” above and when the selection window comes up choose “Corona SDK Docs”. This will take you directly to the API reference information on the Corona Labs website.

 

Recall, when we started this Project we left it with the default settings. By doing this we let the content area be 320 pixels wide by 480 pixels tall (physical screen of the original iPhone). Note: The content area is defined in “config.lua” and we can change it to whatever we want (we’ll cover that in a later lesson).

 

Learn Lua and Corona Lesson 1 - Workflow2

 

 

Define some Global Constants

 

Although I preached in the last lesson that you should nearly always use Local variables rather than Globals, we’ll first setup a few globals that will be handy screen co-ordinates for this and future lessons.

Recall when we define these globals, Lua will add the variable from that datatype to it’s “_G” table that we covered in Lesson 2 on Locals and Globals.

 

So within “Main.lua” type the following –

These constants will allow us easy access to the most frequently used screen co-ordinates all through our program (“main.lua”… or any other “scene.lua” file we create later) without having to hard code values or type the longer “display.[whatever]” command every time.

 

Next, below let’s drop in a background using a simple Rectangle to cover the screen area. We’ll use the “display.newRect” functions for this and then use it’s built in “setFillColor” method to change it’s color.

The inputs to the “newRect” method are it’s position, y position, width and height.

 

When we use the “setFillColor” method we need to provide three input values representing Red, Green and Blue (RGB) on a scale of 0 to 1. To make a nice shade of purple we use the input valves (0.5, 0.5, 1)

 

Next, let’s drop back in the Circle we created earlier but we’ll put in at the center of the screen –

Next, we’ll put a fictitious app name on the screen using a “display.newText” object –

The inputs to the “newText” method are the string of text, x position, y position, font type and font size.

 

 

Next, we need to find an image of an angry face. I happened to find one over at the Open Clip Art website. Note: When making your own apps you should always check any usage conditions, copyright and/or license conditions of an artwork not created by yourself.

 

Note: I downloaded the “small image” of the Angry Face image (that is 300 x 300 pixels). I used Gimp to create a scaled down version to 150 x 150 pixels (since our app content area is only 320 x 480). I name this new image “angryFace.png”. Additionally I renamed the original image “angryFace@2x.png” so we have it available for devices with higher resolution then our assumed content area (I will cover more on this in a separate tutorial).

 

“AngryFace@2x.png”

 

“AngryFace.png”

 

I created a folder titled “images” in the base level of my project folder and stored the PNG images there.

 

We’ll use the “newImageRect” method to put this image on-screen by typing the following code –

 

The inputs to the “newImageRect” method are the path for the image file, image width, image height. Shortly thereafter I position it using the face variable by setting the x and y properties to the center of the screen.

 

 

Next, let’s make the font look a little nicer. Head over to Font Squirrel and find a font that suits your taste. I chose the “Grunge” theme, and download the AnuDaw font zip file. Unzip it and put the “ANUDRG__.ttf” file in the base level of your Corona project folder.

 

Now within the font style parameter in the “newText” method, simply change that parameter from “default” to “ANUDRG__” as shown below –

 

 

Next do the following couple of things yourself….
1) Figure out how to hide the iPhone status bar at the top of the simulator
i.e. the little bar showing the Carrier, time and charge status
Check out this URL – https://docs.coronalabs.com/api/library/display/setStatusBar.html

2) Figure out what Lua type the “display” objects are (string, boolean, number, function, table??) what are they…
Use the print() and type() functions like we did in Lesson 1

 

 

 

 

 

 

See you in Lesson 4…

 

Leave a Reply