On Twitter @ZacH0lland asked for some button resources he could use in one of his apps. I thought it might be a good idea to share these buttons with all of you. The buttons are made with Adobe Fireworks. The download also contains a Corona SDK project, which serves as a short tutorial on how to use the button graphics in your iOS or Android app.

Notes On The Lua Code

When you make your own apps, please use the current version of the ui.lua module. You can find this file on the Ansca Mobile website or in some sample apps which ship with Corona SDK.

Notes On the Fireworks Project

The Adobe Fireworks file TheHardestButtonToButton.fw.png includes the four sample buttons. Each button has two states: normal and tapped.

You can export the png files from Adobe Fireworks with File > Export > Layers to Files. The Fireworks file includes the retina graphics (640×960) only. If you need to support non-retina displays, you can use the prepareImages.sh script to convert the graphics. For the script to work you need ImageMagick installed on your machine.

Use the graphics in your own projects, may these be commercial or non-commercial.

I would love to hear from you when you use the buttons in any way. So drop me a line in the comments or contact me via Twitter.

Share

When you are close to finishing your iOS project, it is a good idea to reserve the name for your app on the App Store. You do this by creating a new entry for your app in iTunesConnect.

Don’t squat the app name too early though, because Apple expects you to upload your binary at least three months after you created the application in iTunesConnect.

iTunes requires you to also provide an icon when you create a new entry in iTunesConnect. What is given below is a placeholder icon I use when squatting my app’s name in iTunesConnect.

Feel free to use this icon in your projects, be they private or commercial. Do whatever you want with it. As long as you are happy, I too will feel the same.

You can also download the Opacity Project file and adopt it to your needs. Opacity is a nifty graphics editor at a low price. It has some really nice features, you won’t be able to find in other graphics programs. For example, Opacity can generate Objective-C code which you can use in your iOS projects. Cool.

If you like these resources please subscribe to my RSS feed, follow me on Twitter, read my Google+ stream, or send me a postcard.

Share

I have been working for two weeks on my first cross-platform app. I plan to release it in August for the iPhone, iPad and Android. Here are two mockups I made.

The main menu of the app is styled after the famous Where To app.

Here is a short list of the resources I used to build the mockups:

• The first-class tutorial on King Tutz, which shows you how to build a Where To like menu with Photoshop1.
• The royalty free icon set by Glyphish.
• The background pattern can be found on Subtle Patterns.

The second mockup is the statistics view of the app.

I’ll keep you posted on the progress I make with this project.

Share

This is the second post on the Corona SDK tutorial series. You will learn how to draw objects on screen and how to move these around by processing touch events. Furthermore, you will learn how to add listeners for certain events. Make sure to read the first part, if you you haven’t done so already.

Changing the project configuration

Before we begin, we need to make some changes to our project environment. We want to play the game in the landscape mode. This can be set up in a file called build.settings. Create this file in the project folder CoronaProjects/FatFreddyProject/FatFreddy/ and add the following lines to it:

settings = {
    orientation =
    {
        default = "landscapeRight",
    }
}

When you restart the project, you should see that the simulator starts in the landscape mode.

Changing the score label and adding the player

In the last tutorial we added a score label. Let us change it a little. Replace the code in main.lua with this code:

-- Hide the status bar.
display.setStatusBar( display.HiddenStatusBar )  

-- Set the background color to white
local background = display.newRect( 0, 0, 480, 320 )
background:setFillColor( 255, 255, 255 )  

-- Add a score label
local score = 0
local scoreLabel = display.newText( score, 0, 0, native.systemFontBold, 120 )
scoreLabel.x = display.viewableContentWidth / 2
scoreLabel.y = display.viewableContentHeight / 2
scoreLabel:setTextColor( 0, 0, 0, 10 )  

Line 2 will hide the default status bar. The iPhone’s status bar usually shows the carrier, time, and battery status. We do not need this information while playing the game; we want to be lost in time.

Lines 5 and 6 change the background color by adding a new rectangle with color white (RBG 255, 255, 255).

The remaining lines will change the score label, which we added in the first part of this tutorial. The difference is that we introduce the variable score to hold our current score. We center the label by getting the viewable content width and height and dividing it by 2. On an old iPhone this will give you the coordinates 240 x 160. The center of the screen. Furthermore, we change the color of the label to black and set its opacity to 10. Notice that the call to setTextColor has four arguments!

