Word War III – Dev Diary – 05: The app meets real players

Oops it has been a while since I last posted but I have actually been working on the game!

As I mentioned in at the end of my last post, the plan was to get the game working end to end. First off I created a number of new classes most extending FContainer. LetterButton for each of the letter buttons that the player can tap, Letter for each of the letters of the word, Keyboard to hold and manage the letter buttons and Word to manage the word.

Creating these classes allows me to use the tweening library to animate buttons, words and letters appearing and disappearing. I also added handlers to these classes so that they can callback into the main game code when things happen such as a player tapping a button.

Here is a class diagram of the classes in the game:

Main classes

In the GameScreen’s Update() method I added some code to increment a time value every second of play. This method also holds a game over check which bounces the user to the game over screen if they exceed 120 seconds of time. For the moment I have also added a simple bar sprite that I resize to represent the time that has passed. I turn this into a more self contained class the future.

Here is the code for the Update() method:

override protected void Update()
      // inc the framecount

      // has a second passed? Futile runs at 60fps
    if (framecount % 60 == 0)
          // inc time and score

           // tween progress bar to new position
        Go.to(progBar,0.99f,new TweenConfig().floatProp("width",time*6.5f).setEaseType(EaseType.Linear));

           // has the player run out of time?
        if (time > 120)
               // yep, stash their score and bounce them to game over screen
            Main.instance.lastScore = score;


You will also notice the score increment that adds 5 points for every second that the player has survived.

The bulk of the game logic sits in the HandleLetterButtonRelease() method. This is called when a letter button is pressed by the Keyboard class:

private void HandleLetterButtonRelease(char theLetter)
      // was the letter in the word?
    if (word.PopLetter(theLetter))
          // yep, give the user more time and play a good beep
        time -=1;
           // nope, penalise a wrong guess and play bad beep

      // is the word complete?
    if (word.isComplete())
          // give the player 10 more seconds of play time

          // play word done sounds and give player 500 points

        // tween the word off the screen and then...
        Go.to(word, 0.2f, new TweenConfig ().
        floatProp("scaleY", 0.5f).      
        floatProp("alpha", 0f).
        setEaseType(EaseType.BackInOut).onComplete(c => {

               // remove the word from the stage

               // grab another word from the list of words
            wordPos += (int)RXRandom.Range(1,20);
            if (wordPos > Main.instance.words.Count)
                wordPos = (int)RXRandom.Range(1,50);

               // create a new Word and add it to the stage         
            word = new Word (Main.instance.words [wordPos]);
            word.y = 35;

               // reset the keyboard showing any letters buttons that were hidden


      // Pin the minimum time value to 1, award 1000 points if player manages to wind the clock this low
    if(time < 1)
        time =1;

I also dropped in some placeholder SFX and background track to round things off. Here is a clip of the final result:


YouTube Preview Image


Play testing

Proud of my work I handed the game over to Mrs Gremlin… she hated it! After a Q&A session it turns out that a) she doesn’t really like word games but more importantly b) the word list was awful.

Even though I had sanitized the list, she felt that the words were just too obscure. For instance “fashioned” was “not a real word”. So I went back to the drawing board and found a list of the 1000 most common words from texts in the Gutenberg Project. I quickly wrote some code to score each word (using the same algorithm I detailed here), sorted the list and dropped the list into the game.

This time Mrs G got into the game (particularly when she found out my top score was 7000ish which gave her a target to beat).

Since then I have shopped the game around my friends and acquaintances to get feedback. The highlights of this feedback are:

  • The game needs a non competitive (non time based mode) for those who want to just mindlessly guess words
  • The World War III theme did not gel with a lot of the girls. I need to think on this one
  • The score does definitely gives the game a competitive edge. At a party everyone was trying to beat everyone else’s scores. The couple of teaches in the group were whipping everyone’s butt whilst decrying some of the capabilities of our less learned friends
  • The progress bar was too easy to miss. I suspect this is because the progress bar doesn’t yet have the DEFCON milestones on it which should hopefully make things way more obvious.
  • Themed word lists
  • Background animations: bombs falling, lasers shooting them down. Planes flying passed etc.

So quite a bit to work on. Having said that no one thought the game was terrible and most played several games so I’m hopeful that I have something interesting here.

Word War III – Dev Diary – 04: Tween you and me

As this slightly over the top presentation shows adding motion, bounce and wiggle to your game elements can really make a game feel rich and alive:

YouTube Preview Image


Luckily this is easy to achieve with the GoKit tweening library that is included with Futile. The library allows you to easily change any property of an object over a specific period of time.

For instance this bit of code:

skyline.scaleY =0.1f;
Go.to(skyline, 0.75f, new TweenConfig ().     
      floatProp("scaleY", 1.0f).

Sets the skyline sprite’s y scale to 0.1, it then uses the GoKit tweening library to scale the skyline sprite’s Y scale back to 1 over a period of 750ms with an ease of  BounceOut.

The effect of this is have the skyline spring out of the ground with a nice cartoony bounce. Adding some tweens to the title screen’s sprites like this:

private void AnimateIntro()
    bg.y = Futile.screen.height+70;
    bg.rotation = 10f;

    Go.to(bg, 0.5f, new TweenConfig ().
        floatProp("y", 0f).
        floatProp("rotation", 0f).

    skyline.scaleY =0.1f;
    Go.to(skyline, 0.75f, new TweenConfig ().
        floatProp("scaleY", 1.0f).

    title.scale = 0.001f;
    Go.to(title, 0.3f, new TweenConfig ().
        floatProp("scale", 1.0f).

    nuke.scaleY = 0.001f;
    Go.to(nuke, 0.5f, new TweenConfig ().
        floatProp("scaleY", 1.0f).

    startButton.scaleY = 0.0f;

    Go.to(startButton, 0.5f, new TweenConfig ().
        floatProp("scaleY", 1.0f).

    helpButton.scaleY = 0.0f;

    Go.to(helpButton, 0.5f, new TweenConfig ().
        floatProp("scaleY", 1.0f).

Along with a tween to make the buttons disappear when we tap them on the game screen, gets us this:

YouTube Preview Image


So how exactly do these tweens work? Well it’s all down to some clever maths. The GoKit library implements what are known as the Robert Penner equations which are a set of equations that he published in a book called Programming Macromedia Flash MX. These equations can be used to produce organic feeling motions and change.

Basically these equations all take the form of a function that takes 4 parameters:

  • t – current time unit
  • b – the starting value
  • c – the total change of the value over the duration
  • d – the duration

The simplest of these doesn’t in fact result in any easing, it simply creates a linear motion:

public float EaseNone( float t, float b, float c, float d )
    return c * t / d + b;

Plotting this out on graph gives us this (with a starting point of 0, a change of 1, over 60 frames):

The bounce out equation is a bit more interesting:

public float EaseOut(float t, float b, float c, float d)
    if ((t /= d) < (1 / 2.75))
      return c * (7.5625f * t * t) + b;
    else if (t < (2 / 2.75))
      return c * (7.5625f * (t -= (1.5f / 2.75f)) * t + .75f) + b;
    else if (t < (2.5 / 2.75))
      return c * (7.5625f * (t -= (2.25f / 2.75f)) * t + .9375f) + b;
      return c * (7.5625f * (t -= (2.625f / 2.75f)) * t + .984375f) + b;

Plotting this out looks like this:

Which is a much more interesting motion.

All in all there are 31 different eases in the library. This chart shows them all:

Next up I’m going to kick things up a notch and get the basic game play in place.