Commit 9d28e89c authored by 李维's avatar 李维

feat: 基本流程跑通

parent bf345ca4
{
"ver": "1.1.2",
"uuid": "8ae763a6-0f46-461c-af30-e4cb3ddb9ec1",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "60d9c614-a077-45c2-b078-eb1979cda77b",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 68,
"height": 68,
"platformSettings": {},
"subMetas": {
"icon_back": {
"ver": "1.0.4",
"uuid": "b9b71493-4476-48a6-9440-a9e1c0c247ac",
"rawTextureUuid": "60d9c614-a077-45c2-b078-eb1979cda77b",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 68,
"height": 68,
"rawWidth": 68,
"rawHeight": 68,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
# 游戏广场界面设置说明
## 概述
这个界面实现了一个游戏广场,显示8个游戏卡片的横滑列表,每个卡片包含游戏缩略图和标题。
## 节点结构
### 1. 主要节点层级
```
Canvas (1920x1080)
├── bg (背景 - 浅色背景)
├── back_btn (返回按钮 - 左上角)
├── header (标题栏)
│ └── title_label (游戏广场标题)
└── game_list_container (游戏列表容器)
└── scroll_view (滚动视图)
└── content (内容节点 - 包含所有游戏卡片)
```
### 2. 游戏卡片结构
```
game_card (300x400)
├── card_bg (卡片背景 - 白色圆角矩形)
├── game_thumbnail (游戏缩略图 - 260x280)
└── game_title (游戏标题 - 280x60)
```
## 在Cocos Creator中的设置步骤
### 步骤1: 创建主要节点
1. 在Canvas下创建以下节点:
- `bg` (Sprite) - 设置浅色背景
- `back_btn` (Button) - 返回按钮,已存在
- `header` (Node) - 标题栏容器
- `game_list_container` (Node) - 游戏列表容器
### 步骤2: 设置标题栏
1.`header`节点下创建:
- `title_label` (Label) - 设置文本为"游戏广场"
- 字体大小:32,颜色:黑色
- 位置:居中显示
### 步骤3: 设置滚动视图
1.`game_list_container`下创建:
- `scroll_view` (ScrollView组件)
- 设置ScrollView属性:
- Content: 创建content子节点
- Horizontal: true (允许水平滚动)
- Vertical: false (禁用垂直滚动)
- Elastic Top/Bottom: 0
- Elastic Left/Right: 0.1
### 步骤4: 设置内容节点
1.`scroll_view`下创建`content`节点
2. 设置content节点属性:
- Anchor Point: (0, 0.5)
- Position: (0, 0)
### 步骤5: 创建游戏卡片预制体(推荐)
1. 创建新的预制体文件:`game-card.prefab`
2. 在预制体中创建卡片结构:
- 根节点:300x400
- `card_bg`: 白色背景,300x400
- `game_thumbnail`: 缩略图容器,260x280,位置(0, 60)
- `game_title`: 标题标签,280x60,位置(0, -160)
3. 添加`GameCard`组件到根节点
4. 在组件中绑定对应的属性引用
### 步骤6: 配置脚本组件
1. 在Canvas节点上添加`GameCenter`脚本组件
2. 在脚本组件中设置属性:
- `gameListContainer`: 拖拽`game_list_container`节点
- `gameCardPrefab`: 拖拽`game-card.prefab`预制体
- `scrollView`: 拖拽`scroll_view`节点
## 样式设置
### 颜色方案
- 背景色:浅色 (#F8F6EF)
- 卡片背景:白色 (#FFFFFF)
- 标题文字:黑色 (#000000)
### 尺寸规格
- 卡片尺寸:300x400
- 卡片间距:30px
- 缩略图尺寸:260x280
- 标题区域:280x60
### 字体设置
- 标题字体:24px
- 行高:30px
- 对齐方式:居中对齐
## 功能特性
1. **自动加载游戏数据**:从API接口获取游戏列表
2. **动态创建卡片**:根据数据自动生成游戏卡片
3. **横滑滚动**:支持触摸滑动浏览所有游戏
4. **点击交互**:每个卡片都可以点击,触发相应事件
5. **响应式布局**:自动计算内容宽度,适配不同数量的游戏
## 注意事项
1. 确保网络接口正常工作,能够获取游戏数据
2. 游戏封面图片需要能够正常加载
3. 如果使用预制体,确保路径和引用正确
4. 滚动视图的content节点大小会根据游戏数量自动调整
5. 建议在真机上测试触摸滑动效果
## 扩展功能
1. **搜索功能**:可以添加搜索框过滤游戏
2. **分类功能**:按游戏类型分组显示
3. **收藏功能**:允许用户收藏喜欢的游戏
4. **最近游戏**:显示最近玩过的游戏
5. **游戏统计**:显示游戏完成度等信息
\ No newline at end of file
{
"ver": "2.0.0",
"uuid": "64657144-bd5a-48bd-ac6c-01f325f27087",
"subMetas": {}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "f659072a-d990-4b34-a789-5e076f7e8817",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 2562,
"height": 1444,
"platformSettings": {},
"subMetas": {
"wechat_2025-08-21_213128_182": {
"ver": "1.0.4",
"uuid": "3d3cb355-7e07-40a6-9242-7eebccb8d494",
"rawTextureUuid": "f659072a-d990-4b34-a789-5e076f7e8817",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 2562,
"height": 1444,
"rawWidth": 2562,
"rawHeight": 1444,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
const {ccclass, property} = cc._decorator;
interface GameCardData {
id: number;
uuid: string;
template_name: string;
template_description: string;
cover: string;
data: string;
seq: number;
}
@ccclass
export default class GameCard extends cc.Component {
@property(cc.Sprite)
thumbnailSprite: cc.Sprite = null;
@property(cc.Label)
titleLabel: cc.Label = null;
@property(cc.Node)
cardBg: cc.Node = null;
private gameData: GameCardData = null;
onLoad() {
// 添加点击事件
this.node.on('click', this.onCardClick, this);
}
public init(data: GameCardData) {
this.gameData = data;
this.updateDisplay();
}
private updateDisplay() {
if (!this.gameData) return;
// 设置标题
if (this.titleLabel) {
this.titleLabel.string = this.gameData.template_description || '未知游戏';
}
// 加载并设置缩略图
if (this.thumbnailSprite && this.gameData.cover) {
cc.loader.load(this.gameData.cover, (err, texture) => {
if (!err && texture) {
const spriteFrame = new cc.SpriteFrame(texture);
this.thumbnailSprite.spriteFrame = spriteFrame;
}
});
}
}
private onCardClick() {
if (this.gameData) {
console.log('点击游戏卡片:', this.gameData.template_description);
// 派发事件通知父节点
this.node.emit('onGameCardClick', this.gameData);
}
}
onDestroy() {
this.node.off('click', this.onCardClick, this);
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "9ba24e00-4042-4aa2-b4b8-4bff0f316fbe",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
......@@ -76,18 +76,24 @@
},
{
"__id__": 8
},
{
"__id__": 13
},
{
"__id__": 17
}
],
"_active": true,
"_components": [
{
"__id__": 13
"__id__": 26
},
{
"__id__": 14
"__id__": 27
},
{
"__id__": 15
"__id__": 28
}
],
"_prefab": null,
......@@ -572,57 +578,725 @@
"customEventData": ""
},
{
"__type__": "cc.Canvas",
"_name": "",
"__type__": "cc.Node",
"_name": "header",
"_objFlags": 0,
"node": {
"_parent": {
"__id__": 2
},
"_enabled": true,
"_designResolution": {
"_children": [
{
"__id__": 14
},
{
"__id__": 16
}
],
"_active": true,
"_components": [],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1920,
"height": 1080
"width": 800,
"height": 100
},
"_fitWidth": false,
"_fitHeight": true,
"_id": "59Cd0ovbdF4byw5sbjJDx7"
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-397.08,
442.044,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "c5Kwn37rFBJogCgvlRhU93"
},
{
"__type__": "cc.Widget",
"__type__": "cc.Node",
"_name": "title_label",
"_objFlags": 0,
"_parent": {
"__id__": 13
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 15
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 128,
"height": 40.32
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "27hxUP3IdJj5DyY5OhyoyG"
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
"__id__": 14
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "29zXboiXFBKoIV4PQ2liTe"
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_string": "游戏广场",
"_N$string": "游戏广场",
"_fontSize": 32,
"_lineHeight": 32,
"_enableWrapText": true,
"_N$file": null,
"_isSystemFontUsed": true,
"_spacingX": 0,
"_batchAsBitmap": false,
"_styleFlags": 0,
"_underlineHeight": 0,
"_N$horizontalAlign": 1,
"_N$verticalAlign": 1,
"_N$fontFamily": "Arial",
"_N$overflow": 0,
"_N$cacheMode": 0,
"_id": "edOtIKUDdHJanv0iuIsgPx"
},
{
"__type__": "ee841Rm75JJrYTnyRBItqiW",
"_name": "",
"__type__": "cc.Node",
"_name": "icon_back",
"_objFlags": 0,
"node": {
"_parent": {
"__id__": 13
},
"_children": [],
"_active": true,
"_components": [],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "abBn52Pk5CuLG3cVNbL2r1"
},
{
"__type__": "cc.Node",
"_name": "game_list_container",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_enabled": true,
"_children": [
{
"__id__": 18
}
],
"_active": true,
"_components": [],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1800,
"height": 600
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "44uRN/yyVLw58TMlvdS2fn"
},
{
"__type__": "cc.Node",
"_name": "scroll_view",
"_objFlags": 0,
"_parent": {
"__id__": 17
},
"_children": [
{
"__id__": 19
}
],
"_active": true,
"_components": [
{
"__id__": 25
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1800,
"height": 600
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-892.263,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "feuZ24G0xD/5UwJQpL2FOm"
},
{
"__type__": "cc.Node",
"_name": "content",
"_objFlags": 0,
"_parent": {
"__id__": 18
},
"_children": [
{
"__id__": 20
},
{
"__id__": 22
}
],
"_active": true,
"_components": [
{
"__id__": 24
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 0,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 3000,
"height": 800
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
-79.416,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "f1anq0MchAh7zza+vvL3e/"
},
{
"__type__": "cc.Node",
"_name": "line1",
"_objFlags": 0,
"_parent": {
"__id__": 19
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 21
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 3000,
"height": 400
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
1500,
200,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "9fCxS0I9NCgKBdLIaUYR8W"
},
{
"__type__": "cc.Layout",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 20
},
"_enabled": true,
"_layoutSize": {
"__type__": "cc.Size",
"width": 300,
"height": 200
},
"_resize": 0,
"_N$layoutType": 1,
"_N$cellSize": {
"__type__": "cc.Size",
"width": 40,
"height": 40
},
"_N$startAxis": 0,
"_N$paddingLeft": 0,
"_N$paddingRight": 0,
"_N$paddingTop": 0,
"_N$paddingBottom": 0,
"_N$spacingX": 30,
"_N$spacingY": 0,
"_N$verticalDirection": 1,
"_N$horizontalDirection": 0,
"_N$affectedByScale": false,
"_id": "2eiTKYP+ZO66TVX3fr1bTY"
},
{
"__type__": "cc.Node",
"_name": "line2",
"_objFlags": 0,
"_parent": {
"__id__": 19
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 23
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 3000,
"height": 400
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
1500,
-200,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "81in3kdZlNnZgH0zB1dkh5"
},
{
"__type__": "cc.Layout",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 22
},
"_enabled": true,
"_layoutSize": {
"__type__": "cc.Size",
"width": 300,
"height": 200
},
"_resize": 0,
"_N$layoutType": 1,
"_N$cellSize": {
"__type__": "cc.Size",
"width": 40,
"height": 40
},
"_N$startAxis": 0,
"_N$paddingLeft": 0,
"_N$paddingRight": 0,
"_N$paddingTop": 0,
"_N$paddingBottom": 0,
"_N$spacingX": 30,
"_N$spacingY": 0,
"_N$verticalDirection": 1,
"_N$horizontalDirection": 0,
"_N$affectedByScale": false,
"_id": "f04rFEXGhP9o3m5xYqx6EC"
},
{
"__type__": "cc.Layout",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 19
},
"_enabled": true,
"_layoutSize": {
"__type__": "cc.Size",
"width": 3000,
"height": 800
},
"_resize": 1,
"_N$layoutType": 2,
"_N$cellSize": {
"__type__": "cc.Size",
"width": 40,
"height": 40
},
"_N$startAxis": 0,
"_N$paddingLeft": 0,
"_N$paddingRight": 0,
"_N$paddingTop": 0,
"_N$paddingBottom": 0,
"_N$spacingX": 50,
"_N$spacingY": 0,
"_N$verticalDirection": 1,
"_N$horizontalDirection": 0,
"_N$affectedByScale": false,
"_id": "63cPDEQ89IIbG530Tvqeb7"
},
{
"__type__": "cc.ScrollView",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 18
},
"_enabled": true,
"horizontal": true,
"vertical": false,
"inertia": true,
"brake": 0.5,
"elastic": true,
"bounceDuration": 1,
"scrollEvents": [],
"cancelInnerEvents": true,
"_N$content": {
"__id__": 19
},
"content": {
"__id__": 19
},
"_id": "30yHDRW1FLSaYTIlriOrwH"
},
{
"__type__": "cc.Canvas",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_designResolution": {
"__type__": "cc.Size",
"width": 1920,
"height": 1080
},
"_fitWidth": false,
"_fitHeight": true,
"_id": "59Cd0ovbdF4byw5sbjJDx7"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "29zXboiXFBKoIV4PQ2liTe"
},
{
"__type__": "ee841Rm75JJrYTnyRBItqiW",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"gameListContainer": {
"__id__": 17
},
"gameCardPrefab": {
"__uuid__": "3e0857f7-c988-4162-90e4-5e6c1887c3d6"
},
"scrollView": {
"__id__": 25
},
"_id": "36tZootWRFMaA7LPmJ+XR/"
}
]
\ No newline at end of file
......@@ -7,14 +7,303 @@
const {ccclass, property} = cc._decorator;
interface GameData {
id: number;
uuid: string;
template_name: string;
template_description: string;
cover: string;
data: string;
seq: number;
}
@ccclass
export default class NewClass extends cc.Component {
export default class GameCenter extends cc.Component {
@property(cc.Node)
gameListContainer: cc.Node = null;
@property(cc.Prefab)
gameCardPrefab: cc.Prefab = null;
@property(cc.ScrollView)
scrollView: cc.ScrollView = null;
private gameDataList: GameData[] = [];
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
onLoad() {
// 初始化组件引用
this.initComponents();
}
start() {
this.getGameList();
}
private initComponents() {
console.log('=== 初始化组件开始 ===');
// 获取游戏列表容器
if (!this.gameListContainer) {
this.gameListContainer = this.node.getChildByName('game_list_container');
console.log('gameListContainer:', this.gameListContainer);
}
// 获取滚动视图
if (!this.scrollView) {
const scrollViewNode = this.node.getChildByName('game_list_container')?.getChildByName('scroll_view');
console.log('scrollViewNode:', scrollViewNode);
if (scrollViewNode) {
this.scrollView = scrollViewNode.getComponent(cc.ScrollView);
console.log('scrollView组件:', this.scrollView);
} else {
console.error('找不到scroll_view节点');
}
}
console.log('=== 初始化组件完成 ===');
console.log('gameListContainer:', this.gameListContainer);
console.log('scrollView:', this.scrollView);
}
getGameList() {
console.log('=== 开始获取游戏列表 ===');
const course_id = 39657;
const uri = `api/courseware/v2/${course_id}/list`;
console.log('请求URI:', uri);
console.log('课程ID:', course_id);
const middleLayerNode = cc.director.getScene().getChildByName('middleLayer');
console.log('middleLayer节点:', middleLayerNode);
if (middleLayerNode) {
const middleLayerComp = middleLayerNode.getComponent('middleLayer');
console.log('middleLayer组件:', middleLayerComp);
if (middleLayerComp && typeof middleLayerComp.callNetworkApiGet === 'function') {
console.log('开始调用网络API...');
middleLayerComp.callNetworkApiGet(uri, {}, (data) => {
console.log('=== 网络API回调数据 ===');
console.log('原始数据:', data);
console.log('数据类型:', typeof data);
console.log('是否有rows属性:', data && data.hasOwnProperty('rows'));
if (data && data.rows) {
console.log('rows数组长度:', data.rows.length);
console.log('rows数据:', data.rows);
this.gameDataList = data.rows;
console.log('保存到gameDataList:', this.gameDataList);
this.createGameList();
} else {
console.error('数据格式不正确或没有rows属性');
console.log('完整数据对象:', JSON.stringify(data, null, 2));
}
});
} else {
console.error('middleLayer 组件未找到或 callNetworkApiGet 方法不存在');
console.log('middleLayerComp类型:', typeof middleLayerComp);
if (middleLayerComp) {
console.log('middleLayerComp方法:', Object.getOwnPropertyNames(middleLayerComp));
}
}
} else {
console.error('middleLayer 节点未找到');
console.log('场景中的所有节点:', cc.director.getScene().children.map(child => child.name));
}
}
private createGameList() {
console.log('=== 开始创建游戏列表 ===');
console.log('gameListContainer:', this.gameListContainer);
console.log('scrollView:', this.scrollView);
console.log('gameDataList长度:', this.gameDataList.length);
if (!this.gameListContainer || !this.scrollView) {
console.error('游戏列表容器或滚动视图未找到');
return;
}
const content = this.scrollView.content;
console.log('scrollView content:', content);
if (!content) {
console.error('滚动视图内容节点未找到');
return;
}
// 清空现有内容
console.log('清空现有内容,当前子节点数量:', content.childrenCount);
const line1 = content.getChildByName('line1');
line1.removeAllChildren();
const line2 = content.getChildByName('line2');
line2.removeAllChildren();
console.log('清空后子节点数量:', content.childrenCount);
// 创建游戏卡片
console.log('开始创建游戏卡片...');
this.gameDataList.forEach((gameData, index) => {
console.log(`创建第${index + 1}个游戏卡片:`, gameData);
this.createGameCard(gameData, index, index % 2 === 0 ? line1 : line2);
});
// 设置内容节点大小 - 以(0,0)为中心
const cardWidth = 400; // 卡片宽度
const cardHeight = 300; // 卡片高度
const spacing = 30; // 卡片间距
const totalCards = Math.ceil(this.gameDataList.length/2);
console.log('卡片尺寸信息:', { cardWidth, cardHeight, spacing, totalCards });
if (totalCards > 0) {
const totalWidth = totalCards * cardWidth + (totalCards - 1) * spacing;
content.width = totalWidth;
content.height = cardHeight;
console.log('设置content节点大小:', { width: content.width, height: content.height });
console.log('设置content节点锚点:', { anchorX: content.anchorX, anchorY: content.anchorY });
} else {
console.warn('没有游戏数据,无法设置内容节点大小');
}
console.log('=== 游戏列表创建完成 ===');
console.log('最终content子节点数量:', content.childrenCount);
}
private createGameCard(gameData: GameData, index: number, parent: cc.Node) {
console.log(`=== 创建第${index + 1}个游戏卡片 ===`);
console.log('游戏数据:', gameData);
console.log('父节点:', parent);
console.log('gameCardPrefab:', this.gameCardPrefab);
if (this.gameCardPrefab) {
console.log('使用预制体创建卡片');
// 使用预制体创建卡片
const cardNode = cc.instantiate(this.gameCardPrefab);
parent.addChild(cardNode);
console.log('预制体卡片创建成功:', cardNode);
// 初始化卡片数据
const gameCardComp = cardNode.getComponent('game-card');
console.log('GameCard组件:', gameCardComp);
if (gameCardComp && typeof gameCardComp.init === 'function') {
console.log('调用GameCard组件的init方法');
gameCardComp.init(gameData);
} else {
console.warn('GameCard组件未找到或init方法不存在');
}
// 监听卡片点击事件
cardNode.on('onGameCardClick', this.onGameCardClick, this);
console.log('卡片点击事件监听器已添加');
} else {
console.log('没有预制体,使用代码创建卡片');
// 如果没有预制体,使用代码创建
this.createGameCardByCode(gameData, index, parent);
}
}
private createGameCardByCode(gameData: GameData, index: number, parent: cc.Node) {
// 创建卡片节点
const cardNode = new cc.Node('game_card');
parent.addChild(cardNode);
// 设置卡片位置 - 以(0,0)为中心计算
const cardWidth = 300;
const cardHeight = 400;
const spacing = 30;
const totalCards = this.gameDataList.length;
// 计算起始位置,使卡片列表居中
const totalWidth = totalCards * cardWidth + (totalCards - 1) * spacing;
const startX = -totalWidth / 2 + cardWidth / 2;
const x = startX + index * (cardWidth + spacing);
const y = 0;
cardNode.setPosition(x, y);
// 创建卡片背景
const cardBg = new cc.Node('card_bg');
cardNode.addChild(cardBg);
const bgSprite = cardBg.addComponent(cc.Sprite);
// 设置白色背景,可以通过代码创建或使用图片资源
cardBg.color = cc.Color.WHITE;
cardBg.width = cardWidth;
cardBg.height = cardHeight;
// 添加圆角效果(如果有圆角图片资源)
// bgSprite.spriteFrame = this.getRoundedRectSprite();
// 创建游戏缩略图
const thumbnailNode = new cc.Node('game_thumbnail');
cardNode.addChild(thumbnailNode);
const thumbnailSprite = thumbnailNode.addComponent(cc.Sprite);
thumbnailNode.width = cardWidth - 40;
thumbnailNode.height = cardHeight - 120;
thumbnailNode.setPosition(0, 60);
// 加载游戏封面图片
if (gameData.cover) {
cc.loader.load(gameData.cover, (err, texture) => {
if (!err && texture) {
const spriteFrame = new cc.SpriteFrame(texture);
thumbnailSprite.spriteFrame = spriteFrame;
}
});
}
// 创建游戏标题
const titleNode = new cc.Node('game_title');
cardNode.addChild(titleNode);
const titleLabel = titleNode.addComponent(cc.Label);
titleLabel.string = gameData.template_description || '未知游戏';
titleLabel.fontSize = 24;
titleLabel.lineHeight = 30;
titleLabel.horizontalAlign = cc.Label.HorizontalAlign.CENTER;
titleLabel.verticalAlign = cc.Label.VerticalAlign.CENTER;
titleLabel.node.color = cc.Color.BLACK;
titleNode.width = cardWidth - 20;
titleNode.height = 60;
titleNode.setPosition(0, -cardHeight / 2 + 40);
// 添加点击事件
const button = cardNode.addComponent(cc.Button);
button.node.on('click', () => {
this.onGameCardClick(gameData);
});
}
private onGameCardClick(gameData: GameData) {
console.log('点击游戏卡片:', gameData.template_description);
// 这里可以添加跳转到游戏页面的逻辑
// 例如:this.node.emit('onGameSelected', gameData);
const middleLayerNode = cc.director.getScene().getChildByName('middleLayer');
if (middleLayerNode) {
const middleLayerComp = middleLayerNode.getComponent('middleLayer');
if (middleLayerComp && typeof middleLayerComp.loadPageBundle === 'function') {
console.log("loadPageBundle");
console.log(gameData);
middleLayerComp.setCourseData(JSON.parse(gameData.data));
middleLayerComp.loadPageBundle(gameData,()=>{
console.log('loadPageBundle success');
});
middleLayerComp.showCloseGameBtn();
} else {
console.error('middleLayer 组件未找到或 handleSubSceneEvent 方法不存在');
}
} else {
console.error('middleLayer 节点未找到');
}
start () {
}
......
{
"ver": "1.1.2",
"uuid": "bc2d8d9a-fe65-4d6b-b632-16fdb7292499",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
[
{
"__type__": "cc.Prefab",
"_name": "",
"_objFlags": 0,
"_native": "",
"data": {
"__id__": 1
},
"optimizationPolicy": 0,
"asyncLoadAssets": false,
"readonly": false
},
{
"__type__": "cc.Node",
"_name": "game-card",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
},
{
"__id__": 5
},
{
"__id__": 8
}
],
"_active": true,
"_components": [
{
"__id__": 11
},
{
"__id__": 12
}
],
"_prefab": {
"__id__": 13
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 400,
"height": 300
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Node",
"_name": " card_bg",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 3
}
],
"_prefab": {
"__id__": 4
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 400,
"height": 300
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "3e0857f7-c988-4162-90e4-5e6c1887c3d6"
},
"fileId": "85oivK5FhAvZPML5eAXr4v",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "game_thumbnail",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 6
}
],
"_prefab": {
"__id__": 7
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 360,
"height": 220
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
22.871,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": null,
"_type": 1,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "3e0857f7-c988-4162-90e4-5e6c1887c3d6"
},
"fileId": "e9n/ZFueBHlJMia+chDdd0",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "game_title",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 9
}
],
"_prefab": {
"__id__": 10
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 50.4
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-1.089,
-125.25,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_string": "",
"_N$string": "",
"_fontSize": 40,
"_lineHeight": 40,
"_enableWrapText": true,
"_N$file": null,
"_isSystemFontUsed": true,
"_spacingX": 0,
"_batchAsBitmap": false,
"_styleFlags": 0,
"_underlineHeight": 0,
"_N$horizontalAlign": 0,
"_N$verticalAlign": 0,
"_N$fontFamily": "Arial",
"_N$overflow": 0,
"_N$cacheMode": 0,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "3e0857f7-c988-4162-90e4-5e6c1887c3d6"
},
"fileId": "baz8Zjv3ZPzbAiy2HWukQu",
"sync": false
},
{
"__type__": "9ba244AQEJKorS4S/8PMW++",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"thumbnailSprite": {
"__id__": 6
},
"titleLabel": {
"__id__": 9
},
"cardBg": {
"__id__": 2
},
"_id": ""
},
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$transition": 0,
"transition": 0,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"_N$hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": {
"__id__": 1
},
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "3e0857f7-c988-4162-90e4-5e6c1887c3d6"
},
"fileId": "",
"sync": false
}
]
\ No newline at end of file
{
"ver": "1.2.9",
"uuid": "3e0857f7-c988-4162-90e4-5e6c1887c3d6",
"optimizationPolicy": "AUTO",
"asyncLoadAssets": false,
"readonly": false,
"subMetas": {}
}
\ No newline at end of file
......@@ -70,18 +70,24 @@
"_children": [
{
"__id__": 3
},
{
"__id__": 5
},
{
"__id__": 17
}
],
"_active": true,
"_components": [
{
"__id__": 15
"__id__": 22
},
{
"__id__": 16
"__id__": 23
},
{
"__id__": 17
"__id__": 24
}
],
"_prefab": null,
......@@ -132,6 +138,104 @@
"groupIndex": 0,
"_id": "94GaOQuf5JP5wI4nniIhvP"
},
{
"__type__": "cc.Node",
"_name": "Main Camera",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 4
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "891/RwK2JDHI3j2jhNIPpd"
},
{
"__type__": "cc.Camera",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 3
},
"_enabled": true,
"_cullingMask": 4294967295,
"_clearFlags": 7,
"_backgroundColor": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_depth": -1,
"_zoomRatio": 1,
"_targetTexture": null,
"_fov": 60,
"_orthoSize": 10,
"_nearClip": 1,
"_farClip": 4096,
"_ortho": true,
"_rect": {
"__type__": "cc.Rect",
"x": 0,
"y": 0,
"width": 1,
"height": 1
},
"_renderStages": 1,
"_alignWithScreen": true,
"_id": "77f427FyhG6LV4xBsyngkR"
},
{
"__type__": "cc.Node",
"_name": "info",
......@@ -141,22 +245,22 @@
},
"_children": [
{
"__id__": 4
"__id__": 6
},
{
"__id__": 7
"__id__": 9
},
{
"__id__": 10
"__id__": 12
}
],
"_active": true,
"_components": [
{
"__id__": 13
"__id__": 15
},
{
"__id__": 14
"__id__": 16
}
],
"_prefab": null,
......@@ -212,16 +316,16 @@
"_name": "domain",
"_objFlags": 0,
"_parent": {
"__id__": 3
"__id__": 5
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 5
"__id__": 7
},
{
"__id__": 6
"__id__": 8
}
],
"_prefab": null,
......@@ -277,7 +381,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 4
"__id__": 6
},
"_enabled": true,
"_materials": [
......@@ -310,7 +414,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 4
"__id__": 6
},
"_enabled": true,
"alignMode": 1,
......@@ -337,16 +441,16 @@
"_name": "baseUrl",
"_objFlags": 0,
"_parent": {
"__id__": 3
"__id__": 5
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 8
"__id__": 10
},
{
"__id__": 9
"__id__": 11
}
],
"_prefab": null,
......@@ -402,7 +506,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 7
"__id__": 9
},
"_enabled": true,
"_materials": [
......@@ -435,7 +539,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 7
"__id__": 9
},
"_enabled": true,
"alignMode": 1,
......@@ -462,16 +566,16 @@
"_name": "env",
"_objFlags": 0,
"_parent": {
"__id__": 3
"__id__": 5
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 11
"__id__": 13
},
{
"__id__": 12
"__id__": 14
}
],
"_prefab": null,
......@@ -527,7 +631,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 10
"__id__": 12
},
"_enabled": true,
"_materials": [
......@@ -560,7 +664,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 10
"__id__": 12
},
"_enabled": true,
"alignMode": 1,
......@@ -587,7 +691,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 3
"__id__": 5
},
"_enabled": true,
"_layoutSize": {
......@@ -619,7 +723,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 3
"__id__": 5
},
"_enabled": true,
"alignMode": 1,
......@@ -641,6 +745,219 @@
"_originalHeight": 0,
"_id": "c97jBDoJZODqCajB/ZlEtV"
},
{
"__type__": "cc.Node",
"_name": "back_btn",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": false,
"_components": [
{
"__id__": 18
},
{
"__id__": 19
},
{
"__id__": 20
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 68,
"height": 68
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-902,
482,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "8cMP1PP7VPtZFxgqY2eS5U"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 17
},
"_enabled": true,
"alignMode": 1,
"_target": {
"__id__": 2
},
"_alignFlags": 9,
"_left": 24,
"_right": 0,
"_top": 24,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "21HN20+bRGIKBlteDB961d"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 17
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "b9b71493-4476-48a6-9440-a9e1c0c247ac"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "9bXr83g59P1Leg2qTcMVQ3"
},
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 17
},
"_enabled": true,
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [
{
"__id__": 21
}
],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$transition": 0,
"transition": 0,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"_N$hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": {
"__id__": 17
},
"_id": "1ezWfVDD1BbZJA929wFexb"
},
{
"__type__": "cc.ClickEvent",
"target": {
"__id__": 2
},
"component": "",
"_componentId": "c7a12GnkqlEDqfp1PUUHj9F",
"handler": "onExitGame",
"customEventData": ""
},
{
"__type__": "c7a12GnkqlEDqfp1PUUHj9F",
"_name": "",
......
const { ccclass, property } = cc._decorator;
import { initAir } from './air';
import { initAir } from "./air";
@ccclass
export default class middleLayer extends cc.Component {
onLoad() {
console.log('onLoad middleLayer');
console.log("onLoad middleLayer");
initAir(this);
this.reWriteAir();
}
reWriteAir() {
console.log('reWriteAir..');
console.log("reWriteAir..");
(<any>window).courseware.getData = (callback) => {
this.getData(callback);
}
// this.getData(callback);
callback(this.COURSE_DATA);
};
// if (!(<any>window).air) {
// (<any>window).air = {};
// }
......@@ -34,18 +31,25 @@ export default class middleLayer extends cc.Component {
// }
}
COURSE_DATA = null;
setCourseData(data) {
this.COURSE_DATA = data;
}
log(value) {
console.log(value);
}
syllabus_id;
getData(callBack) {
const uri = 'syllabus/v1/getdata';
const uri = "api/syllabus/v1/getdata";
const data = {
syllabusid: this.syllabus_id
syllabusid: this.syllabus_id,
};
console.log('data = ' + JSON.stringify(data));
this.callNetworkApiGet(uri, data, callBack);
console.log("data = " + JSON.stringify(data));
this.callNetworkApiGet(uri, data, (res) => {
callBack(JSON.parse(res.data));
});
}
role;
......@@ -53,30 +57,30 @@ export default class middleLayer extends cc.Component {
homework_id;
token;
onHomeworkFinish(callBack) {
if (this.role == 'teacher') {
if (this.role == "teacher") {
return;
}
const uri = 'app_source/v1/student/homework/finished';
const uri = "app_source/v1/student/homework/finished";
const data = {
syllabus_id: this.syllabus_id,
homework_id: this.homework_id,
token: this.token,
score: 0
score: 0,
};
console.log('data = ' + JSON.stringify(data));
console.log("data = " + JSON.stringify(data));
this.callNetworkApiPost(uri, data, callBack);
if (this.homework_id == -1) {
return;
}
const btnBg = cc.find('middleLayer/btnBg');
const btnBg = cc.find("middleLayer/btnBg");
btnBg.active = true;
}
callNetworkApiGet(uri, data, callBack) {
let queryStr = '?';
let queryStr = "?";
for (const key in data) {
if (Object.hasOwnProperty.call(data, key)) {
const value = data[key];
......@@ -85,15 +89,15 @@ export default class middleLayer extends cc.Component {
}
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 400) {
const responseData = JSON.parse(xhr.responseText);
console.log(responseData)
callBack((responseData.data));
console.log(responseData);
callBack(responseData);
}
};
const url = `${this.BASE_URL}${uri}${queryStr}`;
console.log('url = ' + url);
xhr.open('GET', url, true);
console.log("url = " + url);
xhr.open("GET", url, true);
xhr.send();
}
......@@ -101,12 +105,12 @@ export default class middleLayer extends cc.Component {
const xhr = new XMLHttpRequest();
const url = `${this.BASE_URL}${uri}`;
xhr.open("POST", url, true);
xhr.setRequestHeader('content-type', 'application/json');
xhr.setRequestHeader("content-type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
callBack(JSON.parse(xhr.responseText));
}
}
};
xhr.send(JSON.stringify(data));
}
......@@ -134,11 +138,11 @@ export default class middleLayer extends cc.Component {
const engineInfo = JSON.parse((<any>window).air.engineInfo);
if (engineInfo.isDev == 1) {
engineInfo.domain = "http://staging-teach.cdn.ireadabc.com/";
engineInfo.apiBase = 'http://staging-openapi.iteachabc.com';
engineInfo.apiBase = "http://staging-openapi.iteachabc.com/";
engineInfo.orgId = 513;
} else {
engineInfo.domain = "http://teach.cdn.ireadabc.com/";
engineInfo.apiBase = 'http://openapi.iteachabc.com';
engineInfo.apiBase = "http://openapi.iteachabc.com/";
engineInfo.orgId = 512;
}
this.ORG_ID = engineInfo[`orgId`];
......@@ -160,8 +164,6 @@ export default class middleLayer extends cc.Component {
// 生命当前节点为常驻节点
cc.game.addPersistRootNode(this.node);
// 添加事件监听
// this.initListener();
// TODO 获取当前环境信息
......@@ -169,44 +171,45 @@ export default class middleLayer extends cc.Component {
// this.loadOnlineBundle()
let domain = "http://staging-teach.cdn.ireadabc.com/";
let baseUrl = "http://staging-openapi.iteachabc.com";
let baseUrl = "http://staging-openapi.iteachabc.com/";
let env = "0"; // 0: 测试环境 1: 生产环境
let token = "unlogin";
try {
const jsonStr = this.callNativeFunction({ name: 'getEngineInfo', value: '' });
const jsonStr = this.callNativeFunction({
name: "getEngineInfo",
value: "",
});
const obj = JSON.parse(jsonStr);
domain = obj.domain;
baseUrl = obj.baseUrl;
env = obj.env;
token = obj.token;
} catch (error) {
console.log('error', error);
console.error('getEngineInfo 获取信息失败');
console.log("error", error);
console.error("getEngineInfo 获取信息失败");
}
console.log('domain', domain);
console.log('baseUrl', baseUrl);
console.log('env', env);
console.log('token', token);
console.log("domain", domain);
console.log("baseUrl", baseUrl);
console.log("env", env);
console.log("token", token);
this.DOMAIN = domain;
this.BASE_URL = baseUrl;
this.ENV = env;
this.token = token;
this.showDebugInfo();
// this.showDebugInfo();
if(!this.DOMAIN || !this.BASE_URL || !this.ENV || !this.token) {
console.error('getEngineInfo 获取信息失败');
if (!this.DOMAIN || !this.BASE_URL || !this.ENV || !this.token) {
console.error("getEngineInfo 获取信息失败");
return;
}
// 运行主场景
this.runMainScene();
await this.getGameList();
// this.homework_id = homework_id;
// this.syllabus_id = syllabus_id;
// this.role = role;
......@@ -223,52 +226,39 @@ export default class middleLayer extends cc.Component {
}
showDebugInfo() {
const domain = cc.find('middleLayer/info/domain').getComponent(cc.Label);
const baseUrl = cc.find('middleLayer/info/baseUrl').getComponent(cc.Label);
const env = cc.find('middleLayer/info/env').getComponent(cc.Label);
const domain = cc.find("middleLayer/info/domain").getComponent(cc.Label);
const baseUrl = cc.find("middleLayer/info/baseUrl").getComponent(cc.Label);
const env = cc.find("middleLayer/info/env").getComponent(cc.Label);
// const token = cc.find('middleLayer/info/token').getComponent(cc.Label);
domain.string = `domain: ${this.DOMAIN}`;
baseUrl.string = `baseUrl: ${this.BASE_URL}`;
env.string = `env: ${this.ENV == '0' ? 'test' : 'prod'}`;
env.string = `env: ${this.ENV == "0" ? "test" : "prod"}`;
// token.string = this.token;
}
getGameList() {
const uri = '/api/courseware/v2/39657/list';
const course_id = 39657;
this.callNetworkApiGet(uri, {}, (data) => {
console.log('data', data);
});
}
/**
* 运行子场景
*/
runMainScene() {
console.log('加载游戏中心场景...');
cc.director.loadScene('gamecenter');
console.log("加载游戏中心场景...");
cc.director.loadScene("gamecenter");
}
/**
* 关闭游戏中心
*/
closeGameCenter() {
console.log('关闭游戏中心,加载空页面...');
console.log("关闭游戏中心,加载空页面...");
cc.director.loadScene("empty", () => {
cc.game.removePersistRootNode(this.node);
this.callNativeFunction({ name: 'exit', value: '' });
this.callNativeFunction({ name: "exit", value: "" });
});
}
initListener() {
const exitBtn = this.node.getChildByName('ExitBtn');
exitBtn.on('click', () => {
const sprite = exitBtn.getChildByName('sprite');
const exitBtn = this.node.getChildByName("ExitBtn");
exitBtn.on("click", () => {
const sprite = exitBtn.getChildByName("sprite");
cc.tween(sprite)
.to(0.1, { scaleX: 0.9, scaleY: 1.1 })
.to(0.1, { scaleX: 1.1, scaleY: 0.9 })
......@@ -276,57 +266,75 @@ export default class middleLayer extends cc.Component {
.call(() => {
cc.game.removePersistRootNode(this.node);
cc.director.loadScene("emptyScene", () => {
this.callNativeFunction({ name: 'exit', value: '' });
this.callNativeFunction({ name: "exit", value: "" });
});
})
.start();
});
const btnLast = cc.find('middleLayer/btnBg/btnLast');
btnLast['canClick'] = true;
btnLast.on('click', () => {
if (!btnLast['canClick']) {
const btnLast = cc.find("middleLayer/btnBg/btnLast");
btnLast["canClick"] = true;
btnLast.on("click", () => {
if (!btnLast["canClick"]) {
return;
}
btnLast['canClick'] = false;
btnLast["canClick"] = false;
cc.tween(btnLast)
.to(0.1, { scaleX: 0.9, scaleY: 1.1 })
.to(0.1, { scaleX: 1.1, scaleY: 0.9 })
.to(0.1, { scaleX: 1, scaleY: 1 })
.call(() => {
btnLast['canClick'] = true;
btnLast["canClick"] = true;
const paramStr = JSON.stringify({});
if (cc.sys.isNative && cc.sys.os == cc.sys.OS_IOS) {
return jsb.reflection.callStaticMethod('CocosMng', 'previousPage:', paramStr);
return jsb.reflection.callStaticMethod(
"CocosMng",
"previousPage:",
paramStr
);
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
return jsb.reflection.callStaticMethod('com/iplayabc/cocos/AppActivity', 'previousPage', '(Ljava/lang/String;)Ljava/lang/String;', paramStr);
return jsb.reflection.callStaticMethod(
"com/iplayabc/cocos/AppActivity",
"previousPage",
"(Ljava/lang/String;)Ljava/lang/String;",
paramStr
);
} else {
console.error('非源生环境');
console.error("非源生环境");
}
})
.start();
});
const btnNext = cc.find('middleLayer/btnBg/btnNext');
btnNext['canClick'] = true;
btnNext.on('click', () => {
if (!btnNext['canClick']) {
const btnNext = cc.find("middleLayer/btnBg/btnNext");
btnNext["canClick"] = true;
btnNext.on("click", () => {
if (!btnNext["canClick"]) {
return;
}
btnNext['canClick'] = false;
btnNext["canClick"] = false;
cc.tween(btnNext)
.to(0.1, { scaleX: 0.9, scaleY: 1.1 })
.to(0.1, { scaleX: 1.1, scaleY: 0.9 })
.to(0.1, { scaleX: 1, scaleY: 1 })
.call(() => {
btnNext['canClick'] = true;
btnNext["canClick"] = true;
const paramStr = JSON.stringify({});
if (cc.sys.isNative && cc.sys.os == cc.sys.OS_IOS) {
return jsb.reflection.callStaticMethod('CocosMng', 'nextPage:', paramStr);
return jsb.reflection.callStaticMethod(
"CocosMng",
"nextPage:",
paramStr
);
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
return jsb.reflection.callStaticMethod('com/iplayabc/cocos/AppActivity', 'nextPage', '(Ljava/lang/String;)Ljava/lang/String;', paramStr);
return jsb.reflection.callStaticMethod(
"com/iplayabc/cocos/AppActivity",
"nextPage",
"(Ljava/lang/String;)Ljava/lang/String;",
paramStr
);
} else {
console.error('非源生环境');
console.error("非源生环境");
}
})
.start();
......@@ -336,20 +344,29 @@ export default class middleLayer extends cc.Component {
callNativeFunction(param) {
const paramStr = JSON.stringify(param);
if (cc.sys.isNative && cc.sys.os == cc.sys.OS_IOS) {
return jsb.reflection.callStaticMethod('CocosMng', 'cocosWithNativeProtocol:', paramStr);
return jsb.reflection.callStaticMethod(
"CocosMng",
"cocosWithNativeProtocol:",
paramStr
);
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
return jsb.reflection.callStaticMethod('com/iplayabc/cocos/AppActivity', 'cocosWithNativeProtocol', '(Ljava/lang/String;)Ljava/lang/String;', paramStr);
return jsb.reflection.callStaticMethod(
"com/iplayabc/cocos/AppActivity",
"cocosWithNativeProtocol",
"(Ljava/lang/String;)Ljava/lang/String;",
paramStr
);
} else {
throw ('非源生环境');
throw "非源生环境";
}
}
showWaitingLetters() {
const colorList = this.getRainbowColorList();
const layout = cc.find('middleLayer/layout');
const layout = cc.find("middleLayer/layout");
layout.active = true;
const str = 'Now Loading...';
str.split('').forEach((word, idx) => {
const str = "Now Loading...";
str.split("").forEach((word, idx) => {
const node = new cc.Node();
const label = node.addComponent(cc.Label);
label.string = word;
......@@ -357,8 +374,8 @@ export default class middleLayer extends cc.Component {
node.color = colorList[idx];
cc.tween(node)
.delay(idx / 4)
.by(0.3, { y: 50 }, { easing: 'sineOut' })
.by(0.3, { y: -50 }, { easing: 'sineIn' })
.by(0.3, { y: 50 }, { easing: "sineOut" })
.by(0.3, { y: -50 }, { easing: "sineIn" })
.delay((str.length - idx) / 4)
.union()
.repeatForever()
......@@ -371,11 +388,10 @@ export default class middleLayer extends cc.Component {
}
hideWaitingLetters() {
const layout = cc.find('middleLayer/layout');
const layout = cc.find("middleLayer/layout");
layout.active = false;
}
logList = null;
showLog(str) {
if (!this.logList) {
......@@ -401,10 +417,7 @@ export default class middleLayer extends cc.Component {
node.x = this.node.width / 4;
node.y = -this.node.height / 2;
node.parent = this.node;
cc.tween(node)
.to(5, { y: this.node.height })
.removeSelf()
.start();
cc.tween(node).to(5, { y: this.node.height }).removeSelf().start();
setTimeout(() => {
this.logList.shift();
this.showOneLog();
......@@ -433,17 +446,14 @@ export default class middleLayer extends cc.Component {
];
}
// 重写loadOnlineBundle方法;主要是对一些必要的页面跳转做一些拦截处理
loadOnlineBundle(bundleName = "NJ_YouLeChang", callback = null) {
console.log("In loadOnlineBundle")
this.callNetworkApiGet(`/api/template/v2/${bundleName}`, {}, (datastr) => {
console.log("In callNetworkApiGet")
const data = datastr;
let sceneName, version, bondleUrl = "";
const templateBaseUrl = `http://teach.cdn.ireadabc.com/h5template/${data.name}/v${data.last_version}`;
loadPageBundle(courseItem, callback = null) {
console.log(" in loadPageBundle");
let sceneName,
version,
bondleUrl = "";
this.syllabus_id = courseItem.course_id;
const templateBaseUrl = `${this.DOMAIN}h5template/${courseItem.template_name}/v${courseItem.last_version}`;
this.getConfigInfo(templateBaseUrl, (conf) => {
if (cc.sys.isNative && cc.sys.os == cc.sys.OS_IOS) {
sceneName = conf.ios.sceneName;
version = conf.ios.version;
......@@ -451,63 +461,55 @@ export default class middleLayer extends cc.Component {
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
sceneName = conf.android.sceneName;
version = conf.android.version;
bondleUrl = `${templateBaseUrl}/android/${conf.android.sceneName}`;
bondleUrl = `${templateBaseUrl}/android/${conf.ios.sceneName}`;
} else {
sceneName = conf.android.sceneName;
version = "";
bondleUrl = `${templateBaseUrl}/web_desktop`;
}
console.log(sceneName,
version,
bondleUrl)
this.loadBundle(sceneName, version, bondleUrl, () => {
cc.find('middleLayer/ram').active = bundleName == 'NJ_YouLeChang';
cc.find('middleLayer/cross').active = (bundleName == 'NJ_YouLeChang'&&this.gameModel=='cross');
cc.find('middleLayer/free').active = (bundleName == 'NJ_YouLeChang'&&this.gameModel=='free');
callback&&callback();
});
this.loadBundle(sceneName, version, bondleUrl, callback);
});
});
}
async loadBundle(sceneName, version, bondleUrl, callback = null) {
this.showWaitingLetters();
cc.audioEngine.stopAll();
cc.assetManager.loadBundle(bondleUrl, { version: version }, async (err, bundle) => {
bundle.loadScene(sceneName, null, (finish, total, item) => {
cc.assetManager.loadBundle(
bondleUrl,
{ version: version },
async (err, bundle) => {
bundle.loadScene(
sceneName,
null,
(finish, total, item) => {
// this.setLoadingProgressBar(Math.floor(finish / total * 100));
}, (err, scene) => {
},
(err, scene) => {
cc.director.runScene(scene, null, () => {
console.log('sceneName = ' + sceneName);
const canvas = cc.find('Canvas');
const middleLayer = cc.find('middleLayer');
cc.find('middleLayer/tipsLayer').active = false;
console.log("sceneName = " + sceneName);
// const canvas = cc.find("Canvas");
const middleLayer = cc.find("middleLayer");
canvas.getComponent(cc.Widget).updateAlignment();
middleLayer.scale = canvas.width / middleLayer.width;
middleLayer.getComponent(cc.Widget).updateAlignment();
// middleLayer.scale = canvas.width / middleLayer.width;
callback && callback();
});
});
});
}
);
}
);
}
getConfigInfo(url, callback) {
const xhr = new XMLHttpRequest();
let flag = false;
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 400) {
flag = true;
callback(JSON.parse(xhr.responseText));
}
};
xhr.open('GET', `${url}/config.json`, true);
xhr.open("GET", `${url}/config.json`, true);
xhr.send();
// 五秒超时重试一次
......@@ -519,4 +521,20 @@ bondleUrl)
this.getConfigInfo(url, callback);
}, 5);
}
showCloseGameBtn() {
console.log("showCloseGameBtn");
const closeGameBtn = cc.find("middleLayer/back_btn");
closeGameBtn.active = true;
}
hideCloseGameBtn() {
const closeGameBtn = cc.find("middleLayer/back_btn");
closeGameBtn.active = false;
}
onExitGame() {
this.hideCloseGameBtn();
cc.director.loadScene("gamecenter");
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment