Tag Archives: mobile

Sketch 3

I was recently commissioned by Stone River E-Learning to create a video tutorial series on Sketch 3 software. If you need a lightweight software package to quickly mock-up websites or mobile apps, Sketch 3 is very useful. The learning curve is very small and there’s even a website devoted to templates and artwork specifically for Sketch 3 that you can use.

I didn’t want the tutorials to be a typical “this is how you use the oval drawing tool” course, so the very first lesson is creating an actual Facebook app clone. I figured it’d be more exciting to create working examples and the students would learn how to use all of the tools by actually making something.

If you don’t already own a copy of Sketch 3, get the 30 day free trial here and check out the course here.

Advertisements

Tutorial: Affinity Designer

I recently recorded a complete video tutorial series on Affinity Designer for Stone River e-Learning. You can check out the entire lesson here. The course teaches everything from illustration, logo design, user interface mock-ups, and exporting for web and mobile devices. However, if you’re just wondering how Affinity Designer can help you mock up mobile user interfaces, here is a tutorial.

You can download the entire step-by-step tutorial and the resource files. You are free to use the artwork provided for personal or commercial use. However you cannot sell or distribute the tutorial.

Download the tutorial here.

57

Create a Feeding Fish Frenzy Game in Construct 2

UdemyPromoImage

I’m happy to announce the launch of my new video tutorial series: Create a Feeding Fish Frenzy Game with Construct 2!

The lesson features:

  • Over 3 hours of video content
  • All artwork, sound effects, music, and Construct 2 files used in the tutorial
  • Detecting if the player is on a computer or touchscreen device
  • Changing levels once the player reaches a certain score
  • Randomly generating different size fish on the screen to eat or in which to be eaten
  • Implementing animation

Check it out on Udemy today!

udemy

HTML5 Games with Construct 2

I recently discovered software called “Construct 2” that allows you to easily create mobile and HTML5 games. The only “problem” I have with the software is that it’s Windows-only and I do 99% of my work on a MacBook. To get around this, I was just drawing all of the artwork on the Mac, uploading it to my webspace and then switching over to my PC to run Construct 2. Then I found VMware Fusion, that lets you run numerous Windows operating systems on your Mac.

Now I can draw in Adobe Flash on a Mac environment and then switch screens and build a Construct 2 game in the Windows 8 environment, it’s pretty handy.

You can check out 2 games I made in Construct 2 at: www.MaddieBearBooks.com

Review: Kut by Kwiksher

A couple days ago, Kwiksher announced their new software called “Kut“. You may know of Kwiksher because of their innovative Photoshop plugin “Kwik”, which allows you to create Corona SDK apps without code. However, Kut isn’t a tool to create apps, it’s a Photoshop plugin to help you create artwork for numerous devices quickly. You are free to use Java, JavaScript, Lua, Objective-C, etc. to create the apps, Kut just helps with the graphics side, not the coding.

You might be asking why this would be helpful. Say you or your client want to create an app that will run on all iOS and Android devices. Well, you could create the artwork for retina iPads, shrink it down in Photoshop for non-retina, shrink it again for phones, and then repeat for Android, Kindle Fire, Nook, etc. or you could design everything in Photoshop one time and then let Kut do the rest for you. Let me show you what I mean.

First, I downloaded the free trial of Kut and installed it via the Adobe Extensions Manager. Then in Photoshop I opened the Kut panel.

Screen Shot 2013-11-20 at 8.20.23 AM

Screen Shot 2013-11-20 at 8.20.55 AM

I opened Kut’s settings and selected the devices I would like to support.

Screen Shot 2013-11-20 at 8.21.32 AM Screen Shot 2013-11-20 at 8.21.49 AM

I started a new Document. In this case, I chose iPad Retina as my starting device since it has one of the largest resolutions of 2048×1536.

Screen Shot 2013-11-20 at 8.22.32 AM

Using different layers, I created a screen for a game that is sure to win numerous awards for fantastic artwork. I saved my .PSD file to a folder on my Desktop.

Screen Shot 2013-11-20 at 8.35.18 AM

Screen Shot 2013-11-20 at 8.35.24 AM

I clicked the Publish button and got a popup window since it was my first time using Kut (in this instance, I wasn’t making an app icon, but Kut will create icons for your app if you want it to).

Screen Shot 2013-11-20 at 8.38.01 AMSo I did as the pop up asked and pasted the code into Terminal.

