A little background

It’s safe to say that my career has been primarily focused on the web. From “webmaster” in 1995 to the Chief Technology Officer position at a .com to more recent gigs in software development consulting, much of the software I’ve been involved in building has been web focused. I had taken a few detours along the way, such as the Windows Phone weather app that I discussed on this blog but never released and some Silverlight projects that I did on the side but everything else was angle brackets.

So perhaps it was a little arrogant? foolish? naïve? of me to just decide a few months back that I was going to build a game for the Windows 8 store.  Microsoft had announced that the Windows 8 development experience was going to be great for anyone who had working knowledge of HTML/CSS/JavaScript OR XAML/C# OR C++. I figured I fell into at least two of those camps so why not give it a whirl. The question came down to should I use HTML/CSS/JavaScript or XAML?

I suspect that like many of you, I’m not a web designer. Oh sure, I can wear turtle neck sweaters or a nice v-neck and I know a nice looking design when I see one but don’t ask me to create one. That being the case, I needed to enlist the assistance of a designer so that my new game would not only be fun to play but would be visually appealing as well.  Presented with this dilemma and considering the pool of folks I’d worked with over the years on web stuff, I decided to take the HTML/CSS route to gamedom.

On to Game Design and Development

When I started this process, I did some googling on Bing to find out how one goes about creating a game. I read many blogs and even picked up a few dead tree books in my quest for game dev knowledge. I knew my platform would be HTML/CSS and JavaScript so I focused on that and the canvas. Having never worked with the canvas before, I decided to pull in a 3rd party library from createjs.com called EaselJS. That would give me a nicer API to write against.  After a few days of reading, hacking some test code together and a couple of bad pencil drawings depicting my game screen in all its glory, it was time to start coding.

FNF_pencil

My mad design skills at work

Looking back now it was nowhere near the right time to start coding but….

After a couple of weeks I had the game mechanics functioning correctly so I brought in the designer to make this thing look like something someone would want to play. Early on, I had hired a cartoonist to do the original drawings for me and create the sprite frames (I used Adobe Fireworks to create the actual sprites). Next, I needed the designer to bring it all together.

The Final Product

After working with the designer for a bit, the game was ready to be submitted to the Windows Store.

a

b

All in all I’m pleased with the results and the user feedback has been good. The whole process was a good learning experience and Ill continue to improve the game and add features as time goes on.

You can check it out in the Windows Store if you search for FinsNFeathers or for those of you who do not have a Windows 8 machine, you can check it out here.  And if all of that is just too much trouble, here is a quick video look at the game.

In summation, I would say that if you have an itch to try your hand at casual game development, build a game for Windows 8. Microsoft does provide a really nice platform to get started and, as usual, their tools are fantastic.  And who know, you just might create the next Angy Birds.

Until next time….Thanks for visiting.

{ 0 comments }

For those who may not be in the know, Functions in JavaScript are really very cool. They’re first class objects. What does that mean? It means that  JavaScript functions can have properties and methods just like other objects. Yes, you read that correctly, JavaScript functions can have their own properties and methods. In fact, Functions in JavaScript have all the same abilities as other JavaScript objects. What abilities are those? I’m glad you asked.

  • They can be assigned to variables
  • They can be assigned to properties of other objects
  • They can be passed as arguments
  • They can be created via literals

In additional to all of this cool stuff, they can do something that regular JavaScript objects cant’; they can be invoked! This invocation at first glance may appear to be a trivial thing but there’s much more nuance here than meets the eye.  You see, dear reader, that a JavaScript function can be invoked in four distinct ways. They are:

  1. As a function
  2. As a method
  3. As a constructor
  4. using either the call() of apply() methods that all functions have access to

One thing to keep in mind as you review these invocation methods is “this”. If you’ve been working with JavaScript for any amount of time you’ve no doubt run across the concept of “this”. “this” refers to the current context and can trip people up sometimes when they aren’t aware of what’s going on under the JavaScript covers.

Lets take a look at each of these invocation methods.

Function invocation as a function

When we say we invoking a function as a function, what we mean is that the function:

  1. Does not have a relationship with any object
  2. Is not a constructor
  3. Is not being called via call() or apply()

Its pretty simple really and it looks like this:

function printName(){
    console.log('hi there');
}
printName();

When a function is invoked in this manner, its context or “this” is the global window object. Not usually something that we want but no doubt something that all of us have done in our JavaScript travels.

Function invocation as a method

When we invoke a function as a method, the context or “this” is that of the object to which it belongs. So if you reference “this” from within the method, it will point to the object to which the function belongs. Here’s an example:

//here is a fuction
function printMe(){console.log('hi from print. my owner is ' + this);}

//our object with a method that points to the function
var printer = {
    p: printMe
};

//lets test them out
printMe();
printer.p();

and there is the output in Chrome developer tools:

