Category Archives: Blog

A collection of our lessons and thoughts on game design and development

Always Push Forward

Last Saturday (June 14th) I woke up, rolled across my queen size bed and reached towards my phone for my usual morning Reddit session. But rather than binge on cat photos , I decided to search up our unfinished/unpublished game, “Fishy Business,” in the Google Play store. Not sure what possessed me to do it… I just had an urge. My heart sank to my toes when the search results came back, showing a listing for our game posted by some guy named Toan Phung. (I suggest checking out “his” page of apps… who knows what other apps he’s stolen).

That audacious prick.
That audacious prick. He didn’t even use the right icon.

I should mention that we happened to stop working on Fishy Business on April 21st, due to significant increases in our schedules (at least, that’s what git tells me). Apparently this Toan Phung character had a sixth sense about our loss of commitment and straight up published a copy from our repository the day after we stopped working on it; only for me to find out a full two months later on a whim.

That’s horrifying.

Why didn’t we just publish our own game as it was? It was a full game by any means. It ran well, had a clear purpose and even an online scoreboard to keep people somewhat interested. But there was more to do! Always more to do. There’s … always more to do?

That’s just the thing. We always find something more to develop – add a little juiciness here, throw in a neat particle effect there until eventually we grow tired of our own creation. Motivation fades and dedication dies. We grow depressed because our game didn’t hold up to our self-imposed impossible standards, a state only exacerbated by hesitating to publish it for the public to see and all we’re left with is a game we’re tired of that just isn’t quite ready for the world’s critical eye.

I didn’t write this to vent any anger at this random person who ripped our work. In reality, he showed us how vain we were being with our simple little game. A weekend project turned into a six month long homework assignment due the next day, where the next day was always tomorrow.

I wrote this simply to hold myself accountable. A simple reminder for my future self to always push forward and continue to create new and awesome things to share with the world. So, thanks Toan Phung, you were the kick in the pants that I really needed.

Continue reading Always Push Forward

Little Things – Game Analytics

In this post, I want to share how we’re using our own brew of analytics to track user engagement. Here are some metrics I wanted to gather from my users:

  • Unique users – Need to track behavior at the user level
  • Play frequency – How many times do users play per time period
  • Store preferences – What items are people buying and what are people wearing
  • Character preferences – Which characters are users playing as

I won’t get into the technical things too much here, but we used a java library called KryoNet to send data between our app and our server. (If you’d like a technical break down of how we achieved this, leave us a note in the comments below!)

We write information to a CSV with up to nine possible columns. Here is some sample data: Data Rows Every time a user hits a screen I’m interested in, I will send basic information such as the particular screen (Session), the Name, IP, and Date Time stamp. Additional values, depending on the screen, will populate into additional columns, such as the number of coins a user has earned overall, the score per game, the character they chose and what kinds of items they’re purchasing and wearing.


Quick note: All the charts below were generated by the sample data from the spreadsheet above using Excel’s built in Pivot Table/Chart functionality. It’s an amazing little feature that allows you to create very insightful charts, simply by dragging and dropping your columns. If you’ve never heard of it, I definitely suggest you check it out!


So, aside from getting a great boost in motivation from seeing people play our game, what does this data tell us?

Player Engagement


User play data

User play data


  1.  Most don’t play much: From the usage chart it’s pretty easy to see that most people will play a handful of times upon first download and then won’t pay much attention to it again. (We would see users come back briefly after we pushed OTA updates to their phones)
  2. A few play a lot: We also see a much smaller percentage of users who play a TON. From our limited group of testers, we saw the five most frequent players made up about 50% of the play volume. In my mind, this is OK, and mimics how many apps do in the market anyway.
  3. Not too sticky: On days we updated, we saw play counts between 300 and 600 plays per day, spread across ~20 users. However, once we stopped updating, the play count dwindled down to just under 100 plays per day.

What does this information tell us?

  • That we managed to get about a quarter of our players playing a LOT. In my mind, that’s a pretty solid number
  • We do lose players as time passes from a new update. This tells me we’re not engaging our players, so we need to improve our ‘stickiness’. Perhaps adding medals/achievements that players can work towards will help that.

Store Purchases


Charts showing the more popular items purchased in the storeCharts showing the more popular items purchased in the store


  1.  Not all items are created equal: With six items per category, it’s clear that not all items were even attracting people to buy them. For example, only half of the shoes and hands items were being purchased, versus a fairly even purchase distribution in the glasses category.

What does this information tell us?

  • Obviously, some items were just not interesting enough to warrant a purchase. We can use this data to remove the unpurchased items and go back to the drawing board
  • This information is even more useful when you’re building a real store that people may be spending real money on. Ideally, you want to make sure that all of your offerings are being purchased — otherwise, you’re just wasting space

Summary TL;DR – you should definitely be tracking your users! Why?

  1. It’s rewarding to see players logging on and playing your game
  2. It gives you actionable insight into player behavior, allowing you to focus your development efforts on the things you think will maximally improve your game’s chance at success

Little Things – Game Score Screen

I’m going to start a series of “Little Things” posts, a bunch of (hopefully) short articles on little graphical things to help juice up a game.

I’m working on animating a game score screen today. My requirements are as follows:

  • Simple
  • Easy to understand
  • Extremely satisfying

Here’s a static mock-up of what I had in mind.

I've actually gotten rid of the long shadows since I made this screenshot so you can ignore that.
I’ve actually gotten rid of the long shadows since I made this screenshot so you can ignore that.

In Fishy Business, your performance is measured by the percentage of fish you catch in any given level. One star will be awarded for catching 40% or more, two stars for 80% or more and all three stars for a perfect score. Perhaps a bit harsh but hey, if recently viral games are any indication, the players want a challenge.

Research

So I went out in search of inspiration. My usual go-to for UI examples is Jetpack Joyride. (But if you have no such go-to game, game-patterns is a terrific place to start – thanks /u/adamvol!)

So I found a video of Jetpack Joyride’s score screen online and have saved you the trouble:

jetpackScore
Jetpack Joyride

What’s happening?

  • Stars fly off achievement with glittery particles (exciting)
  • Star slams into place and displaces entire window (satisfying feeling of weight)
  • New objectives sliding into place also displace the entire window

Ok, that’s my takeaway from Jetpack… how about another iconic example?

angrybirdsScore
Angry Birds
  • Stars simply appear while score counts up
  • Vigorous explosion of star particles erupt as each star appears (exciting)

One more:

Clash of Clans
Clash of Clans
  • Stars ‘pop’ into place – they appear, get bigger, and then shrink down to size
  • Bonus ‘falls’ into place (attention drawing)
  • There’s also a nice light emitting from behind the stars and bonus object (perception of value)

My creation!

Here’s what I came up with:

Fishy Business
Fishy Business

Elements that I liked and implemented here:

  • Stars with weight that displace the window (satisfying ‘thud’ when a star is earned – you can almost hear it)
  • Stars growing/shrinking when all three are earned (drawing attention to themselves)
  • All stars turn gold when all three are earned (perception of value)
  • Light is emitted after all three are earned (perception of value)

Overall, I’m satisfied with the end result. Let me know what you think in the comments below!

Tech Notes:

  • I created the mock-up by exporting a .gif from Spine, a fantastic piece of skeletal 2D animation software
  • Every element is drawn by hand with Inkscape. I’ve included a quick intro here if you’d like to learn

Game Art Tutorial for the Technically Minded [Part 1]

For programmers, art can be scary, but it doesn’t have to be! This game art tutorial outlines the basic workflow a more technically minded person might go through to create beautiful assets for a game.

In this post, I put together a tractor from Tractor Trample.

tractor

Here are the high level concepts covered:

  • Design workflow
  • Drawing & manipulating shapes (rectangles, circles, stars, paths)
  • Adding shadows

As you read/watch, try to imagine what your next step would be, and see how it compares to what I do. It will help to think critically about what’s being accomplished in each step, so that you can apply these concepts to anything you’d like to draw. I’ll be using Inkscape, a vector editing program, so it might be helpful to gain a baseline familiarity with it on your own, or with another one of my posts.

Here is part one:

I try to start with extremely simple shapes to form the initial outline of what the final character will look like and use images from real life/other people’s work to inspire how I detail those simple shapes. Below, I’ve outlined the steps I go through in part 1 in a little more detail:

  1. Inspiration
  2. Basic outline with basic shapes (or trace!)
  3. Add color
  4. Add detail

1. Inspiration

The number one obstacle I had to overcome when learning to draw was learning how to disconnect my mental imagery from actual objects. Don’t try and draw things from memory! Hell, if you’re just starting out – don’t be afraid to just trace! In fact, that’s what we’ll start off doing here today.

In this video I use Google Images for inspiration. Google images is good for when I know what I want to draw and want to start forming ideas of what I want it to look like in my head. For example, if I haven’t settled on an art style yet, google images can provide all sorts of different imagry for me to browse through. It can also be helpful if I need to be more specific in the object I want to draw, for example – I want to draw a tractor, but what kind?

Some of my other go to sites are as follows:

  • Behance – great for the ability to filter and fine tune your search
  • Designspiration – for when you’re hitting a wall, creatively
  • Game-Patterns – an excellent resource for studying recurring UI elements in games

2. The Basics

Now, a blank canvas is staring you down.  What next?!?! This step is probably the most intimidating but really, it’s the easiest! If you’re brand new to the art process I would suggest copying any inspirational art you’ve found and just pasting it directly into your document. And then trace. Yes, TRACE!

tractorbody

Tracing art or even real objects that you want to draw is a great way to force yourself to notice the little things. Zoom all the way into the pixel level, take note of the characteristics of the lines, the curves. Appreciate the colors used and shadows dropped to add depth. And start simple! Trace out the basic shapes that make up what you’re trying to draw, and move on from there.

tractorwheel
Don’t be afraid to trace in order to get the initial proportions right!

3. Colors

Once the basic shapes are in, I like to add color so that I’m not just staring at a bunch of flat black rectangles and circles. No need to get the colors perfect, we can always tweak them later. This step is strictly to help you see a rough outline of the image we’re trying to draw.

coloring
Adding some color so we know what the object is supposed to be

4. Details

Now we’re going to move from object to object, adding little details to make rectangles turn into a tractor chassis and circles into wheels.

The video covers how to alter paths to add some curvature to the tractor body, as well as how to manipulate the star tool to create a cool looking wheel with huge treads.

Converting rectangles to path objects allows us to deform the rectangle as we please
Converting rectangles to path objects allows us to deform the rectangle as we please
We manipulate the properties of a star to turn it into a tractor wheel!
We manipulate the properties of a star to turn it into a tractor wheel!

Finally, I add a thick black outline to the entirety of my tractor. Adding an outline to each object in your image can help differentiate each object when drawing in a flattened style, as we’re doing here. The outline also helps achieve a nice ‘cartoony’ feel.

outlining
No outline, outline. No outline, outline! Aren’t gifs fun?

Congratulations! You’ve got a reasonably finished tractor. In part two, we’re going to add a few more elements like a racing stripe and a steering wheel, as well as give our tractor a little attitude. Then, we’ll finish off with step five by adding shadows.

On to Part Two!

Game Art Tutorial for the Technically Minded [Part 2]

Time to dive into part two of this game art tutorial! If you haven’t checked out the first half, you can view the post here.

Enough formalities! Here’s part two:

4. Continued… Adding a few more little details

In part two, we finish up the fourth step by adding a few more details, namely – a racing stripe, the steering wheel and an eye to bring our character to life.

Drawing in the steering wheel with two simple lines
Drawing in the steering wheel with just two basic lines

So far, we’ve made a perfectly serviceable tractor. But since it’s intended to be a big focus of the game, I want to give it a little more personality. Quick tip – if you want to bring any inanimate object to life, give it a big ole pair of eyes and a mouth, if you’re so inclined.

eye1
Eyes and a mouth can really bring some personality to any inanimate object
eye2
But sometimes, happy and derpy just doesn’t cut it.

5. Shadows!

By the end of the last step, we’ve basically finished the final look of our tractor. Step five simply adds some shadowing to the tractor to help give it some depth. We go back and take another look at the inspirational images we saved off, and define a light source.

Once we have an idea of where we want light to be shining from on our tractor (top right in our case), we can draw in some shadows on the bottom left edges of our objects individually. Watch the video for more details on how to achieve this look!

shadownoshadow
Shadow… no shadow. Shadow… no shadow! Aren’t gifs the best?

Thanks for reading! This was my first video so I apologize for any rough edges. Please let me know if you have any questions as you follow the tutorial. I’ve included a download link to a .SVG file for the tractor here. If you do end up using this workflow, I’d love to see what you draw! Leave any creations, comments or questions below, and subscribe to our channel on YouTube if you’d like to see more!

Porting your LibGDX game over to iPhone (via RoboVM) [Part 2]

Welcome back!  This is Part 2 of Porting your LibGDX game to iOS.  I’m hoping you’ve either read Part 1, or already have a sample LibGDX project running inside iOS Simulator.  In this article we’re going to cover getting an iOS developer license, provisioning your iDevices (iPhone, iPad), and porting over your specific game code.

Fishy Business running inside the simulator
Fishy Business running inside the simulator

Achieving Developer Status

The Exclusive Club

Okay so step one, which will probably take you more time than all the other steps combined is to subscribe to the iOS developer program. Note you can totally skip this step and continue on using only the simulator, but I assume that if you’ve come this far you’ve probably got an iDevice you want to test on.

Start by getting your credit card out and heading to this page. You’ll need to register for an Apple ID if you don’t have one, and after that it’s pretty straight forward. In my case I was registering for myself, but you also have the option to register a company/organization.  Regardless of your decision, the price point is the same: $99 per year.

Roadblock Ahead! Once you submit your registration you will very quickly get an email from Apple saying, “your order is being processed.” You should also see a 10 digit confirmation code inside the email.  It usually takes Apple about 24 hours to verify your information and actually activate your membership, but there is a way to speed the process up. If you haven’t heard back in about 12-18 hours, you can call Apple’s  support line.  Their call-center is surprisingly good: during peak hours I had only a minute of wait time and after a short (5 minute)  call, the representative offered to speed up the process and activate my membership immediately.

Setting up Xcode

Alright, now minimize your browser and open up Xcode. In order to enable a phone to be used for testing you need to “provision” it. I think “provision” is Apple’s code word for “more hoops to jump through.” Anyways, it’s not a tough process once you figure it all out.

With Xcode open you should be able to plug your iPhone in and see the “Organizer” automatically pop up. If it doesn’t, click on Window->Organizer (Command+Shift+2). Next, find your iPhone/iPad under the “Devices” heading on the left hand side and click “Use for Development.”  Although this will configure your iDevice, you’re not actually out of the water yet.

Next, right click your device and click “Add to Member Center”.  You’ll have to enter your Member CenterApple ID credentials and Xcode will automatically “attempt” to provision your device. I say attempt because when I tried this I ended up in a pending state.  If you’re like me, you will see a message pop up telling you to wait a few seconds and “refresh your account”.

First attempt to refresh your account and see if that will fix the problem. You can do this by Accountsclicking Xcode (in the menu bar) -> Preferences. Select your Apple ID and click “View Details”.  Finally click the tiiinnny refresh icon in the bottom corner. You may see a message about creating a certificate/signing identity, obviously you should say yes :). If a signing identity and provisioning profile now appear in your accounts page, then congrats! Move onto the next step! Do not pass go, do not collect $200. If not, keep reading below.

Roadblock Ahead! Alright, your profile is pending and you don’t want to wait for Apple’s servers. Let’s see what we can do. Open your browser back up to the member center and
Provisioning
click on “Certificates, Identifiers, and Profiles”.  In the next page click “Provisioning
Profiles”. You should now see a screen with your “iOS Team Provisioning Profile”. It will be in the yellow “Pending” state. Eventually this will automatically turn green, but we’re far too impatient to wait :).

Instead, click the plus button and generate your own provisioning profile. I won’t hand-hold you through the process, it’s fairly straight forward. Once you’re done, download the
Provision
profile to your hard drive and import it into Xcode.   Also take this time to check the “Certificates” tab on the webpage and make sure you have a valid certificate. Xcode *should* have done this for you, but if not you can manually make it happen.

Finally, return to Xcode and repeat the instructions two paragraphs ago about refreshing your account. You should see a provisioning profile appear in your accounts page and in the dedicated “Provisioning Profiles” tab for your device.

Deploy to Device

Okay, I know this section is exciting and it’s what you’ve been waiting this whole time for, but let’s take it one step at a time. First double check with me that everything is in order by opening up a terminal and run this command:

 security find-identity -v -p codesigning

Verify that you see a signing entity returned with your name on it. Next it’s the moment of truth. Open up Eclipse, right click your test RoboVM project and click Run As-> iOS Device App. It should take a few moments to recompile everything but after it’s done it will attempt to install the executable directly onto the iPhone! If this works, fantastic! Move onto the next step! If not, stick around and i’ll help you debug.

