cocos2d-js学习笔记之项目目录

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

---

打包成web，在ios的微信中页面图片、文字显示模糊

<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项目的启动流程

1. index.html
2. 加载CCBoot.js
3. 读取 project.json
4. 加载 resource.js, app.js
5. 运行 main.js
6. 加载资源
7. 显示游戏