第七季-制作一款塔防游戏

01.塔防前言
- 为什么是塔防?
- 准备
02.使用TileMap创建地图
- 新建地图
- 获取地图
- 编辑地图
- 代码操控
- 运行
03-16.实战中
04.状态机
- 代码
08.事件分发器
13.优化子弹-对象池
1.9→2.0 Api
技巧方法总结
问题及解决方法

01.塔防前言

终于实战了,耶!

为什么是塔防?

1. 单机
2. 多元素
3. 与大型游戏架构设计类似
4. 与前面的知识结合

准备

TileMap
历史版本下载
前面的知识已经掌握

02.使用TileMap创建地图

新建地图

出现如图选项,点击"新建地图"

弹出

注意地图大小和块大小,已知我们需要的地图大小为2048x1536.所以要调整块大小和块数保证结果和需求一样.
(当然,如果想块大小改为32x32,块数也相应调整也是可以的,但duck不必)

点击"另存为",注意一定要将文件存在工程的asset目录下.
我的目录:C:\StudySpace\cocosCreator\KindomRush\assets\Levels命名为"level1"

获取地图

点击新建新图块
源:要选择工程目录下的地图图片,检查下块尺寸没有问题,同样另存为到工程目录Level下,命名为"level1"

将图块印到地图到上
按shift选择多个图块,左键印上,右键取消

编辑地图

右侧菜单栏新建对象层

对象层用于创建一些特殊的点

创建放塔点

代码操控

在creator里创建场景,并添加一个tileMap节点,将制作的地图资源放入.

将塔图片添加到场景下.

在代码里获取地图数据并操作图片位置
注意tileMap和creator坐标系不同

import Utils from "./Utils";const {ccclass, property} = cc._decorator;@ccclass
export default class SelectLevels extends cc.Component {@property(cc.TiledMap)map: cc.TiledMap = null;@property(cc.Sprite)sprite: cc.Sprite = null;onLoad () {this.setSpriteToMapPos();}//将sprite放到map中标记的位置setSpriteToMapPos() {/**tileMap里设置的对象层 */let towers = this.map.getObjectGroup("towers");/**对象层里设置的标记点 */let tower0 = towers.getObject("tower0");/**标记点的坐标 */let tower0Pos = tower0.offset;this.sprite.node.position = Utils.tileCoordForPositon(this.map,tower0Pos);}
}

将可重复利用的函数放到工具类里

/**工具类 */
export default class Utils {/**将tileMap坐标转换为cocos坐标* cocos锚点为(0.5,0.5)*/static tileCoordForPositon(map: cc.TiledMap,pos: cc.Vec2): cc.Vec2 {/**获取地图有多少个地图块(32x64) */let mapSize = map.getMapSize();/**获取地图块的大小 */let tileSize= map.getTileSize();let x = pos.x - (mapSize.width * tileSize.width) / 2;let y = (mapSize.height * tileSize.height) / 2 - pos.y;return cc.v2(x,y);}
}

运行

塔被放到了指定的位置了

03-16.实战中

实战写文档就太麻烦了，写完后贴源码吧~
有些新知识，遇到的问题会贴过来的

04.状态机

状态机会管理一些状态，状态之间可以互相转换

代码

/**
**Author: Cai QiuYa
**Describe: 状态机
*/export default class GameActorStatusMachine {currentStatus: GameActorStatusBase = null;/**状态切换 */onStatusChange(status: GameActorStatusBase) {if (this.currentStatus != status) {if (this.currentStatus) {this.currentStatus.onExitStatus();}this.currentStatus = status;status.onEnterStatus();}}
}/**状态基类 */
export class GameActorStatusBase {status: GameActorStatusType = GameActorStatusType.None;//进入状态时onEnterStatus() {}//退出状态时onExitStatus() {}}export class GameActorStatusIdle extends GameActorStatusBase {status = GameActorStatusType.Idle;
}export class GameActorStatusWalk extends GameActorStatusBase {status = GameActorStatusType.Walk;
}export class GameActorStatusAttack extends GameActorStatusBase {status = GameActorStatusType.Attack;
}export class GameActorStatusDie extends GameActorStatusBase {status = GameActorStatusType.Die;
}/**状态枚举 */
export enum GameActorStatusType {None,/**空闲状态 */Idle,/**走路 */Walk,/**攻击 */Attack,/**死亡 */Die,
}

08.事件分发器

和之前的监听者模式类似

13.优化子弹-对象池

1.9→2.0 Api

