Play

Support up-and-coming indie game developers by playing their games. Leave a comment to tell them what you like or what can be improved.

Learn

Our tutorials go from basic Processing through advanced libGDX.

Code

Free hosting for Processing, Java, libGDX, and JavaScript games.

Blog

Read about what we're up to, or write your own blog to keep us updated on your latest projects.

Forum

Stuck on a code problem? Just want to talk? Come say hi!

Open Source

Static Void Games is completely open-source. Want to practice your web development skill? Contribute on GitHub!

Newest games:

Recent happenings:

Kevin's latest blog: The Number

I've been strangely interested in the idea of gamification: using "game-like" ideas to reward people for doing "the right things" in a specific context. Think of how most games have points, or how modern games reward you with "badges" or "trophies" for doing certain things. Then compare that to how how StackOverflow uses reputation and badges to reward users for asking and answering questions, or how One Game a Month uses points and trophies to reward users for uploading games every month.

One reason this is so interesting to me is, well, *it works*. I remember when X-Box first announced its "Gamerscore" system (one of the first examples of "gamification" that everybody has since adopted), I thought- man this is stupid. Who needs to earn dumb virtual awards to play a game? But I will admit that the hunt for those trophies has indeed kept me playing games I would have otherwise stopped playing. (I'm currently trying to 100% Just Cause 2.)

And it works outside of games, too. StackOverflow is arguably the most useful resource for programmers (and it's starting to branch out into the muggle world as well), mostly because it does such a good job of encouraging and rewarding people into asking and answering questions. And places like Code.org use the gamification of learning to encourage people to learn how to code. GitHub uses gamification to encourage contribution to open-source projects (GitHub is more a "race against yourself" than it is against other people, and it's also the one I wish I used more... I wonder if those are related?). Point being, gamification is a really powerful concept.

On the other hand, this idea of gamification can also be pretty horrible. How many people do you know who seem to live their lives around how many facebook likes they can get? How many reddit/twitter accounts are created just to steal art and images in order to farm upvotes/retweets? (So that they can later sell those accounts to advertisers.)

So although I've always been interested in the idea of adding some kind of gamification to Static Void Games, I've also been pretty cautious about it. How could I implement gamification in a way that's fun, in a way that works, but not in a way that's tacky or manipulative?

I've had all of that in my mind while I've been polishing up the site, and I found myself "leaving room" in the design for places where this gamification "might go" in the future. So I figured- there's no time like the present!

You're just procrastinating! Get back to work polishing!

You're not wrong. I started this site for mainly one reason: *it seemed fun to try*. I didn't know anything about web development or server-side programming, and I wanted to learn. Every feature of this site was born from me thinking "hmm, I wonder how I'd do that..." and then trying something out.

So although we probably don't have nearly enough users for gamification to really affect anything, **it seems fun to try**, so I'm gonna try it.

What's the goal?

For a first attempt, I wanted to keep this as simple as possible. I looked into creating "badges" that reward specific behavior: uploading your first game, uploading your 10th game, making your first comment, etc. I daydreamed of implementing something a little more off-the-wall like JGO's social rankings.

But I quickly shied away from that, for a couple reasons: First, I didn't want anything to seem *arbitrary* or turn into a popularity contest. The rewards shouldn't be up to **me**, they should be up to a **fair system**. And secondly, any badge system would inherently involve one more level of complication than a simpler **points** system would.

So, I had myself a goal: give users points for doing stuff, and then show those points next to their names. Easy peasy.

Let's get technical

I actually already implemented a points system, just to try it out, a long time ago. It was never publicized on the site, but anybody who looked at the source on GitHub could have "hacked the site" to see a very rudimentary version of this.

That old version was written before the forum was added, and I really wanted forum actions to count towards a user's point total. That made me a little nervous because our forum uses Discourse, so it's a bit of a black box to me. I wasn't sure how difficult it would be to query the Discourse database, but luckily, Discourse has an API! That means I could write code that visits, for example, http://forum.staticvoidgames.com/users/Kevin.json, and then parse that to get at any information I wanted. No sql required!

So the technical side of this became "just" a matter of putting together my old points code and the new Discourse API code on the server side, and then displaying that on the client side.

To store or to compute?

When "designing" this "system" (I use both terms loosely), there is one question at its core: should points be stored in the database, or should they be calculated every single time somebody loads a page?

I did a lot of digging into how StackOverflow does it, how One Game a Month does it, and I even came across the admin of Rap Genius asking the same question. Pretty funny to think that Static Void Games is trying to be more like Rap Genius! I hoped that there was some kind of framework or library that I could use instead of reinventing the wheel, but it seems like the general solution was to store it in the database.

So, storing the points in the database seems like an obvious choice, but it also requires more work: I'd have to update that points value every single time anybody did anything that affected it. That would require me to modify all of the existing code: here's a quick sketch I came up with of what I'd have to implement:

points system sketch

However, calculating the value "on the fly" would allow me to leave most of the existing code untouched. For example, the game uploader doesn't care about the points system, since the points system will just come in and calculate itself later anyway.

And I'd have to write the "on the fly" calculator anyway, just to get the initial values- it would suck to have everybody start out with zero points! Plus, I'll probably be changing how the points are calculated (what I have now is just a "rough draft") anyway. So, half out of laziness and half out of a firm belief in the "keep it simple, you idiot" principle, I decided to go with the "compute the points every time" option.

That's part of why I love programming. Programming is making a decision and going with it. I could have spent the next month designing a perfect (ha!) system that takes all corner cases into account, but instead, I have something that works. It's slow, it'll probably break in ways I can't even imagine, but it's there. I'm not sure whether that makes me a good programmer or not (certainly I am a bad engineer), but I love the "I have 5 options, so I have to choose one and make it work" of it all.

Ajax ALL THE THINGS

One of the problems with calculating the points on the fly is that it is SLOOOOW. Let's say I want to display those points next to each user's name when they comment on something (like this blog). Let's say it takes about a second (which is forever in computer time) to calculate a single user's point value, and let's say that blog has 5 comments. That means the page will take 5 extra seconds to load! By today's standards, that's pretty horrible- and it will only get worse with more users.

So, what I needed was a way to first load the page *without* any of the point values, and then fill them in **asynchronously**- in other words, without tying up the browser. This will be obvious to web developers, but hey, I'm not a web developer! The solution to this problem is called Ajax.

In the days of olde, the internet worked like this:

  • You visit a site, and the client (your web browser) requests that webpage from the server.
  • The server does all of the calculations, and then **serves** the client the entire webpage.
  • The client loads that entire webpage. Your mouse becomes a little hourglass until it's done.

But modern sites use Ajax to work like this:

  • You visit a site, and the client (your web browser) requests that webapge from the server.
  • The server does **only the calculations required for the initial view**, and then serves the client **that piece** of the webpage.
  • The client loads only that piece of the webpage.
  • The client can then use Ajax to request other pieces of the webpages, either automatically (like in our case) or when the user does something (like scrolling down to view more posts on facebook).

(Yes this is ignoring even more modern technologies like Web Sockets; like I said, I'm not a web developer!)

Ajax all the things

I actually already used a tiny bit of Ajax when I implemented the notifications system. But now that I'm using Bootstrap (which requires JQuery, which includes Ajax features), the whole thing was much easier.

It was really exciting to see how much of a difference a little Ajax makes. I'll be using it a lot more in the future now that I'm more comfortable with it, so you should see the site become much faster. Just to play around with it, the blog listing page uses Ajax to show blog thumbnails based on images found in the blog text. Sure, that should probably just be saved in the database, but remember what I said about the whole point being having fun?

So there's the technical part: I calculate the points on the fly on the server, and I use Ajax to load them on the client after the page is done loading.

You're doing it wrong

In addition to displaying points next to a user's name, your own points are always displayed in the navigation bar. To make this responsive (so you can see changes to your points without refreshing the page), I simply set up a timer that checks your point value every 5 seconds. This is exactly how the notifications work.

And that's a pretty stupid way to do things. Since your points and your notifications don't change very often (certainly not once every 5 seconds), I'm making a ton of extra requests to the server. Instead, what I need to do is only update your display **when something changes**.

Coming to this conclusion involved a lot of spying on other websites- from your browser, hit the F12 key, and then go to the "Network" tab and refresh. It's really interesting to see what's going on behind the scenes! (Especially for us non-web-developers!)

To do that, I'd need to implement something called long polling (I sprinkle random links everywhere, but this one is worth clicking). I'd need to use Ajax to request a points value from the client side, and then only respond to that request from the server side when something changes. But to do that, we go back to the original problem of modifying all of the existing code to detect those changes. And if I'm going to do that, I might as well just store it in the database.

And that's probably what I'll do eventually. But for now, it works.

Get to the points!

By now, you might be asking: how are points calculated? I've come up with a very rough draft of this "algorithm", and I'm very open to suggestions, but for now the way it works is:

  • You get 100 points for uploading a game.
  • You get 20 points for writing a blog.
  • You get 10 points for leaving a comment.
  • You get 10 points for starting a topic on the forum.
  • You get 5 points for posting a reply on the forum.
  • You get 2 points for receiving a like on the forum.
  • You get 1 point for giving a like on the forum.

That might be horribly unbalanced, and I predict this will drastically change over time. I'm very open to suggestions! But the idea is to reward people for doing stuff on the site, and mostly to **have fun**.

The overhaul continues

I've been redoing the site to use Bootstrap in a feeble attempt to make things look prettier. I've finished the homepage, the blog page, and the user profile page. I've been pleasantly surprised by how painless that process has been- whether that's a good sign or a bad sign remains to be seen.

You can view a breakdown of your points on your profile page, and you might also see a list of suggested actions. For example, users who haven't uploaded a profile picture will see a message reminding them that they can do that. I could see those becoming badges or something in the future, but for now, I hope it helps new users with the "now what?" feeling.

From here I'm going to continue bootstap-ifying the site: the game pages are next. I'll also probably fix the polling issue with the points, and add better notifications for when your points value changes... unless I think of something else that seems more fun to try first.

What say you?

Leave a comment to see how the points are displayed next to your name. I'm hoping it's not too obtrusive, but just enough to encourage and reward people.

How do you think the points should be awarded? Am I giving too many points for games? Not enough? What other things should give you points? What kinds of stuff could we build off the points system: badges? Titles?

Do you think it's important to allow people to opt out if they don't want to see any gamification, or does that defeat the purpose? Should we just call them points, or is there a more fun "Static Void Games"-esque term we should use?

I'm sure there are going to be bugs in this new stuff, so any testing is appreciated!

Also, what do you guys think of the dark theme? Does it make the blog hard to read? Maybe blog pages should have a lighter theme?

Advertisement