Paste_Image.png
項目目錄結(jié)構(gòu)
| 目錄 | 介紹 |
|---|---|
| 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應(yīng)用程序的入口點 |
| 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);
//表示設(shè)置屏幕適配
cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL);
屏幕適配的方案
- cc.ResolutionPolicy.SHOW_ALL 表示顯示所有蜜自，但會出現(xiàn)黑邊
- 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:表示不顯示任何調(diào)試信息 1: 在調(diào)試端打印信息
- showFPS 設(shè)為true 表示在左下角顯示繪制函數(shù)調(diào)用次數(shù)袜硫、渲染時間和幀率
- id 表示index.html中canvas元素id
- renderMode 表示渲染模式 0:表示自動選擇 1: 強制使用canvas 2: 強制使用webGL
- modules 模塊設(shè)置
- jsList 表示腳本列表
自定義模塊：
打開frameworks>cocos2d-html5>moduleConfig.json里面添加自定義的模塊
Paste_Image.png
web項目的啟動流程
- index.html
- 加載CCBoot.js
- 讀取 project.json
- 加載 resource.js, app.js
- 運行 main.js
- 加載資源
- 顯示游戲