Now run the project. The status bar should be hidden and you should see a grey 0 on a white background. Boring.

Adding Fat Freddy

Let’s add our player fat freddy. He will be a rotating square. Add the following lines at the bottom of your main.lua file:

-- Creates and returns a new player.
local function createPlayer( x, y, width, height, rotation )
    --  Player is a black square.
    local p = display.newRect( x, y, width, height )
    p:setFillColor( 0, 0, 0 )
    p.rotation = rotation

    return p
end

local player = createPlayer( display.viewableContentWidth / 2, display.viewableContentHeight / 2, 20, 20, 0 )

Run the code. You should see a black square on the screen. Corona uses the painter’s model, which means that all things you draw on the canvas will be painted on top of the already painted objects. For example, if you would move the code for adding the background to the bottom of main.lua you will not be able to see the black player square anymore. It is there, but covered by the background object. You can see this, if you change the opacity of the background and change the color of the player to red, like so:1

background.alpha = 0.5
player:setFillColor ( 255, 0, 0 )

OK. We have a player now. To make it stand out when we add the other objects on the screen we want the square to rotate. This can be done easily.

Rotating Fat Freddy

Display objects have a rotation property. To make the square rotate we just increment the rotation property. We do this in the new function playerRotation. We will register this function as a listener to a runtime event called enterFrame. This event will be triggered by Corona each time a new frame gets entered. You can read more about events in the Corona docs.

local playerRotation = function()
    player.rotation = player.rotation + 1
end

Runtime:addEventListener( "enterFrame", playerRotation )

Once again, run your code. The player square is rotating. Magic. This is our first animation. But we still can’t move the player. That’s because our code does not process touch events yet.

Getting in touch

Processing touch events is basically the same as processing enterFrame events. We create a listener function and then register this listener through the function addEventListener. Now, each time the event occurs the listener will be called and our code gets executed. Add the following code to the bottom of main.lua.

local function onTouch( event )
    if "began" == event.phase then
        player.isFocus = true

        player.x0 = event.x - player.x
        player.y0 = event.y - player.y
    elseif player.isFocus then
        if "moved" == event.phase then
            player.x = event.x - player.x0
            player.y = event.y - player.y0
        elseif "ended" == phase or "cancelled" == phase then
            player.isFocus = false
        end
    end

    -- Return true if the touch event has been handled.
    return true
end

-- Only the background receives touches.
background:addEventListener( "touch", onTouch)

When you run the code you will be able to drag the rotating square by touching and dragging on the background of the screen. Notice that the listener has been added to the background object, because we want to move the black square by touching the background, not the player. This will give a better game play, as we need to see our player while playing. We do not want the player to be covered by a finger during game play.

Conclusion

We learnt a lot this time. We know how to animate objects and how to process touch events and enterFrame events.

In the next part of the Corona SDK tutorial series I will show you how to prevent the player from moving off screen, how to add our player to a physics simulation, and how to detect collisions between the player and other objects.

If you liked this article please subscribe to my RSS feed or contact me on Twitter. You can also find me on Google+ by following my vanity URL: cutemachine.com/+

Till next time,
Joe

Share

As promised, here is the first tutorial on developing with Corona SDK. Corona by Ansca Mobile is a cross platform development kit. It is easy to target different devices, as long as these are iOS or Android based. In this tutorial you will learn how to set up the basic structure for a Corona app.

The Fat Freddy Tutorial Series

This is the first post of a whole series of articles on developing with Corona SDK. It is meant for beginners, but hopefully even advanced Corona users can pick up something useful by following these tutorials.

We will build a clone of a flash game I played some years ago. The original game has been developed by Gavin Shapiro and is called Squares2. In this game you move a small rotating square across the screen to collect black squares moving randomly on the screen. For each collected square you will gain one point. You can consider these squares as food. There are also blue squares, which you need to avoid. Consider these as contaminated food. If you eat one of the blue squares the game will be over. To add extra spice to the game we will add special modes like changing the speed of the squares. I will explain these modes later when we write the code.

What You Will Learn

The game is fairly easy to code, but it should be enough to show you some Corona goodies. By following (coding) along you will learn how to

