未加星标

Getting Started With Crafty: Introduction

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

If you have ever developed html5 games before, you might be familiar with a few game engines that can make game development a lot easier. They have all the code you need to detect collisions, spawn different entities, or add sound effects to your game. In this tutorial, you will learn about another such game engine called Crafty . It is very easy to use and supports all major browsers, including IE9.

Once minified, the library is only 127kb in size, so it won't result in any major delay in loading your game. It supports sprite maps, so you can easily draw game entities on the screen. You can also create custom events that can be triggered whenever you want and on whatever object you want.

There are also components for sounds, animation, and other effects. Overall, this game engine is a great choice if you want to develop some basic HTML5 games.

Initial Setup

The first thing that you need to do is include Crafty in your project. You can either download the file and load it in your projects or you can directly link to the minified version hosted on a CDN. Once the library has been loaded, you can use the following line to initialize Crafty:

Crafty.init([Number width, Number height, stage_elem]);

The first two argumentsdetermine the width and height of our stage. The third argument is used to specify the element that we are going to use as our stage. If the third argument is not provided, Crafty will use a div with id cr-stage as its stage. Similarly, if the width and height arguments are missing, Crafty will set the width and height of our stage equal to the window width and height.

At this point, you should have the following code:

<html>
<head></head>
<body>
<div id="crafty-game"></div>
<script type="text/javascript" src="path/to/crafty.min.js"></script>
<script>
Crafty.init(600,400, document.getElementById('crafty-game'));
</script>
</body>
</html> Creating Entities

Entities are building blocks of a Crafty game. Everything from the player to the enemies and obstacles is represented using entities. You can pass a list of components to an entity. Each of these components will add extra functionality to our entity by assigning properties and methods from that component to the entity. You can also chain other methods to an entity to set various properties like its width, height, location, and color. Here is a very basic example of adding components to an entity:

Crafty.e('2D, Canvas, Color');

Every entity that you want to display to the user will need both the 2D component and a rendering layer. The rendering layer can be DOM , Canvas , or WebGL . Please note that WebGL support was added in version0.7.1. Currently, only the Sprite , Image , SpriteAnimation , and Color components support WebGL rendering. Text entities still need to use DOM or Canvas for now.

Now, you can use the attr() method to set the value of various properties including the width, height, and position of your entity. Most methods in Crafty will return the entity they are called on, and attr() is no exception. This means that you will be able to chain more methods to set other properties of your elements. Here is an example:

Crafty.e("2D, Canvas, Color")
.attr({x:200, y:100, w:200, h:50})
.color("orange");

This will create an orange rectangular entity on the stage.

Moving Entities Around

Now that you have created the entity, let's write some code to move it around using the keyboard. You can move an entity in four different directions, i.e. up, down, left, and right, by adding the Fourway component to it.

The entity can then be moved by either using the arrow keys or W, A, S, and D. You can pass a number as an argument to the fourway constructor to set the speed of the entity. Here is what the code of the entity should look like now:

Crafty.e("2D, Canvas, Color, Fourway")
.attr({x:200, y:100, w:200, h:50})
.color("orange")
.fourway(300);

You can restrict the movement of an entity to just two directions using the Twoway component. Replacing the Fourway component in the code above with Twoway will confine the movement of the box to just the horizontal direction. This is evident from the following demo:

You can also add your own components to different entities for identification or to group similar entities together. In this case, I am adding the Floor component to our orange box. You can use some other descriptive names to help you identify different entities.

Crafty.e("2D, Canvas, Color, Twoway, Floor")
.attr({ x: 200, y: 340, w: 200, h: 50 })
.color("orange")
.twoway(300);

There is another very useful component that you can use to move elements around, and it is called the Gravity component. When added to an entity, it will make that entity fall down. You might want to stop the given entity from falling further, once it encounters some other entities. This can be achieved by passing an identifier component as an argument to the gravity function. Here is the code that makes the small black square fall on the floor or platform:

Crafty.e("2D, Canvas, Color, Gravity")
.attr({ x: 200, y: 50, w: 50, h: 50 })
.color("black")
.gravity("Floor"); Final Thoughts

As you see in the tutorial, we were able to create the basic structure of a simple game using very little code. All we had to do was add components to our entities and specify the values of different properties like width, height, or movement speed.

This tutorial was meant give you a basic idea of entities and other concepts related to Crafty. In the next part, you will learn about entities in much more detail. If you have any questions about this tutorial, let me know in the comments.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: WebGLHTMLHTML5CDN
分页:12
转载请注明
本文标题:Getting Started With Crafty: Introduction
本站链接:http://www.codesec.net/view/534220.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(42)