Reading

Entity Systems | Tom Davies. “Favour composition over inheritance” If you haven’t already read my previous post on the problems of traditional game architecture and why entity systems are needed. I’m going to cover the basics of an entity system before we look at 3 different implantations and the pro’s and con’s of each.

What is an entity? An entity (sometimes called game object) represents something in the game. This is the basics of all Entity systems one of key feature is the ability to create entities and change there components at run time. Spotter guide. There are 3 main ways to implement an entity system I have seen and I’m going to quickly out line them all and take a critical look at the pro’s and con’s. “Common” Most common implantation you are going to come across. How it works All components have a common interface normal with a function update().

Pros Simple and fast. Cons Scalability and flexibility (how easy it is to make changes). Push the data up into the entity its self. “Almost” “True” - Dave Roderick. Game Architecture | Tom Davies. In all the games I have made I have never been that happy with the architecture. Using PureMVC and more recently Robotlegs on a more or less daily basis has shown me the benefits of a well designed common framework. The down side of MVC which both are based on is that its not suitable for game development it’s ideal for the into screens and menus and perhaps even the UI but its not designed for problems found in game development. So what do you do? Well if you like me then you will probably come up with something like this. OK details may vary but it should be familiar to most people who have built games. So we have a nice inheritance tree and its all looking pretty straight forward. So what’s the issue? Let me put another way would it be better if you could pick and choose the attributes you want for each item in your game.

As you can see we could make a moveable platform just by sticking a tick in the correct box. So this is the ideal how can we do this in practice. Read more: Code Conventions for the JavaScript Programming Language. This is a set of coding conventions and rules for use in JavaScript programming. The long-term value of software to an organization is in direct proportion to the quality of the codebase. Over its lifetime, a program will be handled by many pairs of hands and eyes. If a program is able to clearly communicate its structure and characteristics, it is less likely that it will break when modified in the never-too-distant future.

Code conventions can help in reducing the brittleness of programs. All of our JavaScript code is sent directly to the public. It should always be of publication quality. JavaScript Files JavaScript programs should be stored in and delivered as .js files. JavaScript code should not be embedded in HTML files unless the code is specific to a single session. Whitespace Where possible, these rules are consistent with centuries of good practice with literary style. Blank lines improve readability by setting off sections of code that are logically related. while (true) { Names Is. Extending Objects in Underscore | Chris Missal.

Underscore is a very nice library, it’s what Backbone JS is built on. What I’ve come to like about it is its ability to provide very helpful functions that let you more effectively work with sets of data. Below is the code we’ve seen before, only slightly modified because we’re using Underscore’s extend function now. And the output: This is the exact same output as our Ext JS example. Since there’s nothing new, I can’t go on about too many differences, but I can, however, bring up another related function in Underscore, defaults. The defaults method is interesting in that it works very similarly, but turns our familiar objects into something new that the others haven’t yet done. This one fills in missing properties and ignores any match applied after. The extend and defaults functions work almost opposite from each other, but are great to have side-by-side when you need them.

For more information: extend and defaults. Oh hey, I'm a Senior Consultant for Headspring in Austin, TX. Closures - JavaScript. Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created in. Consider the following: function init() { var name = "Mozilla"; function displayName() { alert (name); } displayName(); }init(); init() creates a local variable name and then a function called displayName(). displayName() is the inner function (a closure) — it is defined inside init(), and only available within the body of that function . Unlike init(), displayName() has no local variables of its own, and instead reuses the variable name declared in the parent function. Run the code and see that this works. Now consider the following example: function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName;} var myFunc = makeFunc();myFunc(); That the code still works may seem unintuitive.

The solution to this puzzle is that myFunc has become a closure. Practical closures. Why has Edge gone with div-based animation over canvas and SVG? An Examination of goog.base() An Examination of goog.base() goog.base() is a utility function in the Closure Library for invoking "superclass" methods. As you may recall from article on "Inheritance Patterns in JavaScript", the Closure Library uses the pseudoclassical inheritance pattern to emulate class hierarchies in JavaScript. As such, goog.base() is used as a shorthand into to invoke a superclass's constructor function and methods. Before we can pick apart the implementation of goog.base(), we must explore how inheritance relationships are established using goog.inherits() in the Closure Library.

In the inheritance article, there is a class named Phone with a subclass named SmartPhone. The inheritance relationship is established by the following function call: goog.inherits(SmartPhone, Phone); This establishes the appropriate link in the prototype chain between SmartPhone and Phone so that SmartPhone may "inherit" methods from Phone. Phone.call(this, phoneNumber); the equivalent can be done with goog.base(): A Graphical Explanation Of Javascript Closures In A jQuery Context. Over the weekend, I was working on my in-depth jQuery presentation for the New York ColdFusion User Group. As part of the presentation, I wanted to discuss the beauty of Javascript "closures" and how jQuery makes tremendous use of them.

Javascript closures can be a very hard thing to wrap your head around, especially when you are faced with vague definitions like: A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression). I mean, come on, what the heck does that mean?

First, let's look a simple jQuery demo: In this code, we are adding click event handlers to all of the links in the document. Notice that we are defining three anonymous methods in this demo. In Javascript, a given context always has access to its parent context. Ok, so far so good; now, let's really get into closures. Exploring Mixins And Javascript Objects. After my in-depth exploration of ColdFusion mixin behavior, Rick Osborne asked me how this would compare to mixin behavior in Javascript. I think Rick just likes making my head hurt, but it was an interesting question so I thought I would explore it. It's actually especially interesting because Javascript has both object binding and lexical binding. By that, I mean that Javascript functions can be used in objects, but they also have access to the parent scope in which they were defined (see my graphical explanation of closures).

Seeing how this works in the context of method mixins would certainly be interesting. The code for this test is actually quite short, so I'll show it first then explain it: In the first part of the code, I define a function and then immediately execute it within it's own private bubble (function context).

Then, I create an object with a "Name" property (remember the this.Name from above). Thursday, 4/2I am a public function Thursday, 4/2Molly This is very cool! The State of Mobile HTML5 Game Development. Posted 09:18AM on October 18 2012 by Pascal Rettig At last night's Boston HTML5 Game Development Meetup I presented a yearly wrap up on "The State of HTML5 Game Development" with a focus on mobile to highlight my new book "Professional Mobile HTML5 Game Development" To put my money where my mouth was, the presentation was given via an iPad Web App running from the home screen.

As it was designed to run as a presentation full-screen on an iPad, for best effect bookmark to your home screen and run from there in landscape mode. But otherwise, go ahead an try to run it on anything that supports canvas and it should work to varying degrees. If you'd like to help get HTML5 Game Development usable on more platforms, please star the mentioned Chrome for Android Bug 142613 To use the deck: use the arrow keys to run and jump Check out the interactive deck Create using the unofficially released Quintus Engine which is built in the book. Adequately Good - JavaScript Module Pattern: In-Depth - by Ben Cherry. The module pattern is a common JavaScript coding pattern.

It's generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I'll review the basics and cover some truly remarkable advanced topics, including one which I think is original. The Basics We'll start out with a simple overview of the module pattern, which has been well-known since Eric Miraglia (of YUI) first blogged about it three years ago. If you're already familiar with the module pattern, feel free to skip ahead to "Advanced Patterns". Anonymous Closures This is the fundamental construct that makes it all possible, and really is the single . (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }()); Notice the () around the anonymous function.

Global Import JavaScript has a feature known as . Luckily, our anonymous function provides an easy alternative. Module Export Advanced Patterns Augmentation Sub-modules. From AS3 to TypeScript | Jesse Freeman. Last week, I decided to port over one of my favorite AS3 projects, F*Rogue, to TypeScript. I decided to call this new project RogueTS (project source code), and it was my first attempt at using TypeScript for a real JavaScript project. After a few hours of hacking around, I decided to port over the entire AS3 codebase in two nights. I figured I would put together some notes on how I did it and talk about the similarities and differences between ActionScript and TypeScript. Code Organization Perhaps the biggest advantage of languages like C#, Java, and AS3 is their ability to cleanly organize your code into packages, classes, and interfaces.

