背景
背景使用 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)
}
}
}
}
渲染后效果
本节源码地址: