CocosCreator 游戏小地图/地图雷达

更多笔记和源码请关注：【微信公众号】 CocosCreator笔记

演示

ps：请注意左上角

　技术摘要　

大地图与小地图坐标转换

更新小地图中元素及视口位置

拖动小地图中视口位置/更新Main Camera位置

实现

小地图（图片）的宽高比例必须和大地图相等

这样就可以将大地图上的元素照搬到小地图上了

大地图：

小地图：

场景中小地图里的元素如下：

mini_map：小地图

player：玩家

monster：怪物

rect：当前视口

rect添加Graphics组件，画出当前视口矩形

坐标转换：

mapToMini(point: cc.Vec2) {let x = point.x / this.tileMap.node.width * this.miniMap.width;let y = point.y / this.tileMap.node.height * this.miniMap.height;return cc.v2(x, y);
}miniToMap(point: cc.Vec2) {let x = point.x / this.miniMap.width * this.tileMap.node.width;let y = point.y / this.miniMap.height * this.tileMap.node.height;return cc.v2(x, y);
}

小地图注册触摸事件：

this.miniMap.on("touchstart", this.onTouchStart, this);
this.miniMap.on("touchmove", this.onTouchMove, this);
this.miniMap.on("touchend", this.onTouchEnd, this);
this.miniMap.on("touchcancel", this.onTouchEnd, this);

on/off记得要成对出现：

onDestroy() {this.miniMap.off("touchstart", this.onTouchStart, this);this.miniMap.off("touchmove", this.onTouchMove, this);this.miniMap.off("touchend", this.onTouchEnd, this);this.miniMap.off("touchcancel", this.onTouchEnd, this);
}

在触摸开始和滑动的时候更新Main Camera和小地图视口的位置

触摸结束的时候回到玩家当前视角

touchMiniMap(event: cc.Event.EventTouch) {let touchLocation = this.miniMap.convertToNodeSpaceAR(event.getLocation());let position = this.miniToMap(touchLocation);this.updateCameraPosition(position);
}onTouchStart(event: cc.Event.EventTouch) {this.touchMiniMap(event);
}onTouchMove(event: cc.Event.EventTouch) {this.touchMiniMap(event);
}onTouchEnd(event: cc.Event.EventTouch) {this.updateCameraPosition(this.nodePlayer.position);
}

更新Main Camera位置并限制其边界

updateCameraPosition(target: cc.Vec2){if (target.x > this._cameraMaxX) {target.x = this._cameraMaxX;}if (target.x < -this._cameraMaxX) {target.x = -this._cameraMaxX;}if (target.y > this._cameraMaxY) {target.y = this._cameraMaxY;}if (target.y < -this._cameraMaxY) {target.y = -this._cameraMaxY;}this.mainCamera.node.position = target;this.updateMiniRect();
}

更新小地图视口位置

updateMiniRect() {let pointCamera = this.mainCamera.node.position.sub(cc.v2(cc.winSize.width / 2, cc.winSize.height / 2));pointCamera = this.mapToMini(pointCamera);this.miniRect.clear();this.miniRect.rect(pointCamera.x, pointCamera.y, this._miniScreenWidth, this._miniScreenHeight);this.miniRect.stroke();
}

—END—

声明：发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我联系，我将及时更正、删除，谢谢。

作者：请容我安眠

更多笔记和源码请关注：【微信公众号】 CocosCreator笔记

CocosCreator 游戏小地图/地图雷达相关推荐

Unity NGUI高端游戏小地图6组图标Unity游戏素材资源（UGUI可用图片素材）
Unity NGUI高端游戏小地图6组图标Unity游戏素材资源(UGUI可用图片素材) 项目下载 Demo下载地址效果图例子场景项目下载 Demo下载地址
cocos-creator游戏源码
cocos-creator游戏源码前言一.七彩蹦蹦二.超能少年游戏源码总结微信扫描下方小程序码获取前言非常多的Cocos-creator游戏源码分享,各种版本的应有尽有,而且完全免费下载 ...
CocosCreator游戏性能优化
性能优化为什么合批能提升性能? 如果查看系统的DrawCall? 合批常用的技术原理和缺点 3D优化DrawCall注意点 2DGUI优化DrawCall注意点为什么合批能提升性能? 游戏引擎绘制 ...
LoL、DOTA、王者荣耀类游戏小地图注册及相机的跟随
有几天没有更新博客了,在做一个塔防的小游戏,然而想着想着功能就多了,感觉可以做成一个小型的单机游戏了,我会在接下来的几篇博客把这个项目的一些功能及获得的感悟呈现给大家,今天继续上次的视角变动,在鼠标指 ...
CocosCreator游戏开发---菜鸟学习之路（三）如何在CocosCreator中使用Pomelo
PS(废话): 这段时间都在研究网易的Pomelo框架,作为新手小白,自然遇到了不少坑爹的事情.(当然也有可能是因为自己技术不过关的原因所以导致在很多基础的问题上纠结了很久.)网上也搜索了好久,但是基 ...
RPG游戏-小地图系统
1.地图资源的制作通常有三种方式: 1)实时渲染场景: 2)预渲染顶视图+润色 3)纯美术制作这里采用第二种方式 (1)使用图片MASK方式设置小地图的蒙层,这里的Mask图片采用的是圆形的白色图 ...
RPG游戏-小地图系统（二）
这里对上次的代码做优化,当进入或者地图时,小地图UI也应该进行变化. 调用次序:MapController->MiniMapManager -->UIminiMap 1.MapContro ...
CocosCreator游戏热更新完整教程，超简单，超详细
使用cocos已经是第7个年头了,也算是老司机了,今天就介绍下使用cocos creator开发游戏如何热更新. 预备知识首先,科普下基础知识,热更新的基础原理是,不同版本的游戏资源对应不同的man ...
CocosCreator游戏资源加载assetManager
1.资源AssetBundle包(简称ab包): ab包的作用:文件夹配置成ab包后,可以用引擎的资源加载接口加载文件夹内的资源每个文件夹都可以设置成ab包,在creator编辑器中这样设置: 两个 ...
cocoscreator游戏开发实战——动物餐厅——菜单代码编写（2）
首先新建一个Food脚本,然后把他挂载到Food这个预制体上,目的远程加载图片.去显示菜单德图片. 使用的api cc.assetManager.loadRemote(info['URL'],func ...

CocosCreator 游戏小地图/地图雷达

CocosCreator 游戏小地图/地图雷达相关推荐

最新文章

热门文章