cocos小游戏实战-01

背景

背景使用 SpriteSplash(单色)→添加组件 Widget

网格布局

新建一个空节点 命名Cobtroller→里面放入N个精灵组件

Cobtroller添加Layout组件

添加了节点Camera不显示？

需要将不显示的节点Layer属性改为与Camera的Layer属性一样，比如UI_2D，或者将Camera的Layer改为DEFAULT或ALL也可显示

参考：https://blog.csdn.net/u014206745/article/details/121510352

地图渲染

Base/Signleton.ts

单例设计模式的实例化原子，继承后可以不用写实例化代码，直接调用

---

Enum/index.tx

存放一些枚举

---

Levels/index.ts

存放关卡地图数据

---

Runtime/DataManager.ts

渲染地图模型用到的单例

---

Runtime/ResourceManager.ts

资源加载

---

Script/Scene/BattleManager.ts

渲染地图核心代码

import { _decorator, Component, Node } from 'cc'
import levels, { ILevel } from '../../Levels'
import DataManager from '../../Runtime/DataManager'
import { createUINode } from '../../Utils'
import { TILE_HEIGHT, TILE_WIDTH } from '../Tile/TileManager'
import { TileMapManager } from '../Tile/TileMapManager'
const { ccclass } = _decorator

@ccclass('BattleManager')
export class BattleManager extends Component {
  // [1]
  // dummy = '';

  // [2]
  // @property
  // serializableDummy = 0;

  level: ILevel
  stage: Node

  start() {
    this.generateStage()
    this.initLevel()
  }

  initLevel(){
    const level = levels[`level${1}`]
    if(level){
      this.level = level
      // 将数据存入数据中心
      DataManager.Instance.mapInfo = this.level.mapInfo
      DataManager.Instance.mapRowCount = this.level.mapInfo.length || 0
      DataManager.Instance.mapColumnCount = this.level.mapInfo[0].length || 0
      this.generateTileMap()
    }
  }

  // 创建stage
  generateStage(){
    this.stage = createUINode()
    this.stage.setParent(this.node)
  }
  //创建地图
  generateTileMap() {
    // 生成瓦片地图节点
    const tileMap = new Node()
    // 设置父级
    tileMap.setParent(this.stage)
    // 给瓦片添加脚本
    const tileMapManager = tileMap.addComponent(TileMapManager)
    // 执行脚本初始化方法
    tileMapManager.init()
    this.adaptPos()
  }
  // 对地图进行居中适配
  adaptPos(){
    // 向左上偏移自身宽度的一半
    const disX = TILE_WIDTH * DataManager.Instance.mapRowCount / 2
    const disY = TILE_HEIGHT * DataManager.Instance.mapColumnCount / 2
    this.stage.setPosition(-disX, disY)
  }
}

Script/Scene/Tile/TileManager.ts

单个瓦片属性

import { _decorator, Component, SpriteFrame, Sprite, UITransform } from 'cc'
const { ccclass, property } = _decorator

export const TILE_WIDTH = 55
export const TILE_HEIGHT = 55

@ccclass('TileManager')
export class TileManager extends Component {
 start() {
   // [3]
 }
 async init(spriteFrame: SpriteFrame, i:number, j:number) {
  const sprite = this.addComponent(Sprite)
  sprite.spriteFrame = spriteFrame
  const transform = this.getComponent(UITransform)
  transform.setContentSize(TILE_WIDTH, TILE_HEIGHT)
  this.node.setPosition(i*TILE_WIDTH, -j*TILE_HEIGHT)
 }
}

Script/Scene/Tile/TileMapManager.ts

渲染瓦片地图

import { _decorator, Component, Node, resources, SpriteFrame, Sprite, UITransform, Layers } from 'cc'
import DataManager from '../../Runtime/DataManager'
import ResourceManager from '../../Runtime/ResourceManager'
import { createUINode, randomByRange } from '../../Utils'
import { TileManager } from './TileManager'
const { ccclass } = _decorator

@ccclass('TileMapManager')
export class TileMapManager extends Component {
  async init() {
    // 从数据中心取出
    const {mapInfo} = DataManager.Instance
    // 加载资源
    const spriteFrames = await ResourceManager.Instance.loadDir("texture/tile/tile")
    for(let i =0;i < mapInfo.length;i++){
      for(let j =0;j<mapInfo[i].length;j++){
        const item = mapInfo[i][j]
        if(item.src === null || item.type === null){
          continue
        }
        const node = createUINode()
        let srcNumber = item.src
        // 指定渲染随机瓦片,并且加条件,偶数的瓦片才随机
        if((srcNumber === 1 || srcNumber === 5 || srcNumber === 9) && i % 2 === 0 && j % 2 === 0 ){
            srcNumber += randomByRange(0, 4)
        }
        const spriteFrame = spriteFrames.find(v => v.name === `tile (${srcNumber})`) || spriteFrames[0]
        const tileManager = node.addComponent(TileManager)
        tileManager.init(spriteFrame, i, j)
        node.setParent(this.node)
      }
    }
  }
}

渲染后效果

本节源码地址：