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

This post will show you how you can quickly switch between different Corona projects. Furthermore, you will learn how you can switch between simulated devices quickly.

The Corona SDK Simulator

The Corona SDK comes with a simulator. During development you will use it a lot, especially when you develop for different target platforms. Corona can simulate these devices:

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

Per default the simulator is installed in /Applications/CoronaSDK/Corona Simulator.app. You can use the Corona Simulator App to try the examples which come with Corona. However, when you develop your app, you should start the simulator as described below.

Simulator Script

Corona installs also a shell script for your convenience: /Applications/CoronaSDK/simulator. This is needed to start the simulator from within Terminal. This has the great advantage that you will see the error messages while you test your app.

When you start the simulator through the simulator command you can pass in a skin and a project. With the skin option you tell Corona which device it should simulate. With the project option you tell Corona which project you want to open in the simulator.

Simulator Shortcuts

If you want to switch between simulated devices quickly it is convenient to have some shortcuts in place. Add these lines to your .bashrc file:

# Corona SDK Settings
export PATH=/Applications/CoronaSDK/:$PATH
export CORONA_PROJECTS=~/projects/corona
alias coronasim='simulator -project $(dirname $(find $CORONA_PROJECTS -type f -name \*.lua -print0 | xargs -0 ls -t | head -n 1))'
alias iphone='coronasim -skin iPhone'
alias ipad='coronasim -skin iPad'
alias iphone4='coronasim -skin iPhone4'

The .bashrc file can be found in your home directory. Please be aware that normally you cannot see files in Finder which start with a dot. These will be hidden by Finder. Therefore, we open the file with the following command in Terminal:

open /Applications/TextEdit.app ~/.bashrc

This will start the TextEdit app and open the .bashrc file automatically. Make the changes and then save.

Please, do not forget to adopt the CORONA_PROJECTS path to your needs. I store all of my Corona projects in one folder called ~/projects/corona. Only the projects beneath the CORONA_PROJECTS folder will be found by the new command aliases.

When you added the above lines issue this command in Terminal to make the changes to your .bashrc file effective: . ~/.bashrc

Now you can try to run the simulator with the simple command iphone. This will automatically open the last project you were working on by looking at the modification date of the .luafiles found in the folder CORONA_PROJECTS.

If you need to switch to a different simulated device you can go to Terminal and enter control-c to stop the running simulator. Then start a new simulator session with, for example, ipad.

Code, follow me on Twitter, subscribe to my RSS feed, and then relax.

Share

My weekly recap of work and procrastination.

Links

• iPhone vs Android App Sales
• 21 Ways to Monetize Your Game
• App Development – The Marketing
• Lua Style Guide
• Why Markdown
• Markdown Service Tools
• Vim Snippets for Lua and Corona SDK

Snippets

• Vim List all buffers. :ls
• Vim Search and replace in all buffers. :bufdo %s/pattern/replace/gc | update
• VIM Search and replace in all visible windows :windo %s/pattern/replace/gc
• Mac Restart the Finder: press option (alt) key and right-click on the Finder icon in the dock. You will see a new menu item Relaunch.

Recap

I wrote only one article this week:[1] Vim Snippets for Lua and Corona SDK. That’s because I have been busy with the development of the new Corona SDK powered iPhone / Android app. I hope to write a short article with some more screen shots next week. So stay tuned.

I wish you a great weekend.

Share

In my last post I showed you [how to set up Vim for Corona SDK development]. The environment I described in it has a lot of room for improvement. One of these is code snippets.

This post will show you how to add Corona SDK and Lua code snippets to the Vim editor.

How to Set up Snippets Support for Corona

To support code snippets in Vim you need the snipMate plugin.

1. [Download the snipMate plugin] bundle snipMate.zip.
2. Open Terminal and change the directory to where you saved the snipMate.zip file.
3. Unzip the file with the command unzip -d snipMate.zip ~/.vim
4. To enable the help file for the plugin run the following command from within Vim:
   
   :helptags ~/.vim/doc

The Snippets File

Now download the lua.snippets file for Corona SDK and place it in the folder ~/.vim/snippets/.

The snippets file is heavily based on the TextMate editor bundle for Corona. Many thanks to Darren Osadchuk from Ludicrous Software. If you are using TextMate for the development of Corona SDK apps, check out his site and the TextMate bundle.

How to Use the Snippets

You can use the snippets by entering the snippets trigger and pressing the tab key while in insert mode. For example enter the word forp (the snippets trigger) while in insert mode and then press the tab key. This will result in the following code:

for key, value in pairs( table_name ) do
    print( key, value )
end

You can now use the tab key to cycle through key, value, and table_name. Use shift-tab to jump backwards.

To see a list of the supported snippet triggers open the snippets file ~/.vim/lua.snippets.

You can also use auto-completion for the snippets. Try this: while in insert mode enter the word native and then press the key combination <CTRL>-r followed by the tab key. This should open a box where you can select a code snippet using the arrow keys.

The snippets are working if you edit a file with the file extension .lua. If you want to use the snippets in other files you need to set the file type in Vim with the command:

:set filetype=lua

Improvements

This is the first version of the snippets file. If you want to help to improve the file, please let me know and I will upload the file to GitHub.

Conclusion

With snippets support we have added one more piece to make Vim the missing Corona SDK IDE.

If you find this post useful, please subscribe to the RSS feed, or follow me on Twitter.

Share

My weekly recap of work and procrastination.[1]

Links

• Stanford Engineering Everywhere
• 29 Ways to Stay Creative
• Your Problem with Vim is that you don’t Grok vi
• iOS 5: Phasing out Developer Access to the UDID
• New Visual Proportions for the iOS User Interface
• Using the Corona Debugger

Snippets

• Terminal Print the calendar week (week number) with date +"%V"
• Vim Do calculations in insert mode. CTRL-R=7*6
• Terminal Copy command output to OS X clipboard (pasteboard):
  
  Example: echo "hello world" | pbcopy

Recap

• Finished the tutorial series on building an app with Corona SDK. Ufff.
• Uploaded the fat freddy universal app[2] to iTunesConnect for review.
• Continued working on my first serious Corona SDK app.

Q89582HPKFY8

Share

Using Vim for Corona SDK development is really a good option. Here are the tips you need to use Vim together with Corona.

Syntax Coloring

When you use a recent version of Vim (> 7.x) it should support syntax highlighting for Lua 5.1out of the box. You can download a Vim syntax file for Lua, if you use an earlier version.

Lua Reference Manual

You can access the reference manual for Lua 5.0 and 5.1 from within Vim. Download and install the Lua reference manual for Vim first.

Installation is easy:

1. Download and unzip the package.
2. Copy lua51refvim.txt to ~/.vim/doc/
3. Copy luarefvim.vim to ~/.vim/plugin/
4. Copy help.vim to ~/.vim/after/syntax/

Now when you have a Lua file open in Vim, you can access the Lua reference by moving the cursor on a keyword and entering the keyboard sequence \lr. Or \lc to get the table of contents.

Please note that you need to enter the key sequence quite quickly in one flow. If you stop after the first key for a second, Vim will not recognize it as a key sequence!

Starting the Simulator From within Vim

If you want to start the Corona SDK simulator from within Vim you need to add the following lines to your .vimrc file.

" Start the Corna Simulator with F3 for iPhone skin. Shift-F3 for iPad skin.
map <F3> :!/Applications/CoronaSDK/simulator -project %:p -skin iPhone<CR>
map <S-F3> :!/Applications/CoronaSDK/simulator -project %:p -skin iPad<CR>

Now you can start the iPhone simulator with the F3 key and the iPad simulator with Shift-F3.

Session Support

If you need to work on different Corona projects you will be glad to have session support.

Create a folder where you want to store your session files. My folder is named .vimSessions and is in my home directory.

Add the following lines to your .vimrc file:

  " Session support. Save Session As and Session Open.
  nmap SSA :wa<CR>:mksession! ~/.vimSessions/
  nmap SO :wa<CR>:so ~/.vimSessions/

Now, when you want to save your session, just enter SSA and enter a session name. To return to a previously saved session just enter SO and enter the session name. You can use file name completion here by using the tab key.

Vim Versions

