有两张一样的左右连接的图片进行左右排列,根据拖拽偏移量计算出当前显示的主要index,设置其位置,然后根据四舍五入情况,设置另外一张图片的位置,上下平移同理。
1.首先将四张图片增加到拖拽层,确保单张图片长度大于屏幕长度
initWaveBg: function() {
var wavePanel = cc.Node.create();
wavePanel.setContentSize(g_winSize);
this._waveBg = [];
for (var i = 1; i <= 4; i++) {
var bg_main = cc.Sprite.create("res/ui/seaWorld/Exploration_bg01.jpg");
bg_main.setAnchorPoint(cc.p(0.5, 0.5));
bg_main.setScale(2.0);
var wavetype = 6; // 1~6
// waternm2
var shader = cc.GLProgram.createWithFilenames("res/shader/ui_normal.vsh", "res/shader/waternm.fsh");
bg_main.setShaderProgram(shader);
var normaltexture = g_textureCache.addImage('res/effect/seabattle/sea_normalmap_00' + wavetype + ((wavetype >= 5) ? '.png' : '.tga'));
normaltexture.setTexParameters(gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT);
bg_main.getGLProgramState().setUniformTexture('u_normalMap', normaltexture);
wavePanel.addChild(bg_main);
this._waveBg.push(bg_main);
this._waveSize = cc.size(2*bg_main.getContentSize().width, 2*bg_main.getContentSize().height);
}
this._waveBg[0].setPosition(cc.p(g_winSize.width/2, g_winSize.height/2));
this._waveBg[1].setPosition(cc.p(g_winSize.width/2+this._waveSize.width, g_winSize.height/2));
this._waveBg[2].setPosition(cc.p(g_winSize.width/2, g_winSize.height/2+this._waveSize.height));
this._waveBg[3].setPosition(cc.p(g_winSize.width/2+this._waveSize.width, g_winSize.height/2+this._waveSize.height));
wavePanel.setAnchorPoint(cc.p(0.5, 0.5));
wavePanel.setPosition(cc.p(g_winSize.width * 0.5, g_winSize.height * 0.5));
this._mapPanel.addChild(wavePanel);
},
2.根据mapPanel的拖拽量同步海面位置,注意左右移动正负区别
_listener_touch_moved: function (touches, event) {
cc.log("onTouchMoved");
this.onTouchCheckBounder(touches.getDelta(), true);
var showNewX = false;
var showNewY = false;
var offLastX = this._origin_pos.x + this._offset_x - this._last_pos.x;
if (Math.abs(offLastX) >= this._cellSize.width) {
showNewX = true;
var addXNum = Math.floor(Math.abs(offLastX)/this._cellSize.width + 0.5);
this.moveCellsWithMap(offLastX < 0 ? addXNum : -addXNum, 0);
if (offLastX < 0) {
this._offset_x = this._last_pos.x - this._origin_pos.x - this._cellSize.width * addXNum;
} else {
this._offset_x = this._last_pos.x - this._origin_pos.x + this._cellSize.width * addXNum;
}
var moveDir = offLastX < 0 ? "->>>>>> " : "<<<<<<- ";
cc.log(moveDir + addXNum);
}
var offLastY = this._origin_pos.y + this._offset_y - this._last_pos.y;
if (Math.abs(offLastY) >= this._cellSize.height) {
showNewY = true;
var addYNum = Math.floor(Math.abs(offLastY)/this._cellSize.height + 0.5);
this.moveCellsWithMap(0, offLastY < 0 ? addYNum : -addYNum);
if (offLastY < 0) {
this._offset_y = this._last_pos.y - this._origin_pos.y - this._cellSize.height * addYNum;
} else {
this._offset_y = this._last_pos.y - this._origin_pos.y + this._cellSize.height * addYNum;
}
var moveDir = offLastY < 0 ? "-^^^^^^ " : "vvvvvv- ";
cc.log(moveDir + addYNum);
}
this._mapPanel.setPosition(cc.p(this._origin_pos.x + this._offset_x, this._origin_pos.y + this._offset_y));
if (showNewX) this._last_pos.x = this._mapPanel.getPosition().x;
if (showNewY) this._last_pos.y = this._mapPanel.getPosition().y;
// 托动同步海面位置
if (showNewX) {
var deltax = Math.abs(this._last_pos.x - this._origin_pos.x);
var xnum = Math.round(deltax/this._waveSize.width);
var right = (this._last_pos.x < this._origin_pos.x) ? 1 : -1;
var waveCur = xnum%2;
var waveMove = (waveCur+1)%2;
this._waveBg[waveCur].setPositionX(g_winSize.width/2+right*xnum*this._waveSize.width);
this._waveBg[waveCur+2].setPositionX(g_winSize.width/2+right*xnum*this._waveSize.width);
if (xnum*this._waveSize.width > deltax) {
this._waveBg[waveMove].setPositionX(this._waveBg[waveCur].getPositionX()-right*this._waveSize.width);
this._waveBg[waveMove+2].setPositionX(this._waveBg[waveCur].getPositionX()-right*this._waveSize.width);
} else {
this._waveBg[waveMove].setPositionX(this._waveBg[waveCur].getPositionX()+right*this._waveSize.width);
this._waveBg[waveMove+2].setPositionX(this._waveBg[waveCur].getPositionX()+right*this._waveSize.width);
}
}
},