google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Faire simple RPG avec JavaScript et Crafty Vous ?tes en avoir marre avec les jeux JavaScript et essayer de trouver comment construire des jeux bas?s sur le Web JavaScript ?
Cadre de jeu JavaScript - Crafty - de cr?er un simple JavaScript RPG .


Étiquette: simple jeu de RPG, JavaScript et Crafty, JavaScript RPG jeu, Cadre de jeu JavaScript, Rus?, gameplay, caract?re

Gratuit iPage hébergement Web pour la première année MOMENT



Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage.
Essayez iPage GRATUIT première année MOMENT

Sprites

view the demo | download demo

Remember that sprite map from earlier? It’s time to use that in the game and get some visuals here. Crafty has an inbuilt method to splice sprite maps into individual components that can be applied to any 2D entity.

window.onload = function() {
  // Start crafty

  Crafty.init(50, 400, 320);
  Crafty.canvas();

  // Turn the sprite map into usable components
  Crafty.sprite(16, "sprite.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]

  });

  // 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"});

  });
  
  // Automatically play the loading scene
  Crafty.scene("loading");
};

The first argument is the tile size (in our case is 16 pixels by 16 pixels). This defaults to 1 if left out. The next argument is the path to the sprite map. Finally the last argument is an object where the key is the label and the value is an array for where the particular sprite is located in the image.

The values are multiplied by 16 so you need only give the amount of tiles from the top left. If a sprite takes up a width or height greater than one tile, simply add it to the array following this format:

[x, y, w, h]

You may notice that not all of the sprites in the sprite map have been labelled. This is because the sprites form an animation which we will add later.

window.onload = function() {
  // Start crafty

  Crafty.init(50, 400, 320);
  Crafty.canvas();

  // Turn the sprite map into usable components
  Crafty.sprite(16, "sprite.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]

  });

  // Method to randomy generate the map
  function generateWorld() {
    // Generate the grass along the x-axis

    for (var i = 0; i < 25; i++) {

      // Generate the grass along the y-axis
      for (var j = 0; j < 20; j++) {

        grassType = Crafty.randRange(1, 4);
        Crafty.e("2D, canvas, grass" + grassType)

          .attr({x: i * 16, y: j * 16});

        // 1/50 chance of drawing a flower and only within the bushes
        if (i > 0 && i < 24 && j > 0 && j < 19 && Crafty.randRange(0, 50) > 49) {

          Crafty.e("2D, DOM, flower, animate")
            .attr({x: i * 16, y: j * 16})

            .animate("wind", 0, 1, 3)
            .bind("enterframe", function() {

              if (!this.isPlaying())
                this.animate("wind", 80);

            });
        }
      }
    }

    // Create the bushes along the x-axis which will form the boundaries
    for (var i = 0; i < 25; i++) {

      Crafty.e("2D, canvas, wall_top, bush"+Crafty.randRange(1,2))
        .attr({x: i * 16, y: 0, z: 2});

      Crafty.e("2D, canvas, wall_bottom, bush"+Crafty.randRange(1,2))
        .attr({x: i * 16, y: 304, z: 2});

    }

    // Create the bushes along the y-axis
    // We need to start one more and one less to not overlap the previous bushes
    for (var i = 1; i < 19; i++) {

      Crafty.e("2D, canvas, wall_left, bush" + Crafty.randRange(1,2))

        .attr({x: 0, y: i * 16, z: 2});

      Crafty.e("2D, canvas, wall_right, bush" + Crafty.randRange(1,2))

        .attr({x: 384, y: i * 16, z: 2});

    }
  }

  // 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"});

  });

  // Automatically play the loading scene
  Crafty.scene("loading");
};

generateWorld() is a function that will create entities to fill up the stage. This is the first time we have created an entity so I will go over that first. The function to create an entity is simply Crafty.e(). That’s it. You can also pass a string of components to add which will just call the .addComponent() method. Have a look at the following lines of code:

grassType = Crafty.randRange(1, 4);

Crafty.e("2D, canvas, grass" + grassType)
  .attr({x: i * 16, y: j * 16});

When we spliced the sprite map, we had four types of grass components/labels: grass1, grass2, grass3 and grass4. Using a little helper method, Crafty.randRange(), we generate a random number between 1 and 4 to decide which grass tile to use and apply it to the entity.

You will notice we are also adding some odd-looking components: 2D and canvas. 2D is a very important component which gives the entity and x and y position, width and height (called .w and .h), rotation, alpha and some basic rectangle calculations. The other component, canvas, tells Crafty how to draw the entity and with this component obviously on the canvas element. You can just as easy use the DOM component and it will instead draw it as a <div>.

Tip: DOM is usually always faster than canvas and if you notice sluggish performance in a canvas entity, try using DOM. It will look and act no different.

The rest of the method generates a boundary around the stage so the player can’t walk off. This uses the bush sprite. These boundary entities have a component, either wall_left, wall_right, wall_up or wall_down. The only purpose they serve is as a label — there is no inherited functionality.

JavaScript par jour


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web