Cocos2d-JS连载之认识Cocos2d-JS和环境搭建及demo演示

由于工作需要,近期将记录Cocos2d-JS的学习实战,Spring源码还是会继续。进入cocos2d-JS的学习,对于不会客户端开发(Android,IOS),会JS的程序员来说Cocos2d-JS<b>游戏引擎</b>的出现真是福音,它是个跨全平台的游戏引擎。其中有两个概念:

  • Cocos2d-HTML5
  • Cocos2d-x JavaScript Bindings(JSB)

其中这两者提供的js的api是一致的,Cocos2d-html5是Cocos2d-JS的一个重要模块,是一个面向Web的游戏引擎,采用Canvas或者WebGL渲染,并完全兼容HTML5规范,如果您只关注于纯Web游戏开发,那么您还可以选择Cocos2d-JS Lite的版本。 Cocos2d-x JavaScript Bindings(JSB)版是C++实现。可以把 Cocos2d-x JavaScript Bindings(JSB)理解成一个和C++的桥。就像JVM是C++写的一样,对外提供的是JAVA的接口。Cocos2d-JS是二者的融合。这是Cocos官网cocos2d-js github的地址。那么到底什么区别的呢?我理解的就是只在web运行的话Cocos2d-html5足矣,但是你要打包成app(Android和IOS还有WIN)的话然后只用js语言开发那么需要的是Cocos2d-JS,其中包含了 Cocos2d-x JavaScript Bindings(JSB)。看一下官网的图片

官网对于现在框架的图解

看一下Cocos2d-JS下载下来的引擎包的目录。我下载的是github上的master分支。
看一下
cocos2d-js-master

  • 其中framwork就是 Cocos2d-HTML5和js-bindings两者。
framwork目录
  • docs是文档,都是MarkDown格式的 即.md结尾的。
  • samples是官方提供的例子 对以后的学习非常重要
samples/js-tests
  • templates是官方提供的模板,在cocos命令创建项目的时候会直接把templates的东西copy过去 作为你的新建项目。
  • tools目录就是打包成app的时候需要到工具集。其中还有consle 就是cocos的终端控制台,运行一些cocos命令。
  • 最下面setup.py的文件是我们安装cocos时需要用到的文件。

下面看一下开发环境的搭建,我的是windows版的。

  • 安装Python环境官方是指定2.7版本的Python 下载地址
  • 配置Python的环境变量 path中加入即可(exe安装文件不需要设置手动设置环境变量)
Python环境变量设置

cmd运行

Python命令尝试

然后进入cmd中进入下载下来的cocos2d-js-master的目录运行python setup.py文件。

cmd运行python的安装文件 setup.py

其中有几个工具的地址需要设置

  • ANT
  • NDK
  • SDK
    我的都是在D盘目录下 看上面的截图,其中ANT的目录要精确到bin目录。

我的开发工具用的是sublime text3,好多人用的是webstorm 。这个自己选择,官方还提供了IDE,目前最新的是个Creator(下章讲解,官网已经找不到IDE下载地址),这东西我还不会使用,慢慢摸索吧。
下面创建个cocos工程。

cocos new helloworld -l js -d ./
helloworld是项目的名字,-l是语言设置(js,lua,c++),-d是目录设置 我的是当前目录

如果不知道命令怎么使用可以运行 cocos -h 列出可以选择的命令 ,然后在cocos [命令] -h 例如

命令详解的获取方式
helloworld项目创建命令

创建好项目以后我们可以将将创建好的项目放到nginx下面,也可以在nginx下面配置alais目录

Paste_Image.png

然后启动nginx就可以访问了http://127.0.0.1/cocos/helloworld/

helloworld项目访问效果

由于我们配置了android(JAVA环境是前提,我上面没说)的环境,所以我们可以将其打包成android的apk供安装使用
运行命令 比较耗费时间

cocos compile -p android-m release

web版本的打包

cocos compile -p web -m release

运行过程截图,可以看到在编译执行各种.cpp文件


运行过程截图

在编译完成后是需要输入keystory的文件路径的 这个做Android的应该都知道,
最后会在项目目录先生成 runtime文件 里面会包含 android的和html的文件夹,进入后可以看到对应的文件。

publish文件

进入publish 可以看到生成的文件,我的android打包的时候出现问题应该是keystor文件的问题 回头我再看一下。

web的compile文件

进入可以看到compile后的文件已经生成。只需要将html文件夹改名字发布到容器访问就可以了。

compile后我的web文件目录

go go home!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容