Tim's Blog

Shadow Codex 2 Now Available For Pre-Order

Fri, 18 Oct 2019 12:44:12 GMT

I'm excited to announce that Shadow Codex 2 is now available for pre-order on the App Store with an expected release date of November 21, 2019!

From the App Store Description:

The beloved word/role-playing game mash-up is back! Battle monsters with words to earn experience, collect and craft equipment to increase power, level-up to improve your stats, and learn magic skills to defeat your enemies in battle!

FEATURES

• Over 40 monsters to battle each with unique abilities and personalities.

• Over 60 skills to learn and master. Can be used to manipulate the puzzle board, heal yourself, or attack your opponent. Use skills in combinations to uncover satisfying strategic opportunities.

• New Crafting system! Collect raw ingredients and materials from enemy drops or the new Forage mini-game to make new equipment, potions, and cook food for healing!

• Collect items with the Forage mini-game. Upgrade your storehouse to store all of the goodies you'll find.

• Test your spelling prowess in the timed Endurance Challenge mini-game to earn extra gold and experience.

• Defeat enemies to gain access to loot boxes and keys to open dungeon doors.

• New skills and equipment unlock as you level-up.

• Defeat enemies to uncover keys to open dungeon doors or reveal a gift box with something special in it!

HOW TO PLAY

• Fight a monster by spelling words to gain points. Each letter scores a different amount based on its rarity. Spelling is accomplished by selecting letters that are adjacent to each other.

• Score +12 points or more to gain an extra attack! Or find words with a gem on a letter to gain 2x the points!

• Use the points to gain weapon attacks. Each attack can be banked until you want to use it. Strong weapons use more points for an attack. Some weapons can use two attacks at a time.

• Consume mana to use skills and spells to manipulate the puzzle board, or cast an effect on your opponent.

• Use items to heal yourself or increase mana in battle.

• Collect items to craft new weapons and armor or buy items from the in-game shop using in-game currency (also available to buy through in-app purchases).

Forget about those tired match-3 RPGs and try something different - what players are calling a "breath of fresh air."

Announcement: Shadow Codex 2

Thu, 23 May 2019 13:34:00 GMT

I just wanted to announce that I've started work on the sequel to Shadow Codex, tentatively named Shadow Codex 2. Here is a list of new things coming to the game:

User Interface update and improvement - the game is going to portrait mode with the puzzle board in the middle and one opponent on top and one on the bottom. This gives it a much better experience on the phone and uses the space available in a more phone-centric way. You will be able to play using only one hand.
New characters to fight with more advanced AI.
An entirely new adventure, new story, and new quests.
About half of the spells will be new offerings (with some updates to existing spells). Spells have been renamed "skills", btw.
New tile power-ups: XP and MP bonuses.
Two new mini-games.
There will be some sort of crafting (details are still being designed).
Generally, faster, sleeker and more polished.

Technical:

Better support for screen sizes for iPhone X (all models) and iPad Pro
Possibly Android support

I think the biggest change is going to be the move to portrait mode. When I originally conceived the game, I had no expectations of releasing on phones. That's why it has a 16:9 landscape orientation and doesn't fit quite as well with modern phones like the iPhone X. With Shadow Codex 2, that will no longer be the case and all phone models will be supported so that the screen fills out and uses the most space it can to be universal, even on non-phone devices like iPad.

I'll probably be posting some screenshots soon when I get a bit farther along and do some phone builds of the game.

Shadow Codex Released!

Sat, 09 Mar 2019 01:19:00 GMT

Shadow Codex, a turn-based RPG that uses a word game combat mechanic has been relased on the popular indie games site itch.io! It is available for Windows or macOS. Alternatively, you can purchase on the Mac App Store.

Watch the Trailer:

Shadow Codex Available For Pre-Order!

Thu, 07 Mar 2019 14:02:00 GMT

My latest game project is finally done: Shadow Codex which is a unique word-game/RPG hybrid. It is available now for pre-order on the App Store for iPhone, iPad, and iPod Touch and is also available on the Mac App Store for macOS.

Here is a video showing the first few minutes of gameplay:

From the App Store Description:

Battle for good against an evil force in this unique word/RPG hybrid game! Face off against countless enemies by mastering words, spells, weapons, and items. Explore an ever-unfolding map with characters to meet, stories to tell, and quests to embark upon. Earn gold and visit shops to upgrade your equipment and buy items. Earn experience to level up and improve your character's fighting stats in combat.

In Shadow Codex, turn-based combat is accomplished by spelling words on a shared game board of letters. Pick a letter and chain it to an adjacent letter to form a valid word. Each word you spell will earn a certain score. This score is added to your "action points". If you reach a certain amount as defined by your equipped weapon, you will gain a weapon attack to use. Rare letters and longer words give big scores where you can potentially gain extra turns or numerous attacks! Gems on letters will double the score!

In addition to word-spelling, you can also cast powerful spells. These spells can change letters on the game board, heal you, damage your enemy, and can be learned by defeating foes and completing quests.

EXPERIENCE COMBAT

Face off against over 45 characters and monsters w/ unique abilities!
Earn gold to purchase new weapons with unique stats and abilities.
Earn XP to level-up and improve your stats and magic power.
Cast spells to gain an advantage or aid your word-spelling ability.
Use items to heal yourself and win the battle!

PLAY THE MINI-GAMES

3 extra mini-games help you earn gold and experience!
Test your spelling speed in the Endurance Trial game.
Unlock chests by playing a word search-type game. You never know what you'll find!
Collect or harvest items quickly to aid your fellow citizens and earn rewards!

RavenDB Survival Tip #3: Handling Polymorphism

Thu, 01 Aug 2013 15:00:00 GMT

If you want to store objects in your database that are implementations of interfaces or base classes, you can do this pretty easily by alternating Raven’s JSON serializer settings so that when Raven serializes your object, it includes a special “$type” property in the JSON that records the full type name of the object.

The documentation for RavenDB actually mentions this, but there’s a little change that I do to make it a little more efficient. The docs say to use a TypeNameHandling convention of “All” but this will emit the $type property on every single object. This is a waste of space and creates a lot of clutter. You should instead use TypeNameHandling.Auto. This setting will only include the $type property if the type of the property does not match the actual type of the object.

Here’s how you’d set this up (I’m assuming that you have a DocumentStore instance available). You’d perform this setup only when initially creating the DocumentStore (once per app):

store.Conventions.CustomizeJsonSerializer = serializer =>
{
    serializer.TypeNameHandling = 
        Raven.Imports.Newtonsoft.Json.TypeNameHandling.Auto;
};

Parsing a Time String with JavaScript

Wed, 31 Jul 2013 14:56:00 GMT

Let’s say you are building a UI where you’d like a user to enter a time into a text box. This time value they might enter needs to handle a lot of different formats, but we’d like it to end up as the same value either way:

1pm
1:00pm
1:00p
13:00

Here’s a little JavaScript function to do this work. Most of the interesting bits are the regular expression which helps handle of these various scenarios. It takes a string representation of a time and attempts to parse it, setting the time on the specified date object sent to the function as the second parameter. In the case where you do not provide a second parameter, the current date will be used.

function parseTime(timeStr, dt) {
    if (!dt) {
        dt = new Date();
    }

    var time = timeStr.match(/(\d+)(?::(\d\d))?\s*(p?)/i);
    if (!time) {
        return NaN;
    }
    var hours = parseInt(time[1], 10);
    if (hours == 12 && !time[3]) {
        hours = 0;
    }
    else {
        hours += (hours < 12 && time[3]) ? 12 : 0;
    }

    dt.setHours(hours);
    dt.setMinutes(parseInt(time[2], 10) || 0);
    dt.setSeconds(0, 0);
    return dt;
}

This function will return NaN if it can’t parse the input at all. The logic immediately following the match() call is to handle the noon/midnight case correctly.

Here’s a jsFiddle of this in action:

Fun with Statistics Calculations

Fri, 26 Jul 2013 17:47:00 GMT

A while back I was working on a system where we were going to score work items to measure risk of auditing. Higher numbers would most likely result in an audit while lower numbers would pass. The exact mechanism of measuring the risk is immaterial for this post, so we’ll treat it as a black box number. Furthermore, we calculate the risk on all work items but only update our statistics (as described below) on work items that actually did get audited.

I wanted to know whether the audit score for a particular work item was very far away from the mean or very under the mean. If it was low, the audit risk should be low and vice versa. What we are looking for here is a “sigma” level – or a number that indicates how far away from the mean something is. If something has a sigma level of zero, it means it is equal to the mean. If it has a sigma level of 1, it means it is 1 standard deviation above the mean. -1 means that it is one standard deviation below the mean. Lower levels of sigma are generally better than higher ones in this system. In normalized data, we’d expect over two-thirds of the work items to score within +/- 1 sigma. A sigma number of 6 or higher means that the score would be a very large outlier.

To calculate this sigma value, we need two primary pieces of data – the mean and the standard deviation of the population or sample (i.e. the audit risk scores). I did not want to calculate these values over the entire set of data each time I wanted to compute the sigma level – I just wanted to add it to the previous mean and standard deviation to make calculations really fast.

Let’s start with the mean. If we save the number of data points used (n) and the previous mean calculated (ca), we can derive the new mean given a new data point (x) with the following formula:

new_mean = (x + n * ca) / (n + 1)

Or in C#:

public static double CalculateNewCumulativeAverage(int n, int x, double ca)
{
    return (x + n * ca) / (n + 1);
}

The standard deviation calculation is a little harder. The Wikipedia article at http://en.wikipedia.org/wiki/Standard_deviation#Rapid_calculation_methods describes a method for rapid calculation that requires you to only provide the following variables to compute a new standard deviation given a new data point (x): n – the number of previous data points used, s1 – sum of all previous x’s, and s2 – sum of all previous x^2 (squared). Here’s the formula in C#:

public static double CalculateNewStandardDeviation(int n, int x, int s1, long s2)
{
    if (n == 0)
        return double.NaN;
    s1 += x;
    s2 += x * x;
    double num = (n + 1) * s2 - (s1 * s1);
    double denom = (n + 1) * n;
    return Math.Sqrt(num / denom);
}

This will be a very fast way of calculating standard deviation because you simply don’t have to go over all data points (which also means not reading values out of a database).

The sigma value I talked about earlier can then be calculated given the data point (x), cumulative mean (ca) and standard deviation (s):

public static double CalculateSigma(int x, double ca, double s)
{
    return (x - ca) / s;
}

So all you will need to store in your database is the following scalar values to calculate these stats:

Total number of data points (n).
Sum of all data points (s1).
Sum of the squares of all data points (s2).
Cumulative average or mean (ca).
Current standard deviation (s).

To add a new data point (x) and update all variables to new values:

public static void AddDataPoint(int x, ref int n, ref int s1, ref int s2, ref double ca, ref double s)
{
    ca = CalculateNewCumulativeAverage(n, x, ca);
    s = CalculateNewStandardDeviation(n, x, s1, s2);
    n += 1;
    s1 += x;
    s2 += x * x;
}

Improving on KoLite

Fri, 26 Jul 2013 17:06:00 GMT

In my posts on creating a dynamic menu system, I used KoLite commands to represent what gets invoked when clicking on a menu item. KoLite adds a command abstraction to Knockout that cleanly encapsulates the execution of a command and the status of a command (with the canExecute() computed, you can disable UI widgets that cannot be executed in the current state).

There was just one thing missing from the command that I wanted: the ability to tell if a command is toggled or latched. Latching a command means that the command is “on” and all UI elements bound to this can update their state (for example, a menu item in a drop down menu typically has a checkmark or dot placed next to the item to convey that the item is on or toggled).

