Cocos2d-JS: 1.环境搭建

 

公司有项目是Cocos2d-html5的,跟着有参与一点,对cocos还是挺感兴趣的,抱着艺多不压身的态度就开始学习了cocos了,这里我学习的是cocos2d-js,主要是我开始看的时候已经叫js了不叫html5,其实cocos2d-js是html5和js-binding的结合,因为现在的工作也是写js所以对js有很大的兴趣。这里主要记录我学习和使用cocos2d-js的过程,比较我的记忆力不是特别好。

1.首先可以要去官网上下载cocos2d-js,地址:http://www.cocos2d-x.org/download,这里其实已经有中文版的站点了,但是并不是全站都汉化,只是部分而已,下载的截图:

不过我下载的时候还是V3.0 RC1,现在都已经到2了,也就一个多星期的时间,更新还是挺快的,点击下载就行了,

 

2.下载之后放到新建的文件夹Cocos中,如:

 

3.为了方便使用最好是先设置下环境变量,要不然每次使用输入一大串的路径太不方便了,

1 sudo vim /etc/profile 

 用vim打开,打开之后在里面设置环境变量:在最下面添加下面代码,

1 export PATH=/Users/dn9x/Cocos/cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin:$PATH

按ecs退出编辑状态,:wq!退出,然后关闭终端,然后重新打开终端。

 

4.这个时候在终端里面输入cocos -h查看是否正常。

 1 bogon:~ dn9x$ cocos -h
 2 
 3 /Users/dn9x/Cocos/cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin/cocos.py 0.7 - cocos console: A command line tool for cocos2d
 4 
 5 Available commands:
 6     run           Compiles & deploy project and then runs it on the target
 7     luacompile    minifies and/or compiles lua files
 8     deploy        Deploy a project to the target
 9     compile       Compiles the current project to binary
10     new           Creates a new project
11     jscompile     minifies and/or compiles js files
12 
13 Available arguments:
14     -h, --help    Show this help information
15     -v, --version    Show the version of this command tool
16 
17 Example:
18     /Users/dn9x/Cocos/cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin/cocos.py new --help
19     /Users/dn9x/Cocos/cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin/cocos.py run --help
20 bogon:~ dn9x$ 

 

显示这些信息就说明已经可以进行cocos2d-js的项目开发了,目前的cocos2d-js是通过命令行创建和运行的,接下来介绍下新建项目,主要是要一步一步来,使用到哪里就介绍哪里,输入cocos new -h查看新建帮助:

 1 bogon:~ dn9x$ cocos new -h
 2 usage: cocos new [-h] [-p PACKAGE_NAME] -l {cpp,lua,js} [-d DIRECTORY]
 3                  [-t TEMPLATE_NAME] [--ios-bundleid IOS_BUNDLEID]
 4                  [--mac-bundleid MAC_BUNDLEID] [--no-native]
 5                  [PROJECT_NAME]
 6 
 7 Creates a new project
 8 
 9 positional arguments:
10   PROJECT_NAME          Set the project name
11 
12 optional arguments:
13   -h, --help            show this help message and exit
14   -p PACKAGE_NAME, --package PACKAGE_NAME
15                         Set a package name for project
16   -l {cpp,lua,js}, --language {cpp,lua,js}
17                         Major programming language you want to use, should be
18                         [cpp | lua | js]
19   -d DIRECTORY, --directory DIRECTORY
20                         Set generate project directory for project
21   -t TEMPLATE_NAME, --template TEMPLATE_NAME
22                         Set the template name you want create from
23   --ios-bundleid IOS_BUNDLEID
24                         Set a bundle id for ios project
25   --mac-bundleid MAC_BUNDLEID
26                         Set a bundle id for mac project
27 
28 lua/js project arguments:
29   --no-native           No native support.
30 bogon:~ dn9x$ 

 

这里其实介绍的都很清楚了,

1 -l    要使用的语言,主要有cpp, lua, js,这里是js
2 -p   包名,比如com.dn9x.wan
3 -d   项目新建的位置

 

 

5.这里新建一个项目,比如名称叫做HelloC1,如:这里注意目录,我已经在work/study/下新建了目录cocos,所有的cocos的项目都会放在这里,

 1 bogon:cocos dn9x$ cocos new HelloC1 -l js -p com.dn9x.helloc1 -d ./
 2 Running command: new
 3 > Copy template into /Users/dn9x/work/study/cocos/HelloC1
 4 > Copying cocos2d-html5 files...
 5 > Copying files from template directory...
 6 > Copying directory from cocos root directory...
 7 > Copying cocos2d-x files...
 8 > Rename project name from HelloJavascript to HelloC1
 9 > Replace the project name from HelloJavascript to HelloC1
10 > Replace the project package name from org.cocos2dx.hellojavascript to com.dn9x.helloc1
11 bogon:cocos dn9x$ 

 

到这里就新建了一个cocos2d-js的项目了,一般情况下我们写代码的时候都是现在浏览器中测试编写,当项目完成之后在编译成各个平台的app,所以首先你要让项目在浏览器中跑起来,

 

6.启动项目,mac平台下默认会安装apache,所以接下来就方便了,编辑apache的配置文件:

1 sudo vim /etc/apache2/extra/httpd-vhosts.conf

 

在最下面添加如下代码:

 1 Listen 8092
 2 <VirtualHost *:8092>
 3     DocumentRoot "/Users/dn9x/work/study/cocos"
 4     ServerName localhost
 5     ErrorLog "/private/var/log/apache2/sites-error_log"
 6     CustomLog "/private/var/log/apache2/sites-access_log" common
 7     <Directory /Users/dn9x>
 8                 Options Indexes FollowSymLinks MultiViews
 9                 AllowOverride None
10                 Order deny,allow
11                 Allow from all
12       </Directory>
13 </VirtualHost>

 

这里你要根据你自己的路径来配置,如果有问题可以百度查询下,这里不一定非要使用apache,如果你有其他的服务器也可以配置。

 

7.重启服务

1 sudo apachectl restart

 

 

8.在浏览器中输入localhost:8092/HelloC1就可以看到效果了。

 

 

9.到这里你就可以编写cocos代码了,其实cocos还是很牛叉的,我们公司的项目写一遍代码,发布的时候安卓,iOS, web,Chrome App都编译了,所以真的很棒,不过也有缺点就是本地化不是特别好,虽然可以编译成安卓app,但是毕竟不如安卓,不过这个可能会是以后的一个方向,一次编码多平台编译运行。

 

10.下篇会介绍下编译成安卓和iOS的app运行,

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。