• set up the basic structure for a Corona Project.
• use labels to show scores and other information.
• use labels to make animated buttons.
• use natively drawn objects.
• use the built-in physics simulation software box2d.
• use animations.
• use the Lua programming language.

But now, without further ado, let’s get started.

Install Corona and Set up Your Development Environment

Download Corona SDK for Mac OS X or Microsoft Windows and install it on your computer. I will show you how to install the SDK on a Mac. For Windows please refer to the Installation and Setup Guide for Windows.

To install the SDK on your Mac just open the file you just downloaded. The file name has a .dmg extension, which means it is a disk image. When you open the file by clicking on it in your download folder a pop up will appear and you need to agree to the Ansca Mobile Software License Agreement. The disk image will be mounted automatically and a pop up will appear.

Now just drag and drop the Corona SDK icon on to the Applications folder icon. That’s it. You can now start the Corona Simulator and run the sample applications which come with the SDK. The Corona Simulator is installed in /Applications/CoronaSDK/. You can find the example projects in the folder /Applications/CoronaSDK/SampleCode/.

The Corona Project Structure

To follow me along in this tutorial, create the following folder structure in your home directory.

CoronaProjects/
CoronaProjects/FatFreddyProject/
CoronaProjects/FatFreddyProject/FatFreddy/
CoronaProjects/FatFreddyProject/Assets/

Also create a file called main.lua like this:

CoronaProjects/FatFreddyProject/FatFreddy/main.lua

The main.lua file is the entry point for every app built with Corona. This is where the execution of your code starts, as we will see in a few minutes.

Your first Lua Program

Add the following lines to your main.lua file:

-- Add a score label
local scoreLabel = display.newText( 42, 50, 60, native.systemFontBold, 120 )
scoreLabel:setTextColor( 0, 255, 0 )

In Lua a comment starts with two dashes. So the first line is only a comment in the code to explain what we are doing.

The second line shows a label on the screen. The text is 42. The x position of the label is 50 and the y position is 60. The origin of the coordinate system is in the top left of the screen. So specifying 50 for the x position will move the label 50 points to the right. Giving 60 for the y position will move the label down by 60 points.

The last two parameters passed to the function display.newText specify the font we want to use and the font size.

In the third line of the code sample we set the label’s color. Color values are passed in as RGB values. So setTextColor( 0, 255, 0 )will set the color to green. Allowed values range from 0 to 255.

Run the Corona Simulator and choose Open a Project from the menu. In the file dialog navigate to the file main.lua you just edited and saved. Please notice that you can select the device you want to simulate. Currently you can choose from the following devices:

• iPhone
• iPhone4
• iPad
• Droid
• Nexus One
• myTouch
• Galaxy Tab

Now you should see the simulator popping up and running your program. The result should look something like this:

Fast Development Cycles

One of the best things about Corona is that you can make changes to your code and see the result instantly. Let me show you.

Open the Corona Simulator. In the simulator open the menu item Corona Simulator > Preferences.... Make sure your settings are the same as these:

Run your project in the simulator. You should see the 42 in green as before. Now change the line in the main.lua file from

scoreLabel:setTextColor( 0, 255, 0 )

to line

scoreLabel:setTextColor( 255, 0, 0 )

Make sure you see the simulator window while saving the main.lua file. You should see how the simulator automatically reloads the project. The 42 should now be red. No compile times. This will save us a ton of time in the future. Great.

Troubleshooting

If something goes wrong you usually just see an empty simulator window with a black background. This is not very helpful. When you start the simulator as described above you will not see the error messages which will be output to the console. Corona comes with a bash shell script /Applications/CoronaSDK/Corona Terminal. Execute this script and a terminal window will pop up and the Corona Simulator will be started from within the terminal session. This will give you the chance to see the console output. You should be able to see any runtime errors and stack traces. Even the source file name and the line number will be given. This will help you in finding and fixing errors.

Getting Help

• Corona If you are stuck it is always helpful to browse the forums. There are lots of nice developers hanging around, ready to help you. You will see also the Ansca Mobile staff answering questions once in a while. However, before you ask any questions on the forum, make sure that they haven’t been answered before.
• Lua The official site for Lua is a good starting point to dive into Lua. There is also a live demo of Lua available. Here you can test Lua code online in an interactive shell. You can find an introduction to Lua, tutorials, and code samples on the Lua Directory.

