cocos小游戏实战 |
您所在的位置：网站首页 › 游戏地图渲染图片 › cocos小游戏实战 |
cocos小游戏实战
|
背景
背景使用 SpriteSplash(单色)→添加组件 Widget
新建一个空节点 命名Cobtroller→里面放入N个精灵组件 Cobtroller添加Layout组件
需要将不显示的节点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 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) } } } }渲染后效果
本节源码地址： https://gitee.com/yuan30/cramped-room-of-death/tree/day1/ |
【本文地址】