2016-08-23 16:53:18 skylin19840101 阅读数 2417

Cocos2d-x

2.1以前的版本

第一步:下载Cocos2d-X的引擎包

第二步:进入Cocos2d-X文件夹

“cd cocos2d-1.0.1-x-0.9.2”

然后“sudo ./install-templates-xcode.sh”命令开始执行安装命令

执行成功后,会在Xcode中安装好一些Cocos工程模板




然后根据这些模板去创建Cocos2d-x工程即可。



2.2以后的版本

将下载的压缩包解压到你指定的文件夹里。

进入到目录cocos2d-x-3.2alpha0/tools/cocos2d-console/bin/cocos.py

打开终端运行cocos.py脚本创建文件

./cocos.py new HelloWorldDemo -p com.coco2dx.org -l cpp -d ~/Desktop

或者

python cocos.py new HelloWorldDemo -p com.coco2dx.org -l cpp -d ~/Desktop

参数说明:

  • HelloWorldDemo为项目名称
  • -p后面接包名
  • -l后面接开发语言类型,有cpp, lua, js三种类型
  • -d后面接项目存放的目录

项目创建完成后,用Xcode打开HelloWorldDemo/proj.ios_mac里的Xcode项目文件,运行项目即可


Cocos2d-JS

Cocos2d-JS 是跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone8,Mac,Windows等平台,引擎基于MIT开源协议,完全开源,免费,易学易用,拥有活跃的社区支持。Cocos2d-JS让2D的游戏编程门槛更低,使用更加容易和高效。和其他类似游戏框架相比,它定义了更加清晰的2D游戏编程的基本组件,采用易学易用的API设计,并采用全球领先、具备原生性能的脚本绑定解决方案实现游戏的跨原生平台发布,开发效率更高,使用上最简单。

Cocos2d-JS是Cocos2d-x的JavaScript版本,融合了Cocos2d-HTML5和Cocos2d-x JavaScript Bindings(JSB)。它支持Cocos2d-x的所有核心特性并提供更简单易用的JavaScript风格API,基于Cocos2d-JS的框架,您可以方便的使用JavaScript语言进行游戏开发,快速构建原型进行验证,并让您的游戏跑在所有支持HTML5规范的浏览器上。由于Cocos2d-html5的API和Cocos2d-x JSB的API高度一致,可让您的游戏不用修改代码或者修改少量代码就可打包为原生性能表现的混合游戏,发布到原生应用市场,从而实现,一次编码全平台部署的效果,带给您全所未有的机遇。


不得不吐槽下cocos官网说明文档的坑爹之处:

1. 用Cocos Console工作流开发网页/原生平台游戏(JSB开发环境简介)

http://www.cocos.com/doc/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/cocos2d-js/2-working-environment-and-workflow/2-2-cross-native-browser-game-with-cocos-console/zh.md



点击"引擎下载页面"跳到:



这里好像也没有JS的引擎包吧,没办法,看着"HTML5 LITE VERSION"比较像,硬着头皮点进去


下载下来的结果也跟说明文档里不一致


2."搭建Cocos2d-JS v3.x 开发环境"

http://www.cocos.com/doc/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/cocos2d-js/3-jumping-into-cocos2d-js/3-1-installation/zh.md



点击"Cocos Code IDE"超链接却跳到 "Cocos Creator"的下载,好像他们不是同一个东东吧;

点击"Cocos-JS v3.0"也是一样的结果。



后面是到论坛上上找到了一个下载地址:

http://forum.cocos.com/t/cocos-code-ide-1-2-0/34958


够变态吧,既然让大家使用,居然把下载地址搞得云山雾罩的,这是要绕死大家的节奏啊

后来在cc论坛发现,原来是被放弃了,既然放弃了,官方的文档也得同步更新啊,这误导多少无辜群众: IDE被放弃了?下载都没了


真是蛋疼!抓狂抓狂抓狂

后来终于搞明白了,原来是换成使用Cocos Creater了:

Cocos Creator入门


所以Coco-JS工程的创建方法:

1. 直接命令行创建

这个比较通用,不管官网各种开发工具怎么变来变去

切换到Cocos2d-X的以下目录:   /tools/cocos2d-console/bin

./cocos new Cocos2d-JSDemo -p com.xxxxxx.cocos2djs -l js -d /doc/sample/cocos2d



2. Cocos Creator创建


Cocos2d-LUA

1. 直接命令行创建

切换到Cocos2d-X的以下目录:   /tools/cocos2d-console/bin

按照官网的介绍:

./cocos.py new Cocos2d-LuaDemo -p  会出现权限的问题



添加sudo运行,出现命令找不到的问题



干脆直接换成cocos执行



还是出现命令找不到,在cocos前添加 ./。不要使用sudo,否则会出现一些权限的问题



终于成功了



2. Cocos Creator也支持Lua:  LUA引擎支持

3. 用Cocos Code IDE 创建lua工程

不过Cocos Code IDE工具已经被废了


参考

1、官网: http://www.cocos.com/doc/

2、cocos2d-x环境的搭建之xcode

2019-06-02 15:00:25 shengshengwang 阅读数 97

1.Windows7上Cocos2d-JS环境搭建
[1]WebStorm安装
[2]Python 2.7.X安装
[3]Chrome插件JetBrains-IDE-support安装
[4]Cocos2d-JS安装
最新的最新cocos2d-js的SDK包已经与cocos2d-x整成一个包了,本文安装的是cocos2d-x-3.17.2。执行setup.py命令:
在这里插入图片描述
可以看到环境变量设置如下:

  • COCOS_CONSOLE_ROOT=F:\cocos2d-x-3.17.2\tools\cocos2d-console\bin
  • COCOS_X_ROOT=F:\
  • COCOS_TEMPLATES_ROOT=F:\cocos2d-x-3.17.2\templates
  • 其它环境变量直接输入Enter跳过即可

[5]Cocos Code IDE[不建议使用]
Cocos2d-x团队开发的,用于开发Cocos2d-JS和Cocos2d-x Lua绑定的游戏工具。


2.通过命令行创建项目
解析:

cocos new -l js sample

项目目录如下所示:
在这里插入图片描述
其中,res文件夹存放资源文件,src文件夹是主要的程序代码,src/app.js是实现游戏场景的JavaScript文件,src/resource.js是定义资源对应的变量,config.json保存模拟器运行配置信息[仅在Cocos Code IDE中运行才需要该文件],project.json是项目的配置信息,index.html是Web工程的首页,main.js是与首页index.html对应的JavaScript文件。


3.初学cocos2d-x容易混淆的几个概念
[1]cocos2d-js和cocos2d-x
解析:现在官方合并为一个cocos2d-x。
[2]cocos-code-ide和webstorm
解析:建议使用webstorm,cocos-code-ide官方已经不再更新。
[3]CocosStudio和CocosCreator
解析:官方仅有CocosCreator,CocosStudio已经不再更新。


4.运行cocos2d-x例子sample
在这里插入图片描述


5.cc.game
解析:Cocos2d-JS的游戏对象,主要职责包括,配置的读取,引擎的加载,游戏脚本的加载,以及游戏的启动。


6.JavaScript创建对象的三种方式
解析:
[1]使用字面量创建对象
[2]使用Object.create()函数创建对象
[3]使用构造函数创建对象


7.JavaScript中常用内置对象
解析:包括Object、Array、Boolean、Number、String、Math、Date、RegExp和Error。
[1]Object对象:所有JavaScript对象的根,每个对象都继承于Object对象。
[2]String对象:字符串对象,它有很多常用函数。
[3]Math对象:与数学计算有关系的对象。
[4]Date对象:日期对象。


8.JavaScript原型
解析:每个JavaScript对象都是从一个原型继承而来的,可通过它的prototype属性获得该原型对象。JavaScript对象继承机制建立在原型模型基础之上。不仅可以使用原型扩展对象函数,还可以扩展对象的属性。


9.Cocos2d-JS中的JavaScript继承
解析:JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的。这种简单的JavaScript继承方法实现一般意义上的面向对象概念的继承和多态机制,它是Cocos2d-JS继承机制的核心,不过Cocos2d-JS对其稍微做了修改,熟悉简单JavaScript继承的用法对于理解和学习Cocos2d-JS非常重要。


10.Cocos Creator和cocos创建项目之间关系


11.Cocos Creator创建Hello World工程
解析:Cocos Creator的工作流程是以数据驱动和场景为核心的。如下所示:
在这里插入图片描述


12.Cocos2d-JS核心概念[导演]
解析:Cocos2d-JS中核心概念包括导演、动作、场景、效果、层、粒子运动、节点、地图、精灵、物理引擎、菜单等。导演类cc.Director用于管理场景,采用单例设计模式,在整个工程中只有一个实例对象。由于是单例模式,能够保存一致的配置信息,便于管理场景对象。获得导演类Director实例语句如下:

var director = cc.Director._getInstance();

也可以在程序中直接使用cc.director,它是cc.Director的实例对象。导演对象职责如下:
[1]访问和改变场景
[2]访问Cocos2d-JS的配置信息
[3]暂停、继续和停止游戏
[4]转换坐标


13.Cocos2d-JS核心概念[场景]
解析:场景类cc.Scene是构成游戏的界面,类似于电影中的场景。场景大致可以分为以下几类:
[1]展示类场景:播放视频或简单地在图像上输出文字,来实现游戏的开场介绍、胜利和失败提示、帮助介绍。
[2]选项类场景:主菜单、设置游戏参数等。
[3]游戏场景:这是游戏的主要内容。
说明:Scene继承了Node类,Node是一个重要的类,很多类都从Node类派生而来,其中有Scene、Layer等。


14.Cocos2d-JS核心概念[层]
解析:层是写游戏的重点,用户大约99%以上的时间是在层上实现游戏内容。层的管理类似于Photoshop中的图层,它也是一层一层叠在一起。比如,从上到下依次是菜单层、精灵层、背景层等。


15.Cocos2d-JS核心概念[精灵]
解析:精灵类cc.Sprite是游戏中非常重要的概念,它包括敌人、控制对象、静态物体和背景等。通常情况它会进行运动,运动方式包括移动、旋转、放大、缩小和动画等。
说明:cc.Sprite是cc.Node子类,cc.Sprite包含很多类型。比如,物理引擎精灵类PhysiceSprite也都属于精灵。


16.Cocos2d-JS核心概念[菜单]
解析:菜单在游戏中是非常重要的概念,它提供操作的集合,在Cocos2d-JS中菜单类是cc.Menu。在菜单中又包含了菜单项cc.MenuItem,它有很多形式的子类,比如cc.MenuItemLabel、cc.MenuItemSprite和cc.MenuItemToggle,它表现出不同的效果。每个菜单项都有三个基本状态:正常、选中和禁止。
说明:cc.Sprite类派生于cc.Layer。


17.节点的层级结构
解析:Cocos2d-JS采用层级[树形]结构管理场景、层、精灵、菜单、文本、地图和粒子系统等节点[Node]对象。一个场景包含多个层,一个层又包含多个精灵、菜单、文本、地图和粒子系统等对象。层级结构中的节点可以是场景、层、精灵、菜单、文本、地图和粒子系统等任何对象。节点的层级结构如下所示:
在这里插入图片描述
说明:这些节点有一个共同的父类Cocos2d-JS最为重要的根类,它是场景、层、精灵、菜单、文本、地图和粒子系统等类的根类。


18.Node中的重要操作
解析:
[1]var childNode=new cc.Node(),创建节点。
[2]node.addChild(childNode,0,123),增加新的子节点。第二个参数是Z轴绘制顺序,第三个参数是标签。
[3]var childNode=node.getChildByTag(123),查找子节点。通过标签查找子节点。
[4]node.removeChildByTag(123, true),通过标签删除子节点,并停止所有该子节点上的一切动作。
[5]node.removeChild(childNode, true),删除childNode节点,并停止所有该子节点上的一切动作。
[6]node.removeAllChildWithCleanup(true),删除node节点的所有子节点,并停止这些子节点上的一切动作。
[7]node.removeFromParentAndCleanup(true),从父节点删除node节点,并停止所有该节点上的一切动作。


19.Node中重要的属性
解析:
Node有两个非常重要的属性:position和anchorPoint。position[位置]属性是Node对象的实际位置。position属性往往还要配合使用anchorPoint属性,为了将一个Node对象[标准矩形图形]精确地放置在屏幕某一个位置上,需要设置该矩形的锚点,anchorPoint是相对于position的比例,默认是(0.5,0.5)。

20.游戏循环与调度
解析:每一个游戏程序都有一个循环在不断运行,它是由导演对象来管理、维护。如果需要场景中的精灵运动起来,可以在游戏循环中使用定时器[cc.Scheduler]对精灵等对象的运行进行调度。因为cc.Node类封装了cc.Scheduler类,所以也可以直接使用cc.Node中定时器相关方法。cc.Node中定时器相关方法主要有:
[1]scheduleUpdate():每个Node对象只要调用该方法,那么这个Node对象就会定时地每帧回调用一次自己的update(dt)方法。
[2]schedule(callback_fn, interval, repeat, delay):与scheduleUpdate方法功能一样,不同的是可以指定回调方法[通过callback_fn指定]。interval是时间间隔,repeat是执行的次数,delay是延迟执行的时间。
[3]unscheduleUpdate():停止update(dt)方法调度。
[4]unschedule(callback_fn):可以指定具体方法停止调度。
[5]unscheduleAllCallbacks():可以停止所有的调度。


21.Cocos2d-JS坐标系
解析:Cocos2d-JS坐标系中原点在左下角,而且Cocos2d-JS坐标系又可以分为世界坐标系和模型坐标系,两者可以相互转换。
[1]UI坐标
在Cocos2d-JS中默认不是采用UI坐标,但是有的时候也会用到UI坐标,比如在触摸事件发生的时候,会获得一个触摸对象[touch]。触摸对象提供了很多获得位置信息的方法,如下所示:

vartouchLocation=touch.getLocationInView();

说明:使用getLocationInView()方法获得触摸点坐标事实上就是UI坐标,它的坐标原点在左上角。
[2]OpenGL坐标
OpenGL坐标是一种三维坐标,由于Cocos2d-JS的JSB是采用OpenGL渲染,因此默认坐标就是OpenGL坐标,只不过只采用两维[x和y轴]。如果不考虑z轴,OpenGL坐标的原点在左下角。一般会通过一个触摸对象获得OpenGL坐标位置,如下面代码所示:

var touchLocation=touch.getLocation();

说明:OpenGL坐标是右手坐标,而微软平台的Direct3D是左手坐标。
[3]世界坐标和模型坐标
由于OpenGL坐标又分为世界坐标和模型坐标,所以Cocos2d-JS的坐标也有世界坐标和模型坐标。有时候需要将世界坐标和模型坐标相互转换,可以通过Node对象的如下方法实现:
[1]{cc.Point} convertToNodeSpace(worldPoint):将世界坐标转换为模型坐标。
[2]{cc.Point} convertToNodeSpaceAR(worldPoint):将世界坐标转换为模型坐标。AR表示相对于锚点。
[3]{cc.Point} convertTouchToNodeSpace(touch):将世界坐标中触摸点转换为模型坐标。
[4]{cc.Point} convertTouchToNodeSpaceAR(touch):将世界坐标中触摸点转换为模型坐标。AR表示相对于锚点。
[5]{cc.Point} convertToWorldSpace(nodePoint):将模型坐标转换为世界坐标。
[6]{cc.Point} convertToWorldSpaceAR(nodePoint):将模型坐标转换为世界坐标。AR表示相对于锚点。


22.Cocos2d-JS标签类[cc.LabelTTF]
解析:cc.LabelTTF是使用系统中的字体,它是最简单的标签类。cc.LabelTTF继承了cc.Node类,具有cc.Node的基本特性。


23.Cocos2d-JS标签类[cc.LabelAtlas]
解析:cc.LabelAtlas是图片集标签,这种标签显示的文字是从一个图片集中取出的,因此使用cc.LabelAtlas需要额外加载图片集文件。cc.LabelAtlas比cc.LabelTTF快很多,cc.LabelAtlas中的每个字符必须有固定的高度和宽度。


24.Cocos2d-JS标签类[cc.LabelBMFont]
解析:cc.LabelBMFont是位图字体标签,需要添加字体文件,包括一个图片集[.png]和一个字体坐标文件[.fnt]。cc.LabelBMFont比LabelTTF块很多。cc.LabelBMFont中的每个字符的宽度是可变的。


25.Cocos2d-JS菜单类[cc.MenuItem]
解析:cc.MenuItem的子类有cc.MenuItemLabel、cc.MenuItemSprite和cc.MenuItemToggle。其中,cc.MenuItemLabel类是文本菜单,它有两个子类cc.MenuItemAtlasFont和cc.MenuItemFont;cc.MenuItemSprite类是精灵菜单,它的子类是cc.MenuItemImage,它是图片菜单;cc.MenuItemToggle类是开关菜单。
[1]文本菜单
文本菜单是菜单项只能显示文本,文本菜单类包括cc.MenuItemLabel、cc.MenuItemFont和cc.MenuItemAtlasFont。cc.MenuItemLabel是个抽象类,具体使用的时候是使用cc.MenuItemFont和cc.MenuItemAtlasFont两个类。文本菜单类cc.MenuItemFont的其中一个构造函数定义如下:

ctor(value, callback, target)

文本菜单类cc.MenuItemAtlasFont是基于图片集的文本菜单项,它的其中一个构造函数定义如下:

ctor(value, charMapFile, itemWidth, itemHeight, startCharMap, callback)

[2]精灵菜单和图片菜单
精灵菜单的菜单项类是cc.MenuItemSprite,图片菜单的菜单项类是cc.MenuItemImage。由于cc.MenuItemImage集成于cc.MenuItemSprite,所以图片菜单也属于精灵菜单。精灵菜单项类cc.MenuItemSprite的其中一个构造函数定义如下:

ctor(normalSprite, selectedSprite, callback, target)

使用cc.MenuItemSprite比较麻烦,在常见cc.MenuItemSprite之前要先创建三种不同状态所需要的精灵[即normalSprite、selectedSprite和disabledSprite]。cc.MenuItemSprite还有一些其它的构造函数,在这些函数中可以省略disabledSprite参数。
如果精灵是由图片构成的,可以使用cc.MenuItemImage实现与精灵菜单同样的效果。cc.MenuItemImage类的其中一个构造函数定义如下:

ctor(normalImage, selectedImage, callback, target)

cc.MenuItemImage还有一些构造函数,在这些函数中可以省略disabledImage参数。
[3]开关菜单
开关菜单的菜单项类是cc.MenuItemToggle,它是一种可以进行两种状态切换的菜单项。它可以通过下面的函数创建:

ctor(OnMenuItem, OffMenuItem, callback, target)

下面的代码是简单形式的文本类型的开关菜单项:

var toggleMenuItem = new cc.MenuItemToggle(
                     new MenuItemFont("On"),
                     new MenuItemFont("Off"), 
                     this.menuItemCallback, this);
var mn = new cc.Menu(toggleMenuItem);
this.addChild(mn);

参考文献:
[1]Cocos资料大全:https://github.com/fusijie/Cocos-Resource
[2]Cocos2d-x用户手册:https://docs.cocos.com/cocos2d-x/manual/zh/
[3]Cocos Creator v2.1用户手册:https://docs.cocos.com/creator/2.1/manual/zh/
[4]Cocos2d-x实战:JS卷[第2版]

2014-06-20 10:52:57 zhouyunxuan 阅读数 3677

个人感觉cocos2d-js(cocos2d-html5  + javascriptBingding)是一个很好的游戏开发引擎。开发出来的游戏也可以比较简单的移植到android和ios,同时也支持编译成windows和mac应用。相比较cocos2d-x,ch5(cocos2d-html5)可以写更少的代码做到同样的事情。且接口简单。不像C++那样晦涩难懂。

