Category Archives: SuperHappyFunTimes

The Story of HappyFunTimes

I never intended to make HappyFunTimes what it is today. This is I guess an example of what happens when you just do something. Things happen.

It started off when I was working on Chrome. I learned about WebSockets. I might have seen some tutorial on how easy they are to use. I think I read about Socket.IO, a popular library that can use WebSockets and it just occured me, as it has several others, that it would be easy to use WebSockets to make certain kinds of games.

My first game was PowPow. You can see the commit history shows it was made around April 10, 2011. That’s 3 years before I started on HappyFunTimes. In fact the video linked to on that page is from April 8th. At the time I had people using their laptops as controllers. After that one day playing I tried making phone controllers. Being April 2011 it was still common for Android phones NOT to have multi-touch or to have broken multi-touch so if you go look at the code in that repo you’ll see the iPhone controls are Left/Right/Fire (3 fingers) but the Android controls are “point the direction you want to go, tap to fire” (1 finger)

At the time I thought it would be good to make a library but when you’re working full time, or when I am, it’s often hard to find motivation to do things outside of work. I suppose that’s kind of stupid since I made PowPow outside of work but it only took a few days. So, I guess I have no idea why I find motivation for some things and not others. If I had infinite time and infinite motivation there are sooo many things I’d work on.

As a side note, in 2012 I used the same tech for our Molyjam game, “Octopi Everything” which I plan to port to HappyFunTimes (if I can motivate myself :P)

Then last year in June 2013 I quit my job at Google. I traveled and goofed off and didn’t really know what I wanted to do. In March I found myself in Kyoto for Bitsummit. There I met Eddie Lee and Kalin of Funktronic Labs along with Sagar Patel, Andrew Palmer, and Edwon. Also in Tokyo I had previously met Alvin Phu and they were all so inspring. Everyone was working on something. Alvin in particular had a fulltime job with crazy Japanese overtime and still was working his ass off on his own game.

So, I started feeling like I should get off my ass and start working on something. I still had no idea what but I should at least spend time making something, anything. I thought about it and though, “ok, fine. I guess I’ll turn that code from powpow and octopi into a library finally and then maybe make a mobile game after”. I thought it would take at most a couple of weeks. I didn’t intend to make any money. I just thought it would be fun to put out the library and maybe have a game jam (which I still need to do!)

And, it did only take a couple of weeks at most. A few days to pull out the library. A few hours to make the first sample. But, if you’ve been to a game jam in the last few years or paying attention to indie dev everyone and their sister is using Unity3D. So, I felt like if I wanted to get any usage I needed a Unity3D version so you could make the games in Unity. Since the controllers have to be written in JavaScript I needed JSON support for Unity because JSON is how JavaScript communicates. There’s something called JSON.Net but it didn’t fit my use case. It’s a fine library I guess but in order to support the features I needed it required .NET 4.0 and Unity only supports .NET 2.0. So, I had to write my own. That was probably several days of work. As another aside I find it super frustrating to think “I’m going to do X and I’ll be done in a couple of hours” only to find that I first have to do “Y” which itself is going to take hours to days. I did get to learn some deep dark secrets of .NET though and with that working I reproduced the simple example in Unity

Next up I thought I should try dual stick controls. Partly because I wanted to make a unity example that shows walking a character around. So I hacked together ShootShoot.

With that working I got a unity character example working which didn’t take too long but took longer than expected dealing with UnityScript vs C# issues.

After that I wanted to see how a platformer would play so I threw together JumpJump and shortly after that I decided I wanted to make something showing off round based play among other things and wrote BoomBoom.

I ran into another issue which was I could not get consistent performance out of Chrome using the Canvas 2D api so I ended up writing JumpJump and BoomBoom in WebGL. That ended up making some useful libraries like a single quad single draw call tile map renderer as well as a runtime color adjustable sprite system.

In writing these games though things kept popping up. For example, originally you’d need to go to long and complex Urls. To play jumpjump for example you might open a browser and go to http://localhost:8080/examples/jumpjump/gameview.html then you’d get out your phone and go to http://192.168.2.9:8080/examples/jumpjump/index.html. That’s a lot to type, especially on a phone. Of course I used bookmarks and other things to make it go faster but eventually I got tired of typing so I thought, “hmm, I’ll write a script that generates an index.html that lists all the controllers”. I wrote that. I also wrote ones to list the games. Now I could go to http://localhost:8080/games.html to pick a game and controllers could go to http://192.168.2.9:8080/ and pick the corresponding game. That was much better. So much less typing.

But then, I realized if there’s only one game running why not just send the controller there automatically. So added a script to the page contollers go to that lists the games to check which games are running. If there is only one just go to it. This was awesome. Now I’d start a game, then on the phone I’d just go to http://192.168.2.9:8080 and it would automatically join the game! It seemed so awesome!

That led to the next step. Using the same code, when game disconnects the phones get notified so I used the same code that checks if any other games are running. If there is only 1 game running I jump to that game. The effect was that the system felt like a virtual console. I’d start it up, phones would connect, they’d jump into the game, and if I switched games they’d all jump to the new game. This was feeling really really great. There was even the added and unintended bonus that I reloaded the same game the controllers would see that as the one game running and reconnect. That was great for development. I’d tweak the game and click “reload” in the browser. That would have the effect of having all the controllers auto-reload. Faster iteration times FTW!

It still sucked though to ask people to go to their phone and type in something like http://192.168.2.9:8080. I knew about Captive Portals. They are those things you see when you use hotel WiFi or coffee shop WiFi and it asks you to log in inside the browser. If I could get HappyFunTimes to support something like that I could make it so when players connect to the WiFi they automatically connect to the game, no typing anything at all. It took a few days but I got it working. Note that feature only works on iOS and it only works if you configure your router a certain way to let HappyFunTimes respond to certain requires but the effect is pretty amazing. On Android some of the same code means if HappyFunTimes is setup this way users can just got to any Url to connect so I tell them go to to h.com or something like that and they connect.