视频里老师用1.9和我的2.0的api有些不同

//1.9
this.moveDir = cc.pNormalize(cc.pSub(this.nextPathPoint,this.machine.actor.node.position));
//2.0
this.moveDir = (this.nextPathPoint.sub(this.machine.actor.node.position)).normalize();

//将弧度变成角度 2π=360
//1.9
cc.pToAngle();
//2.0
cc.misc.radiansToDegrees();

//根据起始结束两坐标点获取行进方向
//1.9
let angle = cc.radiansToDegress(cc.pToAngle(cc.pSub(to,from)));
//2.0
let angle = -cc.misc.radiansToDegrees((to.sub(from)).signAngle(cc.Vec2.RIGHT));

//获取两向量距离
//1.9
cc.pDistance(v1,v2);
//2.0
(v1.sub(v2)).mag();

//向量乘以系数 mult系数
//1.9
cc.pMult(v1,mult);
//2.0
v1.mul(mult);

技巧方法总结

比如当我们需要获取tileMap里的多边形路径各坐标,但是不知道怎么调用,咋办?
A:我们可以先获取到mileMap的对象,再在浏览器里预览,将对象打断点获取对象信息.这样就可以知道怎么获取坐标了.

问题及解决方法

TexturePacker合的图默认会将透明像素裁剪掉，但我并不希望裁剪掉？

A：

使用requireComponent报错没有这个字段
A：需要将文件引用一下

const {ccclass, property, requireComponent} = cc._decorator;

或者

import requireComponent = cc._decorator.requireComponent;

零基础学CocosCreator·第七季-制作一款塔防游戏相关推荐

零基础学CocosCreator·第六季-常用编程框架和算法
第六季-常用编程框架和算法 01.MVC架构 MVC的含义 02.单例模式单例(instance)的特点作用实现调用结果补充 03.观察者模式-订阅发布模式流程实现结果 04.工厂模 ...
unity制作一款塔防游戏
文章目录介绍寻路系统怪物生成器制作3种初级炮台.3种升级炮台设置炮台属性选择炮台,添加监听事件炮弹追踪攻击敌人拖动鼠标实现相机视角转换鼠标光标放在cube上变色文字动画介绍关键 ...
零基础学Arcgis（七）|空间数据采集与管理（4）数据检查
写在前面的话: B站搜索"中图地信"便可观看全套71章节详细操作视频(有操作数据获取,同步学习) (一)创建地理数据库拓扑 1.创建地理数据库拓扑 [1]设计拓扑: [2]启动Ar ...
零基础学Arcgis系列教程
教程地址:点击查看零基础学Arcgis(七)|空间数据采集与管理(4)数据检查 (一)创建地理数据库拓扑 1.创建地理数- 零基础学Arcgis(六)|空间数据采集与管理(3)数据编辑 (一)使用要 ...
微信塔防小游戏开发教程，唤境引擎制作塔防游戏分享
今天带来的是塔防游戏制作攻略! 点击这里来下载工程文件, 点击这里可以下载工程中所用的素材哦~ 预览状态时敌人会从四个生成点随机生成,并且会自动寻路绕过黑色墙体走向红色终点.点击黑色墙体可以创建炮塔, ...
【零基础学Java】—类的定义（七）
[零基础学Java]-类的定义(七) 一.事物与类的对比现实世界的一类事物属性:事物的状态信息行为:事物能够做什么 Java中用class描述事物也是如此成员变量:对应事物的属性成员方法:对 ...
零基础学Python课后实战第七章
零基础学Python课后实战第七章 tips 实战一:修改手机默认语言实战二:给信用卡设置默认密码实战三:打印每月销售明细 tips 对象:对象是事物存在的实体,如一个人. 通常将对象划分为两部分 ...
零基础学python全彩版实战答案-零基础学Python（全彩版）
商品描述: 本店出售的图书均是正版二手书,有一些笔记划线,基本是六-九品新左右,基本都没有光盘.介意者请提前咨询客服.本店所有书籍,因买家导致退货退款的,发出运费参照不包邮运费模板由买家承担.如果签收 ...
零基础学python全彩版答案-零基础学Python（全彩版）
商品描述: 本店出售的图书均是正版二手书,有一些笔记划线,基本是六-九品新左右,基本都没有光盘.介意者请提前咨询客服.本店所有书籍,因买家导致退货退款的,发出运费参照不包邮运费模板由买家承担.如果签收 ...

零基础学CocosCreator·第七季-制作一款塔防游戏