Planning a Prototype

I found this nice article about prototyping: http://gamesfromwithin.com/prototyping-youre-probably-doing-it-wrong

I think I’ll start this Arbor game by making a prototype. I’ll just try to make one branch with a leaf that you can click and drag. You draw a curvy line while you’re dragging. After you release the drag, the branch will grow to the shape of your line.

That bit is the only part of the design that seems difficult. If I can get that done, the rest won’t be too much of a challenge, besides making it look nice, of course. That’s always the most frustrating part.

Game Designing: Arbor

It has to do with trees.

Sorry for the blurrified picture. I don’t have a scanner handy.

In case you cant read it, the important text says:

Branches:

  • Collect nutrients
  • Use a lot of water
  • Use little nutrients

 

Roots:

  • Collect water
  • Use a lot of nutrients
  • Use little water.

 

The main goal in the game is to grow a tree.

On a micro level, you grow the roots and branches by pulling on leaves (on the branches) or little nubbins (on the roots). The longer a branch is, the more nutrients it collects, and the more water it uses. The longer a root is, the more water it collects, and the more nutrients it uses.

There are two ways to lose:

  1. The tree runs out of either nutrients or water. Go too long without nutrients or water and the tree dies.
  2. The tree falls over. Does a tree falling make a sound if no one is there too hear it? If you put too many branches or roots on one side, you’ll find out.

 

You have a score that is based solely on how big the tree is. Just try to grow the biggest tree you can. You win by getting a high score and then bragging about it on a social network of your choice 😉

The game will be very slow paced, but hopefully still challenging.  I imagine it being kind of like Eufloria.

You can grow the tree any way you like. Make it tall, make it wide, make it gnarled and twisty, make it look like a Squirtle, whatever. Once you have something cool, you can take a nice picture of it and share it.

I might make something bad happen if you have more nutrient or water than your tree can handle, not sure yet. I kind of like how simple it is now.

“Play” Push/Pull Factory

My Github Game-Off 2012 game is now at its permanent home!

It’s not much yet, but give it a try:

gageh.us/githubgameoff/2012/

I’m going to be updating it frequently while the competition is going. When I do I’ll write about it here. I still need to do a big writeup on the design of the game. I’ll get around to it. My priority right now though, is working on the game itself.

If you’re interested, here’s the code:

github.com/Gagege/game-off-2012

Change or Tween a Sprite’s Color on Haxe NME HTML5 Target

Haxe is a write once compile everywhere (some might say “debug everywhere”) language and NME is a Flash-like library for drawing graphics with Haxe. I’ve been using it for a few weeks and I like it. The language has some nice features that make it very familiar to me.

For my 2012 Github Game-Off game I’m using Haxe and NME. I ran into a problem while trying to fade a rectangle from one color to another. After asking a quick question on haxelang got an answer. Here’s how to fix it.

If you’re using the HTML5 target, you might notice that you can’t use Actuate.transform() to change the color of a sprite. That’s because the canvas renderer that NME uses, Jeash, hasn’t implemented it yet, dang. Here’s what I did instead.

public function new(itemInBox:Resource) 
{
  super();
    
  resource = itemInBox;
    
  boxWidth = Lib.current.stage.stageWidth * .08;
    
  drawBox(defaultColor);
  fadeBoxIn(7);
}
  
public function changeBoxColor():Void 
{
  var boxColor:Int = 0;
  switch(resource.type)
  {
    case ResourceType.Lithium:
      boxColor = lithiumColor;
    case ResourceType.Plutonium:
      boxColor = plutoniumColor;
    case ResourceType.Uranium:
      boxColor = uraniumColor;
  }
    
  drawBox(boxColor);
  fadeBoxIn(.5, 0);
}
  
private function drawBox(fillColor:Int):Void 
{
  this.graphics.beginFill(fillColor, 1);
  this.graphics.drawRect(
    (boxWidth / 2) * -1,
    (boxWidth / 2) * -1,
    boxWidth,
    boxWidth);
  this.alpha = 0;
}
  
