Cocos2d-js官方完整项目教程翻译：二、Cocos2d-js的“Hello World”

一、Cocos2d-js文件结构纵览

图1、

理解这个体系结构

这个字典结构可以被分成四个部分

第一部分：引擎相关文件夹

frameworks目录包含Cocos2d-html5引擎和js bindings

第二部分：tests测试、实例程序和程序模板

第三部分：其他杂七杂八的项

二、运行查看示例程序

运行查看Tests项目

在Cocos2d-js/samples/js-tests目录下，通过cocos  console工具  运行tests示例程序

cocos run -p web//执行的命令

运行结果如下图所示

图2、

这些实例程序是你最好的学习资源。

当然你也可以在iOS、Android和mac上运行示例程序。命令如下

cocos run -p ios|android|mac

三、查看示例游戏 

引擎里有游戏的实例程序通过Cocos2d-js编写的。所有的资源和代码都是开放的。现在想大家介绍这个简单的游戏。

游戏项目一：月亮战士

这个游戏项目叫月亮战士，你可以到js-moonwariors目录下去运行它通过cocos console 命令

cocos run -p web|ios|android|mac //对应相应的平台执行相关的命令

这是一个竖版的射击游戏，在这个游戏示例程序中。许多有用的技术和api你可以使用到包括tiled-map，动画等等。

图片三、

四、创建你的第一个“Hello World”工程

接下来我们到了这个教程最重要的部分，在这里我们将以一个跑酷游戏作为例子，接下来我们将使用Cocos2d-js来实现这个跑酷游戏

已经不能等了吗？让我们现在就开始吧！

五、创建跑酷游戏的工程

在我们开始之前，我们可以创建一个新的工程用指定的名字。到你的引擎目录下并用cocos console 创建一个跑酷游戏工程

cocos new Parkour -l js

打开WebStrom并且打开ParKour目录，你可以看到目录列表

图四、

右键点击index.html在WebStrom选择Debug ‘index.html’。在谷歌浏览器中看到下面的图片即表示你已经成功的创建了一个工程。恭喜你！浏览器地址是

http://localhost:63342/Parkour/index.html

图片五、

第五游戏模板代码分析

查看整个工程的所有文件

首先看看图四的所有文件和目录结构

在图四我们可以看到这些

res目录//资源文件夹相当cocos2d-x的Resource文件夹

src目录

index.html文件

projec.json

main.js

分析项目的执行路径

知道程序的执行路径是非常重要的。

这个项目是加载到浏览器从index . html。然后移动到框架/ Cocos2d-html5 / CCBoot.js。在这个文件中,它将尝试加载项目的项目配置。json文件。

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src/app.js"
    ]
}

六、对项目做一些小的调整

隐藏FPS在屏幕上的显示

我将显示的showFPS property方法改为false在project.json

代码如下

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : false,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/Cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src/app.js"
    ]
}

我们可以修改很多属性来实现我们的意图，下面是这些属性的作用

property name	options	explanation
debugMode	0,1,2,3,4,5,6	0: close all 1: info level 2: warn level 3: error level 4: info level with web page 5: warn level with web page 6: error level with web page
showFPS	true or false	toggle FPS visibility
id	"gameCanvas"	the dom element to run cocos2d on
frameRate	a positive number above 24, usually 60-30	adjust the frame rate of your game
renderMode	0,1,2	Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
engineDir	the engine directory related to your project	specify the directory the engine code
modules	engine modules	you could customize your engine by modules. Module names are in the module of moduleConfig.json in root of frameorks/Cocos2d-html5 directory
jsList	a list of your game source code	add your own file lists after myApp.js

七、屏幕适配

我们的跑酷游戏设计比例是480*320打开的你main.js并且在方法cc.game.onStart来改变适配的尺寸480*320

并且你应该将适配的模式改为SHOW_ALL适配代码如下

cc.view.setDesignResolutionSize(480, 320, cc.ResolutionPolicy.SHOW_ALL);

八、总结

在这个游戏中我们谈到了引擎的目录结构样品和测试样例。并且我们还创建了一个新的工程，在最后一部分我们分析了文件和模板的代码结构

九、我们接下来有什么内容

在下一篇教程中，我将叫你怎么创建游戏的主场景。我们将写更多的代码用Cocos2d-js引擎。