These things are simple to explain and maybe it seems obvious but my impression is most people don’t really get it until they see it in action. I think even tech heads think “Yea, type some long address and you’re in” but when I actually demo HappyFunTimes in a room full of people and they see everyone effortlessly connect and play some games and they see me switch everyone to new games and go through all the demos it’s pretty impressive.

Announcing HappyFunTimes got a few people using it and I quickly realized I had some problems. All the games had to be checked into the same repo, or at least there was no easy way to separate individual games from the system. On top of that I had tried to show it at a certain event run by industry people. I sent them a link thinking “these are game developers, they won’t have a problem following the 5 steps to install to check it out”. Instead I got back a message something like “Wow, that looks hard”. Of course at the time I didn’t intend for end users or regular gamers to install it but gees!!, if an actual developer was bitching about installing node.js and cloning a git repo then there’s no way anyone else is ever going to get anywhere except for the most dedicated.

So, those two issues led to do things.

  1. I absolutely had to make an installer for at least Windows and OSX

    It had just install and work, no setup.

  2. I had to find a way to separate the games and make it easy for others to add their own games to the system.

Those two things led to several features. For the installer it wasn’t enough just to install. I also had to come up with a way to easily connect phones to the local game without having to configure your router and without having to type long cryptic Urls.

My first solution was to make happyfuntimes.net and write a script that scanned for the local happyfuntimes. Basically if you’re running Chrome on Android it could figure out your local ip address. Say 192.168.2.37. It would then ping every address on that network and see if it got the correct response. It worked! But, iOS Safari doesn’t have the feature to look up the local ip address. My next solution was if I can’t find out the local ip address then I’ll just guess. Most routers use a common set of addresses. I’ll just try them all. Unfortunately trying them all took > 5 minutes. I added some heuristics to guess better and therefore faster but it mostly didn’t work well.

Then the more obvious ideas was I should change happyfuntimes.net so when happyfuntimes starts it tells happyfuntimes.net its ip address. When a phone goes to happyfuntimes.net, happyfuntimes.net can see the matching ip address and tell the phone where to go. Problem solved!! Telling users to go to happyfuntimes.net is not as nice as auto-connecting but it’s not a cryptic Url so it’s easy to explain to users. Of course I wish is was just hft.com or something simularly short but short URLs are expensive 🙁

Next up was separating the games. npm, the node package manager, suggested a way to do it. It took a lot of trial and error though to finally get it working but the result is http://superhappyfuntimes.net and the related system.

The funny thing is though I never intended to take it this far. Each piece is just the next logical step as I built things up. I don’t know if there is anything to take away from that except that just doing stuff for the hell of it often leads places. Make some simple game or demo or app and you’ll likely end up with pieces of code or tech that you can use on the next thing or you’ll see how to tweak what you’re making into the something else and after a while you’ve made way more than you ever expected. I guess like they say, “Just do it!”

Why JavaScript

There are several reasons.

  1. It means no install required. Users can show up at some event and participate immediately.

    Potentially even other phones like Firefox OS phones or Windows phones or Xiaomi Phones should all work.

  2. It requires no approval from Apple.

    I’m happy that Apple seemingly does a good job of keeping malware off of iOS but I’m not so happy that they have to approve every app. Even if your app is not malware they might say no.

  3. It lets anyone make a custom controller.

    Theoretically you could use any language but Apple strikes again. Even if I decided to make an app Apple does not allow code to be downloaded into an iOS app except for JavaScript executed by Safari embedded into your app. So, even if I made an app, JavaScript is the only choice Apple allows. Of course you’re always free to transpile from some other language into JavaScript. With iOS8 now finally supporting WebGL that means in the near future the sky’s the limit on where to go with controllers in JavaScript! I’m looking forward to what people come up with.

I shipped!

superhappyfuntimes.net IS NOW LIVE!

Like I mentioned previously I’m pretty worried it can’t handle the traffic because it’s using meteor. I’d like to re-write it to just be as simple as possible but it’s time I don’t have at the moment so I’ll cross my fingers.

It’s version “super-alpha” which means I’m sure there’s 1000+ issues. You can seem some of them listed in the todo file in the repo. I’m sure I should be using issues or trello or something else to track todo’s but at the moment since it’s only me I find editing a text file a lot easier. If people start contributing I’ll have to move to something else.

But, that said, it does seem to work. The steps to run are probably less than obvious though. Listed below

  1. Download HFT and install it (see note below!)
  2. Run it
  3. Click the link for “superhappyfuntimes.net”
  4. Install a game
  5. Launch the game
  6. Make sure your phone and friends phones are on the SAME NETWORK as your computer.
  7. On the phone go to happyfuntimes.net

That’s it.

So many things to do and so many ways to make it smoother that I have to work on but it seems to work

Note: Please if you made a game migrate it to the new system so you can post it on the gallery.

NOTE: On Windows 8 (and 7?) Windows will block installation. Windows now requires your code to be signed. Signing costs $200-$500 or if you’re lucky you can get a free signature for open source project. I’ve applied but I haven’t heard back yet. Hopefully I get that issue solved. For now, after you download the installer, you’ll have to go to your Downloads folder and double click it. You’ll probably get a message something like

Windows Protection

Click “More” and you’ll see this.

Windows Warning

Click “Run Anyway”. After that you’ll have to find HappyFunTimes. On the start screen there’s a tiny message at the bottom

Windows New Apps

After that you’ll find it under H

Windows HappyFunTimes

If I’m lucky adding the signature I mentioned above will remove some of these steps.