Roadblock Ahead! Alright, so deploying to your iDevice didn’t work on the first try. No worries! It took me about four! Check the error that Eclipse returned, you may be able to debug it yourself. Here are some common ones I ran into:

  • Lock Screen Error: I saw this one when a) My Screen was locked (Duh!) or b) I hadn’t clicked “Trust” on the dialog that pops up on the iPhone. Either way, it’s pretty easy to fix
  • Unknown Error: I’ve seen this one every time I attempt to run on a new iPhone. It looks scary but oddly enough all I had to do was unplug the sucker, plug it back in, and try the process again.
  • No signing identity found matching ‘iPhone Developer” …: This one’s a doozy. It means Xcode hasn’t been setup properly and you’ll probably need to redo the steps in the last paragraph. Right click your RoboVM project in Eclipse->Run As->Run RoboVMConfigurations. In your RoboVM configuration check to see if your signing entity and provisioning profile appear correctly. Make sure it is the exact profile you want, if it says “Auto” click the drop down and select the exact one. If you can’t find your profile, go back a paragraph and re-do the Xcode setup steps :(

If you weren’t able to solve the problem with the tips above, or you have any other advice for other programmers *please* post a comment. I’d love to keep a running list of Tips & Tricks regarding deploying to an iDevice.

Port Your Game

score
Running on the iPhone!

Almost done! Now it’s finally time to port your actual game. If you followed my instructions you will have named your test project the exact same name as your actual game! This means you can copy over the RoboVM directory from the test project into your real project directory and import it directly into your eclipse workspace. If all goes well, you should have zero class path errors.

Roadblock Ahead!  I mentioned this before, but it bears repeating. Make sure you have updated your LibGDX jars in all of your projects! If you don’t do this, you may end up with some really funky errors that arise from cross-compatability issues. For more on this, see Part 1.

Now look at the RoboVMLauncher.java. For the most part, configuring this file is very similar to configuring an android application. The LibGDX team has really done a great job. If you need to go ahead and change this file up to suit your boostrapping needs. For example, my file looks like this for Fishy Business:

import org.robovm.cocoatouch.foundation.NSAutoreleasePool;
import org.robovm.cocoatouch.uikit.UIApplication;
import com.badlogic.gdx.backends.iosrobovm.IOSApplication;

import com.badlogic.gdx.backends.iosrobovm.IOSApplicationConfiguration;

public class RobovmLauncher extends IOSApplication.Delegate {

@Override

protected IOSApplication createApplication() {

IOSApplicationConfiguration config = new IOSApplicationConfiguration();

config.orientationLandscape = false;

config.orientationPortrait = true;

return new IOSApplication(new ChanseyMain(new iOSInput()), config);

}

public static void main(String[] argv) {

NSAutoreleasePool pool = new NSAutoreleasePool();

UIApplication.main(argv, null, RobovmLauncher.class);

pool.drain();

}

}

This next part is going to highly project specific and there really isn’t much advice I can give to you. Honestly if you’ve got the test app running on your iDevice and have gotten this far, I have full faith you’ll get your own project working! Good luck, and here are a few things I’ve noticed:

  • Shaders don’t work perfectly: Fishy Business uses some custom shaders in order to achieve a viscosity effect on the water particles. When I deployed to iOS I found that the shaders didn’t look nearly as nice. I’m still trying to figure out how to fix this.
  • Deferred Rendering has bad Perf: Again for our water particles, I render off screen to a separate frame buffer. I’ve deployed on a number of Android devices and I’ve never seen any performance problems but when I deployed on my iPhone I noticed immediately that it was dropping frames. Disabling the water particles completely fixed all of these issues.
  • There is a special “Data” directory: If you look closely you will find that your RoboVM Eclipse project has it’s own data directory. This isn’t for your regular art assets, it’s a special directory with images you need to replace. There are two kinds of images, one is the Icon for your game and the other functions as your loading screen.
  •  FreeTypeFonts need to be setup to work: More on this below, but like deploying to Android, you need to follow a couple steps in order to get FreeTypeFonts to work.

Bonus: Free Type Fonts

Fishy Business relies pretty heavily on generating fonts on the fly — and for this reason we use the FreeTypeFont library included with LibGDX. I highly recommend that everyone move over to generating fonts on the fly instead of relying on Hiero (but that’s for another article). If your game uses FreeTypeFonts as well, here is how I got them working on iOS:

  1. Add libgdx-freetype.a to your libs->iOS folder in the RoboVM project. You can find the file inside the zip file downloaded by GDX Project Setup or just click this link.
  2. Edit robovm.xml and add libgdx-freetype.a under <libs>:
    <libs>
    libs/ios/libgdx.a
    libs/ios/libObjectAL.a
    libs/ios/libgdx-freetype.a
    
    </libs>
    
  3. Add gdx-freetype.jar to your RoboVM project under the libs directory. (Hint: gdx-freetype.jar should already be in your Android libs directory. Just copy it over)
  4. Add gdx-freetype.jar to your classpath inside your RoboVM project
  5. ???
  6. Profit!

dragonChar

Porting your LibGDX game over to iPhone (via RoboVM) [Part 1]

I recently spent the better part of the last two days porting Fishy Business over to iPhone.  Performance is surprisingly superb with minimal code changes but the process was far from painless.

In some ways, I get the get the feeling that Murphy’s Law applies to everything I do, so I doubt anyone else will run into as many roadblocks as I did, but with a serious lack of LibGDX +RoboVM tutorials out right now, I feel compelled to give back to the community.

Prerequisites:

Functioning in the loosest sense…

(1) Functioning LibGDX game. Optimally, you’ve got your game compiling and running well on Android devices. I’ve noticed that custom shaders, deferred rendering, and FreeTypeFonts require some more effort to work properly, but almost everything else should work right out of the box! I’ll also go over some tips for using FreeTypeFonts later in the article.

(1) Apple MacBook/iMac/iDesktop – This is the deal breaker. If you want to publish on Apple’s ecosystem, you have to prove you’re part of the club by dropping a cool grand on an iDevice.  If you don’t have one of these, a) I don’t blame you, and b) you should probably stop reading this article.

