Iterating The Tutorial

The tutorial is one of the most important parts of a game. A properly trained player will have a much more engaging experience than a player that’s left trying to figure out what on Earth they’re supposed to be doing. And so, I’ve put a great deal of effort into the design of Hexagone’s tutorial.

In the original release, I gave a brief introduction popup which explained the goals and what the controls were. It was quick, simple, and it got the job done. Then, I let the player start playing. After a few moves, more concepts were introduced with another popup. In playtesting, players that used this tutorial almost always performed dramatically better starting out than those that did not. The tutorial shaved off about 15 minutes on average from the player’s learning curve. This is what it looked like:

 

Do you see what the problem is? A wall of text. Players that actually bothered to read the tutorial would easily jump into the game and know exactly what to do. But some players would just hit “okay”, and then stare blankly at the game, not knowing what to do. You’re not one of these people, because here you are, reading this wall of text. But they exist, and they hate words. Even three sentences, like in the above tutorial.

How do we make the tutorial better for these players? Pictures. And not just pictures… animated pictures!

 

The text has been simplified, and now an animation plays, showing blue expanding from left to right. At a glance, players can now visualize what’s supposed to happen.

This animation actually implies a few things. First, that the player is blue. Second, that they need to expand to adjacent tiles first. And third, that they need not control all the grey tiles – they can skip some to target red. This last one was actually pretty important in playtesting. In an animation where all the grey tiles were conquered, players would always try to take all the grey tiles, even if that wasn’t necesarrily the best tactic for the map. By leaving some in this animation, it implies at least subconsciously that skipping tiles is okay.

But there’s some room for improvement still. This is the current iteration of the tutorial:

 

The introduction fluff has been fully cut. The text is now just seven words, which is far more likely to actually be read. Additionally, the animation has been sped up, with better frame timing.

UX is fascinating to me, and you can always keep iterating and improving upon it. This latest iteration is good, but I look forward to seeing how you guys react and learn when you finally get your hands on it! Have any thoughts? Questions? Ideas on how this could be improved? Let me know!

My Battlestation

After I posted the Hexagone introduction, I got a few comments asking about the giant wall of monitors behind me. Also about what I was using to record the video. So I thought I’d give you a little peek into what I use to make games.

Anthony's BattlestationFirst, let me describe my setup. What you saw was three monitors, which are all hooked up to my primary work machine and gaming rig (I’m not playing games! It’s market research!). Behind the black curtain I used in the video is a CRT hooked up to my file server. (The file server could probably put most gaming rigs to shame, but that’s a story for another day.) All four displays, linked across two computers, are controlled by one mouse and keyboard with Synergy.

Why on Earth do I have all this stuff? The tab key on my keyboard was broken, so I had to get more monitors to show everything! But in all seriousness, the big reason is being able to have everything I’m using visible at once. You would be amazed at how much more efficient and productive you get with multiple monitors. If you have dual monitors, you know what I’m talking about – I just took it to its logical conclusion, and covered my entire peripheral vision. Being able to have your code window up while you have a web browser on another screen to reference is incredibly useful. Alt-tabbing would break up your workflow immensely. This way, I can have my code, reference material, and e-mail/Skype/Steam/Twitter/Facebook/AOL Chat all available at a glance. Or when I’m working on the iOS version of Hexagone, having a virtual machine up on one display while I work on the other two. In my experience, three monitors is ideal – any more and you rapidly get diminishing returns on productivity. I can’t work with just one monitor, the extra real estate is too important.

But that’s the key term: “real estate”. It’s not just about having multiple screens, it’s being able to display all the information you need. 1080p? Only if I was using a cell phone! The monitors on the sides are 1920×1200, and the middle one is 4k (3840√ó2160, or the equivalent of four 1080p screens). Since the “standard” resolution for most things these days is 1920×1080, having resolutions higher than that allows you to view content at the full resolution and still have space for your tools. More pixels also means you can just plain have more windows up.

4k is a big topic these days, and you might be considering getting a 4k display for your own workstation. The screen I have is the Seiki 39″ SE39UY04, which right now is the absolute cheapest 4k display you can get. This thing only does 30Hz at 4k resolution, and has awful latency. And you know what? I love it. I didn’t think a 4k display would dramatically improve my workspace, but it has made me so much more productive that the downsides are worth it. Do you have a monitor rotated vertically for your code? This thing, laid horizontally, still has more vertical space. You can see everything without scrolling, which again is a huge time saver, and keeps your workflow from being interrupted. If you’ve been debating getting one, I encourage you to finally do it.

So yeah, I’ve made a pretty significant investment over the years into building up a pretty kick-ass workstation. When you’re spending 12+ hours a day in front of screens, aren’t they worth a little love?

What I used to make the introduction video was significantly less high-quality, and the epitome of indie production.

Video Recording EquipmentPictured is my cell phone, mounted on a tripod. Behind that is a giant fluorescent light, with paper towels to help diffuse the light. It’s about as cheap as it gets, but it does get the job done. The microphone is a Blue Yeti with a $10 pop screen, which is a fantastic USB mic for close range recording. (I didn’t really use it all too well for this video, and you can hear the echos and volume peaks if you pay attention.) The total cost of the equipment (minus the cell phone) was about $160, with some good price hunting. If there’s one thing I wouldn’t recommend for shooting a video, it’s the fluorescent light. But it is cheap, and when you’re on a tight budget, cheap is good!

So there you have my battlestation! Any thoughts? Want to share your battlestation? Drop me a line @TheAnthonyBryan.

Hexagone Revealed

Today I’d like to show you a bit of Hexagone. Also, I’d like to give you a free demo of an old version! Fun times!

As I said before, Hexagone is a real-time game of action and strategy. You control one color faction, and your goal is to take over the territory of all opposing factions. It looks something like this:

It’s actually a pretty fun game! Up to four factions can fight at once, opening up a lot of different gameplay scenarios and tactics.

Hexagone started off a couple years ago as a project I made when learning Corona. My friends and I had a lot of fun playing it, and so I started remaking it this year into a full commercial game. The game is brand new, from the ground up, with an all new engine and super-improved AI. Most importantly, support for multiplayer has been built into the engine. This game is fun when playing against the computer. But when you’re playing against your friends? Oh, it’s an absolute blast!

The new Hexagone is still in development, but I want to give you something to play right now! So, I’m releasing the original version of Hexagone for free. You can download it here!¬†Unfortunately, there is no iOS version of this classic version, but the new version that’s coming totally will have iOS support!

Introducing Hexagone

After a long time developing a variety of mobile applications, we’re finally ready to embark on our first major game project! It’s very exciting! Can you feel my excitement? Maybe not, but trust me, I’m excited! So, it is with great pride that I make our official announcement to the world: Rocket Bird is producing our first game: Hexagone!

Promo - Hexagone

Hexagone is an action / strategy game for iOS and Android. You control one of up to four differently colored hex factions, and your goal is to eliminate all the opposing colors. Each hex tile generates a steady stream of power. You can direct this power at an adjacent tile to reduce the energy level of that tile. When your power overwhelms the tile, you gain control of it. The more tiles you control, the greater your energy production.

This is a game about strategy and force deployment. Where will your actions give you the greatest control of the map? Is it better to fight against the strongest enemy tiles, or sneak around and take over the weakest tiles? Control choke points to stop enemy reinforcements. Interrupt supply chains to win the long battles. In 3 or 4 player games, is it better to expand rapidly and make yourself a target? Or is it better to slowly amass a powerful force and let your opponents duke it out?

The concept is simple, but the gameplay possibilities are immense! Different map layouts can create fundamentally different challenges and experiences. Symmetrical maps will test your skills and reflexes. Asymmetrical maps will put different strategies to the test.

 

Okay, so there’s the marketing stuff out of the way. From this point on, this blog is going to give you a look at how this small indie company is working on our first game. My next post will give you a bit of an overview of the game, and go into its background a bit. Follow along! You’ll laugh (at us)! You’ll cry (in horror)