Tutorial details

Tutorial 1 - Getting Started | App Code for Sale | Preview

Tutorial 1 - Getting Started | iOS Tutorial

How to develop App with Codea

Overview PAGE TOP

To start you need to purchase the Codea App and load it on your iPad. I'm using an original iPad, so any of the later editions should just be quicker and shinier. You can get the App from iTunes here or just search for Codea in the App store. At time of writing the current version was 1.4. Codea uses the Lua programming/scripting language so throughout these tutorials I will use the two terms interchangeably depending on the context.

Tapping on the icon should bring up a screen like this:


1.1 Your First Program - Hello World PAGE TOP

Sample projects are at the top (you can scroll these left an right) and your projects and the add a new project button is at the bottom. Tap on the Add New Project button and a dialog box will open up asking you for the project name. Tap on the Edit Text box and the screen keyboard will appear. Type Hello World and then tap the Done button on the keyboard.

Codea will generate your Main class for you and display the code edit window. The first tab is always called Main. If you add more files to the program they get listed as a separate tab at the top of the code editor.


So what is going on here? Well as the comic above says, it is traditional to start off with a Hello World program so the basic add Project template does all the work for you. If you have a short attention span then tap on the right arrow in the bottom right corner to go to the run program screen. You should see "Hello World!" printed in the box titled Output and a dark screen. Tap the back arrow in the bottom left to go back to the edit code screen (the other controls on this screen will be described later).

Let's dig into what is happening in the code. The main class contains two functions and a bunch of comments.

1.2 Comments PAGE TOP

Comments have no effect on your code, they are there to remind you what the code does. It may seem like a waste of time but try and comment as you write your code. Trying to retrospectively work out what a complex function does years later is no fun. It also makes it harder for someone else to work on or maintain your code.

A comment starts anywhere with a double hyphen (--) and runs until the end of the line. Lua also offers block comments, which start with --[[ and run until the corresponding ]]. Block comments work in Codea but the code sense auto colour function doesn't seem to pick up that it is a comment, so the block commented code doesn't turn green.

Sidebar: colours indicate the following in Codea:

Purple - function start and end Red - a string Green - a comment

1.3 Functions PAGE TOP

Your program can contain any number of functions. Functions are interesting. In Lua, a function is a value with the same rights as conventional values like numbers and strings. Functions can be stored in variables (both global and local) and in tables, they can be passed as arguments, and can be returned by other functions. You can have Functions with or without arguments and they may or may not return a value (or multiple values). Functions written in Lua return multiple results by listing them all after the return keyword. We will see some examples of this in due course.

When you start a new program, Codea will automatically add two functions: setup() - which is called once to provide your initial setup. It is called before draw(); and draw() - which is called once every frame. Codea tries to call the draw function 60 times per second (i.e. every 16.67 mS). If your program is doing something complex it may not be able to do this, and if so will call it as quickly as possible. Sidebar - Note that the complete Codea reference documentation is available here if you want to explore any area in more detail.

1.3.1 setup() PAGE TOP

Looking firstly at setup(), this function only has one line of code:

print("Hello World!")

Lua's print command automatically adds the newline for you, much like Java's println function. For those coming from Objective C you may note the missing semicolon at the end of the line. These are optional in Lua and the convention is to leave them off. Note that print() outputs to the "console" not to the main drawing screen. As we saw earlier in the program run screen, the Output box contains the console output. This means that print() is useful for some situations but not others. At the end of this tutorial we will show how to output "Hello World!" to the drawing screen.

1.3.2 draw() PAGE TOP

The draw() function contains two lines (plus some comments).

background(40, 40, 50)

Background sets the colour of the drawing screen background (not the console/output screen). The 3 numbers represent the red, green and blue components of the final colour. Each component can vary between 0 and 255. You can also optionally assign an alpha channel, greyscale value or color value using this function.

One of the funky things about Codea can be demonstrated here. Tap on the numbers in background and a colour selector wheel will pop up. you can use this to choose the exact colour that you want. Give this a try and then run your program again (tap the right arrow in the bottom right corner).


StrokeWidth sets the thickness of lines (however we don't draw any lines in this example so you could delete this line of code).

Sidebar - As you work through these tutorials you will create a number of projects that you won't want to keep. To delete a project, tap and hold on the project in the launch screen to see the popup delete option (you can also copy or duplicate a program from here).

Now you might think that you could optimise the speed of the code (not that it needs it) by moving the background() statement from the draw() function to setup(), however this will only change the background once and next frame it will change back to the default value (black).

1.4 Drawing Text - text(string, x, y) PAGE TOP

So how do you stick some text in the draw screen? Well there is a function for that! Type the following code into your draw() function and give it a go. The statements should be self explanatory.

background(40, 40, 50) font("Georgia") fill(255) - - This will set the text colour white fontSize(20) textWrapWidth(70) text("Hello World!", WIDTH/2, HEIGHT/2)

The text() function draws the nominated string, centred at the x and y co-ordinates provided.

Reference PAGE TOP


0 Comments Leave a comment

Please login in order to leave a comment.

Newest first

to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.