(1) Optional: Subscription to iOS Developer Program. For just one annual payment of $99, you too can publish games on the app store! Luckily you can test your games out on the virtual machine without paying for the program. Unfortunately, if you want to install on your own iPhone/iPad or release on the app store you’re gonna have to pony up.

Step 1: Download/Update Xcode

Xcode Version 5.0.2
While you wait for it to download/update, ask yourself why Apple didn’t call it “iCode”…

Porting to iOS requires RoboVM which is dependent on Xcode. Do yourself a favor and make sure you have the latest version. At the very least you will need Version 5.0.1.

You can find Xcode on the Mac App Store.

Roadblock Ahead! When I attempted this process, I repeatedly had Xcode fail to update for no reason at all. It would download and install the whole package but never update the program! If this happens to you, try deleting your current installation. This will force the app store to download the latest version instead of trying to update.

Step 2: Install RoboVM Eclipse Plugin

I hope no one else suffers through this

RoboVM is awesome. Everything you need to compile onto an iPhone/iPad is contained in single Eclipse Plugin.  You can find the plugin here: http://download.robovm.org/eclipse/

For those on the remedial course, you can install plug-ins in Eclipse by clicking Help ->Install New Software. Then enter the URL above into the address bar.

Roadblock Ahead! Once the plug-in is installed, Eclipse will attempt to restart itself. A small number of you may see the following error:


Errors occurred during the build.
Error instantiating builder 'org.robovm.eclipse.RoboVMClassBuilder'
Plug-in org.robovm.eclipse.ui was unable to load class org.robovm.eclipse.internal.RoboVMClassBuilder.
An error occurred while automatically activating bundle org.robovm.eclipse.ui (244).
Plug-in org.robovm.eclipse.ui was unable to load class org.robovm.eclipse.internal.RoboVMClassBuilder.

Have no fear! This is because you have Java 6 installed on your system and the RoboVM plugin requires Java 7 (crazy!).  The easiest way to proceed is to update your version of Java. If you’re like me and keep Java 6 installed on your computer on purpose, then you can alternatively download the Java 7 JDK and use terminal to launch eclipse.

cd ~/<Eclipse Download Location>
./eclipse -vm ~/Desktop/jdk1.7.0_025.jdk/Contents/Home/bin/java

You can verify that everything properly installed by opening the “Preferences” window in Eclipse and finding the RoboVM line. On a Mac this is under “Eclipse” in the title bar.

Step 3: Download Gdx-Setup-Ui

It’s absolutely critical that you download the latest setup UI. Trust me, this was the first

Make sure you have a "robovm" project being generated!
Make sure you have a “robovm” project being generated!

mistake I made when embarking on this journey.  LibGDX is awesome because it’s constantly being updated by the team (thank you Mario!), the downside is that you’re constantly out of date.  At the time of this writing, I used Gdx-Setup-UI 3.0.0.

We’ll be using a dummy project to test our porting process to LibGDX, and to do that you can simply use the UI to create a new project with the exact same name as your real project in a temp directory. Once that’s done, copy over the new robo-vm folder into your regular project directory.  Now you can import the new robovm project into your workspace and you shouldn’t have any classpath errors!

Roadblock Ahead! If you downloaded the latest setup UI (like I told you to!), take the time now to update all of your LibGDX Jars! Your newly minted roboVM project is going to use the latest libgdx jar so it will expect the rest of your projects to have been updated as well. Copy over the jars from the other project directories you just created (desktop, android, etc), and overwrite the ones in your existing project. Failure to do this might lead to some crazy errors that you will not be able to debug! If you need more help on this step, check out this link.

Step 4: Verify Everything Worked!

Remember how I told you to use the LibGDX Setup UI to create a dummy project in a temp directory? Well I hope you did that because we’re going to use it to verify everything worked before porting our real game over.

Start by opening Eclipse into a new workspace. Import all the projects that you just generated using the Setup UI. These should be completely untouched files that the UI  created for you. Verify that everything worked by running the desktop version. 

Next right click your robovm project, select “Run As” -> “iOS Simulator App (iPhone)”.  Give it about 5 minutes to compile all of Java and LibGDX into Objective C and Voila! You’ve got an App running inside a simulator! Pat yourself on the back!

Hoorah!!

Now go to Part 2

Hopefully at this point you have something running inside the simulator! Now it’s time to move onto Part 2, where I’ll talk about getting registered as an iOS developer and running the app on your personal iPhone/iPad. I’ll also explain how to get LibGDX TrueTypeFonts running inside your iOS apps.  So what are you waiting for? Click the link to move on! I’ll see you after the break.

The Productivity Cliff

I’ve always believed in the strength of game development as a learning tool. Through no other exercise do you come to intimately know the ins and outs of a language than through developing a very interactive application, especially one that interacts back with you. Ok, maybe there are better ways of learning software development, but there is certainly a reason that virtually every computer science class involves making a game in one way or another.

What do I enjoy particularly about game development as a learning tool? Well, in game development, the ratio between work in to results out is extremely high. There is something incredibly satisfying about sitting down and turning commands and pixels into an interactive and entertaining piece of art. Only limited by your imagination, and I suppose your resolution, the screen becomes a blank canvas upon which you are free to create.

