README.md 3.94 KB
Newer Older
liujiangnan's avatar
liujiangnan committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
# cocos-generator

cocos creator技术框架下的H5互动模板框架脚手架,基于cocos creator实现快速开发基于绘玩云的H5互动课件。

# 使用简介

## 前期准备

* git下载  https://git-scm.com/downloads 
* nodejs下载  https://nodejs.org/zh-cn/download/
* 谷歌浏览器下载  https://www.google.cn/chrome/

都下载最新版就行,然后默认安装就可以


## 生成项目

* 登录绘玩云课件开发平台:http://staging-teach.ireadabc.com/ 
* 点击“登录账号,查看我的课件”
* 输入测试的用户名/密码:developers/12345678
* 在右上角“个人中心”的下拉菜单里,点击“我的模板” 菜单,然后点击“新建模板”, 填写必要的信息,在“技术选型”一项上选择“Cocos”
* 点击“确定”后,列表页就会出现一个新生成的模板项目
* 在项目的卡片下找到“开发”按钮,则会弹出相对应的git地址

## 获取并启动项目

```
// xxx 是上面项目对应的Git地址
git clone xxx
cd 项目名称/
npm install

```
liujiangnan's avatar
liujiangnan committed
34 35 36 37
* 打开Cocos Creator, 点击项目(Project)=> 添加(Add) 在打开的对话框里面选择进入clone下来的项目,选择本项目,然后打开
* 基于项目里“this.data”进行常规的Cocos开发 (其中this.data是云平台的配置数据)
* 注意 Cocos Creator 版本必须是2.4.5

liujiangnan's avatar
liujiangnan committed
38 39 40

## 本地调试

liujiangnan's avatar
liujiangnan committed
41 42
在基于CocosCreator的开发与预览调试都完成之后,需要进行模板放到云平台上的数据配置等方面的调试,还要进行cocos打包到IOS/Android真机上的调试,为了更方便与高效的调试,我们提供了如下工具进行调试与测试

liujiangnan's avatar
liujiangnan committed
43 44
### 普通模板

liujiangnan's avatar
liujiangnan committed
45
* 启动本地服务
liujiangnan's avatar
liujiangnan committed
46 47

```
liujiangnan's avatar
liujiangnan committed
48
npm start
liujiangnan's avatar
liujiangnan committed
49 50
```

李维's avatar
李维 committed
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
* 打开浏览器:http://staging-teach.ireadabc.com/template_ci/debug 
* 点击右上角齿轮,选择技术选型、调试模式选择“普通”

### 互动模板

* 找到项目根路径下 index.html 文件
* 在引入JS的位置将air.js改为air_online_open.js
* 启动本地服务

```
npm start
```

* 打开浏览器:http://staging-teach.ireadabc.com/template_ci/debug 
* 点击右上角齿轮,选择技术选型、调试模式选择“互动”
* 左侧老师、右侧学生
liujiangnan's avatar
liujiangnan committed
67

liujiangnan's avatar
liujiangnan committed
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
### 真机调试

* 下载模板调试专用app 

http://download-iplayabc.oss-cn-beijing.aliyuncs.com/iDebugABC.apk

![avatar](http://staging-teach.cdn.ireadabc.com/084f2f95-8213-4c5a-8c46-b194819d7677.png)

* 启动本地服务

```
npm start
```

* 手机和电脑连接同一个Wifi
* 打开调试app,根据提示输入IP地址,点击开始就可以在手机上预览模板了
李维's avatar
李维 committed
84 85 86 87 88 89 90 91 92
* 使用 this.log("==调试信息=="); 可以打印日志进行必要的调试


### 关于联机模板
* 网络连接相关的代码位置:
assets/script/NetworkHelper.ts

* 服务器相关代码位置:
assets/script/Server.ts
liujiangnan's avatar
liujiangnan committed
93

李维's avatar
李维 committed
94 95 96 97 98 99 100
* AI相关代码位置:
assets/script/AI.ts

* 注意要将以下代码中的"op_16"参数改为自己的模板名称
```
this.networkHelper.init("op_16", 2);
```
liujiangnan's avatar
liujiangnan committed
101

李维's avatar
李维 committed
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
* 联机对战引擎文档: 
https://cloud.tencent.com/document/product/629/46678
https://cloud.tencent.com/document/product/1038/50849

### 联机模板额外的验收标准
* 联机功能可用
* 无人联机时,需要自动填充AI
* 有人掉线时,需弹出提示,让玩家自行选择退出或重开游戏

### 关于op_16的说明: 
* 通信接口
SERVER_allPlayerInfo: 由server发给player,有玩家加入或离开时发送,用来更新玩家信息。
SERVER_updateStatus: 由server发给player,更新游戏状态,主要是回合结束换边等。
SERVER_playerRoll: 由server发给player,玩家转动转盘。
SERVER_playerRight: 由server发给player,玩家选择了正确的格子。
SERVER_playerWrong: 由server发给player,玩家选择了错误的格子。
SERVER_playerWin: 由server发给player,玩家胜利。

roll: player发送给server,玩家试图转动转盘。
right: player发送给server,玩家选择了正确的格子。
wrong: player发送给server,玩家选择了错误的格子。