Rory's Blog
Home
Blog
Projects
Facebook
Google+
Github
RSS

Playing with Tiles

11/01/15

Haven't quite made another game, but I'm going to count it towards another 5 hours of playing games (enough to cover a week of Super Smash Bros. Melee lunch breaks with my work friend).

I'm thinking I might mutate this setup further to have "the game of life" system executing every second.

The Code

var Crafty;
(function () {
    var row,
        col;

    Crafty.init(600, 900, 'game');
    Crafty.pixelart(true);
    Crafty.sprite('assets/plant_center.png', {Plant: [0, 0, 16, 16]});

    for (row=0; row<9; row += 1) {
        for (col=0; col<6; col += 1) {
            Crafty.e('DOM,Plant,Tween,Mouse')
                .attr({
                    x:col * 100,
                    y:row * 100,
                    w:100,
                    h:100,
                    alpha: 0
                });
        }
    }

    Crafty('Plant')
        .bind('MouseOver', function (e) {
            if (this.alpha !== 1) {
                this.alpha = 0.5;
            }
        })
        .bind('MouseOut', function (e) {
            if (this.alpha !== 1) {
                this.alpha = 0;
            }
        })
        .bind('MouseDown', function (e) {
            this.alpha = 1;
        });
}());

This kinda ended up being an incredibly basic tile editor. It makes me think I could make a tile editor with not too much effort. The limited experience I have with tile editors makes me feel like I want to make my own, anyways.

But that's tangential to the topic at hand. Let's do a block-by-block disucssion of the code.

    Crafty.init(600, 900, 'game');
    Crafty.pixelart(true);
    Crafty.sprite('assets/plant_center.png', {Plant: [0, 0, 16, 16]});

This inits Crafty to a 600 by 900 pixel area residing within the div with an id of "game".

Setting pixelart to true tells Crafty not to do any blurring or upscaling of the image that browsers do for you if you zoom in on a pixelated image. If you're curious what the tiles look like without this setting, go to the proper Playing with Tiles page, open the browser's JavaScript console (in Chrome or Firefox, simply press Ctrl+Shift+J or Cmd+Shift+J on Mac, else see here), and enter: Crafty.pixelart(false);

Or, alternatively, check out the sprite's png and zoom in on it in the browser (not as fun as the original instructions, IMHO).

The third line is creating a "Plant" component that I can attach to entities. The "Plant" component is a sprite defined by the path to the image given, and then an object with the form {ComponentName: [TopLeftXCoordinate, TopLeftYCoordinate, PixelWidth, PixelHeight]} As the png is just the plant image, it starts at (0, 0) and is simply 16 by 16 pixels.

    for (row=0; row<9; row += 1) {
        for (col=0; col<6; col += 1) {
            Crafty.e('DOM,Plant,Tween,Mouse')
                .attr({
                    x:col * 100,
                    y:row * 100,
                    w:100,
                    h:100,
                    alpha: 0
                });
        }
    }

This just makes a setup that fills the Crafty space with invisible plant entities (alpha being 0 makes the plant sprite invisible).

    Crafty('Plant')
        .bind('MouseOver', function (e) {
            if (this.alpha !== 1) {
                this.alpha = 0.5;
            }
        })
        .bind('MouseOut', function (e) {
            if (this.alpha !== 1) {
                this.alpha = 0;
            }
        })
        .bind('MouseDown', function (e) {
            this.alpha = 1;
        });

Here I bind events to all the entities with the "Plant" component to change the visibility of the plant sprite based on mouse actions.

Overall, this is a good prototype to get familiar with the sprite aspects of the Crafty API, and is somewhat good inspiration for a tile editor (which I might play around with).