Designing the game mechanics, initial requirements, each new piece of scenery, functionality and character animation stands to bring a great amount of visual feedback to the game, leaving us increasingly rewarded as we see the screen fill up with our thoughts and ideas. Unfortunately however, at some point the Law of Diminishing Returns decides to rear its nasty head and tell you that you’re working waaaaayyyyy too fast. Eventually, after you have implemented most of the big stuff, the reward you get out of your developing time starts to decrease when compared to the work put in. Suddenly, you’re faced with the booooring task of fine tuning the buttons and UI in your game, or you realize that the entire mechanic of your game needs to be reworked because it just doesn’t feel very fun. I’ve certainly been there – even multiple times per project! 

For example, I spent the last few hours making small tweaks to a simple dance animation to get it juuuust right. The satisfaction I felt after finishing all this tweaking was not at the same level as it was when I first brought these characters to life. Now it’s all turned into … well, work. The magic that first accompanied the initial development quickly faded into an ocean of interconnected classes, objects and assets.

Suddenly, you’re slaving away for the entire day to complete a simple task. So how do we get over this and finish our projects? The best advice I have to give… is just to push through it. These feelings are completely natural! It’s all a part of the natural cycle of creating something. The initial high of seeing your ideas become a reality, the first setback… the second setback… sitting back and realizing that you bit off way more than you can chew. But the most important thing to remember is this: it will most definitely pass. Below are a few things I like to do to help me push past the feelings of “I totally don’t want to do this anymore”

  1. Set deadlines! And set the bar low. For example, “I will design one button for my UI by the end of the night”
  2. Post your progress to blogs! Getting feedback has helped reassure me that I’m on the right path, or that I need to change things up a bit. reddit’s /r/gamedev has weekly threads like Feedback Friday and Screenshot Saturday that can be a great place to show off your works in progress.
  3. Take a break! It’s natural to feel overwhelmed by the project you’ve taken on. It’s important (for both your physical and mental health) to remove yourself from the grind from time to time and clear your mind.
  4. BEFORE YOU RESTART: make sure you’ve given absolutely everything to the current project. It’s never too late to scale down your original idea. You may think that you’ve learned a great deal and that your new project will be cooler and cleaner. But realistically speaking, it’ll probably be more of the same. Get some feedback (see 2) and redesign. At the end of the day, finishing an entire project will not only feel great, but you’ll have something real to show for all your hard work. Because in the end…

doneisbetterthanperfect

Inkscape Introduction

Alright, time for that introduction to Inkscape I’ve been promising for a while. Today, we’ll be learning how to draw this delightful, delicious looking corn sprite:

Corn

The whole graphic is actually only made of about six distinct shapes, obviously some are reused to create the kernels, etc… Here’s the corn in its requisite pieces, we’ll be going letter by letter to make our corn:

cornDecomposed

Ready, set… Go!

Okay, first things first… go download Inkscape!! There are versions available for Windows, Linux and Mac, so take your pick, get installed and meet me back here. I’ll be waiting.

Phil_Yawn

Done? Ok, when you start up the program you should see a window like this:

Screenshot
(I’ll be doing this tutorial on a Windows machine, if you have trouble following along with shortcuts from Linux or Mac, leave me a note and I’ll post alternate tutorials)

a. Kernel One (a)

Let’s jump into making a kernel of corn (a). Go ahead and choose the circle tool (shortcut: e for ‘ellipsis’), draw yourself a nice oval (slightly wider than it is tall).

ScreenshotCircle

Now let’s hit up the Object Menu > Fill and Stroke.

ScreenshotFillStroke

The Fill and Stroke menu controls how your objects are colored and outlined in Inkscape. You can choose to define either your objects fill color, outline color, both, or neither. Although if you define neither, I’m not sure why you’re creating an object in the first place… I’ll lat you play around with the menu and tweak your circle until you’ve got it looking yellow and corny. And while we’re here, click around and see what you can do! There are options like linear gradient, circular gradient, pattern fill etc… And remember, ctrl+z is your best friend.

Screenshotkernel1

If you can’t get your kernel to look quite right, I’ve provided the exact colors below:

↑↑↓↓←→←→BA:
In the Fill tab, let's use the HSL tab (in the "Flat color" section) to set your color to fbff00ff.
Next, hit up the Stroke paint tab, HSL tab, color = ffda0bff.
Now, in the Stroke style tab set your width to whatever looks right. I can't really say how big your circle is so I can't tell you how big to make the outline. Take note of this value, we'll try to use the same value in other elements in order to keep everything looking consistent.

b. Kernel Two (b)

Let’s learn how to duplicate objects! It’s kinda like copy + paste but quicker. Click on your kernel we made in the last section and hit ctrl+d. Now just drag your object and voila! Another kernel. We’re going to want a slightly longer kernel in the x direction. To do this, we can grab the resize arrow on either the left or right edge of your object, and click & drag.

ScreenshotKernel2
Note: When you resize objects, inkscape will keep your outline width proportionate to your object’s size. You may want to check (in the stroke style tab) to see if your object width is still the same as your original kernel.

Simple, right? Cool. Let’s move on to some harder stuff.

c. Leaf One

c

For this section we’re going to start learning about paths. If you’re used to simpler bitmap editors like Paint or Paint.net, etc… these paths might feel a little awkward at first but worry not, they will soon become your best friend.

Start off choosing the bezier (bezier) tool either from the tool bar or just hit the “B” key on your keyboard. Once you have the tool selected, try drawing out a lightning bolt in the shape of the leaf above. To do this, just click anywhere on your canvas, then move your mouse to the next point on your lightning bolt and click again. Repeat until you are back at your original point, place your cursor on top of the original point and click. Your shape should complete itself.

screenshot_bizier
The bezier tool is very handy in allowing you to trace over pictures you’d like to vectorize. You can quickly outline and adjust paths to create smooth and beautiful curves