Screen Shot 2013-11-20 at 8.38.19 AMAnd just like that, I had artwork compressed and sized for every device.

Screen Shot 2013-11-20 at 8.39.22 AMObviously had I purchased the full version, the watermark of “KUT KUT KUT KUT” would not be on each image. However, in mere moments, I was able to create artwork for a game for 8 different devices. This could normally take hours and Kut did it all in a click of a button. If you’re thinking about picking up Kut, buy it before December 31st and it’s only $19.99.

EDIT:

I decided to pick up the full license to remove the watermark. Kut is definitely very useful software for cross-platform development and for $19.99, you can’t go wrong. This time when I published out my artwork, I was given a developer’s report that is part of the full-version of Kut.

Screen Shot 2013-11-20 at 11.14.17 AM

This is extremely useful for rebuilding the interface in your coding language of choice. Now not only do I know the dimensions of my artwork, I also know the exact coordinates to place them on the screen. If you’re reading this, you should stop now and download Kut, it’s a great tool that I’m going to be using a lot.

Mobile Apps & Social Media

I recently decided that I would start working on my next mobile app, a children’s eBook series. I wanted to base the story off of my daughter and two of my friends’ daughters using anthropomorphic animals. However, if you’ve been following the trend of mobile apps these days, you know that you need to spend just as much time marketing your apps as you have developing them. Before I have even finished writing the storyline to my new app series, I spent some time pre-marketing it.

Maddie Bear's Birthday

I did a web search to make sure there weren’t similar products with similar names already coming up on Google. Then I purchased a domain name and made a temporary website placeholder (www.MaddieBearBooks.com) as well as started a Facebook page (www.facebook.com/MaddieBearBooks). I figured the last account I would need would be a Twitter account (www.twitter.com/MaddieBearBooks) and then I’d have all the major bases covered. However, after hearing Noah Malewicz say he also did Instagram to promote his app “City Birds” during the Corona Geek Hangout, I figured I should hit that market as well.

The thing was, I didn’t want to create an Instagram account just to have one. After perusing other Instagram users’ images, it seemed like there were way too many “selfies”, food pictures, and the like, so I decided to try something a little bit more creative for Maddie Bear’s page.

http://instagram.com/maddiebearbooks
Maddie Bear jumps off the Adobe Flash stage onto the timeline.
http://instagram.com/maddiebearbooks
Maddie Bear takes drawing her story on the Wacom Cintiq into her own hands.
http://instagram.com/maddiebearbooks
Maddie Bear takes my Sharpie pen to write her name on paper.

I thought doing some illusions and tricks might be a little more visually enticing to look at versus pictures of me drawing the artwork. Whether if all of this social media marketing will pay off or not is yet to be seen, I should probably finish the app first…

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

Corona SDK Application Design

Many of you came across my blog after purchasing my book, “Creating Mobile Apps with Corona SDK“, where I take you directly into creating your own mobile applications. I didn’t discuss a lot of coding background, though since I just wanted to get readers interested in actually creating apps to see how fun it can be.

Now that you’ve gotten your first taste of the power of Corona, you’re probably yearning for more, but books that cover advanced Lua programming can seem intimidating and daunting. Daniel Williams, the programmer of The Phrase Game and Finding Hope, has also written a book about Corona SDK called “Corona SDK Application Design“. In this book, Daniel discusses more of the technical aspects of Lua coding and takes you through step-by-step to create real-world applications. This is a great intermediate step between beginner programming books like mine and advanced programming books

Corona SDK Application Design starts out covering the basics like installing and setting up Corona SDK and then quickly goes into Lua basics like variables, if/then statements, for/while loops, tables and functions. You then create an app using the storyboard tool and widgets, which are key to just about every app created with Corona SDK. You’ll also create a jigsaw puzzle game app and then test it on an actual device. There’s no point having an app on just your device though, so Daniel covers how to publish your app to the marketplaces so you can start raking in the fame and cash.

The book runs about 98 pages, not including the table of contents, credits, etc., which is a good length to keep you interested without making it seem like you’ve got a dictionary of Lua code sitting on your desk. It provides key background knowledge of the points covered without going into painstaking detail about every word of code that you type. It’s written by someone who actually has a lot of apps out on the app marketplace, so Daniel writes from experience of creating actual applications. If you enjoy learning how to create apps without all of the fluff, you’ll definitely enjoy this book.

Corona SDK Application Design
Corona SDK Application Design