Category Archives: Tutorial

Software Tutorials

How to Make App Store Screenshots

Yesterday, a tutorial I wrote for RayWenderlich.com was published called “How to Make Great App Store Screenshots” and it has gotten a great response. It’s probably been the most popular tutorial I’ve written for the site and that was only its first day.

Also, don’t forget, you only have 3 more days to use promo code: 6Y6TK7QQ to get an extra $25 off iOS 8 and Swift book pre-orders!

Image

Corona Geek Guest Appearance

This past Monday I gave a presentation on Corona Geek about different graphics software that can be used to create app artwork. Check out the video with show notes here: http://coronalabs.com/blog/coronageek/corona-geek-hangout-92/ or just watch the video below.

From Kwik to Print

Since 2011, I’ve written, illustrated, and developed two children’s book apps and I’m currently working on my third. I’ve also recently illustrated and developed a book app for Huggable Melodies. Thanks to Kwik, creating the apps was very easy and it allowed me to focus on drawing instead of coding.

I drew the artwork in Flash, and then using Photoshop and the Kwik plugin, I was quickly able to covert the artwork into apps for the iPad and Kindle Fire tablets. However, since my daughter is only 16 months old, I wondered if iPads would even still be around in a few years when she could really comprehend the stories I had written for her. This made me want to consider self-published print versions.

The first company I tried out was Bookemon. It allowed me to upload artwork in landscape dimensions in full color and order on an as-needed basis. The only qualms I have with Bookemon is if you only want one copy, it’s a minimum of $15 shipped, which is kind of pricey for a small book. Also, if you allow the general public to order your book from Bookemon, they can read the entire book without buying it and Bookemon takes a royalty fee. I’m considering trying CreateSpace or Lulu for my next book and I’ll post about the process when I decide.

On the technical side, converting a book app to print-ready artwork was fairly easy and just took a little knowledge of resolution. Most digital artwork is 72dpi and printed work is 300dpi or higher. The book on Bookemon is 7.75″x5.75″, so I created a new document in Photoshop at that size with a resolution of 300dpi. Then I changed the image size resolution to 72dpi and got the new dimensions. I changed the stage size to those new dimensions of my Flash file and scaled down the artwork page by page. Since Flash creates vector artwork, there was no loss in quality. I exported each page as a .png file at 300dpi and uploaded them to Bookemon.

A few days later the print books had arrived and the line quality looks great.

 

Because of the vector artwork and high-resolution exporting, the artwork is crisp and colors are vivid. It’s nice to have an interactive digital version as well as a traditional print version of the books. For my next book, Maddie Bear’s Birthday, I may try to implement an in-app purchase in the app version that allows you to order a print version as well. First, I have to finish drawing the book and then decide on a publisher.

Have any questions about going from digital to print? Leave a comment.

Spine: A First Look

I recently obtained a license for Spine, software that makes it easier to get fluid animations into mobile applications, and wanted to see how well it would integrate into Corona SDK. The first thing I did was quickly draw a character that almost resembled a zombie, if it weren’t drawn so poorly in Photoshop. I put each body part on its own layer.

Photoshop

I then ran the script to export each layer as its own .png file.

Script

I started a new Spine project and imported the artwork. I then created a skeleton and attached each piece of artwork to the different bones. By selecting the bones,  I was able to move and rotate the zombie’s limbs to animate him on a timeline.

Spine Zombie

I exported the animation as a .json file. This is what makes Spine useful. It allows you to animate easily and also keep the file size very low since the .json file controls the animation. This saves you from having to export hundreds of sprites and program them into your app. Instead, you just export the artwork of each body part and a .json file.

Export

Once I had my .json file, I used the Corona Runtime provided by Esoteric Software and altered the main.lua file to import my zombie.

Main.lua

I opened the main.lua file in the Corona SDK Simulator and there was my zombie walking on the screen. I haven’t read through any of the documentation on Esoteric Software’s website nor have I watched too many of the videos, so I may have done some of the steps incorrectly. However, just in 20 minutes of playing around with Spine, I was able to create a working example of an animation in a app, not too bad.

Screen Shot 2013-08-05 at 9.39.45 PM

How to Draw on iPad

I was out of town for my birthday when this went live, but I wrote a new tutorial for www.RayWenderlich.com about how to draw on an iPad using Sketchbook Pro. It’s good for beginner’s who don’t have much experience drawing, but more advanced artists may find some useful tips in there as well. Enjoy!

http://www.raywenderlich.com/41650/learn-to-draw-on-ipad

New Kwik 2.0 Tutorial

I was curious if it was possible to create an app using Kwik Photoshop plugin and Corona SDK that allows you to use a camera to insert a picture of someone into an app. I wanted to use Kwik since it is mostly used by children’s book creators and thought it might be fun to put a child’s face directly into a storybook app to add interactivity.

Using just a few lines of external code, I was able to accomplish this, so I showed it to Alex, the creator of Kwik software. He thought it might make a nice tutorial, which you can follow here: http://www.kwiksher.com/tutorials-kwik/image-replacement-from-camera-intermediate/

New Tutorial and App

After submitting my new iOS game to Apple yesterday, I wondered how difficult it would be to port over to Android. The biggest difficulty I noticed was that the full-page ad that I placed in it couldn’t be closed by Android users. This means that players would have to click through the ad, and then press their back button a couple times to get back to the game. This is totally unacceptable, so I switched it from a fullscreen ad to a banner ad, and that seemed to solve the issue.

Another difficulty was different screen resolutions and hardware specs. What seems to run fine on iPhones, iPads, and Galaxy Tab 7s made my HTC Thunderbolt crash. I had to alter the Android version a bit to get it to run on a Thunderbolt. This means it may crash on the other 50,000 Android devices out there that I don’t own for testing. Joys of Android development, I suppose.

Here is the link to the Android version: https://play.google.com/store/apps/details?id=com.gpanimations.coffeegrab

The app isn’t anything spectacular, I just made it as a way to learn some new coding. Speaking of learning, my new tutorial is available today on RayWenderlich.com. In this tutorial, I take you through how to create and publish your own eBook using iBooks Author. It’s a great tool to make your own books for free.

New iOS Game Submitted

Coffee Grab - Copyright 2013 Greg Pugh - GP ANimations
Coffee Grab – Copyright 2013 Greg Pugh – GP Animations

I just submitted a new game app to Apple and I am awaiting its approval or rejection. I created it as a learning experience, as I have never created a game app or have used any sort of ad program. I have filled out all of the information for iAds, Inneractive, etc. accounts in the past, but never utilized them.

I always thought banner ads made apps look kind of cheap and I didn’t like having to compensate screen real estate to accompany them. I was also weary of making game apps because it seems like once a user finds a bug or glitch, they leave terrible reviews criticizing the app, the developer, and the developer’s mother.

To step away from my comfort zone, I decided it was time to publish a free game app that utilizes an ad. I still didn’t want to use banner ads though, so I opted for a one-time fullscreen ad that the user can close before the game starts.

It was actually very easy to implement an ad using my Inneractive account. I signed into Inneractive, created a profile for the app, which generated an App ID. Then I placed this code on the Choose Level screen of my game:

ads = require “ads”
ads.init( “inneractive”, “app_ID” )
ads.show( “fullscreen”, { x=0, y=0, interval=60 } )

Then on the screen where the game starts I added: ads.hide();

It’s a pretty straightforward way of implementing an ad into an app. Hopefully you’ll all be able to play Coffee Grab in the near future.