private function fadeBoxIn(speed:Float, delay:Float = 0):Void
{
  Actuate.tween(this, speed, { alpha: 1 } ).delay(delay);
}
									

Explanation:

  • First, I draw a box, “drawBox(defaultColor)”.
  • Next, I fade it in, “fadeBoxIn(7)”.
  • A bunch of stuff happens outside of this class.
  • “changeBoxColor()” is called from outside.
  • I pick a color based on “ResourceType”
  • Then, I redraw the box and fade it in again.

 

You may notice that I never graphics.clear()’d the original box. That is so the new box color will fade in smoothly over the old box color. If I cleared the old box first, you’d see it disappear and then the new box would fade in.

Yes, now I have two rectangles instead of one. Unfortunately, that takes memory. I hope Jeash implements Actuate.transform() soon.

Object Oriented Javascript

Contrary to its name, Javascript has little to do with Java. It’s not based on Java, it doesn’t run on the JVM, apparently it’s just a marketing term. What Javascript really is, or was meant to be, is Lisp with C style syntax. That little nugget only really helps you if you know Lisp and C. If you do know both you might say, as I did, “Ah, now it makes sense.”

The hard thing about Javascript, coming from an object oriented worldview, is that you’re not sure at first if you should treat it like an imperative language, like C (do this, then that, then that, then that…), or an OO language, such as C# or Java (make one of these, then make it do this). The answer is neither. The answer is that Javascript is multi-paradigm.

Is it functional like Lisp? Yes.

Is it object oriented? Yes.

Is it imperative/scripting? Yes.

If you’re reading this then you’re interested in, like I was, learning how to better organize your Javascript code, similar to how you organize your C# or C++ or Java code. Maybe you write a lot of Javascript already and it’s a mess. You find yourself thinking, “Gee, I wish I could make this var private.” and “Man, if only I could stick this JQuery stuff I use all the time into a nice neat container, then I wouldn’t have to worry about all those nasty ‘$’ symbols and selectors anymore.”

Okay, let’s dive right into some examples.

We’ve all written this kind of thing before:

$(document).ready(function(){
    function openTheMenu() {
        $('.contact').addClass("selected");
        $('.contact').addClass("menuLinkHoverOrVisit");
        $('#menu').animate({
            bottom: '0px'
        });
        menuClosed = false;
    }

    function closeTheMenu() {
        $('.contact').removeClass("selected");
        $('.contact').removeClass("menuLinkHoverOrVisit");
        $('#menu').animate({
            bottom: '-330px'
        });
        menuClosed = true;
    } 
});
									

It’s not great and I’m sure you’ve seen a lot worse. Unfortunately it’s only going to get more complex as our app grows. Let’s clean it up and start organizing it before it’s too late.

We will start by making ourselves a class called Menu. You might want to put this in a seperate .js file. Maybe menu.js?

function Menu () {
    this.contactButton = $('.contact');
    this.menu = $('#menu');
    this.isClosed = true;
}
									

The two members assigned to “this” (which will be our menu object) are references to the jQuery objects we will be using. Those two lines are the last time we’ll have to use jQuery syntax in this tutorial.

Next we need those two functions, “openTheMenu” and “closeTheMenu”, to be members of our class. Let’s add the following to our menu.js file under the Menu constructor.

Menu.prototype.open = function () {
    this.contactButton.addClass("selected");
    this.contactButton.addClass("menuLinkHoverOrVisit");
    this.menu.animate({
        bottom: '0px'
    });
    this.isClosed = false;
};

Menu.prototype.close = function() {
    this.contactButton.removeClass("selected");
    this.contactButton.removeClass("menuLinkHoverOrVisit");
    this.menu.animate({
        bottom: '-330px'
    });
    this.isClosed = true;
};
									

There are a few different ways to add member functions to a class. For a more in depth explanation, read this: http://eloquentjavascript.net/chapter8.html

Important

There is one more thing to remember. Javascript has no way to make something “private” other than by placing a var or function inside of another function. If you do that then the var or function is local to its containing function. It can not be accessed outside of it.