The concept of latching is very simple to implement. In knockout.command.js, I added the following code to the ko.command constructor function:

ko.command = function (options) {
    var self = ko.observable(),
        canExecuteDelegate = options.canExecute,
        executeDelegate = options.execute,
        latchedDelegate = options.isLatched; // new

    // new computed; everything else is the same
    self.isLatched = ko.computed(function () {
        return latchedDelegate ? latchedDelegate() : false;
    });
};

This is really simple – it’s just adding a function that delegates to another function you supply when you setup the command. This function you supply represents the logic required to tell if the command is in a latched state or not.

Here’s an example of how this could be used:

var showStatusBarCmd = ko.command({
    execute: function () {
        showStatusBar(!showStatusBar);
    },
    isLatched: function () {
        return showStatusBar() === true;
    }
});

In this example, there’s an observable in the outer scope called showStatusBar that will be used to determine if the status bar in the app is visible. If the user clicks on a menu item bound to this command, the execute() handler will fire toggling the showStatusBar observable. The status bar’s visibility is then bound to this value. Now for latching, the isLatched handler will test to see if showStatusBar is true and will return true if it is.

Now, in the menu system you would probably wire up an element that would show a checkmark or a dot next to the menu item if the command’s latched state is on. Note that you could have two different UI elements bound to the same command (like a menu item and a toolbar button) and both would be synchronized automatically to changes in the app’s state.

Getting Compile-on-Save to work for TypeScript in VS2012

Fri, 19 Jul 2013 15:31:00 GMT

I’m poking around with TypeScript and the word on the street was that a recent addition to the plugin for VS2012 (v. 0.8.x) added the ability to do compilation from TypeScript to JavaScript when saving. I discovered it doesn’t actually work quite right out of the box. There are two things you need to do:

Enable compile on save in the Tools –> Options menu.
Add a <PropertyGroup> to your .csproj file to configure the TypeScript compiler.

To enable compile-on-save, do the following:

Navigate to Tools –> Options.
On the left side, expand Text Editor and find TypeScript, and then the Project sub-node.
Check the “Automatically compile TypeScript files which are part of a project”
Click OK to save changes.

Next, you need to update your project that you are using to contain the appropriate properties to configure the build target for the TypeScript compiler. Add this XML to your .csproj (first, unload the project and then edit the .csproj file manually):

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
  <TypeScriptSourceMap>true</TypeScriptSourceMap>
  <TypeScriptModuleKind>amd</TypeScriptModuleKind>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
  <TypeScriptSourceMap>false</TypeScriptSourceMap>
  <TypeScriptModuleKind>amd</TypeScriptModuleKind>
</PropertyGroup>

Notice that you can set various compiler options here that you normally set as a command-line parameter when using the tsc compiler program. In this case, I added the <TypeScriptModuleKind> element which tells the compiler how to generate the module requiring code. Here, I’ve set mine up to use AMD rather than CommonJS (which is the default). My Target is also “ES5” so it will target ECMAScript 5 rather than the default ECMAScript 3.

Using C# Implicit Type Conversion

Tue, 16 Jul 2013 18:19:00 GMT

I was recently required to connect to a SOAP-based web service that had a very nasty WSDL. It contained tons of complex type definitions for objects that really didn’t need to exist (strings and decimals and integers would have been sufficient). For example, here’s a snippet of a complex type defined in the WSDL that I needed to consume:

public partial class TOTAL_AMT_TypeShape : object, INotifyPropertyChanged 
{
    private decimal valueField;

    public decimal Value
    {
        get { return this.valueField; }
        set 
        {
            this.valueField = value;
            this.RaisePropertyChanged("Value");
        }
    }

    // snip...
}