Nice work! Now, let’s change up that color scheme. Just like for the kernel from above, let’s go in and color this object like a leaf. The fill color should be 01c200ff and the stroke color should be 018000ff. Set the width in the stroke style tab to whatever looks right.

Now for something new – right under width is an option called ‘join’. These tell inkscape how to deal with the corners on your paths. See how sharp the corners are on our leaf right now? Let’s give them a softer look. Choose the middle option. It looks like a right angled road with a curved top right edge (join). Once this option is selected you should have nice, round corners on your leaf. Except… it still looks distinctively like a lightning bolt.

To  get your shape looking a little more leafy, hit F1 to switch to your select tool, click on your leaf to select it, and then hit F2 to switch to path editing mode. See the seven squares on your lightning bolt’s vertices? Those are called nodes. We’re going to focus on the four in the middle for now (see diagram).

Now, place your cursor over the node (it should turn red), hold down the ctrl key on your keyboard and click on the node. You should see the corner turn into a rounded edge. We have ‘smoothed’ this node. Go ahead and finish up smoothing the remaining three nodes. (Alternatively, you can click a node to select it, and then hit the ‘Make selected nodes smooth’ button nodesmooth in the toolbar.) This can be handy if you select a ton of nodes that you would like to smooth out at once.

Feel free to move around the nodes until you have a satisfactory looking leaf. Not only can you move nodes, but you can also alter the path in between the nodes. To do this, place your cursor on the path between two nodes, click, and drag. You’ll notice that the nodes that we smoothed earlier will try to stay smooth, regardless of how you move the path that it is attached to. Play around with it! If you start making graphics of your own, you’ll probably spend a lot of time tweaking and fine tuning your paths.

d. Leaf Two

d

Let’s blaze through this guy. This is the underside of our corn leaf. We can employ the same process from the last section in order to create this. Hit the ‘B’ key to bring up the Bezier tool, and draw the nodes where you think they should be. Now color your leaf as before, (fill: 01c200ff | stroke: 018000ff). Move your curves around and try to get it looking like the shape above.

The new concept we’ll cover with this shape is gradients. Gradients are a smooth change in color over a certain distance. Notice how there’s a transition from dark green to light green in the leaf above? That’s a gradient. Here, I wanted to emulate the top leaf casting a shadow on to the bottom one. To create a gradient, hit the ‘G‘ key on your keyboard, place your cursor on the left edge of your leaf, and drag to the right edge. If you messed up, you can go back and change the positioning on the gradient nodes with either the gradient tool, or the path edit tool (F2). You will notice that the gradient goes from green to transparent (it will look white). To fix this, hit F1, select your leaf, and look to your Fill and Stroke pane. In the Fill tab, you should see a gradient ‘Edit…’ button. Click that and inkscape will pop up a window that controls what colors are used in the gradient. Right now, it uses the green you selected for the object at one node, and a completely transparent color at the other node. To change the transparent color, click the arrow and choose the second color in the list (gradient). With the HSL tab selected in the ‘Stop Color’ section, look to the bar labelled ‘A’, which stands for ‘Alpha’. The alpha value for a color determines how transparent it is. Change the 0 value to 255 (max). Now you’ll see that your leaf is a solid green the whole way through. From here, you’ll want to play with the colors to see what kind of shadowing you like.

With the leaf selected, hit Ctrl+D to duplicate the leaf, and then hit H to flip it horizontally. Now we have two identical leaves that are mirror images of each other.

e. Line

e

This line is just that. A line. Use the Bezier tool (B) to draw a zig zag line thing, smooth the nodes, change the color and make sure it fits within the bounds of leaf one (c).

c+e=g4211

Repeat the duplication and mirroring we performed on leaf one in the previous section.

Before we move on to section f (corn shadow), we need to assemble the pieces from our previous sections together into something that starts to resemble a piece of corn. Remember kernels one and two? We want to stack them, one on top of the other, to form a column of kernels — just like you would see on a piece of corn. Go back to kernel one, and duplicate it (ctrl+d). Now drag it straight down. (Hint: Hold on to ‘ctrl‘ when dragging along the x or y axis in order to drag things in a straight line!) You should now have something like this: 

Kernel A, duplicated and dragged straight down

Now repeat this duplicate and drag process about ten times. Don’t worry about trying to space them out perfectly equidistant from one another, we’ll let the software worry about that. Once you have ten kernels in a column, open the ‘Align and Distribute’ menu (Object > Align and Distribute, or just Ctrl+Shift+A) Now, with the select tool active (F1), select all of your kernels and then hit the button on the ‘Align and Distribute’ menu that looks like this image4305. It’s located in the ‘Distribute’ section of the menu. It will align all the kernels’ horizontal centers equidistantly from one another. Alternatively, you can also distribute according to vertical centers.

unclumb

The unclumping tool can be very useful when trying to make large patterns like this. The entire ‘Align and Distribute’ menu is very useful, so spend some time to figure out what the other buttons do. (Just some examples: you can align one object to another through the x or y axis,  and distribute objects equidistantly from one another through either axis).

Now select all your kernels, and hit Ctrl+G to group this row of kernels together. Now hit Ctrl+D to duplicate, hold down the Ctrl button and drag horizontally to create two rows of the outer row of corn. Now repeat this process of duplicating, dragging and distributing kernels with kernel B, but make 11 kernels this time. Once you’re done, bring together the three rows of kernels into a cob like shape and group them together:

createcorn
Hint: use the align and distribute tools to make your rows line up perfectly.

Looking good! Let’s take a quick inventory of our objects now, you should have three rows of kernels, and two sets of leaves that are mirror images of each other. We could just combine our objects right now to create our corn, but let’s take the lesson one step further and add the shadow.