在Cocos2d-JS v3.0 alpha版中,由于重构了大量以前C++风格的API并为Javascript开发者提供了很友好的API设计,JSB的API也如此改造以保证Html5和JSB之间的代码共享,详细信息请参见发布说明。更重要的是,我们将Cocos2d-html5和Cocos2d-JSBinding合并为一个仓库:Cocos2d-JS。所以只要开发者使用JS开发游戏,那么不论游戏会发布到哪个平台,都可以使用Cocos2d-JS来进行开发。

主要特性

  • 支持所有现代浏览器和原生平台(Android, iOS, Mac OSX, Windows)
  • 场景管理
  • 场景切换特效
  • 精灵与精灵帧动画
  • 特效:Lens, Ripple, Waves, Liquid, 等等.
  • 动作:
    • 普通动作:Move, Rotate, Scale, Fade, Tint, etc.
    • 组合动作:Sequence, Spawn, Repeat, Reverse
    • 变速动作:Exp, Sin, Cubic, Elastic, etc.
    • 其他动作:CallFunc, OrbitCamera, Follow, Tween
  • 菜单与按钮
  • 集成物理引擎:Chipmunk或Box2d
  • 粒子系统
  • 骨骼动画:支持Spine和Armature
  • 字体:
    • 固定或可变宽度字体快速渲染
    • 支持.ttf字体
  • 瓦片地图支持:正交,等距和六边形
  • 视差滚动
  • 运动轨迹特效
  • 绘制到纹理
  • 移动设备上的触摸和加速度计支持
  • 桌面设备上的触摸,鼠标和键盘支持
  • 声音引擎支持,基于OpenAL或WebAudio
  • 集成慢动作,快进效果
  • 高效压缩纹理支持:PVR压缩或未压缩纹理,ETC1压缩纹理
  • 独立于分辨率的适配
  • 可定制的模块化引擎
  • 友好开源项目:适用于任何开源或闭源项目
  • 基于OpenGL ES 2.0(移动设备)/ OpenGL 2.1(桌面设备)
  • 完整WebGL支持和在不支持WebGL设备上自动使用Canvas


一开始看不懂的某些优点就可以理解成这款引擎很给力,以后慢慢学习。

首先从官网上下载cocos2d-js的安装包,然后解压。

想看全面的API可以去这里:http://www.cocos2d-x.org/reference/html5-js/V3.0beta/index.html

cocos2d的online API汇总:http://www.cocos2d-x.org/wiki/Reference

使用的cocos2d-js版本为:cocos2d-js-v3.0-alpha2

使用的cocos2d-html5版本为:Cocos2d-html5-v3.0 alpha 2

cocos2d-js的下载地址为:http://www.cocos2d-x.org/download/


安装

首先,你需要安装这个工具,当开发者将Cocos2d-JS仓库下载下来以后,会在根目录下发现setup.py安装文件。打开终端并进入Cocos2d-JS文件夹,然后运行./setup.py。在安装过程中,你可能需要提供你的NDK,Android SDK和ANT目录。请注意,这个工具是使用python来开发的,你将需要首先安装python 2.7.5或2.7.6,但是setup.py并不支持python3。

一些有用的链接和安装指引:

  • Python 2.7.6
  • Android SDK
  • NDK
  • Ant binary release

    • 下载Ant。
    • 将Ant解压到你指定的文件夹。
    • 设置JAVA_HOME环境变量到你的Java路径,ANT_HOME到刚刚解压的文件夹,再将${ANT_HOME}/bin (Unix)或%ANT_HOME%/bin (Windows)加入到PATH中。
    // Example: 在命令行中运行或添加到.bash_profile(Mac)
    export ANT_ROOT=/usr/local/ant/bin
    export JAVA_HOME=/usr/local/jdk1.7.0_51
    



Usage

成功安装以后,开发者就可以开始在终端中使用cocos命令。

创建一个新项目

  • 创建一个同时包含Cocos2d-x JSB和Cocos2d-html5的项目:

    cocos new projectName -l js
    
  • 创建一个仅支持Cocos2d-html5的项目:

    cocos new projectName -l js --no-native
    
  • 创建项目到指定目录:

    cocos new projectName -l js -d ./Projects
    



运行项目

  • 使用浏览器运行web版项目:

    cd directory/to/project
    cocos run -p web
    
  • 编译并将项目运行在Cocos2d-JSB上:

    cd directory/to/project
    cocos compile -p ios|mac|android|web
    cocos run -p ios|mac|android
    
  • 选项

    -p platform : The platform can be ios|mac|android|web.
    -s source   : Your project directory, if not specified the current directory will be used.
    -q          : Quiet mode, remove log messages.
    -m mode     : Mode debug or release, debug is default
    --source-map: General source-map file. (Web platform only)
    


按照官网的提示创建一个叫MyGameName的项目

然后在浏览器中运行这个项目









