fogbound.net




Sat, 20 Feb 2016

Anniversary Game

— SjG @ 10:17 pm

So, for our tenth anniversary, I thought I’d make something slightly more … dynamic … than your standard Hallmark card. I thought a simple JavaScript game might be fun.

Since everyone knows that a happy marriage is made of unicorns and rainbows, I figured I’d work with that. My first though was a single-level platform game. I looked at a number of JavaScript game frameworks, and they were all either much too simplistic or much to complicated for what I wanted to do. I spent too much time in the process of starting a game with a new framework, getting frustrated, and then abandoning it. Oh no! I was running out of time!

I decided to bail on frameworks, and just write a quick, simple, pure JavaScript game. I would use animated GIFs as sprites, and do the rest in Canvas. Seems easy.

I raided the usual sources for my assets. I needed a unicorn, so I gave a horn to the Wikipedia running horse animated GIF (which itself is derived from Muybridge’s photos) and knocked out the background. It looked pretty good on a white background!
ur
I then made some animating rainbow hearts, and I was ready.

After the initial stab at coding, unicorns would run back and forth, and rainbows appeared where the user clicked. If the unicorn was within the rainbow ring, I’d register the hit. I was well on my way.

Next, I added the score animations. I was impressed by how smoothly the animation all worked. On a reasonably recent machine, browsers keep up very nicely. Then I went and tested on iOS. Uh-oh. I’d not been very careful about browser size. I ended up recoding the CSS and dimension code to be more or less responsive. OK, seemed good. I added an explosion of hearts effect for when you hit the unicorn. Next, I found a nice source for sounds.

One of the problems I faced was that I was trying to develop the project while sitting on the sofa in the evenings. I’d come home from a long day of coding, and, well, start coding. But then Elizabeth would come home, and I’d have to keep switching windows to avoid creating suspicion. This is where the ability to disable the audio came in. Over the course of a week, I was able to polish it up enough for deployment. It’s far from perfect, but it was well received.

game-1

game-2

Play it yourself, or use the code to create your own game.

Some Lessons Learned:

  • Players will resize the window in the middle of a game. The code should probably trap for that, and do the right thing.
  • I expected players to launch a single rainbow at a time. In fact, there was a whole lot more clicking than that.
  • It might be faster to write a game from scratch, but seriously, take the time to learn a framework and use it. With any luck, it will handle all those weird edge cases, and probably have better support for odd platforms.
  • Sound in JavaScript is nasty, and not very portable. Again, use a framework (or commit to modern browsers, and use Web Audio API).
  • Responsive design is all good, but for a game, it might make sense to commit to a fixed size for playability.
  • Under iOS, things don’t work quite as you’d expect. This game should have been optimized, and used something like the touchAction style to improve playability. Better yet, I should have created a native version with PhoneGap.

Wed, 27 Jan 2016

Onion Texture in Javascript and Canvas

— SjG @ 9:23 pm

When I’m focused on other things and doodling, one of the textures that regularly emerges is a fill pattern of concentric irregular circles.

onions_1
(click to enlarge)

Now, doodling is a way of letting my mind idle. Why I’d want to automate that, I couldn’t say. But for some reason, I did.

So the question was: how do I draw a “sloppy circle,” or one that’s not exactly regular, especially if I want to then draw another similar circle inside of it, and so on.

I settled on the idea of picking a set of points around a circle, with roughly the same radius. If I just drew a line between these points, it would be a regular polygon, and not as gentle as I’d like. So, instead of lines, I needed gentle Bezier curves from point to point.

To get the Bezier control points, I need to create a tangent to the radial line, and put the control points for the curve on that tangent. But how far away from the original point? Better make it a variable!

So, with some playing, I was able to get reasonable values.

You can play with it yourself!

You can easily get results like these:
onions_2

onions_5

onions_3

onions_4
(click to enlarge any of them)

onion_exp_f

Fri, 11 Dec 2015