This class is created by Visual Studio and is the proxy for the TOTAL_AMT_TypeShape object. As you can probably surmise, this is simply a complex type wrapping a number (a C# decimal to be exact). The name is awful, and the whole premise of requiring a complex type for a simple number amount (a dollar amount in this case) makes the use of this type really awkward:

decimal amount = 100000.0m;
TOTAL_AMT_TypeShape totalAmt = new TOTAL_AMT_TypeShape() { Value = amount };

Now imagine this like times 100. It can get really ugly, really fast.

My solution was to rely on partial classes and implicit type conversion. Implicit type conversion is a C# feature that allows you to convert between data types automatically by informing the compiler how to perform the conversion. The conversion happens automatically and should only be used where the conversion will not result in any data loss or possibly throw an exception (if either of those scenarios exists, you should use an explicit cast conversion instead). An example of an implicit conversion built into C# would be int to long conversion. Since an int always fits inside a long, we can assign a long variable to an int without any special effort. The opposite is not true, however, and we’d need to explicitly cast.

Here’s my partial class with the implicit conversion operator added:

public partial class TOTAL_AMT_TypeShape
{
    public static implicit operator TOTAL_AMT_TypeShape(decimal value) 
    {
        return new TOTAL_AMT_TypeShape() { Value = value };
    }
}

The implicit conversion operator overload is defined for converting a decimal to a TOTAL_AMT_TypeShape (the output type is always the name of overload method). We could also go the other way (convert a TOTAL_AMT_TypeShape into a decimal, but I didn’t need to in my case). And because C# allows partial class definitions, if our proxy object definition changes because of a WSDL refresh, we keep our partial intact and the code for the implicit conversion won’t be overwritten.

Here’s how we’d use it now:

TOTAL_AMT_TypeShape totalAmt = 100000.0m;

Nice and neat.

Distributing Monetary Amounts in C#

Tue, 16 Jul 2013 17:42:00 GMT

Many times in financial applications, you will be tasked with distributing or allocating monetary amounts across a set of ratios (say, a 50/50 split or maybe a 30/70 split). This can be tricky getting the rounding right so that no pennies are lost in the allocation.

Here’s an example: split $0.05 in a 30/70 ratio. The 30% amount becomes $0.015 and the 70% will be $0.035. Now in this case, they both add up to the original amount (which is an absolute requirement) but they must have a half penny each to accomplish this. We can’t have half pennies in this situation, so something has to be done with the extra penny.

Now the specifics on where you allocate the extra penny are up to your business requirements, so the solution I present below may not be exactly what you need. It should, however, give you an idea on how to do this split without losing the extra penny. Here’s a static method that will take a single monetary amount (as a C# decimal) and an array of ratios. These ratios are your allocation percentages. They could be the set [0.30, 0.70] or even [30, 70]. They don’t even need to sum to 1 or 100, it doesn’t matter:

public static decimal[] DistributeAmount(decimal amount, decimal[] ratios)
{
    decimal total = 0;
    decimal[] results = new decimal[ratios.Length];

    // find the total of the ratios
    for (int index = 0; index < ratios.Length; index++)
        total += ratios[index];

    // convert amount to a fixed point value (no mantissa portion)
    amount = amount * 100;
    decimal remainder = amount;
    for (int index = 0; index < results.Length; index++)
    {
        results[index] = Math.Floor(amount * ratios[index] / total);
        remainder -= results[index];
    }

    // allocate remainder across all amounts
    for (int index = 0; index < remainder; index++)
        results[index]++;

    // convert back to decimal portion
    for (int index = 0; index < results.Length; index++)
        results[index] = results[index] / 100;

    return results;
}

(Another thing here is that I am assuming pennies and dollars, or at least a currency system that divides their unit of currency into hundredths – notice the multiply by 100. You can change that for universal currency systems to support any currency).

This code works by converting amounts to a fixed point value with no mantissa. So in our example, $0.05 turns into 5. We then iterate over each ratio and compute the amount to distribute using a simple division. The trick here is the Math.Floor(). We round all half pennies down. The half-penny will stay in the remainder variable.

At the end of the distribution, we then distribute all of the fractional pennies that have built up evenly across the distributed amounts. If there are no remaining pennies to distribute, it simply ends. So in this implementation, the first ratios in the set tend to get the extra pennies and the last one loses out. You can change this behavior to be almost anything you like (such as random, even-odd, or something else).

At the very end, we convert back to a decimal portion by dividing each amount by 100.

The final results for $0.05 would be { 0.02, 0.03 }, which adds up to 0.05.

Revisiting War of Words: Postmortem

Mon, 15 Jul 2013 12:00:00 GMT

A postmortem usually happens within a small timeframe after release. Well, I waited 3.5 years, lol. Anyway, this is my take on what went right with design and development and what went wrong.

What Went Right

1. Word Graphs and AI characters

Implementing a word graph to store the word list was a great idea because it gave me so much flexibility in solving problems. I was able to search the graph with the AI engine and find words very quickly. I loved that the Game Studio Content Pipeline allowed me to create processors that could take lists of words and create a word graph structure out of them. I saved off this structure to disk and loaded it very quickly at game startup. I played other word games on the XBox Indie Games platform and many had long load times (probably because they were processing giant XML files or something).

The AI was also a pretty good implementation IMO. It looked very natural, and it scaled up and down in difficulty nicely. It wasn’t perfect, but extending it and tweaking it was pretty simple.

2. Overall Game Concept

The RPG/word game concept is a good idea and I think I executed it well enough when it came to the core game play features. I’m pleased with it and would use it as a template for a sequel if I wanted to.

3. Getting an Artist to do the Artwork

Obviously this is a no-brainer if you want something to look good. I simply don’t have the artistic talent. The take away here is that if you want something to be professional, you need to put the money up to get an artist.

What Went Wrong

1. Some Graphics were not done by the Artist

I decided to do some of the graphics myself which was stupid and I think it led to it looking a little unprofessional at times. I also think the box art could have been better but I didn’t do anything about it. A lot of people judge a game by the box art.

2. The story made no sense and was bad

There’s not much to say here. It wasn’t good. It wasn’t interesting. Maybe it was even laughable. I’m not a writer and I don’t pretend to be one. In the end, a lot of reviewers pointed this out but many would then positively point out that it didn’t matter if the story sucked because the game play was good. The presentation of the story was low tech and uninteresting too.

3. The map was not implemented well and was not interesting

The map needed to be a little better drawn and more interesting IMO. The controls on the map were not done very well. I should’ve used a model where the cursor was more freely controllable by the player. The icon stand-in for the player was stupid.

4. Random encounters were confusing

When you moved between locations on a map, you might randomly be attacked by an enemy. At that point, you can either flee or fight. If you fled, you incurred some HP damage. If you fought, you could usually win the battle but it took too long. This whole process was just not done very well and needed to be re-thought.

5. Shields were a dumb concept

In combat, you could earn shields by scoring big words. The AI character also had shields. If you were about to get attacked, you could tap a button and raise the shields for 5 seconds or so of 50% or better armor. The problem was, however, that human players couldn’t quickly raise the shields and ended up getting hit and then raising them. I bet this made them feel like an idiot. The AI of course perfectly handled shields and it was very unfair. The shield concept should go! You already wear armor so I don’t know what I was thinking.

6. Quests were not interesting

A “Quest” in War of Words was just a scripted encounter (a single battle). There were no other variations on this theme. I should have went for more complicated quests that involved multiple encounters, travel, other game types, etc. I have a lot of new ideas but they didn’t make it into the original and it got boring after a while.

7. Battles lasted too long

Sometimes you’d spend 10 minutes or more on one character. This isn’t good. I did try to make this better at one point but still didn’t turn out as well as I had hoped. If they were shorter, we could have had more of them or they could’ve been more interesting. Another variation on this is that it might have been too difficult to beat. If you got wasted at the last minute, you had to repeat the (long) encounter all over again. I don’t know, I didn’t want the game to be too easy though. It is really hard to judge the difficulty of your own game.

There’s probably a lot more “wrongs” to write about, but I don’t want to beat up on myself too much here :). I think the overall theme here is that polish was lacking in many areas and polish is what makes a game great.

Building a Dynamic Application Menu with Durandal.js, Knockout, and Bootstrap (Pt. 3)

Sun, 14 Jul 2013 17:10:00 GMT

In the last two posts of this series, we built a dynamic menu system. Now it is time to wrap it up with a discussion on how to actually populate and use these menus.

One idea is to create the concept of a workspace which represents the UI that the user sees for the application. The workspace is like a top-level window in a desktop application. The following module defines a workspace that contains a list of menus and defines a routine to take arbitrary menu layout objects and convert them to Menu and MenuItem instances:

define(function (require) {
    var Menu = require('ui/menu'),
        MenuItem = require('ui/menuItem'),
        menus = ko.observableArray([]);

    function setupWorkspace(cmds) {
        menus([]);

        var menus = {
            "File": [
                { text: "New", command: cmds.new },
                { text: "Open", command: cmds.open },
                { divider: true },
                { text: "Save", command: cmds.save },
                { text: "Save As", command: cmds.saveas },
                { divider: true },
                { text: "Sign out", command: cmds.signout }
            ],
            "Edit": [
                { text: "Cut", command: cmds.cut },
                { text: "Copy", command: cmds.copy },
                { text: "Paste", command: cmds.paste }
            ],
            "View": [
                { text: "View Mode", subItems: [
                    { text: "Simple", command: cmds.toggleSimpleView },
                    { text: "Advanced" command: cmds.toggleAdvancedView }
                ]}
            ],
            "Help": [
                { text: "Contents", command: cmds.helpcontents },
                { divider: true },
                { text: "About", command: cmds.about }
            ]
        };

        loadMenus(menus);
    }

    function loadMenus(menuDefinitions) {
        var menuText, menu;
        for (menuText in menuDefinitions) {
            menu = addMenu(menuText);
            addMenuItems(menu, menuDefinitions[menuText]);
        }
    }

    function addMenuItems(menuOrMenuItem, itemDefinitions) {
        for (var i = 0; i < itemDefinitions.length; i++) {
            var definitionItem = itemDefinitions[i];
            if (definitionItem.hasOwnProperty("divider")) {
                menuOrMenuItem.addDivider();
            }
            else {
                var menuItem = new MenuItem(definitionItem.text, definitionItem.command);
                menuOrMenuItem.addMenuItem(menuItem);
                if (definition.hasOwnProperty("subItems")) {
                    addMenuItems(menuItem, definitionItem.subItems);
                }
            }
        }
    }

    function addMenu(text, position) {
        var menu = new Menu(text);
        if (position) {
            menus.splice(position, 0, menu);
        }
        else {
            menus.push(menu);
        }

        return menu;
    }

    var workspace = {
        menus: menus,
        addMenu: addMenu,
        setupWorkspace: setupWorkspace
    };

    return workspace;
});

The main application shell should call the workspace singleton’s setupWorkspace() function and pass in an object that contains references to the desired ko.commands that will get attached to the menu items. It can also use the menus property in its data-binding to automatically create the UI (as seen in part 2 of this series).

The setupWorkspace() function creates a menu definition which is just an inline object literal. The source for this could actually come from the server as JSON, or be in another file, or loaded by a plugin. The point is that there is a definition format that gets fed into the loadMenus() function that builds the menus by converting the definition into real Menu and MenuItem instances and adding them to the collection.

The workspace module also exports the addMenu() function which allows someone to add a menu to the menu bar after the initial setup has taken place. I think more functions (like remove) could be added if you really want to make this robust as far as configuration of menus is concerned (I’m just demoing this to illustrate a point). And obviously, the commands aren’t built and this is very demo-specific, but you can just swap that out for whatever you want. You could even send the menu definitions to the setupWorkspace() function instead of embedding it directly in the function.

You can view a live demo of this series at: http://tblabonne.github.io/DynamicMenus/

The complete source to the demo can be found at: http://github.com/tblabonne/DynamicMenus

Revisiting War of Words

Fri, 12 Jul 2013 14:41:00 GMT

Back in March 2010, I released a game called War of Words on the XBox 360 platform (Indie games). This game was a hybrid RPG/Word game that used word spelling as the princaipal combat mechanism in the encounters. It was very similar to Puzzle Quest in spirit, although the core game play mechanisms were quite different.

I had a lot of fun working on that game (and a lot of frustrations too). I had hoped that it would have done better in the marketplace than it did, but Indie Games was not promoted by Microsoft much and I think the game also lacked some polish that would have made it more professional like an Arcade title. For example, some graphics weren’t so great (as they were created by me) and the storyline was not very interesting (my fault again, as I am not a good writer either). I do think the game was better than the average Indie game. It currently is rated as 3.5/5 stars on the XBox marketplace with 232 votes (hardly any Indie games score over 3 stars, and many Arcade and AAA titles struggle to get over 4 stars).

Economics

This game cost me about $600 USD to make. About $250 of it was for a few hours of an artist’s time to draw the majority of the graphics. Another $200 was spent on audio/music licensing. I also had a domain name and website (which has been taken down) which cost $100 for a year. I bought a few misc. things like video capture software to take video for promotions.

As far as revenue, I can’t say exactly how much it made because the history of payment is long gone (most of the profits were made in the first 3 months of release and Microsoft does not keep more than about 18 months of history). I started out selling the game for 400 points ($5 USD) but later dropped it to 240 points ($3 USD). I make about 70% of that amount per game. I do know that dropping the price increased the purchase to trial ratio to almost 25% which is quite excellent. I think before the price drop, the ratio was between 10-12%, which is pretty good too.

I can tell you that I did not become rich with this game, obviously. The real reason was downloads. If people downloaded the game, you were pretty certain that at least 1 in 10 would buy it. If 100,000 people downloaded it, you’d make a decent amount ($30,000 - $50,000). But I didn’t get download numbers like that. I pretty much blame this on the fact that Indie games is not a great service if you want to get noticed. There’s too many bad games and demos that squeeze out good titles. Also, you have to think of the audience and I think a word game on a console is probably not optimal. If your game wasn’t about farting or beer drinking, it would not make it to the top of the list. If you got on the top downloaded or top rated lists, you were going to actually get noticed in the dashboard because of the promotion you received. If you didn’t get in these lists (I was in the recent released list for about 1-2 weeks and then gone forever), you got buried in the dashboard. Frankly, I’m surprised that any one finds it today (there’s still a few purchases a week). I know I didn’t really market it too much, but how was I supposed to do that exactly?

I also could not translate the game to multiple languages (the fact that it is an English word game makes this doubly challenging than perhaps a simple shooter game). I sold it in all XBox markets in the hopes that English speakers there would play it. Foreign sales were pretty strong actually compared to what I thought.

Sequel Plans

I originally was very optimistic about a sequel even with low sales numbers. I knew that I could take all of the money I made and the code/content I had and make a better sequel that would probably have made more money and taken less time to create. But I lost interest.

I basically quit Indie Games because I felt that the peer review concept was not optimal. In fact, I was pretty much correct as Microsoft has basically dumped the technology behind Indie Games (XNA) and has focused instead on DirectX 11 for Windows 8 and whatever XBox One has. Their stance on Indie publishing on the XBox One makes it likely that Indie Games won’t even run on it let alone Game Studio being ported to it. You could tell something was up when guys like Shawn Hargreaves started to leave the team.

I have a lot of design documents and ideas in my head for a sequel (including turning it into a turn-based game), but it will never happen with XNA, which is a real bummer to be honest. I liked the platform and Game Studio was really cool.

I toyed with putting it on Windows Phone 7 for a while and even had a very small prototype but in the end, it just didn’t feel right on a phone (without major changes to its design) and WP7 has no users and so a very small market. I could try iOS, but it’s flooded and I don’t like Apple and I’m not versed in any of their programming languages/platforms.

I think turning it into a HTML5 game would be interesting. This type of game would be best for touch or mouse-clicking I think than using a controller. But I’m pretty busy doing real paying work and being with family than doing this kind of thing.

More to Come

I’m planning on blogging about this game in more detail, especially with technical stuff like building directed acyclic word graphs (DAWGs), searching word graphs, building AIs that play games, character and RPG stats systems, etc.

RavenDB Survival Tip #2: Simulating select count(*)

Wed, 10 Jul 2013 19:00:00 GMT

A lot of the time a user will ask for a count of some business entity on a report so they can tell how many of something is happening. With SQL, this is a very natural process with aggregate operations:

select count(*) from Users where IsAdmin = true

But with RavenDB, I found it difficult to wrap my mind around how you would do this with an Index. Aggregate operations like this are implemented with map/reduce indexes. Since the reduce step of the index needs to have the same output shape as the map, we can’t simply return a single numeric value as is the case with SELECT COUNT(*) in SQL. We need to perform a LINQ group-by. But in this case, I don’t really want to group by anything in a document, I just want a count.

After a little thinking and digging around, I found a solution. Maybe this is obvious to most, but I found that if we simply group by a constant, we can get a single numeric value for that constant the represents the total count.

Here’s a sample Index definition that demonstrates this concept. In the Index, I am trying to find all User documents that qualify as admins (IsAdmin = true).

public class Users_AdminCounts : AbstractIndexCreationTask<User, Users_AdminCounts.ReduceResult>
{
    public class ReduceResult
    {
        public string Name { get; set; }
        public int Count { get; set; }
    }

    public Users_AdminCounts()
    {
        // the Name parameter to the reduce function is dummy
        // to get it to aggregate to one single value
        Map = users =>
            from user in users
            where user.IsAdmin = true
            select new { Name = "Total", Count = 1 };

        Reduce = results =>
            from result in results
            group result by result.Name
            into g
            select new { Name = g.Key, Count = g.Sum(x => x.Count) };
    }
}

When you run the query and get the result (ReduceResult), you will get just one single result and the Count property will contain the count aggregate you are looking for.

Building a Dynamic Application Menu with Durandal.js, Knockout, and Bootstrap (Pt. 2)

Wed, 10 Jul 2013 18:44:00 GMT

In the previous post, I laid out a design for creating a dynamic menu system, specifically the object model that will be used in data binding. In this post, we’ll look at the Knockout bindings and HTML structure to render the menus.

This will be pretty straightforward as far as taking our object model and applying markup to it, however, the one complicated part is dealing with sub-menus. Because menu items can themselves contain other menu items, we need the ability to render a menu within a menu and so on. We can do this with Durandal’s compose binding handler for KO. It allows recursive composition that is perfect for hierarchical things like menus.

Here’s the contents of views/menu.html which is the view component for a single Menu rendering:

<ul class="dropdown-menu" data-bind="foreach: items">
    <!-- ko if: $data.text !== undefined -->
    <li data-bind="css: { disabled: !command.canExecute(), 'dropdown-submenu': hasSubMenu }">
        <!-- ko ifnot: $data.hasSubMenu -->
        <a href="#" tabindex="-1" data-bind="command: command">
            <span data-bind="text: text"></span>
        </a>
        <!-- /ko -->
        <!-- ko if: $data.hasSubMenu -->
        <a tabindex="-1" data-bind="text: text"></a>
            <!-- ko compose: { view: 'views/menu.html', model: $data } -->
            <!-- /ko -->
        <!-- /ko -->
    </li>
    <!-- /ko -->
    <!-- ko if: $data.divider !== undefined -->
    <li class="divider"></li>
    <!-- /ko -->
</ul>

This markup is a bit complicated so let’s go through it:

In Bootstrap, applying the dropdown-menu class to a <ul> will style it as a drop down menu container. The data-bind here is also set to loop over each item in the Menu object.
Within the <ul>, we need to decide if the MenuItem is a text-based menu item or a divider. We do this by detecting if the divider property exists and/or there is text to display. If the MenuItem is a divider, the special divider class is applied to a <li> and Bootstrap renders it as a thin gray line.
If the MenuItem is actually a text-based item, we style it appropriately in its <li> element. Notice the binding to command.canExecute(). In KoLite, if you provide a canExecute() function on a command (with is a computed observable), it can determine if the command can be executed or not. In this case, we want the UI to gray-out or disable if the command cannot execute. Once the command can execute, it will immediately synchronize the UI element to be a clickable command.
Inside the <li>, we check to see if the MenuItem is a sub-menu or not. If it is not, we create an <a> element as desired by Bootstrap to create the link to click on, binding the appropriate command to it. We also bind the text in a <span> element inside the <a>.
If the MenuItem does have a sub-menu, we assume that the MenuItem can’t be clickable, but instead, simply groups other elements. In that case, we call upon the Durandal compose binding handler to recursively call this view sending the MenuItem as the view model to bind to in that context.

Now, to render the top-level menu bar, in our main view we’d add the following markup (I’m using nav-pills in Bootstrap to represent the top-level menu items, but you don’t need to do that):

<ul class="nav nav-pills menu-bar" data-bind="foreach: menus">
    <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" data-bind="text: text"></a>
        <!-- ko compose: { view: 'views/menu.html', model: $data } -->
        <!-- /ko -->
    </li>
</ul>

This assumes that the view model for the main view has a collection of Menu objects in an observableArray called menus.

It renders a <li> element for each Menu giving it a dropdown class. The <a> element will trigger Bootstrap to open the <ul> element that immediately follows the <a>. That <ul> is generated by a compose binding calling onto the Menu view to render that one Menu and all of its children recursively.

Building a Dynamic Application Menu with Durandal.js, Knockout, and Bootstrap (Pt. 1)

Wed, 10 Jul 2013 18:19:00 GMT

I’m going to do a longer series here about how to create a dynamic menu bar system with Durandal, Knockout, and Twitter Bootstrap. This menu bar is going to emulate the traditional desktop application menu bar you find in apps (like the File, Edit, or View menus, for example). The special thing here is that it will be 100% dynamic. This will allow interesting scenarios such as dynamically altering the application menu when the application is in a different mode or allow something like plug-ins to alter the menu structure adding new commands.

We will use the following libraries/frameworks to perform this task:

We’ll use Bootstrap to style the menus and get basic drop down menu support. The menus in Bootstrap look very pretty and work very well using just one .js file for behavior and a little bit of markup.
We’ll use Durandal to structure the application and to take advantage of the composition engine it has. I assume you know how to get a basic Durandal project up and running so I’m not going to spend a lot of time discussing how Durandal works.
We’ll use Knockout to do all of the data binding. Our menu items will have observable properties in them so that menus will dynamically change when you change things about them in code.
We’ll also make use of KoLite by John Papa which provides a simple KO extension (the command) to abstract the idea of a UI command. A single menu item will wrap a ko.command(). If a command does not allow execution, the corresponding menu item(s) will not allow it and will appear disabled. Also, when clicking on a menu item, the command will execute. This will all happen through data binding and will not

For this first part, let’s build the JavaScript object model for the menu system. A Menu object (defined in ui/menu.js in my project) represents one menu on a menu bar (such as a File menu). It will contain zero or more MenuItems which are the individual menu selections in the menu. There is also a special menu item that acts as a divider or separator. These dividers draw thin lines between menu items to help visually group commands. They are not clickable.

Here’s the code for the MenuItem class (defined in ui/menuItem.js as a Durandal module):

define(function (require) {
    var MenuItem = function (itemText, command, items) {
        this.text = ko.observable(itemText);
        this.command = command || ko.command({ execute: function () { } });
        this.items = ko.observableArray(items || []);
        this.hasSubMenu = ko.computed(function () {
            return this.items().length > 0;
        }, this);
    };

    MenuItem.prototype.addMenuItem = function (menuItem, position) {
        if (position) {
            this.items.splice(position, 0, menuItem);
        }
        else {
            this.items.push(menuItem);
        }
    };

    MenuItem.prototype.addDivider = function (position) {
        var item = { divider: true };
        if (position) {
            this.items.splice(position, 0, item);
        }
        else {
            this.items.push(item);
        }
    };

    return MenuItem;
});

A menu item takes a menu item text (the text to appear in the menu), an optional KoLite command, and an optional set of child sub-items. The sub-items are used for when the menu item is actually a menu within a menu and will be rendered with a an arrow to the right of the menu item using Bootstrap.

A Menu class also exists as a top-level container for MenuItems. Think of this as the File menu or Edit menu. It is defined in ui/menu.js as a Durandal module:

define(function (require) {
    var MenuItem = require('ui/menuItem');

    var Menu = function (text, items) {
        this.text = ko.observable(text);
        this.items = ko.observableArray(items || []);
    };

    Menu.prototype.addMenuItem = function (menuItem, position) {
        if (position) {
            this.items.splice(position, 0, menuItem);
        }
        else {
            this.items.push(menuItem);
        }

        return menuItem;
    };

    return Menu;
});

This class takes the text of the menu item (“File”) and the collection of MenuItems to add to the menu. You can call addMenuItem() to add a menu item after the initial creation of the menu. The position parameter will add the menu in the specified position. If you don’t specify a position, it will be added to the end of the menu.

In the next part of the series, we’ll look at the HTML and KO data-bindings that will render the menus.

Tree Traversals with JavaScript

Wed, 03 Jul 2013 12:36:00 GMT

Let’s do this one more time – this time with JS. Here is a constructor function for a generic tree node that has one parent and possibly N children:

var TreeNode = function (data) {
    this.parent = data.parent || null;
    this.children = data.children || [];
};

TreeNode.prototype.isLeaf = function () {
    return this.children.length == 0;
};

TreeNode.prototype.isRoot = function () {
    return this.parent == null;
};

Here is how we’d traverse the tree with a depth-first search (note that I’m using the underscore.js library for the each() function – you could also use ES5’s Array.forEach() if you do not want to support older browsers – or use a polyfill):

function visitDfs(node, func) {
    if (func) {
        func(node);
    }

    _.each(node.children, function (child) {
        visitDfs(child, func);
    });
}

Doing a breadth-first traversal is also straightforward thanks to JavaScript’s Array class and its queue/stack-like functionality:

function visitBfs(node, func) {
    var q = [node];
    while (q.length > 0) {
        node = q.shift();
        if (func) {
            func(node);
        }

        _.each(node.children, function (child) {
            q.push(child);
        });
    }
}

Finally, let’s do something tangible with a depth-first traversal. In the next code snippet, the prune() function will prune out nodes that are single children to their parents in order to collapse the tree into a simpler structure. This will eliminate groupings of nodes that aren’t really grouping anything because their branching factor is 1:

function prune(root) {
    visitDfs(root, function (node) {
        if (node.isRoot()) {
            return; // do not process roots
        }
        if (node.children.length == 1 && !node.children[0].isLeaf()) {
            var child = node.children[0],
                index = _.indexOf(node.parent.children, node);
            node.parent.children[index] = child;
            child.parent = node.parent;
        }
    });
}

This code works by doing a DFS and calling a function on each node. That function examines the node to see if it has exactly one child and that the one child node is not a leaf (we don’t want to prune out leaves or roots). If it is, the child node is extracted out and assigned to the node’s parent’s children and then the child’s parent is reassigned to the node’s parent. This effectively eliminates (prunes) the node out of the tree collapsing it into a simpler structure.

Another Technique for Tree Traversals

Tue, 02 Jul 2013 14:28:00 GMT

In the previous post, I talked about doing a DFS on a rooted tree using the C# foreach loop/iterator concept. In this post, I will discuss a different technique that is more function-based.

A common task on a tree is to traverse it in some defined order – pre-order, level-order, post-order, etc. When we visit a node, we’d like to perform some action on it. We can use delegates in C# (reference to a function) and lambdas to make this really compact and elegant:

public static void VisitDfs(TreeNode node, Action<TreeNode> func)
{
    if (func != null)
        func(node);
    foreach (TreeNode child in Children)
    {
        VisitDfs(child, func);
    }
}

If you pass in the root node to this method, you can call the function you send in on each node in that order. You can apply this concept for other traversal patterns too:

public static void VisitBfs(TreeNode node, Action<TreeNode> func)
{
    Queue<TreeNode> q = new Queue<TreeNode>();
    q.Enqueue(node);
    while (q.Count > 0) 
    {
        node = q.Dequeue();
        if (func != null)
            func(node);
        foreach (TreeNode child in Children)
        {
            q.Enqueue(child);
        }
    }
}

This performs a breadth-first traversal (also called a ‘level order’ traversal with trees), calling the specified function at each node visit.

Here’s a sample usage of the DFS to count the number of leaves in a tree:

public static int CountLeaves(TreeNode root)
{
    int leafCount = 0;
    VisitDfs(root, node => {
        if (node.Children.Count == 0) {
            leafCount++;
        }
    });

    return leafCount;
}

Performing a DFS over a Rooted Tree with a C# foreach Loop

Tue, 02 Jul 2013 13:28:00 GMT

I’ve been working with trees a lot lately and one thing that occurs quite frequently in my problem space is the action of performing a depth-first search (DFS) or a 'pre-order traversal’. In a DFS, you visit the root first and then search deeper into the tree visiting each node and then the node’s children.

Since this is so common, I’d like a routine that helps me do that very simply. What I’d really like to do is simply do a foreach loop over the tree and with each iteration pull out the next node that would satisfy a DFS. This is where the C# yield keyword comes into play.

The following snippet presents a TreeNode class which is just a generic node in a tree that has N children:

public class TreeNode
{
    public TreeNode()
    {
        Children = new List<TreeNode>();
    }

    public TreeNode Parent { get; set; }
    public List<TreeNode> Children { get; private set; }
    public bool IsLeaf { get { return Children.Count == 0; } }
    public bool IsRoot { get { return Parent == null; } }

    public IEnumerator<TreeNode> GetEnumerator()
    {
        yield return this;
        foreach (TreeNode child in Children)
        {
            IEnumerator<TreeNode> childEnumerator = child.GetEnumerator();
            while (childEnumerator.MoveNext())
                yield return childEnumerator.Current;
        }
    }
}

Most of the functionality is in the GetEnumerator() method. When a class in C# has a method called GetEnumerator() that returns a type IEnumerator or IEnumerator<T>, you’ll be able to use that type in a foreach loop. Also notice that the type returned by my method does not return IEnumerator<TreeNode> but rather just TreeNode. The C# compiler will fill in the proper details automatically.

In order to do a DFS, we first visit the node itself by returning it (this) in a yield statement. When the iterator executes the next loop, the GetEnumerator() method remembers the execution state of the method and picks up right where it left off. At that point, we enter into a loop over the Children collection. We basically repeat the enumerator process over this collection manually by doing a while loop where we exit the loop if no more children exist. In the body of this while loop, we execute another return within a yield, returning each child node.

To use this enumerator to perform a DFS, you’d foreach over the root node of your tree (I’m assuming a singly rooted-tree here):

foreach (TreeNode node in root)
{
  // perform action on node in DFS order here
}