I use both the vim command line version, which you can access from within a terminal session, and the Mac application version MacVim.

I’m curious about your Vim tips and tricks for working with Corona. Please let me know them.

Share

Welcome back to the last part of the Corona SDK tutorial series. You might want to consider reading part one, part two, and part three first.

In this part of the programming tutorial we will add the game logic, a menu, and the sound.

The Code and Assets

Before we go through the code, download the complete Fat Freddy Corona SDK Tutorial Project. This bundle includes the following assets:

• Sound files pickup.wav, powerup.wav, failed.wav
• Source files build.settings, config.lua and main.lua
• Adobe Fireworks file FatFreddyLogoFireworks.png[1]
• Icon files in various sizes. 512×512, 57×57, and 114×114.

Unpack the zip file somewhere on your hard disk. To start the game, just open the main.lua file in your Corona SDK Simulator.

A word of caution. In a real project you would do a lot of things differently from what I have done in this tutorial. For example, for simplicity we only have one code file. In a bigger project this will bring trouble. It is much better to have different source files for various parts of the project. Have a look at the Director Class for the Corona SDK by Ricardo Rauber, to get a good start on structuring your next Corona SDK project.

You can do whatever you like with the project and the included files. Tweak it and learn. Let me know your achievements.

In the code you will find strange comments surrounding the function bodies: ---{{{ and ---}}}. These comments are there to support code folding for the Vim editor. If you use a different editor you can ignore these tags.

The Game Logic

The objective of the game is to collect the black squares and avoid touching the blue squares. The rotating square is our player – fat freddy. Freddy needs to collect the black squares and at the same time he needs to avoid touching the blue squares. This gets increasingly difficult as freddy will get bigger while eating the black squares. For each square freddy eats, he will get one point.

To add more fun to the game we will add rewards and penalties. Rewards will be triggered when fat freddy eats one of the black circles. These are the possible rewards:

• All You Can Eat As long as the timer runs you can also eat blue squares.
• Traffic Jam This will slow down the game. It is much easier to avoid the blue squares.
• Weight Loss This will minify the player. Which is good as it will be easier to avoid the blue squares.

The penalties will be triggered when fat freddy eats a blue circle. The following penalties are supported:

• Rush Hour This will speed up the game for a limited time. It is hard to avoid the blue squares.
• Food Contaminated You are not allowed to eat any square. Try to avoid black and blue squares as long as the timer runs.
• Weight Gain This will increase the size of fat freddy and hence makes it harder to avoid the blue squares.

Watch the video and you will get a good impression of a typical game session.

Code Annotations

After reading the first three parts of the Corona SDK tutorial you should be able to easily understand the code. There is only one minor code construct I have not explained in one of the previous tutorials: closures

Closures are very useful. You can learn about closures in the book Programming in Lua. Closures are blocks of code which can refer to its declaration context. Normally the code blocks are functions, which do not have a name[2]. You can spot these in the project where they are assigned to a variable called closure. In fat freddy these functions are used to reset variables after a transition has been completed.

For those of you who are familiar with closures you will notice that I discard the best part of closures by referencing the variables which would be in scope anyways and not the declaration context. This is another thing you would want to do differently in a real project.

Sound

Playing sound with Corona SDK is simple. Just preload a sound like this:

powerUpSound = audio.loadSound("powerup.wav")

Then play the sound with the following code:

audio.play ( powerUpSound  )

The game sounds have been created with the free audio effects tool cfxr. This is a Mac port of the Windows tool sfxr. It is really fun to use. Give it a try.

Conclusion

This completes the game tutorial series. It has become much longer than I planned. So forgive me for not being concise.

Please spread the word about the tutorial and leave your feedback in the comments.

I would be glad to have you as a reader of my RSS feed or as a follower on Twitter. You can also find me on Google+.

Happy coding.

Share

Watermarking your images is one significant component of building your brand on the Internet. In the post How to Brand Your WordPress Images with Pixelmator’s Watermark Action I described how you can watermark your images with the excellent Pixelmator application. But the workflow is limited and has some drawbacks:

