Hugo Bonacci on indie gaming
Web developer and UX consultant Hugo Bonacci created Kung-Fu Clash using Corona and found success in both the Apple App Store and Google Play store. He talks about moving from web development to indie gaming
.net: What were you doing before you started developing Kung-Fu Clash?
HB: At the moment, I'm working as a UX consultant, but for the majority of my career I've been a full-stack web developer using mostly ASP.NET (MVC). Most of my evenings and weekends are spent working on personal projects so I still find time to write code all the same.
In June 2012, I was trying to decide on what I wanted to work on next. I had just finished writing a web application for my Dad's company so wanted to do something completely different for a while.
.net: What made you start work on Kung-fu Clash. Was this your first game?
HB: No, but Kung-Fu Clash is my first successfully published game - and I've tried many times before.
Video games were a big part of my life. I grew up around the time the NES console was really starting gain popularity America. It didn't take long before I wanted to start making games of my own.
For as long as I can remember I've tried to make games. When I was young I was limited to things like making board games out of cardboard or tinkering with my parent's Commodore 64. As I got older, I started to focus more on art and programming since I thought I'd need them both if I wanted to become a game designer.
Eventually, I started doing a lot more web development until it became my career and most of my time was spent learning JavaScript, CSS or server side languages. I'd still work on games when I could, normally using Flash, but I'd eventually quit the projects for one reason or another.
I've also tried using games as a way to teach programming. I created ProjectRU to try and help a friend of mine learn JavaScript. We had a lot of fun with it, but it didn't go much further than that.
When I started working on Kung-Fu Clash I decided that I was going to keep things simple and set realistic goals. It took about four months of nights and weekends to finish, but I'm happy I finally completed a childhood goal.
.net: Where did the idea for Kung-Fu Clash come from?
HB: When I was college I took an "Introduction to Web Development" class that had a couple weeks dedicated to learning Flash. Our final assignment was to create an animation using all of the techniques we had learned.
My plan was to create a dojo scene with a Kung-Fu master in the center of the room surrounded by ninjas. As the ninjas approached the master he would perform a variety of random attacks and then eventually knock them off the screen.
While testing the animation I wired it up so that clicking on the ninja would cause the master to attack. It was unexpectedly satisfying to pummel a ninja then watch him fly off the screen.
After a lot of brainstorming I remembered this project and thought it would be a perfect theme for the game. Once I had the basic idea for the game it was easy to start coming up with ideas for new ninjas and power-ups.
.net: Had you used Corona before?
HB: Before I started development I spent a week or so on evaluating different frameworks available. It was important for me to find a framework that would allow me to focus on being creative and less on understanding the idiosyncrasies of developing for mobile devices.
Corona allows you to write everything in Lua and then deploy your application to both iOS and Android (as well as the Kindle Fire and Nook). It even handles the entire build/signing process when you're ready to release your app, which is one less thing you need to figure out.
The SDK simplifies mobile development by providing easy to use libraries for the file system, hardware, sound, network, among other things. Corona also includes a built-in physics engine based on the popular Box 2D engine, which makes.
For the most part, creating games is very straightforward and easy to do. Essentially, you start by creating sprites on the screen, move them around using x and y coordinates and then react to user interactions via listeners. It's really that simple.
Corona also has a large community of developers contributing code and additional libraries to make development easier. If it's not built into the framework then chances are you'll find it in the Code Exchange.
.net: What preparation did you do before you started coding?
For the most part, my brainstorming is done by sitting in a quiet room and staring at the ceiling. Sometimes, when I need to get an idea out of my head, I'll grab a notebook and start sketching things out. I'll scribble down some UI ideas or jot down a few unreadable notes, but mostly I'm trying to visualise what I have in my head.
The same is true for character designs. I typically sketch new character ideas rapidly until the moment I'm not happy with it. Then simply move onto a new idea. For example, I tried 18 or so different versions of the basic ninja before I found one that I liked.
I also used the same approach for planning out backgrounds with Blender 3D. I'd create rough scenes with basic shapes and then preview them in the game before I'd spend a lot of time on detail.
There were plenty of design changes that came from coding, or more specifically coding mistakes. Turbo Mode was inspired by accidentally firing an attack event on both pressing down and releasing. The idea for the Storm Ninja attack was discovered when I inverted the sprite colors trying to do something else.
.net: Is Lua a good choice for someone familiar with JavaScript or are there better options out there?
Lua is like any other language in that it has good parts and bad parts. It's dynamic like JavaScript, but it seems that the similarities are limited to things that most languages do anyways.
One important difference is that Lua doesn't attempt to convert types when comparing values so "1" == 1 never comes back as true. In JavaScript, you need use an explicit operator to avoid the conversion. I also ran into the problem that methods aren't always where you'd expect them to be. For example, objects don't have a `.toString()` method like most languages, but instead is called using a global function `tostring(obj)`.
I don't think Lua is enough like JavaScript that you'll be able to pick it up without looking at single reference guide, but it really is a pretty interesting language and has many useful features to speed along development.
If you're really wanting to use JavaScript then you might be interested in using Unity which has support for it among other languages, but generally, learning a new language syntax tends to move along much faster than learning the SDK that uses it.
Lastly, .NET developers might be interested in MonoGame since it uses Mono (cross-platform .NET) and XNA for game development. It supports both 2D and 3D game development as well as large number of platforms including iOS, Android and others.
.net: How did you find music and sound effects for the game.
HB: I like to create my own resources for my games, but unfortunately I'm not a musician. I've wasted a lot of hours trying to create music for my games and it always comes out horrible. When you're the only person working on a project it's important to avoid wasting time, so this time around I decided to try and find stock music instead - and the results were fantastic.
The two sites I used were Pond5.com and AudioJungle.net. It was great to be able carefully listen to each song and find the one that was a perfect match to the dojo it was for.
The voices were a dual effort between my 11-year-old daughter and myself. We'd record our voices and then edit them in Audacity.
As a side note, I recommend that you give music selection your full attention. If you're doing another activity, such as coding or art, then you're going to miss out on the subtle details of a song that help you know that it's just right.
.net: What other tools did you use?
Sublime Text 2 is the text editor that I use for pretty much everything. It's an absolutely fantastic text editor that has many unique features for finding files, navigating functions, editing text in multiple locations, just to name a few of my favorites. Another great thing is with a single shortcut you can browse and install plug-ins or support for new languages without leaving your editor.
An added bonus there's already a number of packages available that add features like syntax highlighting, auto-complete, and build/run functionality for Corona SDK directly into Sublime Text 2.
I still use Flash for character design and creating animations. While I don't recommend it for web development anymore, it's still a great tool for creating vector art. With Flash you can export each frame of animation as a separate PNG file which works perfectly with applications like TexturePacker and Zwoptex.
Photoshop was used to create the user interface and some of the backgrounds. I also had a few "macros" I'd used to apply some adjustments to finished sprite sheets to emphasize the outlines around the characters.
Several of the backgrounds, for example the Temple of Frost and Luminous Halls, were created using in Blender 3D. It's a bit of extra work, but normally the results are fantastic.
Audacity was used for everything audio related, though I didn't do much more than mixing some sounds or adjusting pitch and speed.
TexturePacker and Zwoptex are used to generate sprite sheets (sometimes called texture atlases) which allows you to fit many sprites onto the same image, which in turn improves performance. Additionally, these applications automatically generate a .lua file with instructions specific for Corona to render each sprite.
Lastly, ImageAlpha and ImageOptim are incredibly important applications for reducing the file size of all of the assets. ImageAlpha converts PNG files to indexed versions while retaining their alpha transparency. ImageOptim further reduces image sizes by performing additional compression to them. In most cases, this can reduce image sizes by as much as 80 per cent without any noticeable loss in quality.
.net: Did you have a marketing plan before you released the game?
HB: Most of the marketing plan involved getting people share Kung-Fu Clash with their friends. I created accounts on Twitter and Facebook as well as creating the KungFuClash.com website.
The game itself has a few ways people can discover the social accounts or share their scores (via tweet). Also, like most apps, after a period of time a the players are asked for a game rating.
I've also started submitting my game to a handful of app review sites. Essentially, you provide a short description, a few screenshots and some promo codes and, if you're lucky, they will review your game on their site.
.net: What advice would you give to other web designers who want to create their own indie game?
HB: Come up with an idea first: Don't start developing until you have a fairly good idea of what you're going to do. Take some paper and just sketch out ideas and determine what kinds of resources you're going to need (art, backgrounds, screens, menus). Having an inventory of what needs to be done goes a long way in staying organized, tracking progress, and identifying remaining work.
Keep it simple: Many games today are developed with an entire teams - You are one person. Take the simplest game idea you can come up with and start with that. You'll be surprised at how long it takes to get done.
Be unique: Make sure you set yourself apart from others. It doesn't have to be a groundbreaking new game design. Sometimes all it takes is using a simple game concept and then adding a unique twist.
Art before code... and use vector: It's fun to get into coding as quickly as possible, but I've found that it's really important that you do as much art as possible before you start coding it. Context switching between creating art resources and writing code can be slow and difficult.
Using applications like Flash allows you to create mock screens with vector game art and then preview the final result to see if you’re happy with how it looks. This helps you see the game as a whole while keeping you out of the code and focused on art.
Vector art is also important for 2D games because if you're trying to support a high-resolution screen (or a larger display in general) then you'll be able to scale your art without having to redo it entirely.
Don't settle: When you play your game, if you find something particularly frustrating, or something that you just don't like, then chances are the people that play your game won't like it either. Take as much times as you need to tweak it until you're happy with it.
Be careful adding complexity : It's tempting to add more and more to your game but keep in mind that a "harder challenge" generally equates to less fun for many mobile gamers. It also translates to more code, more work and more time before you're finished. If you want to add something, honestly consider how important it really is before you start changing things.
Players don’t care about code design patterns: Don't let yourself be dragged into over-engineering your game. Program defensively, don't repeat yourself, but focus on making forward progress with your game. The most beautiful, perfectly abstracted code base that never ships is still a failure.
.net: Has Kung-Fu Clash been a success? Did you have a goal or definition of ‘success’ before you started the project?
HB: My goal was always to finally create and publish a game, and in that sense Kung-Fu Clash has been the success I was hoping for. I'm happy with the final result, and based on the reviews, the players are pretty happy with it as well.
Of course, I'd be thrilled if Kung-Fu Clash becomes successful in the market as well. I'd love to dedicate more of my time to creating games or maybe even start my own studio.
.net: Have you got plans for your next game?
HB: Yes! I've had a few ideas but I'm fairly certain that I’ve decided what I'll be working on next. I've learned a lot from this experience and hopefully it'll help the next time around.
But first, my daughters have been hard at work creating art for their own games. I'll planning to spend a few weeks helping them bring their ideas to life before I move onto anything else.
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.