cocos2d x html5项目,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

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

加载资源

显示游戏