环境配置

Python 【仅支持2.X版本,建议使用2.7版本】

安装引擎包内的cocos环境 python setup.py ,并重启电脑

(Ant, SDK, NDK均可以express enter跳过)

注:引擎包目录结构

第一部分: 引擎相关文件

• frameworks 目录包含了 Cocos2d-html5 引擎和 Cocos2d-x JavaScript 代码的汇集.

• Cocos2d-html5 目录包含了所有 Cocos2d-html5 的引擎模块,例如引擎核心模块、音频模块、外部物理引擎库,CocosBuilder Reader, CocoStudio Reader 和其他的模块。所有的模块都用JS实现并且可以在WEB环境中运行。

• js-bindings 目录包含了 Cocos2d-x 引擎, 绑定的和外部预置 SpiderMonkey 库的项目文件。外部接口采用 JS 编写,但是基础模块使用 Cpp 实现,可以在许多不同的本地平台上运行,例如IOS,android,MAC,win32等平台。

第二部分: 测试文件,游戏样本和模板

• template 目录是被用来创建一个新的Cocos2d-JS 工程。它包括了 HTML5 工程和默认的本地工程。cocos 控制台使用它来创建一个新的工程。

• samples 包含全部的测试工程和一个示例游戏,他们都可以从 cocos 控制台执行,也可以通过 javascript 的接口绑定机制在WEB或者本地平台运行。

• js-tests全部的测试工程,就是一本活字典。

• js-moonwarriors 一个可以运行的游戏样本。

第三部分: 其他

• AUTHORS 引擎相关作者介绍。

• README 包含一些对 Cocos2d-JS 的介绍。

• LICENSE MIT许可证,可以查阅在引擎根目录下的 the license 文件夹获得更多细节。

• tools 目录包括 cocos 控制台工具和绑定生成工具(bingings-generator)。template 文件夹下包含一个 build.xml 文件,里面存放着闭包编译器的控制信息,通过 ANT这个命令,你可以将你的游戏打包成为一个单个文件。

• build 目录包含着内置的工程样本文件。

• docs 目录包含 JavaScript 编码风格指导和 release 的信息。

• CHANGELOG 包含所有版本的修改信息。

• setup.py 是一个环境搭建的 python 脚本。

HelloWorld

创建工程 : cocos new NewGameName -l js --no-native

创建一个仅包含Cocos2d-html5的项目, --no-native 表示不需要支持Native平台(IOS,Android,Mac,Windows等),只需要支持浏览器。

运行工程 : 在该新目录下cocos run -p web

打包工程 : 在该新目录下cocos compile –p web –m release

注:工程目录结构

• frameworks 中包含了两个引擎模块,还有一个包含各个平台上的工程文件夹runtime-src。

• res 目录.图片音乐等资源文件。

• src 文件夹. 游戏的所有逻辑代码。app.js 包含我们模板的第一个场景代码。在resource.js 定义了许多资源的全局变量。

• index.html 文件是 HTML5 基于web应用程序的入口点。设置视角和全屏参数等。

• project.json 文件是我们工程的配置文件。

• main.js 是一个创建你的第一个游戏场景和在浏览器显示这个场景的一个文件。 在这个文件里,也可以定义分辨率策略和预加载资源。

属性概念

导演 (Director) 是整个游戏的导航仪,控制游戏的整体行为

场景(Scene)作为容器包含各种元素,并展示出来

层(Layer)直接在屏幕上呈现的内容,并且可以接受用户的输入事件。每个游戏场景都可以有多个层,每一层都有各自负责的任务。

一个场景至少有一个层(Layer)作为孩子节点。

精灵(Sprite),和其他游戏引擎中的精灵相似,它可以移动,旋转,缩放,执行动画,并接受其他转换。如果说Scene和Layer代表了宏观的游戏管理元素,那么Sprite则为微观世界提供了丰富灵活的细节表现。

标签(Label),常用于显示文本。游戏介绍、游戏中的提示以及对话等都需要用到文字显示。

菜单(Menu),常用于实现菜单按钮。Menu类驱动一个菜单的主类,它包含描述文字、按钮和触发器的菜单列表。在使用过程中,首先你需要创建一个或多个菜单项(MenuItem),然后用这些菜单项初始化菜单(Menu)对象,最后将这个初始化了的菜单对象添加到Layer中。

动作(Action),用来描述游戏节点行为规范的一个类,Action类是所有动作的基类,它创建的每个对象都代表一个动作。动作作用于Node,因此每个动作都需要由Node对象来执行,它本身并不是一个能在屏幕中显示的对象。

模仿官方教程制作,存在如下问题:

new cc.LayerColor(cc.color(225, 225, 225, 100));创建的遮罩并非透明,用官方frameworks文件覆盖后解决

官方教程中使用的cc.TransitionFade无法在浏览器执行

cc.director.replaceScene 在coocs2d-js 3.x之后已经被 cc.director.runScene取代

更改loading

加载图标是以cc对象的属性在加载场景(scene)时加载的,位于

『frameworks/cocos2d-html5/cocos2d/core/scenes/CCLoaderScene.js』

在这里展示了cc._loaderImage的base64图片

在frameworks/cocos2d-html5/Base64Images.js 中定义了_loaderImage属性;可以设置成空;也可以将字串替换成自己logo的base64字串;

project.json文件配置

debugMode: 调试信息显示模式,可能的选值及其意义如下:

0 - 不显示任何调试信息。

1 - cc.error, cc.assert, cc.warn, cc.log在调试终端中打印信息,默认值。

2 - cc.error, cc.assert, cc.warn在调试终端中打印信息。

3 - cc.error, cc.assert在调试终端中打印信息。

4 - cc.error, cc.assert, cc.warn, cc.log在Canvas上显示信息,Web引擎独占功能。

5 - cc.error, cc.assert, cc.warn在Canvas上显示信息,Web引擎独占功能。

6 - cc.error, cc.assert在Canvas上显示信息,Web引擎独占功能。

showFPS: 若取值为真则会在游戏窗口左下角显示绘制函数调用次数,渲染时间和帧率,默认取值为真。

frameRate: 用来设置期望帧率,当然,实际帧率会取决于游戏每帧计算消耗时间和运行平台等条件,期望帧率会保证游戏运行帧率不会超过期望帧率,并尽力运行在期望帧率上。

id: Web引擎页面中canvas元素的id,仅服务于Web引擎。

renderMode: Web引擎绘制模式,仅服务于Web引擎,可能的取值如下:

0 - 由引擎自动选择绘制模式

1 - 强制使用Canvas绘制模式

2 - 强制使用WebGL绘制模式,但是实际上WebGL仍然可能会在一些移动浏览器上被忽略而自动使用Canvas绘制模式

engineDir: 在debug模式下,如果使用完整引擎来开发你的游戏,你需要将Web引擎的相对地址设置在这个字段下,但是如果你使用单文件引擎,可以忽略这个字段。

modules: 模块配置,将你的游戏需要引入的模块添加到一个数组中,仅服务于Web引擎。

jsList: 用户JS脚本列表,游戏中依赖的JS脚本都应该列入这个列表中。