woensdag 29 augustus 2012

Craftyjs tutorial part 2

Hi all,

The second part of the tutorial is not hat hard so I'm just posting the code I have now. I tested it on ubunu 12.04 in firefox.
I saw that I made a minor mistake in the code from yesterday but I just edited that. It was loading the world scene first and the loading scene after. Not how it is supposed to be XD.
So here is what the game.js code should look like now:
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
window.onload = function(){
    //start crafty
    Crafty.init(400,336);
    Crafty.sprite(16, "sprites.png", {
        grass1: [0, 0],
        grass2: [1, 0],
        grass3: [2, 0],
        grass4: [3, 0],
        flower: [0, 1],
        bush1: [0, 2],
        bush2: [1, 2],
        player: [0, 3],
        enemy: [0, 3],
        banana: [4, 0],
        empty: [4, 0]
    });
    function generateWorld() {
        //loop through all tiles
        for (var i = 0; i < 25; i++) {
            for (var j = 0; j < 21; j++) {
                //place grass on all tiles
                grassType = Crafty.math.randomInt(1, 4);
                Crafty.e("2D, DOM, grass" + grassType)
                    .attr({ x: i * 16, y: j * 16, z:1 });
                    //create a fence of bushes
                if(i === 0 || i === 24 || j === 0 || j === 20)
                    Crafty.e("2D, DOM, solid, bush" + Crafty.math.randomInt(1, 2))
                    .attr({ x: i * 16, y: j * 16, z: 2 });
                //generate some nice flowers within the boundaries of the outer bushes
                if (i > 0 && i < 24 && j > 0 && j < 20
                        && Crafty.math.randomInt(0, 50) > 30
                        && !(i === 1 && j >= 16)
                        && !(i === 23 && j <= 4)) {
                    var f = Crafty.e("2D, DOM, flower, solid, SpriteAnimation, explodable")
                            .attr({ x: i * 16, y: j * 16, z: 1000 })
                            .animate("wind", 0, 1, 3)
                            .animate('wind', 80, -1)
                            .bind('explode', function() {
                                this.destroy();
                            });
                }
                //grid of bushes
                if((i % 2 === 0) && (j % 2 === 0)) {
                    Crafty.e("2D, DOM, solid, bush1")
                        .attr({x: i * 16, y: j * 16, z: 2000})
                }
            }
        }
    };
    
        //the loading screen that will display while our assets load
    Crafty.scene("loading", function () {
        //load takes an array of assets and a callback when complete
        Crafty.load(["sprite.png"], function () {
            Crafty.scene("main"); //when everything is loaded, run the main scene
        });

        //black background with some loading text
        Crafty.background("#000");
        Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
                .text("Loading")
                .css({ "text-align": "center" });
    });
    
    Crafty.scene("loading");
    
    Crafty.scene("main", function () {
        generateWorld();
    }); 
};
If you have any questions about the code, about the tutorial or this blog leave a message and I'll answer it as soon as possible.

Geen opmerkingen:

Een reactie plaatsen