2014-12-13 01:16:20 qinning199 阅读数 2738

本文由qinning199原创,转载请注明:http://www.cocos2dx.net/post/206

最近研究网页版游戏开发,因为之前用的就是cocos2d-x 2.2.1框架,所以就选用了cocos2d-js v3.0final,之前cocos2d-x也是使用了cocosbuilder用作界面开发,所以这次做网页版也是打算使用cocosbuilder做界面和一些简单动画。

研究了一下cocos2d-js中得tests工程,发现关于cocosbuilder绑定的东西非常少,只有如下代码:

cc.BuilderReader.registerController("TestButtonsLayer", {
    "onCCControlButtonClicked" : function(sender,controlEvent) {
        var str = (function(){
            switch(controlEvent) {
                case cc.CONTROL_EVENT_TOUCH_DOWN: return "Touch Down.";
                case cc.CONTROL_EVENT_TOUCH_DRAG_INSIDE: return "Touch Drag Inside.";
                case cc.CONTROL_EVENT_TOUCH_DRAG_OUTSIDE: return "Touch Drag Outside.";
                case cc.CONTROL_EVENT_TOUCH_DRAG_ENTER: return "Touch Drag Enter.";
                case cc.CONTROL_EVENT_TOUCH_DRAG_EXIT: return "Touch Drag Exit.";
                case cc.CONTROL_EVENT_TOUCH_UP_INSIDE: return "Touch Up Inside.";
                case cc.CONTROL_EVENT_TOUCH_UP_OUTSIDE: return "Touch Up Outside.";
                case cc.CONTROL_EVENT_TOUCH_CANCEL: return "Touch Cancel.";
                case cc.CONTROL_EVENT_VALUECHANGED: return "Value Changed.";
            }
            return "";
        })();
        this["mCCControlEventLabel"].setString(str);
    }
});


这种用法是在cocosbuilder中把按照上左图所示,选中Javascript Controlled选项,然后如下图将JS Controller设成TestButtonsLayer,在Selector中填写onCCControlButtonClicked即可,变量名可以通过this["mCCControlEventLabel"]或者this.mCCControlEventLabel 方式引用。

cc.BuilderReader.registerController("HelloCocosBuilderLayer", {
    _openTest : function(ccbFileName) {
        cc.BuilderReader.setResourcePath("res/");
        var node = cc.BuilderReader.load(ccbFileName, this);

        this["mTestTitleLabelTTF"].setString(ccbFileName);
        var scene = new cc.Scene();
        if(node != null)
            scene.addChild(node);

        /* Push the new scene with a fancy transition. */
        cc.director.pushScene(new cc.TransitionFade(0.5, scene, cc.color(0, 0, 0)));
    },
    
    "onMenuTestClicked" : function() {
        this._openTest("res/ccb/ccb/TestMenus.ccbi");
    },
    
    "onSpriteTestClicked" : function() {
        this._openTest("res/ccb/ccb/TestSprites.ccbi");
    },
    
    "onButtonTestClicked" : function() {
        this._openTest("res/ccb/ccb/TestButtons.ccbi");
    },
    
    "onAnimationsTestClicked" : function() {
        this._openTest("res/ccb/ccb/TestAnimations.ccbi");
    },
    
    "onParticleSystemTestClicked" : function() {
        this._openTest("res/ccb/ccb/TestParticleSystems.ccbi");
    },
    
    "onScrollViewTestClicked" : function() {
        this._openTest("res/ccb/ccb/TestScrollViews.ccbi");
    },
    
    "onTimelineCallbackSoundClicked" : function() {
        this._openTest("res/ccb/ccb/TestTimelineCallback.ccbi");
    }
});

如上代码与上段代码类似。

 

但是在绑定变量却出现了问题,我想在ccb中得名字是a,但是项目中我却向命名成b,上面tests中方法无法满足我的需求,因为我使用了cocos2d-x中得ccb文件,但是其中很多变量名绑定与项目中实际使用的名字不一致,该怎么办呢,后来我发现这个问题没法解决,于是,我便决定放弃registerController的方式。改用之前原始的方法,其实我研究cocos2d-js源代码的时候,发现这种原始的跟cocos2d-x类似的方法其实依旧存在,只是tests工程中没有对此有任何介绍。

于是,我又到网上寻找,最终,我发现了解决的方法,如下代码即可

 

var HelloCocosBuilderLayer = cc.Layer.extend({
    _burstSprite:null,
    _testTitleLabelTTF:null,

    _customPropertyInt:0,
    _customPropertyFloat:0,
    _customPropertyBoolean:false,
    _customPropertyString:"",

    //跳转到其他 ccbi界面
    openTest:function(ccbFileName, nodeName,nodeLoader){

        var ccNodeLoaderLibrary = cc.NodeLoaderLibrary.newDefaultCCNodeLoaderLibrary();
        ccNodeLoaderLibrary.registerCCNodeLoader("TestHeaderLayer", new TestHeaderLayerLoader());
        if(nodeName != null && nodeLoader != null) {
            ccNodeLoaderLibrary.registerCCNodeLoader(nodeName, nodeLoader);
        }

        /* Create an autorelease CCBReader. */
        var ccbReader = new cc.BuilderReader(ccNodeLoaderLibrary);
        ccbReader.setCCBRootPath("res/");
        var node = ccbReader.readNodeGraphFromFile(ccbFileName, this);


        this._testTitleLabelTTF.setString(ccbFileName);
        var scene = cc.Scene.create();
        if(node != null)
            scene.addChild(node);

        cc.Director.getInstance().pushScene(cc.TransitionFade.create(0.5, scene, cc.black()));
    },

    //接受Menu对象
    onResolveCCBCCMenuItemSelector:function(target,selectorName){
        return null;
    },

    //接受Button对象
    onResolveCCBCCControlSelector:function(target,selectorName){
        if(this == target && "onMenuTestClicked" == selectorName){
            return this.onMenuTestClicked;
        }
        if(this == target && "onSpriteTestClicked" == selectorName){
            return this.onSpriteTestClicked;
        }
        if(this == target && "onButtonTestClicked" == selectorName){
            return this.onButtonTestClicked;
        }
        if(this == target && "onAnimationsTestClicked" == selectorName){
            return this.onAnimationsTestClicked;
        }
        if(this == target && "onParticleSystemTestClicked" == selectorName){
            return this.onParticleSystemTestClicked;
        }
        if(this == target && "onScrollViewTestClicked" == selectorName){
            return this.onScrollViewTestClicked;
        }
        if(this == target && "onTimelineCallbackSoundClicked" == selectorName){
            return this.onTimelineCallbackSoundClicked;
        }

        return null;
    },

    //接受_burstSprite、LabelTTF、LabelBM等对象
    onAssignCCBMemberVariable:function(target,memberVariableName,node){
        if(target == this && memberVariableName == "mBurstSprite"){
            if(node instanceof  cc.Sprite){
                this._burstSprite = node;
            }
            return true;
        }

        if(target == this && memberVariableName == "mTestTitleLabelTTF"){
            if(node instanceof  cc.LabelTTF){
                this._testTitleLabelTTF = node;
            }
            return true;
        }

        return false;
    },

    onAssignCCBCustomProperty:function(target, memberVariableName,ccbValue){
        var bRet = false;
        if (target == this) {
            if (memberVariableName == "mCustomPropertyInt") {
                this._customPropertyInt = ccbValue;
                cc.log("CustomPropertyInt = " +this._customPropertyInt);
                bRet = true;
            } else if ( memberVariableName == "mCustomPropertyFloat") {
                this._customPropertyFloat = ccbValue;
                cc.log("CustomPropertyFloat = " + this._customPropertyFloat);
                bRet = true;
            } else if ( memberVariableName == "mCustomPropertyBoolean" ) {
                this._customPropertyBoolean = ccbValue;
                cc.log("CustomPropertyBoolean = " + this._customPropertyBoolean);
                bRet = true;
            } else if ( memberVariableName == "mCustomPropertyString" ) {
                this._customPropertyString = ccbValue;
                cc.log("CustomPropertyString = "  + this._customPropertyString);
                bRet = true;
            }
        }
        return bRet;
    },

    onNodeLoaded:function(node,nodeLoader){
        var ccRotateBy = cc.RotateBy.create(20.0, 360);
        var ccRepeatForever = cc.RepeatForever.create(ccRotateBy);
        this._burstSprite.runAction(ccRepeatForever);
    },

    //各个方法的回调
    onMenuTestClicked:function(sender,controlEvent){
        this.openTest("res/ccb/ccb/TestMenus.ccbi", "TestMenusLayer", new MenuTestLayerLoader());
    },
    onSpriteTestClicked:function(sender,controlEvent){
        this.openTest("res/ccb/ccb/TestSprites.ccbi", "TestSpritesLayer", new SpriteTestLayerLoader());
    },
    onButtonTestClicked:function(sender,controlEvent){
        this.openTest("res/ccb/ccb/TestButtons.ccbi", "TestButtonsLayer", new ButtonTestLayerLoader());
    },

    onAnimationsTestClicked:function(sender,controlEvent){

        var actionManager;
        var ccNodeLoaderLibrary = cc.NodeLoaderLibrary.newDefaultCCNodeLoaderLibrary();
        ccNodeLoaderLibrary.registerCCNodeLoader("TestHeaderLayer", new TestHeaderLayerLoader());
        ccNodeLoaderLibrary.registerCCNodeLoader("TestAnimationsLayer", new AnimationsTestLayerLoader());
        var ccbReader = new cc.BuilderReader(ccNodeLoaderLibrary);
        ccbReader.setCCBRootPath("res/");
        var animationsTest = ccbReader.readNodeGraphFromFile("res/ccb/ccb/TestAnimations.ccbi", this, actionManager);

        //多了一个动画管理
        actionManager = ccbReader.getAnimationManager();
        animationsTest.setAnimationManager(actionManager);


        this._testTitleLabelTTF.setString("TestAnimations.ccbi");

        var scene = cc.Scene.create();
        if(animationsTest != null) {
            scene.addChild(animationsTest);
        }

        //跳转界面
        var transitionColor = cc.c3b(0,0,0);
        cc.Director.getInstance().pushScene(cc.TransitionFade.create(0.5, scene, transitionColor));

        //this.openTest("ccb/ccb/TestAnimations.ccbi", "TestAnimationsLayer", new AnimationsTestLayerLoader());
    },
    onParticleSystemTestClicked:function(sender,controlEvent){
        this.openTest("res/ccb/ccb/TestParticleSystems.ccbi", "TestParticleSystemsLayer", new ParticleSystemTestLayerLoader());
    },
    onScrollViewTestClicked:function(sender,controlEvent){
        this.openTest("res/ccb/ccb/TestScrollViews.ccbi", "TestScrollViewsLayer", new ScrollViewTestLayerLoader());
    },

    onTimelineCallbackSoundClicked:function(sender,controlEvent){
        this.openTest("res/ccb/ccb/TestTimelineCallback.ccbi", "TimelineCallbackTestLayer", new TimelineCallbackTestLayerLoader());
    }
});

