Categories
Uncategorized

Creating the first WordPress Game

The Motivation

I started getting interested in programming at a young age. I got my first computer when I was 7 or 8 and at that time PC was synonymous with gaming, at least for me.

I remember playing Grand Theft Auto and Disney’s Hercules for hours.
When I was 18 I finally made my first game in C++. It was a simple tic-tac-toe with a splash screen, a menu, and a very rudimentary AI.

In 2008 Ikariam launched and by that time I was already working as a junior PHP developer.

I remember feeling the same fascination with web browser gaming as I did with PC gaming when I first got introduced to it.

I know I decided then that when I’d reach senior level I’d try to replicate this RPG.

11 years later, just about when Progressive Web Apps became a thing, it was finally time to build my first browser game.

Lesson 1: Avoid the crowd

I’ve been working on all kinds of projects this past decade, from server-side software to web apps and Android apps. I even launched a small game on Steam.

And all this has taught me a very valuable lesson: if you’re launching a game on Steam or Google Play or the App Store, you are almost guaranteed to never get any traction.

The problem with all these marketplaces is that they have become over-saturated. There are millions of apps and the chances of anyone finding yours, even if they search for it explicitly, is almost zero.

The indexing algorithms have changed so that they maximize profits. 

There’s no point promoting new stuff when the old stuff sells. App Store Optimization is dead in my opinion an the only indexing rule left is “if you already have traction, here’s some more”. That’s it.

Google Play says that quality is a factor when indexing apps but they use a different definition than you or me. First off, they measure the quality of an app by crashes. I can make a dummy app that does nothing and never crashes. Is that high quality? Secondly, app performance is factored in less than user ratings, which are mostly spammy. I still get 1 star ratings with the comment “Great app” daily. Click farms and bots will affect your app’s visibility more than any amount of effort you put into your code.

So by these rules, if you launch a new app or game, no matter how much you work on it, you’re going to initially have 0 downloads and stay at 0 in perpetuity unless you either get extremely lucky or you heavily invest in ads.

I know this for a fact after launching dozens of apps over the past 6 years on all of these stores.

So I’ve decided to skip all of these marketplaces and set my lemonade stand in the middle of the desert.

I chose WordPress because it’s by far the most popular CMS today and people would be able to install my game with just a few clicks on most hosting platforms. Plus it has thousands of useful plugins, it’s used by tens of millions of people every day and there are absolutely no games for WordPress at this time.

I stayed away from Unity and other tools because I wanted the game to have a tiny footprint and it’s an RPG so it must communicate with the database and this is just easier and more efficient in PHP using WordPress standards.

Lesson 2: Baby Steps

The first thing I did was to create a simple text file where I detailed the database structure and the game objects.

This part took me about a week of enthusiastic planning. It was quite exciting and I remember thinking this is probably the reason anybody starts anything.

At the planning stage everything seems easy and straight forward. I think I even convinced myself that the game would be ready in a month or two. Oh, was I naive. Two months had passed and all I had to show was a rudimentary collection of scribbles that did nothing.

Two more months passed by and the most of the coding necessary for an early beta was done. By this time I was enthusiastic that I would launch the game in 2 more months.

I started sketching the buildings one by one. I first did this on paper and I though I would scan these drawings and digitize them in Photoshop.
After some days of frustrations I decided to skip the scanning step and draw everything directly in PhotoShop.

I bought a drawing tablet from XP Pen and started working. These guys are not endorsing me in any way. I just searched for a great graphics tablet on Amazon and this one had great reviews. This is an amazing tablet. It has very little parallax, accurate colors and awesome light control. The pen feels good and doesn’t require a battery. Also, it’s plug-and-play, using just one USB3 port on one HDMI port.

I am a senior software engineer and I have also worked with PhotoShop professionally for years but only on website and app templates. I knew UI is different from character design but I thought I could do it.

With zero experience and no deadline, I just started sketching… I made a list of all the object I would need to draw and I estimated that I would be able to complete at least 5 drawings per day. After almost 5 hours of sketching with no break the first building was complete. It was a bitter-sweet moment.

I had made progress on the game but things were moving much slower than I had hoped.

Still, I pressed on thinking that my skill would gradually improve and I would reach the 5 drawings/day target after my second or third drawing.
But days passed, and then a week was over. And another one.
And like clockwork, I could only fully sketch one building per day in about 5 to 6 hours.

So after 15 days, having finished level 1 for all of the game’s buildings I had to face reality. I’m really bad at this.

Lesson 3: Take risks

And this is when I took a break, went for a walk and thought about the 140+ more drawings I had to make.

This is a pivotal moment for the game and a good lesson, looking back. 
I remember thinking you’re only as powerful as the tools you use. Maybe there’s a better tool for this. Maybe there’s some PhotoShop plugin that would help with lighting and reflections and shadows etc.

When I got home I started searching some software that would help me sketch faster. And by accident I found Blender.

And then I froze.

I never used Blender or any other 3D modeling software before.
And switching to Blender would mean throwing away more than 2 weeks of work. And who says Blender’s faster? Maybe I’m wrong again. Maybe instead of 1 day I’ll spend 2 or 3 days or even a week on a single image.

But I decided to give it a try. Allocate just one week to this “Blender experiment” and if it fails this delay would not severely impact the whole project. I created the first building in Blender in 2 days. One monitor had 5 different tabs with YouTube tutorials on Blender, the other had my very first blender project.

And by this time I knew that I wasn’t going back. The rendered image was so much better than my sketch and so flexible. I could easily change textures, and rotate the entire thing, and add new elements or light effects.

I was just in awe at how powerful this thing was and how great it was at hiding my lack of drawing skills. The second building only took me 1 day. And by the 5th building I could even start working on the second model on the same day.

This progress continued and item-by-item I got better at using materials and sculpting tools.

An unforeseen consequence of using Blender was that I could also generate videos of each game object, something that was simply impossible by hand. I exported my render as PNG files and generated the H.264 videos using command-line FFMPEG.

Lesson 4: Don’t underestimate design

Creating the design elements took me 5 months in total and this includes some items that were purely User Interface that were stored in a PhotoShop document.

Programming took another 5 months and I couldn’t really do both in one day.

I have found that it’s best to concentrate on one type of task at a time.

Transitioning from a coding mindset to that of a designer is hard. So after 10 months of coding, sketching and modeling the first-ever RPG for WordPress was live.

This was really surprising for me because I expected the design part of the game to require the least amount of effort.

I am a software engineer first and a web designer second and I did have a grasp of what character design means when I started this project but I must admit I really underestimated the amount of work and grind that goes into creating beautiful assets.

I am now convinced that no matter how talented you are, as long as you’re drawing by hand, meaning layer by layer, color by color, drawings take time. And great drawings are projects of their own, spanning days or even weeks.

Conclusion

I made this RPG for the 7 or 8 year-old me. And for the kids that want to get into PHP programming today.

I made sure nothing was hard-coded so that one can change the game objects, remove them or add new ones without writing any code. You can change the story and how resources are generated. You get full control over your players with the in-game admin console. And last but not least, you can monetize the RPG you’re hosting using PayPal micro-transactions.

The game is in active development and I want to expand it further with skins and mods. So you could play an RPG that takes place on Mars or in Atlantis or in any other realm.

There are many improvements and bug fixes coming soon and I hope you’ll join me for the ride.

Mark Jivko here, signing off with a kind reminder to like this video and subscribe, it helps the channel grow. Thank you!