一起来HTML5吧!

 

 

搜索
一起HTML5 论坛 LimeJS LimeJS教程 LimeJS指南(#0,起步)
查看: 3993|回复: 5
go

LimeJS指南(#0,起步)

Rank: 9Rank: 9Rank: 9

发表于 2011-3-2 20:35 |显示全部帖子
    呃,写完才发现没有附上LimeJS的API地址,还好黄启东同学提醒。SORRY,在这里附上:
   
http://limejs.digitalfruit.ee/docs/index.html
LimeJS是为数不多的一款出色的HTML5游戏框架,但悲剧的是,无法从大陆访问其官方站点www.limejs.com
最近,应该就在二月底,LimeJS终于给出了它较为完整的tutorial,当然,没有VPN或者代理,你也无法直接看到(虽然你可以从它的安装包里找到这些,但依然是E文的)。于是,我想到,在这里开几个帖子,分别对应这些英文版本的tutorial,方便大家学习这一优秀的HTML5框架。
    Stefan打算采用渐进的翻译方式,来完成这一系列的tutorial,因此事先把这些帖子以纯英文的方式开放,然后,按照一段英文一段中文的方式逐步翻译。
    现在从第0章节开始:

# Getting started
# 起步
## Installation
## 安装

*Windows users: please follow the installation guide in the README file*
*Windows 用户: 请按照安装包里的README文件来进行安装。*

PS:这里的README文件同样是英文版的,具体步骤翻译如下:

1.下载并安装Git,地址
http://code.google.com/p/msysgit/downloads/list,在安装过程中选择“Run Git from the Windows Command Prompt
2.从https://github.com/digitalfruit/limejs/zipball/master(感谢上帝,这个可以下载)下载limejs的安装包。
3.解压,例如解压至c:\根目录下。
4.如果没有python请从http://www.python.org/download/
下载。
5.登录命令行。
6.通过“python --version”检查是否正确安装python
    如果返回错误信息,您需要添加全局path或者使用全路径来访问python,具体步骤如下:
    添加python到您的全局path:
    1.打开控制面板->System and Security系统和安全->系统->高级系统设置
    2.在高级标签里选择环境变量……
    3.在系统变量里找到Path。
    4.选择并修改。
    5.追加分号并写入你的python路径,
例如“;C:\Python27\”。
    6.点击OK两次。
    7.重启
CMD。
    8.尝试是否工作。
7.进入根目录
    cd c:\lime
8.python bin/lime.py --help

The dependencies required to develop with LimeJS include [Python 2.6+](http://www.python.org/), [Git](http://git-scm.com/download) and [Subversion](http://subversion.apache.org/) or Git-SVN. If you wish to use Closure Compiler then [Java](http://www.java.com/en/) is also required. Once you have your built game there are no specific requirements for the distribution server.
LimeJS依靠的东西有[Python 2.6+](http://www.python.org/),[Git](http://git-scm.com/download)和[Subversion](http://subversion.apache.org/)或者Git-SVN。如果你想使用Closure Compiler,那么 [Java](http://www.java.com/en/)也是需要的。一旦你建立了游戏,对分发服务器没有什么特定需求。

Download the source from[github](http://github.com/digitalfruit/limejs).The files include Javascript source files (in lime/) and one Python helpercommand line tool(lime.py) in bin/ directory.
(http://github.com/digitalfruit/limejs)下载源代码,其中包含JS源代码(lime/)和一个Python帮助命令行(在bin下的lime.py)。


Check out the features of the CLI utility by running

通过运行帮助工具来检查CLI功能:

#!Bash
    bin/lime.py –help


You will see the utility can handle initial setup,dependency updating, project creation, template generations and projectbuilding.

你将看到其他的一些工具,例如安装,依赖工具升级,工程建立,产生模板和编译工程。


Start by running inital setup:
首先,我们先要初始化安装:
    #!Bash
    bin/lime.py init


This will download [Closure Library](http://code.google.com/closure/library/),[Box2D physics library](http://box2d.thinkpixellab.com/), [Closure Compiler](http://code.google.com/closure/compiler/)& [Templates](http://code.google.com/closure/templates/) and set them allup so they are ready for being used.

此命令将下载ClosureBox2D物理引擎、Closure Compiler(一款JS压缩工具)和Closure Templates,并且讲这些工具部署就绪。


You're done! Create a simple helloworld project byrunning

你成功了,建立一个helloworld工程:
    #!Bash
    bin/lime.py create helloworld


Open helloworld/helloworld.html in the browser andenjoy your accomplishment.

在浏览器中打开helloworld/helloworld.html来享受你的胜利成果。


## Common Closure
LimeJS is built with Closure Library. Closure isJavaScript library built by Google, it has been used to develop lot of Google'sgreat products like Gmail or Docs. It is highly maintainable and readable, fastand feature rich. It also integrates well with other Closure tools likeCompiler and Templates.

##Closure概述

LimeJS一来Closure库。Closure是一个由Google创建的JS库,已经被用来开发很多Google的经典产品例如GmailDocs。该库十分稳定和易读、速度快并且功能丰富。并且继承了其他Closure工具例如CompilerTemplates

### Namespaces
One of Closure's the most noticeable features is itsnamespacing system. Unlike some other libraries all the code is separatedbetween files. Every file provides names for its code and can request someother files being present. While developing you only have to include *base.js*file that gives you new functions `goog.provide(namespace)` and`goog.require(namespace)`. Provide function declares that all code in the filecan be requested with that name. Require function requests another file withthat name. The whole system is analogues with any other language that hasnamespaces built in (Java, ActionScript, Python) with an exception that thename does not need to specify correct folder structure but can be completelyarbitrary. Closure uses its built in *deps.js* file to map the namespaces tofile paths. This means that if you add new namespaces you have to run
    #!Bash
    python bin/lime.py update
to update the *deps.js* so your new file can beaccessed.

##命名空间:

Closure的一个最显眼的功能就是它的命名空间系统。和其他库不同,所有代码按照文件划分。每个文件提供了自己的名称,并且可以动态添加其他已经存在的文件。在开发中,你只需要包含base.js文件,它给你提供了goog.provide(namespace)goog.require(namespace)方法。Provide方法指明本文件中的所有代码可以通过指定的名称来引用。Require方法可以通过给定名称来引用指定文件。整个系统和其他内置命名空间的语言(Java, ActionScript, Python)类似,例外的是名称不一定指定正确的目录结构,是完全随意的。Closure采用内置的deps.js文件来简历文件路径和命名空间的对应关系。即:如果你想追加新的命名空间你可以通过运行:

    #!Bash
    python bin/lime.py update

来更新deps.js文件,然后,新的文件就可以通过命名空间访问了。

It is not required that you use `goog.provide()` foryour own project files but its highly encouraged. Using this will also get youmuch better results when you are ready to compile your game.
在你的工程中使用goog.provide()并不是必须的,但是却是极力推荐的。使用这个方法将使你在压缩编译工程时变得更加方便。

### Inheritance
Working with LimeJS one of the common actions is tomake your custom subclass of a builtin class. Using this you can add yourcustom game specific methods to common objects. This is an example of a*lime.Circle*'s subclass *mygame.Ball*.

###继承
使用LimeJS的一个重要的特性就是建立基于内置类的用户自定义的子类,因而你可以添加自定义的方法到公共对象中。这里有一个列子,是lime.Circle的子类mygame.Ball
        //
使本文件可被其他文件加载
        goog.provide('mygame.Ball');
        //
加载lime.Circle
        goog.require('lime.Circle');
        //
新的构造函数
        mygame.Ball = function(){      
              // 调用父类构造函数
               goog.base(this);

               // 定义初始化代码

               this.color_ = 'red';
        }
        //
定义父类
        goog.inherits(mygame.Ball,lime.Circle);
        //
增加新方法
        mygame.Ball.prototype.myMethod =function(){        
        }


### Events
Closure provides you functions for listening andunlistening events for objects. You add an event listener with function`goog.events.listen(src, type, listener, opt_capture, opt_handler)`. Src is thetarget object dispatching the event, type is the event name(for examplemousedown). Listener is callback function that is called when event fires. Youcan also make the event fire in capture phase and define custom context objectfor callback function. Removing event listener uses same kind of function named`goog.events.unlisten()` with all the same parameters.

##事件

Closure提供监听和取消监听事件的方法。通过使用goog.events.listen(src, type, listener, opt_capture,opt_handler)增加监听器。Src是分发事件的目标对象,type是事件名称(例如mousedown)。Listener是事件触发时的回调函数。你可以指定事件在捕捉阶段触发,并且为回调函数定义自定义对象。使用goog.events.unlisten()一起完全相同的参数来移除监听器。

If you wish to dispatch events from your customobject you have to make them subclass of *goog.events.EventTarget* and thencall the objects `dispatchEvent()` method.
如果你想要为你的对象自行分发事件,需要将其继承自goog.events.EventTarget,并且调用dispatcheEvent()方法。

你可以通过如下链接进一步了解Closure类库:

[docs](http://closure-library.googlecode.com/svn/docs/index.html)
[book](http://www.amazon.com/Closure-De ...Bolin/dp/1449381871)[video](http://www.youtube.com/watch?v=yp_9q3tgDnQ)



[注意:翻译部分为17html5.com版权所有,任何转载必须注明文章出处和链接地址以及作者,否则视为侵权,将追究法律责任!]

扣腚——一个永恒的话题!

Rank: 1

发表于 2011-3-2 22:29 |显示全部帖子
非常不错的教程,有个问题:closure是怎么样知道require的文件是在哪里呢?

Rank: 9Rank: 9Rank: 9

发表于 2011-3-2 22:31 |显示全部帖子
回复 小岂 的帖子

没自己看吧,通过运行update,更新deps.js就可以实现了!这个deps.js非常像php里的autoload。
扣腚——一个永恒的话题!

Rank: 1

发表于 2011-4-1 15:26 |显示全部帖子
好东西,不顶对不起我自己的良心

Rank: 1

发表于 2011-11-7 14:40 |显示全部帖子
一定要顶啊

Rank: 1

发表于 2011-12-11 04:37 |显示全部帖子
顶啊顶啊顶。。。
你需要登录后才可以回帖 登录 | 注册
验证码 换一个

Archiver|一起HTML5 ( 京ICP备08008764号-2 )

GMT+8, 2012-5-20 12:15 , Processed in 0.065415 second(s), 13 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc.