项目需求,要做一张很大的地图,大过显示器。。。
在这张地图上面,滑动屏幕查看整张地图上所有的元素。
我的地图是放在画布下面
:主要的内容,主相机的大小就是我们屏幕的大小,所以我们做的只是移动相机的相对位置,让他在整张地图上面俯瞰。
编写场景脚本 map.js
/*
游戏主界面
*/
var HttpHelp = require("http");
var globaluserinfo = require("GlobaluserInfo")
// use this for initialization
onLoad: function () {
var self = this;
this.scale = 0.5;
this.isDistance = true;
var listener = {
event: cc.EventListener.TOUCH_ALL_AT_ONCE,
onTouchesBegan:function(touch,event)
{
self.onTouchStart(touch,event);
return true;
},
onTouchesMoved:function(touch,event)
{
self.onTouchMove(touch,event);
return true;
},
onTouchesEnded:function(touch, event){
self.onTouchEnd(touch,event);
return true;
}
}
cc.eventManager.addListener(listener, cc.find("Canvas/baseMap"));
},
// called every frame
update: function (dt) {
//this.label.string = "this.text";
},
onTouchStart(touch,event)
{
this.isTouch = false;
this.isDoubleTouch = false; //是否为多触摸点
this.start = []; //存放触摸坐标
this.now; //当前时间
this.delta; //两次触发事件时间差
this.start = event.getTouches(); //得到第一组两个点
if (event.getTouches().length == 1)
{
//滑动事件
this.isTouch = true;
this.temporaryX = touch[0].getLocationX();
this.temporaryY = touch[0].getLocationY();
this.CameraX = cc.find("Canvas/Main Camera").x;
this.CameraY = cc.find("Canvas/Main Camera").y;
}else if(event.getTouches().length >= 2)
{
this.isDoubleTouch = true;
}
},
onTouchMove(touch,event)
{
if (event.getTouches().length >= 2) { //手势事件
this.isDoubleTouch = true;
if (this.isDistance == true)
{
var tmp = event.getTouches();
this.start = [[tmp[0].getLocationX(), tmp[0].getLocationY()], [tmp[1].getLocationX(), tmp[1].getLocationY()]];
this.isDistance = false;
}
var now = event.getTouches(); //得到第二组两个点
var scale = this.getDistance([now[0].getLocationX(), now[0].getLocationY()],[now[1].getLocationX(), now[1].getLocationY()]) / this.getDistance(this.start[0],this.start[1]); //得到缩放比例
this.scale = scale * this.scale;
if (this.scale < 0.5)
{
this.scale = 0.5;
}else if(this.scale > 2.5)
{
this.scale = 2.5;
}
cc.find("Canvas/Main Camera").getComponent(cc.Camera).zoomRatio = this.scale;
this.getTouchPosition(touch,event,true);
} else if (event.getTouches().length == 1 && this.isTouch && this.isDoubleTouch == false) {
this.getTouchPosition(touch,event,false);
}
},
onTouchEnd(touch,event)
{
if (event.getTouches().length == 1 && this.isDoubleTouch == false) {
this.delta = Date.now() - this.now; //计算两次点击时间差
this.now = Date.now();
if (this.delta > 0 && this.delta <= 250) { //双击事件
cc.find("Canvas/Main Camera").getComponent(cc.Camera).zoomRatio = 2.5;
//this.scale = 2.5;
this.getTouchPosition(touch,event,true);
}
}
this.isDistance = true;
},
/*
* 封装触摸事件
*/
getTouchPosition(touch,event,judge)
{
var CanvasX = (cc.find("Canvas").getContentSize().width/2) / this.scale;
var CanvasY = (cc.find("Canvas").getContentSize().height/2) / this.scale;
var baseMapX = cc.find("Canvas/baseMap").getContentSize().width/2;
var baseMapY = cc.find("Canvas/baseMap").getContentSize().height/2;
var Camera = cc.find("Canvas/Main Camera");
var DifferX = this.temporaryX - touch[0].getLocationX();
var DifferY = this.temporaryY - touch[0].getLocationY();
if (judge)
{
DifferX = 0;
DifferY = 0;
}
if (this.CameraX + DifferX <= baseMapX - CanvasX && (this.CameraX + DifferX >= -(baseMapX) + CanvasX ))
{
Camera.x = this.CameraX + DifferX;
}else
{
if (this.CameraX + DifferX > baseMapX - CanvasX)
{
Camera.x = baseMapX - CanvasX;
}else
{
Camera.x = -(baseMapX) + CanvasX;
}
}
if (this.CameraY + DifferY <= baseMapY - CanvasY && (this.CameraY + DifferY >= -(baseMapY) + CanvasY ))
{
Camera.y = this.CameraY + DifferY;
}else
{
if (this.CameraY + DifferY > baseMapY - CanvasY)
{
Camera.y = baseMapY - CanvasY;
}else
{
Camera.y = -(baseMapY) + CanvasY;
}
}
cc.find("Canvas/StaticViewLayer").x = Camera.x;
cc.find("Canvas/StaticViewLayer").y = Camera.y;
},
/*
* 两点的距离
*/
getDistance(p1, p2) {
var x = p2[0] - p1[0];
var y = p2[1] - p1[1];
return Math.sqrt((x * x) + (y * y));
},
});
该脚本挂载在canvas节点下。
附加:1、屏幕滑动的时候,会将地图划出显示界面,出现黑块,虽然这里做了一点处理,但是还是不是很好用,
2、屏幕放大的时候,放大倍数会破坏原有的滑动边界。需要拓展
cc.find("Canvas/Main Camera").getComponent(cc.Camera).zoomRatio = this.scale;
设置摄像机的zoomRatio时,会将整个屏幕的元素放大。
这里拓展一个功能,就是,我们在移动摄像机的时候,像有一些元素是不需要移动的,也不需要放大的。但是在这个层次关系中,他会出现一起放大的情况,所以添加了一个静态层,让他跟这个摄像机一起移动位置。
可能是我的设计模式不对。希望大佬看见能留言指点一二