11/07/2011
0
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 .
- Demo
- Agrandir
- Recharger
- New window
G�n�rez vos vid�os d'entreprise par l'IA avec la voix ou simplement du texte
Votre premi�re application vid�o AI GRATUITE ! Automatisez votre premi�re vid�o AI. Cr�ez votre vid�o professionnelle en 5 minutes gr�ce � l'IA. Aucun �quipement ni comp�tence en montage vid�o requis. Production vid�o sans effort pour les sp�cialistes du marketing de contenu.
Sprites
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.
par Avant-premi�re- Sent (0)
- Nouveau
Auteur:
Previews:
Commentaire:
Votes:
Sent:
Taille:
Rang:
Louis Stowasser [more]
133,936
0
0
0
0.09 KBytes
0 votes / 133,936 previews / 0 commentaire
11/07/2011
Vous ?tes en avoir marre avec les jeux JavaScript et essayer de trouver comment construire des jeux bas?s sur le Web Jav...Faire simple RPG avec JavaScript et Crafty - Faire simple RPG avec JavaScript et Crafty - Langue: Fran�aise