Conclusion

Setting up a Corona Project is easy. You have learnt to set up a simple Corona Project and you learnt to write your first program in Lua. You should be able to spot errors on the console now. I have left out a lot of stuff intentionally. I haven’t said a word about configuration files for example. But I will explain these if the need arises.

In the next module I will show you how to create fat freddy, the hero of our action game. You will be able to move freddy around on the screen after completing the tutorial. You will learn how to do basic animations and how to process touch events.

Thanks for following along. I’m looking forward to your feedback.

If you liked the article please subscribe my RSS feed and follow me on Twitter.

Have fun,
Joe

Q89582HPKFY8

Share

Ansca Mobile offers a cross platform SDK for iOS and Android. Using the SDK the last couple of weeks I really can say that it is fantastic, especially for beginners who want to write their first game or utility app. I would also dare to say that it might be the right tool for somebody who has never written an application before.

Advantages of using Corona

Since Apple made the SDK for iOS available for third party developers in 2008, I developed over thirty apps for iOS. Most of these have been published. Have a look at my latest app on the AppStore. Therefore, it is easy for me to evaluate the pros and cons of the Corona SDK compared to the iOS SDK.

The Corona SDK is a powerful tool, which has many advantages over the traditional way of building apps for iOS and Android. The main advantages I see are the following:

• You can publish your apps for iOS and Android devices without changing your code base.
• You can rapidly develop software with the Lua programming language. Did you know that Lua is now in the top 10 of the TIOBE Programming Community Index? The article also states that Angry Birds has been programmed in Lua.
• You can cut down turn around cycles during development dramatically. There is no need to compile your app. Make changes in the code and hit refresh on the simulator to see your changes instantly.
• You can use Windows to develop apps, though you would still need a Mac to publish your apps to the App Store. This is a constraint retained by Apple.

Disadvantages of using Corona

There are some limitations inherent to the Corona SDK. You need to carefully consider these, as it can be a show stopper for some of your projects.

• Most of the well known third party libs and frameworks cannot be used with Corona SDK.
• Some of the features offered by the underlying operating systems cannot be used.
• Features available on iOS are not available on Android. For example, at the time of this writing, there are no in-app-purchases (IAP) available on Android.

For example, if you want to develop a utility app which needs lots of native UI controls and where you want to use the AdWhirl framework to support different ad networks, you should not try to build it with Corona. Since Corona targets iOS and Android devices, the support for native controls is limited. You can certainly develop utility apps with Corona, but you might go through the pain of developing your own custom UI controls. And because Corona does not allow you to use third party libs you cannot use AdWhirl to monetize your app. You need to follow a different strategy to earn money with your app.

When you do client work, you really need to make sure that the Corona SDK is the right tool. It is very likely that the client will come to you and ask for additional features for the MightyTool app you built for him. For example, when the client asks to add local notifications you will be in big trouble. There is no support for local notifications built into the Corona SDK. So, know your tools and be sure about what tool can be used for each specific case.

Learning Corona

After developing some apps for iOS I decided it might be worth looking at Android as well. Being an Ansca Mobile forum member since August 2009, I knew that you can target Android devices with the Corona SDK. I decided to download the Corona SDK. 1 It is free for personal use. You need to buy the license only if you want to publish your app on one of the app stores. After looking at the example code which comes with the SDK and spending two days developing with it, I was hooked. It is such a fun way to develop apps. Try it yourself.

The best way to learn a new programming language or SDK is to build something with it. When I learn something new I try to make as many errors as possible in the shortest possible time. In the last few days I developed a complete clone of a flash game I played some years ago. It is a pretty simple but fun game. It is called Squares2 and has been developed by Gavin Shapiro. Play it, but promise to come back afterwards.

If you are interested in how to build a clone of Squares2 with the Corona SDK, follow my tutorial. I will publish the tutorial series starting next week. Among other things you will learn how to

• build a complete game, which can be deployed on the iPhone, iPod, iPad and on Android devices.
• control a player.
• draw objects on screen.
• use the box2d physics engine for collision detection.
• use some Lua goodies like closures and tables.

Please subscribe to the RSS feed or follow me on Twitter.

Yours jewly,
Joe

Share