JSFunctions_this

So, what’s happening here? First we define a function called printMe(). It is attached to the global window object. I then define an object with a property p that points to the printMe() function. The interesting part is when I invoke these guys and print out their context. As you can see in the output, the first call to printMe() has the [object Window] set at its owner/context while the second call to it displays [object Object]. This is the object on which the property is attached as its owner/context.

Now, let’s invoke the function as a constructor and see what we get. Here’s the code:

function Printer(){
    this.printMe = function(){
        console.log('hi from printMe method made via constructor');
        return this;
    };
}

var p = new Printer();
console.log(p.printMe() instanceof Printer);

and the results:

JSFunctions_this_constructor

What does this show us. First you can see that we have named our Printer() function with a capital P to denote that this is a constructor. That’s a convention that is worth following. Beyond that, you can see that inside the constructor, we attach the printMe function to the context “this”. We’re initializing our object much the same way we would in an object oriented language. After that we create a new instance of our Printer being sure to use the “new” keyword. That’s very important. Don’t forget to use new. If you were to omit new from the statement, the printMe function would be added to the global window object. Probably not what you’re looking for. Finally, we test to affirm that what we get back from our call to p.printMe() is an instance of a Printer and indeed it is.

You can see in each of these methods above that the context changed based solely on how we invoke the function. What if we wanted to tell the function what its context should be? That sounds like it might be a useful feature. The good news is that we can do just that using the call() and apply() methods. Lets look at that next.

Function invocation via call() and apply()

Being able to specify the context for function invocation can come in handy. Lets look at some code that does just that.

function add(){
    var result = 0;
    for (var i = 0; i < arguments.length; i++) {
      result += arguments[i];
    }
    this.result = result;
}
var myObj1 = {};
var myObj2 = {};

add.apply(myObj1, [2, 3, 4]);
add.call(myObj2, 3, 4, 5);

console.log(myObj1.result);

console.log(myObj2.result);

Here we define a function named add() that loops over all the arguments passed to it and adds them it. Is then references its context via this and attaches a new results property to the object. Very cool stuff.

The difference between call() and apply() are the parameters that each takes. When using apply(), the first parameter is the object that you want to be the context and the second parameter is an array containing the values. call() works in much the same way also using the first parameter to set context followed by a comma separated list of values rather than an array. The result as seen in the debug tools is as follows:

Add

The first call using apply adds 2+3+4 giving us a sum of 9.

The second call using call() adds 3+4+5 giving us 12.

I hope this was useful and you picked up a couple of things along the way. Remember, there are 4 ways to invoke functions in JavaScript: as a function, as a method, as a constructor and via call() and apply().  Each of these has its own purpose and will serve you well when used appropriately. When working with your functions always keep context in mind and know what context you are working with.

Until next time….thanks for visiting.

{ 0 comments }

JavaScript–The Revealing Module Pattern

by Alex on April 15, 2013

Working as a consultant, I get to see a lot of code written by different people. One of the things that consistently surprises me is how much JavaScript I still see written inside html pages. Haven’t we reached a level of maturity on the web where we as developers understand that there are essentially 3 distinct parts to a web page? The structure, the style and the behavior. What’s funny is that these same developers who are polluting their markup with script would never think to use inline styles in their pages. Somehow inline styles fall into the unacceptable camp but as for script…..meh.

Perhaps one of the reasons I continue to see this unfortunate phenomenon is that these devs don’t know how to move their code out of  the page and set it up in such a way as to not pollute the global space? That’s just speculation of course but for the purposes of this post, lets assume that’s the case. Let us further assume that if these folks did embark on a journey to get JavaScript out of their markup, all they would do is move their list of functions and event handlers out of the page and into an external .js file. That would be bad. All we’ve done is move the problem from one place to another.

There must be a better way . Fear not, there is a better way. A few of them in fact but the one I’m going to focus on here is a little pattern called the Revealing Module Pattern.

{ 0 comments }

OK, so in the last series of posts that I did I built a really simple windows phone app. That was a good opportunity for me to get comfortable developing for the phone, work with the tools a little and get a feel for working with the phone but lets be honest; The app was not something that I would submit to the Marketplace. The architecture (if you can call it that) was really bad.  I had everything tightly coupled together in abig blob of code.  Looking at that app, I can envision the pain I would have to go through to make changes if I was to develop an app like that and release it.

So, with that experience under my belt, its time to move on to the next app….and I may even release this one into the Marketplace.

The next app is going to be a simple weather tracking application. You put in whatever cities you want to track the weather for and it makes calls over the wire to get the weather info. Easy Peasy.

While the concept is simple, I’m going to apply some good design principles and make sure that my architecture doesn’t resemble anything like the “one big blob” approach.  Some of the stuff that Ill be using includes:

WP7 Contrib – this is a great open source project that I found out about via a video over on channel9.  It was created by a guy over in UK - Richard Griffin. I’m sure there was more than one person working on it and I extend my thanks to you all.  One of the features that I really like about this project is that the creators used Reactive Extensions (otherwise known as Rx) . If you’re not familiar with Rx, its really slick. It essentially takes a standard Enumerable and converts it to an IObservable. Once you have the Observable, you can subscribe to it to receive a sequence of events using IObserver<T>. Its been called “LINQ to Events” by some. I first heard about it from Scott Hanselman on his Hanselminutes podcast back in February of 2010 when he sat down with Erik Meijer.   Its slick, check it out.

FUNQ – Another great open source project…used for dependency injection

MVVMLight – And yet another great open source project. This is a great framework for implementing MVVM in your WP7/Silverlight/WPF apps. If you’re not familiar with MVVMLight, here are a couple of good videos:

Understanding the MVVM Pattern (MIX10 session)

http://www.galasoft.ch/mvvmvideo1

Deep Dive MVVM (MIX11 session)

http://www.galasoft.ch/mvvmvideo2

 

Stay tuned, Ill be posting more about the app as I go along.

Thanks for visiting.

{ 0 comments }

How do I read and write my ObservableCollection<T> to IsolatedStorage?

This is a question that I see posted over and over. In an effort to make the answer easy to find, here is a simple generic helper class that I use.

 public class IsoStoreHelper
    {
        private static IsolatedStorageFile _isoStore;
        public static IsolatedStorageFile IsoStore
        {
            get { return _isoStore ?? (_isoStore = IsolatedStorageFile.GetUserStoreForApplication()); }
        }

        public static void SaveList<T>(string folderName, string dataName, ObservableCollection<T> dataList) where T : class
        {
            if (!IsoStore.DirectoryExists(folderName))
            {
                IsoStore.CreateDirectory(folderName);
            }

            string fileStreamName = string.Format("{0}\\{1}.dat", folderName, dataName);
            try
            {
                using (var stream = new IsolatedStorageFileStream(fileStreamName, FileMode.Create, IsoStore))
                {
                    var dcs = new DataContractSerializer(typeof(ObservableCollection<T>));
                    dcs.WriteObject(stream, dataList);
                }
            }
            catch (Exception e)
            {
            }
        }

        public static ObservableCollection<T> LoadList<T>(string folderName, string dataName) where T : class
        {
            var retval = new ObservableCollection<T>();

            string fileStreamName = string.Format("{0}\\{1}.dat", folderName, dataName);

            var isf = IsoStore;
            try
            {
                var fileStream = IsoStore.OpenFile(fileStreamName, FileMode.OpenOrCreate);
                if (fileStream.Length > 0)
                {
                    var dcs = new DataContractSerializer(typeof(ObservableCollection<T>));
                    retval = dcs.ReadObject(fileStream) as ObservableCollection<T>;
                }
            }
            catch
            {
                retval = new ObservableCollection<T>();
            }

            return retval;
        }
    }

I hope this helps.

{ 0 comments }

Building a simple Windows Phone App–Part 4

by Alex February 12, 2012

Disclaimer: I’m learning about windows phone and keeping a log of that experience here. I fully expect that some of the things I do here will be wrong. Copy code at your own risk. In an effort to keep the posts in this series shorter than a dissertation, I wont be covering every class and […]

1 comment Read the full article →

Building a simple Windows Phone App – Part 3

by Alex February 8, 2012

Disclaimer: I’m learning about windows phone and keeping a log of that experience here. I fully expect that some of the things I do here will be wrong. Copy code at your own risk. In an effort to keep the posts in this series shorter than a dissertation, I wont be covering every class and […]

4 comments Read the full article →

Building a simple Windows Phone App–Part 2

by Alex February 3, 2012

Disclaimer: I’m learning about windows phone and keeping a log of that experience here. I fully expect that some of the things I do here will be wrong. Copy code at your own risk. In an effort to keep the posts in this series shorter than a dissertation, I wont be covering every class and […]

4 comments Read the full article →

Building a simple Windows Phone App–Part 1

by Alex January 30, 2012

Windows phone looks pretty cool and the developer story looks even better. I certainly don’t consider myself to be an expert in the mobile development space. The vast majority of the code that I get paid to write is in on the Microsoft web stack (asp.net, asp.net mvc, sql server, javascript, jquery). I’ve done some […]

0 comments Read the full article →

Sketchflow missing from Visual Studio Premium Subscription

by Alex October 16, 2011

On Wednesday 10/05/2011 @ 10am EST I started on a quest that I believed would take me less than 90 seconds to complete. 70 minutes later I had learned a bunch of information that I didn’t like and I felt as though the company whose technologies I promote was clearly taking advantage of me….again. The […]

0 comments Read the full article →