HelloCocosBuilderLayer.create = function(){
    var retLayer = new HelloCocosBuilderLayer();
    if(retLayer && retLayer.init()){
        return retLayer;
    }
    return null;
};

var HelloCocosBuilderLayerLoader = cc.LayerLoader.extend({
    _createCCNode:function(parent,ccbReader){
        return HelloCocosBuilderLayer.create();
    }
});

至此,问题终于解决,但是这种用的时候需要将上左图中的JavaScript Controller选中去掉才行。

2017-10-22 14:22:11 hujiaojiao525 阅读数 252

cocos2d-js总结

安装和目录介绍:

  • 下载引擎包 http://www.cocos2d-x.org/download
  • 安装Cocos Console
  • 工程创建 cocos new -l js ProjectName 生成ProjectName文件夹
  • web打包命令 :cocos compile -p web -m release

frameworks 包含Web引擎以及Native引擎

res文件夹存放资源文件

src文件夹是主要的程序代码

app.js是实现游戏场景的JavaScript文件

resource.js在src文件夹中,定义资源对应的变量

config.json保存模拟器运行配置信息

project.json是项目的配置信息

index.html是Web工程的首页

main.js与首页index.html对应的JavaScript文件,负责启动游戏场景


cocos常用的一些标签 封装成方法

1.创建文字的方法

setTextPos: function (position) {
    var range = position.range || ""; // 文字对齐的范围
    var pos =  position.pos || ""; // 文字对齐的方式 
    var period = new cc.LabelTTF(position.text, "",  position.fontSize,range,pos);
    var tag = position.tag || "";
    period.attr({
        x: position.X,
        y: position.Y,
        fontName: position.fontName || "",
        visible: position.visible == undefined ? true : position.visible
    });
    if (position.flag || position.Mcolor || position.Mwidth) { 
        period.strokeEnabled = position.flag; // 开启文字描边效果
        period.strokeStyle = cc.color(position.Mcolor); // 描边的颜色
        period.lineWidth = position.Mwidth; // 字体的宽度
    }
    period.setColor(position.color);
    period.setSkewX(position.setSkewX || 0) // 设置文字倾斜
    this.addChild(period, position.zOrder, tag);
},
// 文字对其方式
1.TEXT_ALIGNMENT_LEFT // 居左
2.TEXT_ALIGNMENT_RIGHT // 居右
3.TEXT_ALIGNMENT_CENTER // 居中

2.创建图片精灵的方法

setSprite: function (option) {
    // 设置筹码
    var img = option.img; // 图片
    var zOrder = option.zOrder; // 显示层级
    var tag = option.tag || ""; // tag值
    var scale = option.scale || 1; // 缩放值
    var chip = new cc.Sprite(img); // 创建精灵
    // 设置精灵属性
    chip.attr({
        x: option.positionX,
        y: option.positionY,
        scale: scale,
        visible:option.visible == undefined ? true : option.visible
    }) 
    this.addChild(chip, zOrder, tag)
},

3.创建字体图片

createText: function (option) {
      var tag = option.tag || "";
      var helloLabel = new cc.LabelBMFont(option.text, option.fnt);
      helloLabel.attr({
          x: option.X,
          y: option.Y,
          scale: option.scale || 1
      });
      this.addChild(helloLabel, option.zOrder, tag);
  },
},
// fnt图片中必须包含text值。使用GlyphDesigner软件制作自体图片。

4.请求的方法

function getRequestData(request) {
     var xhr = cc.loader.getXMLHttpRequest();
     xhr.open("GET", request.url, true);
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 207)) {
             if (JSON.parse(xhr.responseText).code == 0) {
                 request.handler_success(JSON.parse(xhr.responseText));
             } else {
                 request.handler_error(JSON.parse(xhr.responseText));
             }
         }
     };
     xhr.send();
 }
}

cocos2d-js[0]安装步骤与命令集合

博文 来自: qq_28951971
没有更多推荐了,返回首页