Yes, yet another todo application for the iPhone. Why bother? Honestly, I didn’t. I stumbled upon it in AppSniper and, since it was free, I downloaded it. What a stroke of luck! I’m using it for nearly two weeks now and I am more than pleased by the design and usability of this little productivity helper. It has all the features I want from a decent todo application.

• Detached todos
• Priorities for todos
• Search through the complete todo and project list
• Sorting of todo lists and projects. Can be activated by tilting the iPhone
• Quickly enter new todos by copying other entries
• Projects with separate todo lists, notes and contacts
• Automatic archiving of completed todos
• Different views on projects and todo lists with filtering for completed entries
• Sync with Google Calendar
• Nice built-in help

Personally, I do not need the syncing capabilities with Google Calendar, and I haven’t tried it. But it should be pretty straight forward. Just enter your credentials in the iPhone’s settings and tap the big sync button. Syncing seems to be an important feature for most iPhone users, therefore I added it to the list above. Most of you will be aware of the possibility of syncing your Google Calendar with desktop applications like Microsoft Outlook.

What is much more important to me than syncing is the start-up time and the possibility of quickly entering new todos. Also the search capabilities are important to get a quick status of my various projects. All these work perfectly in TouchTodo.

The possibility of organising your todos in projects is also a big plus of TouchTodo. I try to organize all of my todos in projects, since the most important thing for me is to bring my projects forward. I am not a big fan of the Getting Things Done method (GTD) as proposed by David Allen. For those of you following David Allen’s approach the Things application might be better suited, though I haven’t tried it yet.

TouchTodo is also a great complement to GoalKeep.

Share

If you do not have children yet, then bookmark this page and come back when you have. You will appreciate this app in your future family live. Fathers and Mothers, read on.

This application does exactly what its name implies. It works like a real baby phone. When your little one starts crying, BabyFon will call the number you have denoted in the settings. You can also define the sensitivity. This will prevent the application from causing a false alarm, when your baby just coughs or turns around in bed while sleeping.

In our homes we do have two sets of baby phones. One set is the best rated baby phone on Amazon, yet it does not work satisfactorily. Our dwelling is surrounded by other buildings which block the baby phone’s signal when we are farther away than 50 meters from our home. The excellent Italian restaurant is 200 meters away, though. No signal there. No such problem in the case of the iPhone with BabyFon running on it. Just start the application and lay the phone in the room where your baby sleeps. If your sweet little one starts to cry you will get a call immediately. You can listen and decide whether you need to rush home or can stay and enjoy your bruschette.

You need to make sure, however, that you divert incoming phone calls on the iPhone running BabyFon. An incoming call will interrupt BabyFon and you won’t get a call afterwards.

Share

Did you know that the iPhone has a built-in scientific calculator? Just open the calculator and rotate your iPhone by 90 degrees into landscape perspective. You will see that your plain old calculator application has much more to offer. Just explore it and feel the difference.

Share

Do you know Jerry Seinfeld’s productivity secret? Actually it is quite simple. Suppose you have a life goal, but have not got there because the goal seems insurmountable. The life goals may be something like I want to run a marathon once in my lifetime, or I want to give up smoking. There is a simple method to reach your goal: write it down and then make sure you take one little step each day in your goal’s direction. If you want to have success in anything, you must ensure to take action every day. For example, to quit smoking is easy: but just avoid the next cigarette. Take baby steps.

This is exactly what GoalKeep is good for. Define your goal by writing it down and then check off each day whether you did something to reach your goal. After a few days you will see a chain of check marks in GoalKeep’s calendar view. You will be proud of yourself and this will give you the motivation not to break that chain.

I know this may sound a bit theatrical, but I think this little app really has the power to change your life. In the last weeks I succeeded in remaining a vegetarian. Moreover, I am exercising every day and formed other habits which seemed important to me. Though it is really too early to tell whether the success is sustainable, I wholeheartedly recommend this little app to you. It is well worth its price.

Here is how I use it.

• I open GoalKeep each morning and go through my life goals and plan the actions I want to take that particular day. This encourages me to go after my goals.
• Throughout the day I take my baby steps I planned in the morning.
• At the end of the day I add a little check mark to the chain.

As the app description states, it is really a great motivator to have a visual feedback and see what you have done in the past to reach your goals. 

And remember, don’t break the chain.

Share