TENTERHOOK
The official development blog for the Tenterhook adventure platform.
Tenterhook development blog

Major progress! But there's still a long road ahead.

I've revamped the menu system, refactored the Studio directives, and implemented most of the dialogue system. This is cause for celebration, but clearly I've got a long way to go.


It's all about the task list

I've restructured this site a bit and put the Tenterhook task list front-and-center on the home page. This underscores the fact that I'm 100% committed to launching the platform.

It's true that a bit of dust might collect on this dev blog over the next few months. And that's okay. For now, I'd rather devote my attention to building the actual platform than blogging about the technical minutiae. There will be plenty of time to blog about the development process when the official Tenterhook web site is launched.

I can say with confidence that when the Tenterhook launch will be a significant milestone in my technical career. Rather than rushing it out the door, I'm taking the time to get it right.

Very exciting times ahead!


An old friend returns, provides a spark

Several years ago, when Microsoft Silverlight had a pulse, I developed a point-and-click adventure game called Buddy Knavery: The Killer Riffs. Much to my pleasant surprise, Microsoft even featured the game on its Silverlight Showcase when it existed on silverlight.net. Suddenly thousands of people around the world were checking out my creation. A career highlight to say the least.

Buddy's been slumbering peacefully in the back of my mind since the demise of Silverlight. But Tenterhook is taking shape and characters are coming back to life. When it was time to start testing animation-related components, I couldn't think of a better candidate than Buddy himself.


A few early milestones

Development is rolling right along, with most of the work focused on Tenterhook Studio and scene management. The short clip below is an early glimpse into managing two key aspects of a scene: pathing (the "graph") and visuals, which are images placed on top of the scene.

Yeah, I'm having a little fun with the placeholder scenes and visuals. :)

The most challenging part of Studio is organizing features and options in a way that's semi-intuitive. My goal is to make Studio incredibly flexible and fully featured without clobbering users with too many options. I'm sure I'll fall short on that front when it comes to certain features, but I'm hoping to smooth out those edges with a few walkthroughs.


A few early milestones

I'm starting to feel pretty comfortable with AngularJS, though I've had the same questions most newbies have — the best way to share data across controllers, when to put code in "link" functions versus directive controllers, and so on.

Those questions aside, I'm really starting to hit my stride, not just with Angular but the structure of the Tenterhook platform itself. I'm staying disciplined in defining clear distinctions between the "studio" and "core" areas so I don't end up with a tightly coupled mess.

The first big milestone on the studio side was implementing the Angular version of the pathing "lab" I'd put together a while back. My initial experiments have gone well:

Note: the image and toolbar buttons are placeholders, I'm not focusing on a pretty UI just yet.

I'm also ramping up on unit testing tools and frameworks, specifically the combination of Karma, Mocha, and Chai. Thanks to a terrific blog article I'm feeling pretty optimistic about this combination even though I'm way outside of my comfort zone.


Neck-deep in AngularJS — and loving it

This past week was pretty crazy. In addition to slowly wrapping my mind around AngularJS, I finally attempted Entity Framework Code-First for a project at work. It was quite a departure from my comfort zone since I've gone the DB-First route for years.

Code-First felt natural in a very short time, and initially I thought I'd also tame Angular fairly quickly. But alas, it seems the giant leaps I took early in the week were actually baby steps. I began to scratch beneath the surface and found that I wasn't dealing with a trivial framework with a sprinkling of data-binding magic here and there. No, it seems AngularJS is a whole other world.

Luckily, my personal and professional projects are aligned in terms of technologies to explore, so I've been actively learning for 12+ hours a day. And this weekend was one of those weekends that every developer experiences now and then, a battle that ebbs and flows from frustration and misery (Saturday morning) to glorious victory and giddy excitement (Saturday night).

Now that Angular has finally started to "click" my entire mindset has changed. My original approach to Tenterhook might've simply involved a series of JavaScript modules that were stitched together by jQuery-based eventing. Now I'm drafting diagrams that look a little different:

Granted, the above diagram may seem like over-engineering at first glance, but it's actually the opposite. Angular has forced me to stay honest and get familiar with its mechanics. And I'm so glad for that. Had I started throwing together code without understanding things like isolate scopes, directives, and transclusion, I would've been in a world of hurt down the road.

I still haven't officially set up the Tenterhook solution, but progress is still blazing ahead. I've spun up a number of "lab" projects where I discover how to make things work the Angular way, and it's been a ton of fun... now that I have some sort of clue what I'm doing.


It's all coming down to the wire(frames)

It was another productive weekend as I experimented with AngularJS, drafted an outline of all major features in the "studio" portion of the platform, and officially started the wireframes.

I have to tell you that I absolutely love Balsamiq Mockups. It's one of the most intuitive and powerful tools I've ever used and the $89 single-user license is a bargain. Try the desktop version and I think you'll agree. And no, I'm not affiliated with Balsamiq in any way. :)

The wireframing process is really helping me work through some of the UX/UI challenges and it's keeping me focused. It'll save me a ton of time overall since I'll be far less likely to run into something unexpected, something that requires a refactoring of code.

It's wireframes for the rest of the week, but I might break ground on actual code soon!


The path to adventure starts here.

Whenever I tackle something new/complex I throw together a "lab" project. I don't worry about a pretty UI or optimized code, I just want to see how/whether something works. And so, I wondered if I could take A* pathfinding code from one of my old Silverlight projects and port it to JavaScript.

As ugly as it is, the screenshot below represents an important milestone in Tenterhook development:

Note: the visuals are only for testing and nothing in the screenshot suggests what Tenterhook will actually look like. That said, let's break down what we're looking at:

  • An image of a kitchen (the "scene") fills a 1000x600-pixel viewport.
  • An image of a puppy is overlaid onto the scene. I call him Murphy.
  • A grid of 20x20 squares is rendered on top of the scene.
  • I "painted" various blocks of the grid. Green blocks are where characters can walk, the blue block is the starting point and the red block is the destination.
  • The yellow blocks were selected by the algorithm as the suitable path, which properly detours around Murphy. A character could also walk behind Murphy if needed.

The performance is quite good, with analysis of the grid (happens only once per scene) taking roughly one second while paths are found in just milliseconds. One could argue that A* is overkill for this scenario, but it certainly can't hurt. A few years ago I wrapped my mind around how the algorithm actually works, then I forgot most of it. Now I'm motivated to understand it again.

This experiment paves the way for key features of Tenterhook, including the ability to "paint" walkable areas of a scene. More importantly, I can rely on a pathing module to pick suitable paths.


It's time to ramp up!

I'm excited to kick off the first phase of the Tenterhook roadmap, to finally start converting ideas into concrete plans.

For the next week or two I'll be whipping together mockups using Balsamiq Mockups, an incredibly useful tool and time-saver. At the same time I'll be ramping up on a number of tools and frameworks. It's a different technological landscape than what I'm used to, and it's a little daunting when I think about all the things I'm diving into. Luckily I'm learning the same things at my full-time job so I'll be ramped up in no time.

The technology lineup is pretty much settled and has a mixture of usual suspects and fresh faces:

Microsoft Visual Studio

A majority of the web-based Tenterhook magic will be JavaScript but the backbone of the site will be ASP.NET MVC and Web API. More importantly, Visual Studio will be the environment for building the Windows 10 libraries and Universal App solution/template.

Microsoft Azure

The Tenterhook site and Web APIs will be hosted in Azure, but the most important feature on the Azure front will be Blob Storage. When users build an adventure they'll upload various assets (images, sounds, etc.) to be stored in a blob container.

AngularJS

I've enjoyed using knockout.js for other projects but it's time to tackle AngularJS. It's a fairly dramatic shift in my approach to JavaScript so I'm taking a few Code School courses to get acclimated.

The biggest challenge will be figuring out the best ways to organize my code and when to use one feature over another (i.e. services versus factories versus providers). But I can tell I'll love AngularJS and it'll be very well-suited for Tenterhook.