• Small images get upscaled, which results in blurry images.
• All images get watermarked, even images which are smaller than the watermark.
• Positioning of the watermark is limited, as you have only 9 positions to choose from.
• You need to buy a license for Pixelmator.

Watermarking with ImageMagick and Automator

With the proposed workflow you will have to do nothing more than storing your images in a specific folder on your computer. Resizing and watermarking the image will be done automatically.

Check if ImageMagick has been installed on your computer. On a Mac you can do this via the Terminal application. In the Terminal window just enter convert --version. If it is installed you will see the version number printed.

If you get something like -bash: convert: command not found, then read my post on How to Install ImageMagick with MacPorts if you are using a Mac.

If you are on Windows go to the ImageMagick website and download the application. You can still use the bash script I provide below and adapt it to your needs. Should you prefer a stand alone application, have a look at TSR Watermark Image Software. I have heard good things about it, but never tried it for myself, because, well, I use a Mac.

Automator is an application which is included in every OS X installation. With this program you can easily automate workflows you do over and over again. I will show you how you can set up a workflow which will be triggered automatically on a file when saved into a specific folder. This is called an Automator folder action.

The new folder action we will be adding does several things for us:

1. It creates a new folder named originalImages within your images folder where it saves the original file.
2. It creates a new folder named watermarkedImages within your images folder where the processed images will be saved.
3. It shrinks the image if it has a width greater than 500 pixels. You can change this easily.
4. It watermarks the image, if it has a width greater than 299 pixels.

Adding the New Automator Workflow

Here are the step by step instructions on adding the new Automator workflow. This workflow has only one Automator action: Run Shell Script

1. Create a folder where you want to save your images and screenshots.
2. Open Automator on your Mac, then click on File > New in the menu and select the workflow template Folder Action.
3. Drag the Automator action Run Shell Script from the actions library to the right pane in Automator and drop it.
4. Select /bin/bash from the drop down box labeled Shell.
5. Select as arguments from the Pass input drop down box.
6. At the top of the window select the folder you created in step 1. In the screenshot below it is named ConstrainSizeAndWatermark.
7. Download the bash script I prepared for you and paste its contents into the Run Shell Script action, overwriting the default.
8. Change the WATERMARK_STRING to your needs in the script you just pasted.
9. Compare your settings to the following screenshot and than save the folder action.

Now, try it. Make a screenshot with the Grab application, which should be installed in /Applications/Utilities/ on your Mac. Save a random screenshot in the folder you created in step 1 above. After waiting for a second or two you should see your watermarked image in the folder watermarkedImages.

Conclusion

This procedure can save you a lot of time. Let me know of any improvements you make to this Automator workflow in the comments. Thanks.

Share

There are lots of great open source software packages available for free. Installing these is sometimes a really hard task. MacPorts greatly simplifies the compiling and installing of open-source software on your Mac. You do not have to download any source code and compile it yourself. Just let MacPorts install the software for you.

Lots of Free Goodies for Your Mac

There are really a lot of great software packages available for your Mac. The best aspect is that these programs don’t cost you a dime. Here is a small subset of freely available software packages you can install through MacPorts:

• Gimp is an image manipulation program like Photoshop.
• ImageMagick is also a great image manipulation program. You can use it to automate your image processing needs like resizing or watermarking.
• Programming languages like Ruby, Python, Lua, PHP, and many more are also available.
• Databases like SQLite, MySQL5, and PostgreSQL can be installed easily.
• Version control systems like SVN or Git are up for grabs.

Installing MacPorts

Before we can install any of the above programs we need to install MacPorts itself.

You can check whether you have MacPorts installed on your Mac by launching the Terminal application and then entering the command port at the prompt. This will enter the interactive mode of MacPorts, where you can request help, or search for packages to install. You can leave the interactive mode by entering quit at the MacPorts prompt in the Terminal.

If MacPorts is not installed you will get an error message like the following:

-bash: port: command not found

The easiest method to install MacPorts is to download the Mac OS X Package from the MacPorts.org Website. Follow the instruction found on Install MacPorts.

There is also a MacPorts GUI application available, but I have never used it. I would argue that you do not need it. Using MacPorts on the command line is easy. And if you run into any issues, I’m here to help you.

