“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.

Host your high scores on Webscript.io

Check out this example:

https://www.webscript.io/examples/leaderboard

Webscript.io was apparently just released this morning. It looks pretty awesome. Basically, you write a script in Lua, put it on their server, and they give you a nice friendly URL to access the script. It could be very useful.

If you go the free route your script and data get wiped after 7 days. To have them host it indefinitely it’s about $5 a month.

Manditory Awkward First Post

I never know what to say on the first post.

I need to write some sort of welcome though. So, welcome. I don’t have a name for the blog yet, the current title is “gageh”, but I do know what I’m going to be writing about; progamming mostly. I’ve been working on something fun lately and I decided to start a blog about it.

So, I’ll be doing a series about programming on Android. No, I don’t mean writing Java code with Android SDK to run on Android devices, though I do some of that also. I’m talking about writing code on Android devices.

“Wait a minute. Are you talking about writing code on that tiny little software keyboard on your phone?”

Well, no. With a Bluetooth keyboard, but there’s a lot more to it than that. Stock Android does not make a good programming environment. I’m hoping to get people interested in this. Maybe we can turn all these fancy new tablets into creation devices rather than just consumption devices.

About me, I’m Gage Herrmann. I’m a Christian first and foremost. I’m born-again and saved, but only because God graciously granted me repentance and faith, not because of anything I’ve done to deserve it. Just like everyone else, I am a sinner. I try to live for Jesus in every aspect of my life, but I fail. I can’t  do enough good to be saved. I would be Hell-bound if it wasn’t for Jesus’ sacrifice on the cross. I hope you too realize that about yourself.

I’m also a husband and father. My wife and I have one daughter and another kid on the way! I work for a software company and, obviously, love working on side projects.

Well, I’d better get back to work.