f. Shadow (path4782)

To create the shadow, we will be duplicating the three columns of kernels, combining them into one object, removing the boundary, and adjusting the color to a transparent black to mimic a shadow formed on the lower left half of the kernels. The new feature we’ll learn in this section are the path editors. We can make all sorts of interesting shapes, such as this shadow, with path operations.

By now, you should be pretty familiar with the tools we have learned about up to this point, so we’ll move pretty quickly — first, duplicate the grouped kernels we made in the last section (Ctrl+D). Then, un-group them to separate each individual kernel (hit Ctrl+Shift+D). We will need to un-group twice, since we grouped these kernels in two batches – once to form rows and again to form the cob. Now we will use a path editor: with all the kernels selected, go to the Path menu > Union (or alternatively, Ctrl++). Now, you’ll notice that our kernels aren’t completely combined into one object. That’s because the union tool only goes by the object fill size, the large outline around each kernel is not considered in the area used for the union. With the object selected, go to Path > Outset (or Ctrl+)). ‘Outset’ will expand your object to fill in the gaps (see the difference in the diagram below). Once we’ve done this, we can remove the stroke (Fill and Stroke toolbar, Stroke tab, remove stroke) and change the color (Fill tab) to a transparent black (I like 0000003c).

cobtransformtoshadow

Ok… now we have an object shaped like corn but colored like a shadow. Now we need to cut out some of it and lay it on top of the original kernels in order to produce the desired shadowy effect. To cut out some of the shadow, draw a circle, put it on top of the part of the shadow you’d like to cut out, select both objects and go to Path > Difference (Ctrl+-). It’s hard to explain in words so study the diagram below:

cutoutcircle
NOTE: It is usually bad design to mix shading techniques (as we used a gradient shading technique earlier in the article for leaf Two), but for the purposes of this article, we’ll play a little fast and loose with that rule :)

Congratulations! You’ve just made all the elements needed for an attractive piece of digital corn. The end result isn’t all that interesting or compelling, but the tools you’ve learned in this tutorial are all the ones I use on a daily basis, so it’s a very good starting point. Now you just need to layer these objects on top of one another and you should be good to go. A helpful tip when placing these objects on each other is that Page Up and Page Down will adjust the draw order of any object. So if your kernels end up on top of the leaves, hit ‘Page Down’ and they’ll move underneath them.

I’ve included the .SVG (scaleable vector graphic) file here in case you had any trouble following along. You should be able to open it in any vector editing software (Inkscape, Illustrator, etc…)

I hope you’ve learned something from this Inkscape Introduction! If anything was unclear or if you would like to learn more about any concept/technique in particular, leave me a comment below and I’ll get back to you/write a new post. Thanks for reading!

Vectorize Me Cap’n!

This week’s post will be a quick introductory tutorial into the magical world of vector graphics and Inkscape. Before we dive into any technical information, let’s try to gain a high level understanding of vector graphics and how they can be useful when designing a two dimensional mobile game. If you already know what vector graphics are and just want to jump right in to some Inkscape fun, I’ll be posting the tutorial half of this article soon.

I used to draw with Raster Graphics, but then I took an arrow to the knee

Er… started drawing with vectors! Yeah that’s what I was going for. Here is a formal definition of vector graphics from Wikipedia:

Vector graphics is the use of geometrical primitives such as pointslinescurves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics.

Okay… so what does that mean? Well, it means that characters, scenery, menu items, etc… (generally referred to as assets) can be drawn once and infinitely scaled either up or down. Why do we care? Have you ever found a small image on the internet that you wanted to make bigger for whatever reason? It doesn’t look very nice does it? Here’s a very simple example:

 

Simple example of what happens to raster images when they are resized
Simple example of what happens to raster images when they are resized

Clearly, as we begin scaling raster images (BMP, PNG, etc…), we can see some very obvious loss of clarity at the edges of our object and at the color boundaries. This issue occurs because raster images, or bitmap images, literally map an image pixel by pixel and assign each pixel a value based on what has been defined by the bitmap editor. When that bitmap has been resized, we now are left with many new, undefined pixels in between the originals. In order to set values for these new pixels, the computer must now interpolate between the originals, typically by using a nearest neighbor interpolation.

Vector graphic software, such as Inkscape, gets around this problem by storing images as functions, rather than simple pixel maps. Now when you go to resize an image, the computer knows exactly how to fill in those new, undefined pixels, because it has a function to use! The result: smooth and perfect image scaling, every time.

Outside of the gaming world, vector graphics are heavily utilized in marketing. Being able to resize a company’s logo to be small enough to fit on a pen, or large enough for the side of a building, is a very handy ability indeed.

But how about in the gaming world? Yes, we too can profit from the ability to rescale our graphics to any resolution we need. Why? Let’s take the mobile marketplace as a quick example. With the plentiful cornucopia of mobile devices that come in all shapes, sizes and resolutions, app and mobile game designers need to be able to design their app to function on as many devices as possible. To do this, designers typically export their graphics to four major ‘densities’. You can read more about these on the android developer’s website.  Obviously, we don’t want to redraw all of our assets four times in each density. But with vectorized graphics, we can simply export to the size we want. Basically, you draw once, export to any size.

Hmm… I still don’t quite understand – explain it to me like I’m in middle school

Simply put, vector graphics let you draw your game’s pictures once and export them to any size you want. This ability makes it very easy for you to create your images at what ever size you like and have it look great on everything ranging from iPhones and tablets to giant HDTVs.

Uhh… cool story bro but I still don’t get it. Explain it like I’m three years old.

Bitmap bad. Vector good. Make resizing pictures easy.

Hopefully I’ve convinced you to make the switch — if so, here’s a tutorial I wrote up for beginners to Inkskcape/vectors. Thanks for reading!