Installing ImageMagick With MacPorts

Let us now go through the process of installing a program with the port command. I will show you how to install ImageMagick, because I will use it in an upcoming tutorial.

ImageMagick is a software suite to convert, edit, and compose images. ImageMagick is not your typical image editor, as the functionality of ImageMagick is usually utilized from the command line. This makes it the ideal application to automate all of your image manipulation needs.

To install ImageMagick we search for the correct port in the Terminal with the following command:

port search imagemagick

You should get a list of ports matching your search criteria, as you can see in the screenshot below:

To install the ImageMagick port enter the following command:

sudo port install ImageMagick

This will install ImageMagick on your system. You can see if the installation was successful by issuing the command /opt/local/bin/convert --version. convert is part of the ImageMagick suite. By default MacPorts installs all software in the folder /opt/local/bin/. Make sure this is in your PATH environment variable.

Have you seen the watermark in the screenshot above? I will show you how you can watermark your images with ImageMagick in one of the next tutorials. So stay tuned.

Updating MacPorts

If MacPorts is installed, but outdated, you might get a warning like this one:

Warning: port definitions are more than two weeks old, consider using selfupdate

You can update MacPorts with the following command:

sudo port -v selfupdate

You need to run the update with root privileges. Therefore, we use the sudo command. You will be prompted for your root password. Depending on the already installed ports the update can take quite a while.

Conclusion

It is very easy to install open-source software with MacPorts. If you have read this far, you might want to consider following me on Twitter or Google+.

Share

Branding is an important aspect of a successful blog. Watermarking your images and videos can help in creating that brand. I use watermarking not so much to protect my images from content theft as to facilitate branding.

How you Can Automatically Resize and Watermark your Images with Pixelmator

Resizing and watermarking your images manually is a chore. In this post you will learn how you can automate this with these two applications:

• Automator is an application which gets shipped with OS X. You can use it to automate tasks you need to do over and over again like resizing images for your blog.

• Pixelmator is an excellent image editor for the Mac. Pixelmator adds some actions to Automator; for example, the Automator actions Watermark Images and Fit Images.

The goal is to have one folder we can drop our images into and then trigger the watermarking and resizing automatically. The watermarked images should be moved to a separate folder. So we will preserve the original images or screenshots and have the modified ones in another folder.

Creating the Automator Folder Action

1. Create a folder where you want to store your original images and screenshots. I named this folder CuteMachineImages.
2. Create a folder where you want to store the images created by automator. I named this folder WordPressReady.
3. Open Automator. From the file menu select new and choose the workflow template Folder Action.
4. I use png[1] files on CuteMachine. Therefore, I add the action Change Type of Images to convert the tiff or any other image type to the png image type. You can add actions to your workflow by dragging an action from the library pane on the left and dropping it into the workflow pane on the right.
5. Add the Fit Images action. With this action you can constrain your images to a certain size.
6. Add the Watermark Images Automator action. For this action you need to drag and drop your watermark image to the placeholder as seen in the screenshot. Make sure to choose an image which will be seen on all backgrounds, for example, a black string with a white background.
7. Add the Move Finder Items Automator action to move the newly created file to the folder you created in step 2.

In the following screenshot you can see the Automator actions for the above workflow. You can also see the CuteMachine.com watermark at the center bottom:

Editing an Automator Folder Action

If you need to edit a folder action here is how to do it:

1. Go to the folder with the attached folder action in Finder.
2. Right click the folder and select Services > Folder Actions Setup... from the context menu. This will open the Folder Actions Setup application.
3. We do not want to attach a new folder action, but want to edit a folder action we previously attached to the folder. Therefore, press the cancel button.
4. Select the folder action in the right pane of the Folder Action Setup application and click the Edit Script button. This will open the Automator with the workflow.
5. Make your changes and save.

Add this Automator workflow to your images folder and all of your images will be watermarked with your brand image. If you want, you could even add an Automator action to upload the images to your WordPress installation automatically. This will save you even more time for maintaining your blog. If you are interested in how to do this, let me know and I will walk you through.

I would be happy to have you as a subscriber to my RSS feed, or as a follower on Twitter. You can also find me on Google+.

Share