本帖最后由 garfeng 于 2016-6-20 15:39 编辑
2.跟随主角或事件的烛光
实现原理:
获取主角或事件在地图上的坐标,烛光图片的透明位置的中心点始终定位在主角身上。
memberX: function(id) { //这个id是指事件id,当id为0时,则定位为主角 var idx = 0; var scrollRate = $gameMap.tileWidth(); if(id>0){ idx = ($gameMap._events[id]||$gamePlayer)._realX; } else { idx = $gamePlayer._realX; } idx = $gameMap.adjustX(idx) + 0.5; //定位到主角身上后,还需要偏移0.5格,定位到主角所在格子的中心点。 //var x = idx - Math.min(17,$gameMap.width())/2 - 8; //这是我根据自己的屏幕参数,把下面那个公式简化后的结果,你如果需要使用,请根据屏幕大小自己简化 var x = this.bitmap.width/scrollRate/2 - idx - ((SceneManager._boxWidth/scrollRate/2) - Math.min($gameMap.width()/2,SceneManager._boxWidth/scrollRate/2));//说明见下 x = -x; x = x*scrollRate; return x; }, memberY: function(id) { var idy = 0; var scrollRate = $gameMap.tileHeight(); if(id>0){ idy = ($gameMap._events[id]||$gamePlayer)._realY; } else { idy = $gamePlayer._realY; } idy = $gameMap.adjustY(idy) + 0.5; var y = this.bitmap.height/scrollRate/2 - idy - ((SceneManager._boxHeight/scrollRate/2) - Math.min($gameMap.height()/2,SceneManager._boxHeight/scrollRate/2)); y = -y; //var y = idy - Math.min(10,$gameMap.height())/2 - 4.5; y = y*scrollRate; return y; },
memberX: function(id) { //这个id是指事件id,当id为0时,则定位为主角
var idx = 0;
var scrollRate = $gameMap.tileWidth();
if(id>0){
idx = ($gameMap._events[id]||$gamePlayer)._realX;
}
else
{
idx = $gamePlayer._realX;
}
idx = $gameMap.adjustX(idx) + 0.5; //定位到主角身上后,还需要偏移0.5格,定位到主角所在格子的中心点。
//var x = idx - Math.min(17,$gameMap.width())/2 - 8; //这是我根据自己的屏幕参数,把下面那个公式简化后的结果,你如果需要使用,请根据屏幕大小自己简化
var x = this.bitmap.width/scrollRate/2 - idx - ((SceneManager._boxWidth/scrollRate/2) - Math.min($gameMap.width()/2,SceneManager._boxWidth/scrollRate/2));//说明见下
x = -x;
x = x*scrollRate;
return x;
},
memberY: function(id) {
var idy = 0;
var scrollRate = $gameMap.tileHeight();
if(id>0){
idy = ($gameMap._events[id]||$gamePlayer)._realY;
}
else
{
idy = $gamePlayer._realY;
}
idy = $gameMap.adjustY(idy) + 0.5;
var y = this.bitmap.height/scrollRate/2 - idy - ((SceneManager._boxHeight/scrollRate/2) - Math.min($gameMap.height()/2,SceneManager._boxHeight/scrollRate/2));
y = -y;
//var y = idy - Math.min(10,$gameMap.height())/2 - 4.5;
y = y*scrollRate;
return y;
},
对这一行做说明:
var x = this.bitmap.width/scrollRate/2 - idx - ((SceneManager._boxWidth/scrollRate/2) - Math.min($gameMap.width()/2,SceneManager._boxWidth/scrollRate/2)); this.bitmap.width/scrollRate/2 //是烛光图片的宽度除以格子宽再除以2,。 其他说明见下图:
var x = this.bitmap.width/scrollRate/2 - idx - ((SceneManager._boxWidth/scrollRate/2) - Math.min($gameMap.width()/2,SceneManager._boxWidth/scrollRate/2));
this.bitmap.width/scrollRate/2 //是烛光图片的宽度除以格子宽再除以2,。
其他说明见下图:
图片穿不上来……下次再传吧……
准备一张纯黑的,中心挖空的图片,放在img/parallaxes目录下,存储为candle.png,图片的宽高最好是屏幕的两倍,
在地图注释里加一句:
<ulds> { "name": "candle", "x":"this.memberX(0)",//0代表主角 "y": "this.memberY(0)", "z":10, "opacity":255, "blendMode":0, "loop": false } </ulds>
<ulds> {
"name": "candle",
"x":"this.memberX(0)",//0代表主角
"y": "this.memberY(0)",
"z":10,
"opacity":255,
"blendMode":0,
"loop": false
} </ulds>
|