In F*Rogue, I had set up a package structure com.gamecook.frogue.*, but in RogueTS I decided to go with something a little simpler rogue.*. Likewise, you can add classes into your modules. Notice how this class has a constructor defined? Now I can create a new Rectangle class by simply writing the following: Typing TypeScript-Specific Additions. Currying. Motivation[edit] Currying is similar to the process of calculating a function of multiple variables for some given values on paper. For example, given the function f(x,y) = y / x: To evaluate f(2,3), first replace x with 2.

Since the result is a function of y, this function g(y) can be defined as g(y) = f(2,y) = y/2. Next, replace the y argument with 3, producing g(3) = f(2,3) = 3/2. On paper, using classical notation, this is usually done all in one step. If we let f be a function then the function h where is a curried version of . Is the curried equivalent of the example above. Definition[edit] Given a function f of type , currying it makes a function . Takes an argument of type and returns a function of type . The → operator is often considered right-associative, so the curried function type is often written as .

Is equivalent to Mathematical view[edit] In a set-theoretic paradigm, currying is the natural correspondence between the set of functions from to , and the set to the set of functions from . . . Using "Object.create" instead of "new" Immediately-Invoked Function Expression (IIFE) In case you hadn’t noticed, I’m a bit of a stickler for terminology. So, after hearing the popular, yet misleading, JavaScript term “self-executing anonymous function” (or self-invoked anonymous function) one too many times, I’ve finally decided to organize my thoughts into an article. In addition to providing some very thorough information about how this pattern actually works, I’ve actually made a recommendation on what we should call it, moving forward.

Also, If you want to skip ahead, you can just check out some actual Immediately-Invoked Function Expressions, but I recommend reading the entire article. Please understand that this article isn’t intended to be an “I’m right, you’re wrong” kind of thing. I’m genuinely interested in helping people understand potentially complex concepts, and feel that using consistent and accurate terminology is one of the easiest things that people can do to facilitate understanding.

So, what’s this all about, anyways? The heart of the matter. OOP in JS, Part 1 : Public/Private Variables and Methods. This page shows how to create private variables and methods in "classes" in Javascript through the rather simple example of a person. (This is really a very rough approximation of the classical OOP pattern, and not necessarily a "best-practice" for JavaScript programming.) Part 2 covers inheritance. Summary Example In this example, a person's name and race are set at birth and may never be changed. When created, a person starts out at year 1 and a hidden maximum age is determined for that person. The person has a weight which is modified by eating (tripling their weight) or exercising (halfing it). <- click to run the example code below (the code block being run appears after the Person constructor). The Example Code Notes This page copyright ©2003 by Gavin Kistner. A fresh look at JavaScript Mixins. (Russian, Japanese) In this article I’ll explore JavaScript mixins in detail, and introduce a less conventional, but to my mind more natural mixin strategy that I hope you’ll find useful.

I’ll finish up with a profiler matrix summarizing the performance impact of each technique. [A big Thank You to the brilliant @kitcambridge for reviewing and improving the code on which this blog is based!] Re-using Functions In JavaScript, every object references a prototype object from which it can inherit properties. Prototypes are great instruments for re-use: a single prototype instance can define properties for an infinite number of dependent instances. Fortunately, when it comes to function re-use, JavaScript offers viable alternatives. The Basics In general computer science, a mixin is a class that defines a set of functions relating to a type (e.g. OK but this is JavaScript, and we have no classes.

The Use Case 1. In practice, however, such a heavyweight mixin is unnecessary. The extend function. Prototypes in JavaScript. JavaScript Closures Demystified.