SSL

— SjG @ 3:14 pm

Henceforth, the Mighty Fogbound Empire is only accessible over SSL.

locked


Wed, 11 Nov 2015

Mac Ports and X-Code Command-line tools

— SjG @ 1:59 pm

I was setting up a new Mac with Mac Ports… and ran into a weird problem.

First, installed Xcode from the App store. Took a long time, but was done. I mistakenly thought it had installed the command-line tools, because now I could run commands like “svn” from the command line. The Department of Tautologies reminds you that some command-line tools are command-line tools, and others are not.

So I tracked down my build problem to the fact that command-line tools were not installed. Following every guide everywhere, I typed:
xcode-select --install
But instead of the expected glorious dialog box and installation, I got the virtually-un-Googlable error:
xcode-select: error: no developer tools were found, and no install could be requested (perhaps no UI present), please install manually from 'developer.apple.com'.

To make a long story short, the problem was that I ran the xcode-select as root. Eventually, I found that running it as an ordinary user worked as expected.

After that, command-line tools are properly installed, and ports work as God intended them to.

Aside:
There are a lot of deceptive distractions out there.
Typing, for example, xcode-select -p returns the correct /Applications/Xcode.app/Contents/Developer path that you’d expect.
Similarly, the error in the port build was that the directory /usr/include does not exist.
Don’t be deceived. These are lies!


Sun, 18 Oct 2015

Yii mystery on Mac

— SjG @ 3:07 pm

I upgraded the Mac to Yosemite a year or so ago. Yesterday, I wanted to do some development on a project that I’d been idly thinking about. Unfortunately, it required a dependency in a package I’d installed via Mac Ports. I tried to upgrade it, but got an error that I was compiling for the wrong Darwin version. This means I haven’t actually updated any of my Ports since upgrading to Yosemite! For shame.

Rather than fix Mac Ports for Yosemite, and then again when I upgrade to El Capitan, I decided it was time to do that upgrade and then fix it. I went through and did so, and upgraded all my ports, and it all seemed to go well. I went from PHP 5.3 to PHP 5.5, and MySQL from 5.1 to 5.5, and it went without a snag — the web server came up and my old configuration was good, databases same. Everything seemed sweet and easy!

Ha! Sweet and easy with software? Not so fast, buckeroo! Working on another project, I found that Yii was crashing — but only from the command line!
exception 'CDbException' with message 'CDbConnection failed to open the DB connection: could not find driver' in /Users/samuelg/project/unicorn_rainbows/framework/db/CDbConnection.php:399

I quickly through a page up with phpinfo(), and saw that all the usual suspects were valid:

  • I was running the PHP I thought I was (Mac Ports version 5.5, not the built-in Mac OS version)
  • It was using the php.ini file I thought it was (in /opt/local/etc/php55/)
  • PDO was installed
  • PDO’s MySQL driver was installed
  • PHP’s configured recognized the drivers
  • Paths to any config files were correct
  • Ports were all normal
  • Default path to MySQL socket file was correct

Of course, this all makes sense, because my web pages that access the database were working.

So why not from Yii’s console program from the command line?

A quick php -version revealed the problem. It wasn’t the database configuration at all! Well, not exactly.
samuelg$ php --version
PHP 5.6.14 (cli) (built: Oct 15 2015 16:20:41)
Copyright (c) 1997-2015 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2015 Zend Technologies

Wait, what? PHP 5.6? But… how?

samuel$ port installed | grep php
...
php55-mysql @5.5.30_0+mysqlnd (active)
php55-sqlite @5.5.30_0 (active)
php56 @5.6.6_0+libedit
php56 @5.6.14_0+libedit (active)

Yup, somehow, I’d installed some PHP 5.6 packages as well!

To solve the problem quickly, I uninstalled PHP 5.6. I could have upgraded everything to 5.6 (or just inactivated them, I suppose), but I just wanted to work on my original problem, not spend my day on system configuration.