Paste_Image.png
项目目录结构
| 目录 | 介绍 |
|---|---|
| frameworks | 包含cocos2d-html5引擎、cocos2d-x引擎和各个平台的项目文件 |
| -cocos2d-html5 | cocos2d-html5引擎 |
| -cocos2d-x | cocos2d-x引擎 |
| -runtime-src | 各个平台的项目文件(android、ios、win) |
| res | 项目资源文件夹 |
| -HelloWorld.png | 资源图片 |
| -loading.js | 页面启动加载效果的js |
| src | 项目代码文件夹 |
| -app.js | 项目代码 |
| -resource.js | 资源的全局变量定义 |
| index.html | HTML5 基于web应用程序的入口点 |
| main.js | 游戏入口文件，包含游戏初始化代码及启动代码 |
| project.json | 工程配置文件 |
index.html
- 包含游戏场景的canvas
- 引入引擎初始化和加载的引擎脚本 CCBoot.js
- 引入游戏加载效果js loading.js
- 引入游戏启动的入口脚本 main.js
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
main.js
//表示是否开启高清显示
cc.view.enableRetina(cc.sys.os === cc.sys.OS_IOS ? true : false);
//表示设置屏幕适配
cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL);
屏幕适配的方案
- cc.ResolutionPolicy.SHOW_ALL 表示显示所有，但会出现黑边
- cc.ResolutionPolicy.NO_BORDER 表示没有黑白，游戏部分会显示不全，部分被切割在屏幕
- cc.ResolutionPolicy.EXACT_FIT 表示拉伸，图像变形
- cc.ResolutionPolicy.FIXED_HEIGHT 表示固定高度
- cc.ResolutionPolicy.FIXED_WIDTH 表示固定宽度
推荐方案：
竖屏游戏使用cc.ResolutionPolicy.FIXED_WIDTH
横屏游戏使用cc.ResolutionPolicy.FIXED_HEIGHT
project.json
{
"project_type": "javascript",
"debugMode" : 1,
"showFPS" : true,
"frameRate" : 60,
"noCache" : false,
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"frameworks/cocos2d-html5",
"modules" : ["myCocos2d"],
"jsList" : [
"src/resource.js",
"src/app.js"
]}
- project_type 表示项目类型
- debugMode 0:表示不显示任何调试信息 1: 在调试端打印信息
- showFPS 设为true 表示在左下角显示绘制函数调用次数、渲染时间和帧率
- id 表示index.html中canvas元素id
- renderMode 表示渲染模式 0:表示自动选择 1: 强制使用canvas 2: 强制使用webGL
- modules 模块设置
- jsList 表示脚本列表
自定义模块：
打开frameworks>cocos2d-html5>moduleConfig.json里面添加自定义的模块
Paste_Image.png
web项目的启动流程
- index.html
- 加载CCBoot.js
- 读取 project.json
- 加载 resource.js, app.js
- 运行 main.js
- 加载资源
- 显示游戏
