dynamic canvas
This commit is contained in:
tocque
parent
09f130e049
commit
07bcfafe27
@ -260,13 +260,12 @@ action
|
||||
| unfollow_s
|
||||
| animate_s
|
||||
| vibrate_s
|
||||
| showImage_0_s
|
||||
| showImage_1_s
|
||||
| animateImage_0_s
|
||||
| animateImage_1_s
|
||||
| showImage_s
|
||||
| hideImage_s
|
||||
| showTextImage_s
|
||||
| animateImage_s
|
||||
| showGif_0_s
|
||||
| showGif_1_s
|
||||
| moveImage_0_s
|
||||
| setFg_0_s
|
||||
| setFg_1_s
|
||||
| setWeather_s
|
||||
@ -1019,58 +1018,49 @@ var code = '{"type": "animate", "name": "'+IdString_0+'"'+EvalString_0+async+'},
|
||||
return code;
|
||||
*/;
|
||||
|
||||
showImage_0_s
|
||||
: '显示图片' EvalString '起点像素位置' 'x' PosString 'y' PosString Newline
|
||||
showImage_s
|
||||
: '显示图片' '图片编号' Int '图片' EvalString '起点像素位置' 'x' PosString 'y' PosString BGNL
|
||||
'放大率 : x' Int '% y' Int '% 透明度' Int '时间' Int '不等待执行完毕' Bool Newline
|
||||
|
||||
|
||||
/* showImage_0_s
|
||||
/* showImage_s
|
||||
tooltip : showImage：显示图片
|
||||
helpUrl : https://h5mota.com/games/template/docs/#/event?id=showimage%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87
|
||||
default : ["bg.jpg","0","0"]
|
||||
default : [1,"bg.jpg","0","0",100,100,100,0,false]
|
||||
colour : this.printColor
|
||||
var code = '{"type": "showImage", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+']},\n';
|
||||
if(Int_3<0 || Int_3>100) throw new Error('透明度的值在0~100之间');
|
||||
var async = Bool_0?', "async": true':'';
|
||||
var code = '{"type": "showImage", "code": '+Int_0+', "image": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "dw": '+Int_1+', "dh": '+Int_2+', "opacity": '+Int_3+', "time": '+Int_4+async+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
showImage_1_s
|
||||
: '清除所有图片' Newline
|
||||
showTextImage_s
|
||||
: '显示图片化文本' '图片编号' Int '文本' EvalString BGNL
|
||||
'起点像素位置' 'x' PosString 'y' PosString '透明度' Int '时间' Int '不等待执行完毕' Bool Newline
|
||||
|
||||
|
||||
/* showImage_1_s
|
||||
tooltip : showImage：清除所有显示的图片
|
||||
/* showTextImage_s
|
||||
tooltip : showTextImage：显示图片化文本
|
||||
helpUrl : https://h5mota.com/games/template/docs/#/event?id=showimage%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87
|
||||
colour : this.printColor
|
||||
var code = '{"type": "showImage"},\n';
|
||||
default : [1,"可以使用setText事件来控制字体、颜色、大小、偏移量等","0","0",100,0,false]
|
||||
if(Int_1<0 || Int_1>100) throw new Error('透明度的值在0~100之间');
|
||||
var async = Bool_0?', "async": true':'';
|
||||
var code = '{"type": "showTextImage", "code": '+Int_0+', "text": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "opacity": '+Int_1+', "time": '+Int_2+async+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
animateImage_0_s
|
||||
: '图片淡入' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '保留图片' Bool '不等待执行完毕' Bool Newline
|
||||
hideImage_s
|
||||
: '清除图片' '图片编号' Int '时间' Int '不等待执行完毕' Bool Newline
|
||||
|
||||
|
||||
/* animateImage_0_s
|
||||
tooltip : animageImage：图片淡入
|
||||
helpUrl : https://h5mota.com/games/template/docs/#/event?id=animateimage%EF%BC%9A%E5%9B%BE%E7%89%87%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA
|
||||
default : ["bg.jpg","0","0",500,true,false]
|
||||
/* hideImage_s
|
||||
tooltip : hideImage：清除图片
|
||||
helpUrl : https://h5mota.com/games/template/docs/#/event?id=showimage%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87
|
||||
colour : this.printColor
|
||||
var keep = Bool_0?', "keep": true':'';
|
||||
var async = Bool_1?', "async": true':'';
|
||||
var code = '{"type": "animateImage", "action": "show", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+keep+async+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
animateImage_1_s
|
||||
: '图片淡出' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '清除图片' Bool '不等待执行完毕' Bool Newline
|
||||
|
||||
|
||||
/* animateImage_1_s
|
||||
tooltip : animageImage：图片淡出
|
||||
helpUrl : https://h5mota.com/games/template/docs/#/event?id=animateimage%EF%BC%9A%E5%9B%BE%E7%89%87%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA
|
||||
default : ["bg.jpg","0","0",500,true,false]
|
||||
colour : this.printColor
|
||||
var keep = Bool_0?', "keep": true':'';
|
||||
var async = Bool_1?', "async": true':'';
|
||||
var code = '{"type": "animateImage", "action": "hide", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+keep+async+'},\n';
|
||||
default : [1,0,false]
|
||||
var async = Bool_0?', "async": true':'';
|
||||
var code = '{"type": "hideImage", "code": '+Int_0+', "time": '+Int_1+async+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
@ -1099,19 +1089,22 @@ var code = '{"type": "showGif"},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
moveImage_0_s
|
||||
: '图片移动' EvalString '起点像素位置' 'x' PosString 'y' PosString BGNL
|
||||
'终点像素位置' 'x' PosString 'y' PosString '移动时间' Int '保留图片' Bool '不等待执行完毕' Bool Newline
|
||||
animateImage_s
|
||||
: '图片移动' '编号' Int '终点像素位置' 'x' PosString? 'y' PosString? BGNL
|
||||
'透明度' PosString? '移动时间' Int '不等待执行完毕' Bool Newline
|
||||
|
||||
|
||||
/* moveImage_0_s
|
||||
tooltip : moveImage：图片移动
|
||||
/* animateImage_s
|
||||
tooltip : animateImage：图片移动
|
||||
helpUrl : https://h5mota.com/games/template/docs/#/event?id=moveimage%EF%BC%9A%E5%9B%BE%E7%89%87%E7%A7%BB%E5%8A%A8
|
||||
default : ["bg.jpg","0","0","0","0",500,true,false]
|
||||
default : [1,"0","0",100,500,false]
|
||||
colour : this.printColor
|
||||
var keep = Bool_0?', "keep": true':'';
|
||||
var async = Bool_1?', "async": true':'';
|
||||
var code = '{"type": "moveImage", "name": "'+EvalString_0+'", "from": ['+PosString_0+','+PosString_1+'], "to": ['+PosString_2+','+PosString_3+'], "time": '+Int_0+keep+async+'},\n';
|
||||
var toloc = '';
|
||||
if (PosString_0 && PosString_1)
|
||||
toloc = ', "to": ['+PosString_0+','+PosString_1+']'
|
||||
PosString_2 = (PosString_2) ? (', "opacity": '+PosString_2):'';
|
||||
var async = Bool_0?', "async": true':'';
|
||||
var code = '{"type": "animateImage", "code": '+Int_0+toloc+PosString_2+',"time": '+Int_1+async+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
@ -2076,22 +2069,20 @@ ActionParser.prototype.parseAction = function() {
|
||||
this.next = MotaActionBlocks['vibrate_s'].xmlText([data.time||0, data.async||false, this.next]);
|
||||
break;
|
||||
case "showImage": // 显示图片
|
||||
if(this.isset(data.name)){
|
||||
this.next = MotaActionBlocks['showImage_0_s'].xmlText([
|
||||
data.name,data.loc[0],data.loc[1],this.next]);
|
||||
} else {
|
||||
this.next = MotaActionBlocks['showImage_1_s'].xmlText([
|
||||
this.next]);
|
||||
}
|
||||
this.next = MotaActionBlocks['showImage_s'].xmlText([
|
||||
data.code,data.image,data.loc[0],data.loc[1],data.dw||100,data.dw||100,data.opacity||100,data.time||0,data.async||false,this.next]);
|
||||
break;
|
||||
case "animateImage": // 显示图片
|
||||
if(data.action == 'show'){
|
||||
this.next = MotaActionBlocks['animateImage_0_s'].xmlText([
|
||||
data.name,data.loc[0],data.loc[1],data.time||0,data.keep||false,data.async||false,this.next]);
|
||||
} else if (data.action == 'hide') {
|
||||
this.next = MotaActionBlocks['animateImage_1_s'].xmlText([
|
||||
data.name,data.loc[0],data.loc[1],data.time||0,data.keep||false,data.async||false,this.next]);
|
||||
}
|
||||
case "hideImage": // 清除图片
|
||||
this.next = MotaActionBlocks['hideImage_s'].xmlText([
|
||||
data.code,data.time||0,data.async||false,this.next]);
|
||||
break;
|
||||
case "showTextImage": // 显示图片化文本
|
||||
this.next = MotaActionBlocks['showTextImage_s'].xmlText([
|
||||
data.code,this.EvalString(data.text),data.loc[0],data.loc[1],data.opacity||100,data.time||0,data.async||false,this.next]);
|
||||
break;
|
||||
case "animateImage": // 移动图片
|
||||
this.next = MotaActionBlocks['animateImage_s'].xmlText([
|
||||
data.code, data.to[0], data.to[1], data.opacity, data.time||0, data.async||false, this.next]);
|
||||
break;
|
||||
case "showGif": // 显示动图
|
||||
if(this.isset(data.name)){
|
||||
@ -2102,11 +2093,6 @@ ActionParser.prototype.parseAction = function() {
|
||||
this.next]);
|
||||
}
|
||||
break;
|
||||
case "moveImage": // 移动图片
|
||||
this.next = MotaActionBlocks['moveImage_0_s'].xmlText([
|
||||
data.name, data.from[0], data.from[1], data.to[0], data.to[1], data.time||0, data.keep||false, data.async||false, this.next
|
||||
]);
|
||||
break;
|
||||
case "setFg": // 颜色渐变
|
||||
if(this.isset(data.color)){
|
||||
var alpha = data.color[3];
|
||||
|
||||
@ -62,13 +62,12 @@ editor_blockly = function () {
|
||||
MotaActionBlocks['autoText_s'].xmlText(),
|
||||
MotaActionBlocks['scrollText_s'].xmlText(),
|
||||
MotaActionBlocks['setText_s'].xmlText(),
|
||||
MotaActionBlocks['showImage_0_s'].xmlText(),
|
||||
MotaActionBlocks['animateImage_0_s'].xmlText(),
|
||||
MotaActionBlocks['animateImage_1_s'].xmlText(),
|
||||
MotaActionBlocks['showImage_1_s'].xmlText(),
|
||||
MotaActionBlocks['showImage_s'].xmlText(),
|
||||
MotaActionBlocks['hideImage_s'].xmlText(),
|
||||
MotaActionBlocks['showTextImage_s'].xmlText(),
|
||||
MotaActionBlocks['animateImage_s'].xmlText(),
|
||||
MotaActionBlocks['showGif_0_s'].xmlText(),
|
||||
MotaActionBlocks['showGif_1_s'].xmlText(),
|
||||
MotaActionBlocks['moveImage_0_s'].xmlText(),
|
||||
MotaActionBlocks['tip_s'].xmlText(),
|
||||
MotaActionBlocks['win_s'].xmlText(),
|
||||
MotaActionBlocks['lose_s'].xmlText(),
|
||||
|
||||
@ -939,48 +939,58 @@ loc可忽略，如果忽略则显示为事件当前点。
|
||||
|
||||
``` js
|
||||
"x,y": [ // 实际执行的事件列表
|
||||
{"type": "showImage", "name": "bg.jpg", "loc": [231,297]}, // 在(231,297)显示bg.jpg
|
||||
{"type": "showImage", "name": "1.png", "loc": [109,167]}, // 在(109,167)显示1.png
|
||||
{"type": "showImage"} // 如果不指定name则清除所有图片。
|
||||
{"type": "showImage", "code": 1, "image": "bg.jpg", "loc": [231,297], "dw": 100, "dy" : 100, "opacity": 100, "time" : 0}, // 在(231,297)显示bg.jpg
|
||||
{"type": "showImage", "code": 12, "image": "1.png", "loc": [209,267], "dw": 100, "dy" : 100, "opacity": 50, "time" : 1000}, // 在(209,267)渐变显示1.png，渐变时间为1000毫秒，完成时透明度为0.5，这张图片将遮盖上一张
|
||||
{"type": "showImage", "code": 8, "image": "hero.png", "loc": [349,367], "dw": 50, "dy" : 50, "opacity": 100, "time" : 0}, // 在(209,267)渐变显示hero.png,大小为原图片的一半，渐变时间为1000毫秒,这张图片将被上一张遮盖
|
||||
]
|
||||
```
|
||||
|
||||
name为图片名。**请确保图片在data.js中的images中被定义过。**
|
||||
code为图片编号，如果两张图片重叠，编号较大的显示在上。建议编号取1~50之间的数。
|
||||
|
||||
image为图片名。**请确保图片在data.js中的images中被定义过。**
|
||||
|
||||
loc为图片左上角坐标，以像素为单位进行计算。
|
||||
|
||||
如果不指定name则清除所有显示的图片。
|
||||
dw和dh为图片的横向、纵向放大率，默认值为100，即不进行缩放。
|
||||
|
||||
调用show/hide/move/animate等几个事件同样会清除所有显示的图片。
|
||||
opacity为图片透明度,默认值为100，即不透明。
|
||||
|
||||
### animateImage：图片淡入淡出
|
||||
time为渐变时间，默认值为0，即不渐变直接显示。
|
||||
|
||||
我们还可以使用 `{"type": "animateImage"}` 来造成显示图片的淡入淡出效果。
|
||||
### showTextImage：显示图片
|
||||
|
||||
我们可以使用 `{"type": "showTextImage"}` 以图片的方式显示文本。
|
||||
|
||||
``` js
|
||||
"x,y": [ // 实际执行的事件列表
|
||||
{"type": "animateImage", "action": "show", "name": "bg.jpg", "loc": [231,297], "time": 500, "keep": true}, // 在(231,297)淡入bg.jpg，动画时间500ms
|
||||
{"type": "animateImage", "action": "hide", "name": "1.png", "loc": [109,167], "time": 300, "async": true}, // 在(109,167)淡出1.png，动画时间300ms，异步执行
|
||||
{"type": "showTextImage", "code": 1, "text": "第一排\n第二排\n\n空行后的一排", "loc": [231,297], "opacity": 1, "time" : 0}, // 在(231,297)显示"第一排\n第二排\n\n空行后的一排"
|
||||
]
|
||||
```
|
||||
|
||||
action为淡入还是淡出，`show`为淡入，`hide`会淡出。
|
||||
code为图片编号，如果两张图片重叠，编号较大的显示在上。建议编号取1~50之间的数。
|
||||
|
||||
name为图片名。**请确保图片在data.js中的images中被定义过。**
|
||||
text为要显示的文本。默认行宽为416。
|
||||
|
||||
loc为图片左上角坐标，以像素为单位进行计算。
|
||||
|
||||
time为淡入淡出的时间，如果是0则忽略此项。
|
||||
opacity为图片透明度。
|
||||
|
||||
keep可选，如果为true则在淡入图片后立刻调用showImage以保留图片，在淡出图片前先清除再动画。
|
||||
time为渐变时间，默认值为0，即不渐变直接显示。
|
||||
|
||||
async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。
|
||||
### hideImage：清除图片
|
||||
|
||||
如果多张图片的淡入淡出可以采用以下方式（仅供参考）：
|
||||
我们可以使用 `{"type": "hideImage"}` 来清除一张图片。
|
||||
|
||||
假设我现在已经有了`1.jpg`显示在屏幕上：
|
||||
- 淡入显示`2.png`：调用`animateImage`淡入图片，然后立刻调用`showImage`显示图片。
|
||||
- 淡出`1.png`：清除所有图片，`showImage`显示`2.png`，然后调用`animateImage`淡出`1.jpg`
|
||||
``` js
|
||||
"x,y": [ // 实际执行的事件列表
|
||||
{"type": "hideImage", "code": 1, "time" : 0}, // 使1号图片消失
|
||||
{"type": "hideImage", "code": 12, "time" : 1000}, // 使12号图片渐变消失，时间为1000毫秒
|
||||
]
|
||||
```
|
||||
|
||||
time为渐变时间，默认值为0，即不渐变直接消除。
|
||||
|
||||
code为显示图片时输入的图片编号。
|
||||
|
||||
### showGif：显示动图
|
||||
|
||||
@ -999,26 +1009,27 @@ loc为动图左上角坐标，以像素为单位进行计算。
|
||||
|
||||
如果不指定name则清除所有显示的动图。
|
||||
|
||||
### moveImage：图片移动
|
||||
### animateImage：图片移动
|
||||
|
||||
我们可以使用 `{"type": "moveImage"}` 来造成图片移动效果。
|
||||
我们可以使用 `{"type": "animateImage"}` 来造成图片移动，淡入淡出等效果。
|
||||
|
||||
``` js
|
||||
"x,y": [ // 实际执行的事件列表
|
||||
{"type": "moveImage", "name": "bg.jpg", "from": [231,297], "to": [22,333], "time": 500, "keep": true, "async": true},
|
||||
{"type": "animateImage", "code": 1, "to": [22,333], "opacity": 1, "time": 1000},
|
||||
// 将1号图片移动到(22,333)，动画时间为1000ms
|
||||
{"type": "animateImage", "code": 12, "opacity": 0.5, "time": 500}, // 将二号图片的透明度变为0.5，动画时间500ms
|
||||
{"type": "animateImage", "code": 1, "to": [109,167], "opacity": 0, "time": 300, "async": true}, // 将1号图片移动到(109,167)，透明度设为0（不可见），动画时间300ms，异步执行
|
||||
]
|
||||
```
|
||||
|
||||
name为图片名。**请确保图片在data.js中的images中被定义过。**
|
||||
image为图片名。**请确保图片在data.js中的images中被定义过。**
|
||||
|
||||
from为起点图片左上角坐标，以像素为单位进行计算。
|
||||
to为终点图片左上角坐标，以像素为单位进行计算，不填写则视为当前图片位置。
|
||||
|
||||
to为终点图片左上角坐标，以像素为单位进行计算。
|
||||
opacity为完成时图片透明度，移动过程中逐渐变化。
|
||||
|
||||
time为总移动的时间。
|
||||
|
||||
keep可选，如果为true则在移动结束后立刻调用showImage以保留图片。
|
||||
|
||||
async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。
|
||||
|
||||
### setFg：更改画面色调
|
||||
|
||||
@ -143,9 +143,9 @@
|
||||
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
|
||||
<div id="dymCanvas"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src='libs/thirdparty/mid.min.js'></script>
|
||||
|
||||
@ -1893,9 +1893,11 @@ actions.prototype.clickSettings = function (x,y) {
|
||||
core.ui.drawKeyBoard();
|
||||
break;
|
||||
case 2:
|
||||
core.clearLastEvent();
|
||||
core.ui.drawMaps();
|
||||
break;
|
||||
case 3:
|
||||
core.clearLastEvent();
|
||||
core.ui.drawPaint();
|
||||
break;
|
||||
case 4:
|
||||
|
||||
@ -57,6 +57,7 @@ control.prototype.setRequestAnimationFrame = function () {
|
||||
|
||||
core.animateFrame.globalTime = core.animateFrame.globalTime||timestamp;
|
||||
core.animateFrame.boxTime = core.animateFrame.boxTime||timestamp;
|
||||
core.animateFrame.selectorTime = core.animateFrame.selectorTime||timestamp;
|
||||
core.animateFrame.animateTime = core.animateFrame.animateTime||timestamp;
|
||||
core.animateFrame.moveTime = core.animateFrame.moveTime||timestamp;
|
||||
core.animateFrame.lastLegTime = core.animateFrame.lastLegTime||timestamp;
|
||||
@ -110,6 +111,19 @@ control.prototype.setRequestAnimationFrame = function () {
|
||||
core.animateFrame.boxTime = timestamp;
|
||||
}
|
||||
|
||||
// selectorTime
|
||||
if (timestamp-core.animateFrame.selectorTime>20 && core.isset(core.dymCanvas.selector)) {
|
||||
var opac = parseFloat(core.dymCanvas.selector.canvas.style.opacity);
|
||||
if (core.getFlag("seleUp", true))
|
||||
opac += 0.02;
|
||||
else
|
||||
opac -= 0.02;
|
||||
if (opac > 0.9 || opac < 0.6)
|
||||
core.setFlag("seleUp", !core.getFlag("seleUp", true))
|
||||
core.setOpacity("selector", opac);
|
||||
core.animateFrame.selectorTime = timestamp;
|
||||
}
|
||||
|
||||
// Animate
|
||||
if (timestamp-core.animateFrame.animateTime>50 && core.isset(core.status.animateObjs) && core.status.animateObjs.length>0) {
|
||||
core.clearMap('animate');
|
||||
@ -3356,5 +3370,12 @@ control.prototype.domRenderer = function(){
|
||||
core.canvas[cn].canvas.style.height = core.bigmap.height*32*core.domStyle.scale + "px";
|
||||
});
|
||||
}
|
||||
|
||||
// 动态canvas
|
||||
for (var i = 0; i < core.dymCanvas._list.length; i++) {
|
||||
var spirit = core.dymCanvas._list[i];
|
||||
core.dymCanvas[spirit.id].canvas.style.width = core.dymCanvas[spirit.id].canvas.width * core.domStyle.scale + "px";
|
||||
core.dymCanvas[spirit.id].canvas.style.height = core.dymCanvas[spirit.id].canvas.height * core.domStyle.scale + "px";
|
||||
core.dymCanvas[spirit.id].canvas.style.left = spirit.style.left * core.domStyle.scale + "px";
|
||||
core.dymCanvas[spirit.id].canvas.style.top = spirit.style.top * core.domStyle.scale + "px"
|
||||
}
|
||||
}
|
||||
33
libs/core.js
33
libs/core.js
@ -188,6 +188,9 @@ function core() {
|
||||
'animateObjs': [],
|
||||
};
|
||||
this.status = {};
|
||||
this.dymCanvas = {
|
||||
"_list": []
|
||||
};
|
||||
}
|
||||
|
||||
/////////// 系统事件相关 ///////////
|
||||
@ -688,6 +691,31 @@ core.prototype.setFillStyle = function (map, style) {
|
||||
core.ui.setFillStyle(map, style);
|
||||
}
|
||||
|
||||
////// canvas创建 //////
|
||||
core.prototype.createCanvas = function (name, x, y, width, height, z) {
|
||||
core.ui.createCanvas(name, x, y, width, height, z);
|
||||
}
|
||||
|
||||
////// canvas查找 //////
|
||||
core.prototype.findCanvas = function (name) {
|
||||
return core.ui.findCanvas(name);
|
||||
}
|
||||
|
||||
////// canvas重定位 //////
|
||||
core.prototype.relocateCanvas = function (name, x, y) {
|
||||
core.ui.relocateCanvas(name, x, y);
|
||||
}
|
||||
|
||||
////// canvas重置 //////
|
||||
core.prototype.resizeCanvas = function (name, width, height) {
|
||||
core.ui.resizeCanvas(name, width, height);
|
||||
}
|
||||
|
||||
////// canvas删除 //////
|
||||
core.prototype.deleteCanvas = function (name) {
|
||||
core.ui.deleteCanvas(name);
|
||||
}
|
||||
|
||||
core.prototype.drawBlock = function (block, animate, dx, dy) {
|
||||
core.maps.drawBlock(block, animate, dx, dy);
|
||||
}
|
||||
@ -1092,6 +1120,11 @@ core.prototype.closePanel = function () {
|
||||
core.ui.closePanel();
|
||||
}
|
||||
|
||||
////// 一般清除事件 //////
|
||||
core.prototype.clearLastEvent = function () {
|
||||
core.ui.clearLastEvent();
|
||||
}
|
||||
|
||||
////// 更改播放状态 //////
|
||||
core.prototype.triggerReplay = function () {
|
||||
core.control.triggerReplay();
|
||||
|
||||
258
libs/events.js
258
libs/events.js
@ -363,8 +363,7 @@ events.prototype.doAction = function() {
|
||||
clearInterval(core.status.event.interval);
|
||||
core.status.event.interval = null;
|
||||
|
||||
core.clearMap('ui');
|
||||
core.setAlpha('ui', 1.0);
|
||||
core.clearLastEvent();
|
||||
|
||||
// 事件处理完毕
|
||||
if (core.status.event.data.list.length==0) {
|
||||
@ -720,29 +719,50 @@ events.prototype.doAction = function() {
|
||||
this.doAction();
|
||||
break;
|
||||
case "showImage": // 显示图片
|
||||
if (!core.isset(data.loc)) data.loc=[];
|
||||
core.events.showImage(data.name, data.loc[0], data.loc[1]);
|
||||
this.doAction();
|
||||
break;
|
||||
case "animateImage": // 淡入淡出图片
|
||||
if (core.status.replay.replaying) { // 正在播放录像
|
||||
if (!core.isset(data.loc)) data.loc=[0, 0];
|
||||
if (core.status.replay.replaying) {
|
||||
data.time = 0;
|
||||
}
|
||||
var image = core.material.images.images[data.image];
|
||||
if (data.async || data.time == 0) {
|
||||
core.events.showImage(data.code, image, data.loc[0], data.loc[1], data.dw, data.dh, data.opacity, data.time);
|
||||
this.doAction();
|
||||
}
|
||||
else {
|
||||
if (core.isset(data.loc) && core.isset(core.material.images.images[data.name]) && (data.action=="show" || data.action=="hide")) {
|
||||
if (data.async) {
|
||||
core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time, data.keep);
|
||||
this.doAction();
|
||||
}
|
||||
else {
|
||||
core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time, data.keep, function() {
|
||||
core.events.doAction();
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.doAction();
|
||||
}
|
||||
core.events.showImage(data.code, image, data.loc[0], data.loc[1], data.dw, data.dh, data.opacity, data.time, function () {
|
||||
core.events.doAction();
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "showTextImage": // 显示图片化文本
|
||||
if (!core.isset(data.loc)) data.loc=[0, 0];
|
||||
if (core.status.replay.replaying) {
|
||||
data.time = 0;
|
||||
}
|
||||
var content = core.replaceText(data.text);
|
||||
var image = core.events.textImage(content);
|
||||
if (data.async || data.time == 0) {
|
||||
core.events.showImage(data.code, image, data.loc[0], data.loc[1], 100, 100, data.opacity, data.time);
|
||||
this.doAction();
|
||||
}
|
||||
else {
|
||||
core.events.showImage(data.code, image, data.loc[0], data.loc[1], 100, 100, data.opacity, data.time, function() {
|
||||
core.events.doAction();
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "hideImage": // 隐藏图片
|
||||
if (core.status.replay.replaying) {
|
||||
data.time = 0;
|
||||
}
|
||||
if (data.async || data.time == 0) {
|
||||
core.events.hideImage(data.code, data.time);
|
||||
this.doAction();
|
||||
}
|
||||
else {
|
||||
core.events.hideImage(data.code, data.time, function () {
|
||||
core.events.doAction();
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "showGif": // 显示动图
|
||||
@ -761,24 +781,19 @@ events.prototype.doAction = function() {
|
||||
}
|
||||
this.doAction();
|
||||
break;
|
||||
case "moveImage": // 图片移动
|
||||
case "animateImage": // 图片移动
|
||||
if (core.status.replay.replaying) { // 正在播放录像
|
||||
this.doAction();
|
||||
}
|
||||
else {
|
||||
if (core.isset(data.from) && core.isset(data.to) && core.isset(core.material.images.images[data.name])) {
|
||||
if (data.async) {
|
||||
core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time, data.keep);
|
||||
this.doAction();
|
||||
}
|
||||
else {
|
||||
core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time, data.keep, function() {
|
||||
core.events.doAction();
|
||||
});
|
||||
}
|
||||
if (data.async) {
|
||||
core.events.animateImage(data.code, data.to, data.opacity, data.time);
|
||||
this.doAction();
|
||||
}
|
||||
else {
|
||||
this.doAction();
|
||||
core.events.animateImage(data.code, data.to, data.opacity, data.time, function() {
|
||||
core.events.doAction();
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
@ -1545,91 +1560,146 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback
|
||||
}, 25);
|
||||
}
|
||||
|
||||
////// 绘制图片 //////
|
||||
events.prototype.showImage = function (name, x, y) {
|
||||
if (core.isset(name) && core.isset(x) && core.isset(y) && core.isset(core.material.images.images[name])) {
|
||||
core.canvas.image.drawImage(core.material.images.images[name], x, y);
|
||||
////// 显示图片 //////
|
||||
events.prototype.showImage = function (code, image, x, y, dw, dh, opacityVal, time, callback) {
|
||||
dw /= 100, dh /= 100, opacityVal /= 100;
|
||||
var zIndex = code + 100;
|
||||
var name = "image"+ zIndex;
|
||||
if (core.findCanvas(name) != -1) {
|
||||
core.relocateCanvas(name, x, y);
|
||||
core.resizeCanvas(name, image.width * dw, image.height * dh);
|
||||
core.dymCanvas[name].style.zIndex = zIndex;
|
||||
}
|
||||
else
|
||||
core.createCanvas(name, x, y, image.width * dw, image.height * dh, zIndex);
|
||||
core.dymCanvas[name].drawImage(image, 0, 0, image.width * dw, image.height * dh);
|
||||
if (time == 0)
|
||||
core.setOpacity(name, opacityVal);
|
||||
else {
|
||||
clearInterval(core.interval.tipAnimate);
|
||||
var opac = 0;
|
||||
core.setOpacity(name, 0);
|
||||
var animate = setInterval(function () {
|
||||
opac += opacityVal/20;
|
||||
core.setOpacity(name, opac);
|
||||
if (opac >= opacityVal) {
|
||||
delete core.animateFrame.asyncId[animate];
|
||||
clearInterval(animate);
|
||||
core.setOpacity(name, opacityVal);
|
||||
if (core.isset(callback)) callback();
|
||||
}
|
||||
}, time/20);
|
||||
|
||||
core.animateFrame.asyncId[animate] = true;
|
||||
}
|
||||
else core.clearMap('image');
|
||||
}
|
||||
|
||||
////// 图片淡入/淡出 //////
|
||||
events.prototype.animateImage = function (type, image, loc, time, keep, callback) {
|
||||
time = time||0;
|
||||
if ((type!='show' && type!='hide') || time<=0) {
|
||||
if (core.isset(callback)) callback();
|
||||
////// 隐藏图片 //////
|
||||
events.prototype.hideImage = function (code, time, callback) {
|
||||
var name = "image"+ (code+100);
|
||||
if (!core.isset(core.dymCanvas[name])) {
|
||||
console.log(code+"号图片不存在")
|
||||
return;
|
||||
}
|
||||
if (time == 0)
|
||||
core.deleteCanvas(name);
|
||||
else {
|
||||
clearInterval(core.interval.tipAnimate);
|
||||
var opacityVal = parseFloat(core.dymCanvas[name].canvas.style.opacity);
|
||||
var opac = opacityVal;
|
||||
var animate = setInterval(function () {
|
||||
opac -= opacityVal/20;
|
||||
core.setOpacity(name, opac);
|
||||
if (opac < 0) {
|
||||
delete core.animateFrame.asyncId[animate];
|
||||
clearInterval(animate);
|
||||
core.deleteCanvas(name);
|
||||
if (core.isset(callback)) callback();
|
||||
}
|
||||
}, time/20);
|
||||
|
||||
clearInterval(core.interval.tipAnimate);
|
||||
|
||||
var alpha = 0;
|
||||
if (type == 'hide') alpha = 1;
|
||||
|
||||
var x = core.calValue(loc[0]), y = core.calValue(loc[1]);
|
||||
|
||||
if (type == 'hide' && keep) {
|
||||
core.clearMap('image', x, y, image.width, image.height);
|
||||
core.animateFrame.asyncId[animate] = true;
|
||||
}
|
||||
core.setAlpha('data', alpha);
|
||||
core.canvas.data.drawImage(image, x, y);
|
||||
core.setAlpha('data', 1);
|
||||
}
|
||||
|
||||
// core.status.replay.animate=true;
|
||||
var animate = setInterval(function () {
|
||||
if (type=='show') alpha += 0.1;
|
||||
else alpha -= 0.1;
|
||||
core.clearMap('data', x, y, image.width, image.height);
|
||||
if (alpha >=1 || alpha<=0) {
|
||||
delete core.animateFrame.asyncId[animate];
|
||||
clearInterval(animate);
|
||||
if (type == 'show' && keep)
|
||||
core.canvas.image.drawImage(image, x, y);
|
||||
core.setAlpha('data', 1);
|
||||
if (core.isset(callback)) callback();
|
||||
}
|
||||
else {
|
||||
core.setAlpha('data', alpha);
|
||||
core.canvas.data.drawImage(image, x, y);
|
||||
core.setAlpha('data', 1);
|
||||
}
|
||||
}, time / 10);
|
||||
////// 文本图片化 //////
|
||||
events.prototype.textImage = function (content) {
|
||||
content = content || "";
|
||||
|
||||
core.animateFrame.asyncId[animate] = true;
|
||||
// 获得颜色的盒子等信息
|
||||
var textAttribute = core.status.textAttribute || core.initStatus.textAttribute;
|
||||
var textfont = textAttribute.textfont || 16;
|
||||
var offset = textAttribute.offset || 15;
|
||||
var textColor = core.arrayToRGBA(textAttribute.text);
|
||||
|
||||
var font = textfont+"px "+core.status.globalAttribute.font;
|
||||
if (textAttribute.bold) font = "bold "+font;
|
||||
var contents = core.splitLines('ui', content), lines = contents.length;
|
||||
|
||||
// 计算总高度，按1.2倍行距计算
|
||||
var width = 416, height = textfont * 1.4 * lines;
|
||||
var tempCanvas = core.bigmap.tempCanvas;
|
||||
tempCanvas.canvas.width = width;
|
||||
tempCanvas.canvas.height = height;
|
||||
tempCanvas.clearRect(0, 0, width, height);
|
||||
tempCanvas.font = font;
|
||||
tempCanvas.fillStyle = textColor;
|
||||
|
||||
// 全部绘制
|
||||
var currH = textfont;
|
||||
for (var i = 0; i < lines; ++i) {
|
||||
var text = contents[i];
|
||||
tempCanvas.fillText(text, offset, currH);
|
||||
currH += 1.4 * textfont;
|
||||
}
|
||||
|
||||
return tempCanvas.canvas;
|
||||
}
|
||||
|
||||
////// 移动图片 //////
|
||||
events.prototype.moveImage = function (image, from, to, time, keep, callback) {
|
||||
events.prototype.animateImage = function (code, to, opacityVal, time, callback) {
|
||||
time = time || 1000;
|
||||
clearInterval(core.interval.tipAnimate);
|
||||
core.setAlpha('data', 1);
|
||||
|
||||
var width = image.width, height = image.height;
|
||||
|
||||
// core.status.replay.animate=true;
|
||||
var fromX = core.calValue(from[0]), fromY = core.calValue(from[1]),
|
||||
toX = core.calValue(to[0]), toY = core.calValue(to[1]);
|
||||
var name = "image"+ (code+100), index = core.findCanvas(name);
|
||||
if (index == -1) {
|
||||
console.log(code+"号图片不存在")
|
||||
return;
|
||||
}
|
||||
var fromX = core.dymCanvas._list[index].style.left,
|
||||
fromY = core.dymCanvas._list[index].style.top,
|
||||
preX = fromX, preY = fromY;
|
||||
if (core.isset(to))
|
||||
var toX = core.calValue(to[0]), toY = core.calValue(to[1]);
|
||||
else
|
||||
var toX = fromX, toY = fromY;
|
||||
|
||||
if (keep) core.clearMap('image', fromX, fromY, width, height);
|
||||
|
||||
var step = 0, preX = fromX, preY = fromY;
|
||||
var step = 0;
|
||||
var per_time = 10, steps = parseInt(time / per_time);
|
||||
var drawImage = function () {
|
||||
var preOpac = parseFloat(core.dymCanvas[name].canvas.style.opacity), opacStep;
|
||||
if (core.isset(opacityVal)) {
|
||||
opacityVal /= 100;
|
||||
opacStep = (opacityVal - preOpac) / steps;
|
||||
}
|
||||
else
|
||||
opacStep = 0;
|
||||
|
||||
var moveStep = function () {
|
||||
preOpac += opacStep;
|
||||
core.setOpacity(name, preOpac);
|
||||
preX = parseInt(fromX + (toX-fromX)*step/steps);
|
||||
preY = parseInt(fromY + (toY-fromY)*step/steps);
|
||||
core.canvas.data.drawImage(image, preX, preY);
|
||||
core.relocateCanvas(name, preX, preY);
|
||||
}
|
||||
|
||||
drawImage();
|
||||
var animate = setInterval(function () {
|
||||
core.clearMap('data', preX, preY, width, height);
|
||||
step++;
|
||||
if (step <= steps)
|
||||
drawImage();
|
||||
else {
|
||||
moveStep();
|
||||
if (step > steps) {
|
||||
if (core.isset(opacityVal))
|
||||
core.setOpacity(name, opacityVal);
|
||||
delete core.animateFrame.asyncId[animate];
|
||||
clearInterval(animate);
|
||||
if (keep) core.canvas.image.drawImage(image, toX, toY);
|
||||
if (core.isset(callback)) callback();
|
||||
}
|
||||
}, per_time);
|
||||
|
||||
62
libs/maps.js
62
libs/maps.js
@ -811,10 +811,10 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
|
||||
faceIds = block.event.faceIds||{};
|
||||
}
|
||||
|
||||
var alpha = 1;
|
||||
core.setAlpha('route', alpha);
|
||||
core.canvas.route.drawImage(image, bx * 32, by * height, 32, height, block.x * 32, block.y * 32 +32 - height, 32, height);
|
||||
|
||||
var alpha = 1, name = 'move'+x+'_'+y;
|
||||
core.createCanvas(name, block.x, block.y * 32 +32 - height, 32, height, 45);
|
||||
core.dymCanvas[name].textAlign = 'left';
|
||||
core.dymCanvas[name].drawImage(image, bx * 32, by * height, 32, height, 0, 0, 32, height);
|
||||
// 要运行的轨迹：将steps展开
|
||||
var moveSteps=[];
|
||||
steps.forEach(function (e) {
|
||||
@ -861,22 +861,23 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
|
||||
if (moveSteps.length==0) {
|
||||
if (keep) alpha=0;
|
||||
else alpha -= 0.06;
|
||||
core.clearMap('route', nowX, nowY-height+32, 32, height);
|
||||
if (alpha<=0) {
|
||||
delete core.animateFrame.asyncId[animate];
|
||||
clearInterval(animate);
|
||||
core.deleteCanvas(name);
|
||||
// 不消失
|
||||
if (keep) {
|
||||
core.setBlock(id, nowX/32, nowY/32);
|
||||
core.showBlock(nowX/32, nowY/32);
|
||||
}
|
||||
core.setAlpha('route',1);
|
||||
else {
|
||||
if (block.event.cls == 'enemys' || block.event.cls == 'enemy48')
|
||||
core.clearMap('damage', nowX, nowY, 32, 32);
|
||||
}
|
||||
if (core.isset(callback)) callback();
|
||||
}
|
||||
else {
|
||||
core.setAlpha('route', alpha);
|
||||
core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, nowX, nowY-height+32, 32, height);
|
||||
core.setAlpha('route', 1);
|
||||
core.dymCanvas[name].canvas.style.opacity = alpha;
|
||||
}
|
||||
}
|
||||
else {
|
||||
@ -892,12 +893,49 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
|
||||
}
|
||||
}
|
||||
|
||||
core.clearMap('route', nowX, nowY-height+32, 32, height);
|
||||
step++;
|
||||
nowX+=scan[direction].x*2;
|
||||
nowY+=scan[direction].y*2;
|
||||
// 绘制
|
||||
core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, nowX, nowY-height+32, 32, height);
|
||||
// 移动
|
||||
core.relocateCanvas(name, nowX, nowY-height+32);
|
||||
core.dymCanvas[name].drawImage(image, animateCurrent * 32, by * height, 32, height, 0, 0, 32, height);
|
||||
// 显伤绘制
|
||||
if ((block.event.cls == 'enemys' || block.event.cls == 'enemy48') && core.hasItem('book')) {
|
||||
// 鉴于移动过程中可能的主角状态改变，每次重新计算
|
||||
var damage = core.enemys.getDamage(block.event.id, x, y);
|
||||
var color = '#000000';
|
||||
|
||||
if (damage == null) {
|
||||
damage = "???";
|
||||
color = '#FF0000';
|
||||
}
|
||||
else {
|
||||
if (damage <= 0) color = '#00FF00';
|
||||
else if (damage < core.status.hero.hp / 3) color = '#FFFFFF';
|
||||
else if (damage < core.status.hero.hp * 2 / 3) color = '#FFFF00';
|
||||
else if (damage < core.status.hero.hp) color = '#FF7F00';
|
||||
else color = '#FF0000';
|
||||
|
||||
damage = core.formatBigNumber(damage);
|
||||
if (core.enemys.hasSpecial(core.material.enemys[block.event.id], 19))
|
||||
damage += "+";
|
||||
if (core.enemys.hasSpecial(core.material.enemys[block.event.id], 21))
|
||||
damage += "-";
|
||||
if (core.enemys.hasSpecial(core.material.enemys[block.event.id], 11))
|
||||
damage += "^";
|
||||
}
|
||||
// 清空上一次
|
||||
core.clearMap('damage', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32);
|
||||
|
||||
core.setFillStyle('damage', '#000000');
|
||||
core.canvas.damage.fillText(damage, nowX + 5, nowY + 30);
|
||||
core.canvas.damage.fillText(damage, nowX + 3, nowY + 30);
|
||||
core.canvas.damage.fillText(damage, nowX + 5, nowY + 32);
|
||||
core.canvas.damage.fillText(damage, nowX + 3, nowY + 32);
|
||||
|
||||
core.setFillStyle('damage', color);
|
||||
core.canvas.damage.fillText(damage, nowX + 4, nowY + 31);
|
||||
}
|
||||
if (step==16) {
|
||||
// 该移动完毕，继续
|
||||
step=0;
|
||||
|
||||
150
libs/ui.js
150
libs/ui.js
@ -151,7 +151,14 @@ ui.prototype.setOpacity = function (map, opacity) {
|
||||
core.canvas[m].canvas.style.opacity = opacity;
|
||||
}
|
||||
}
|
||||
else core.canvas[map].canvas.style.opacity = opacity;
|
||||
else if (core.isset(core.canvas[map])) {
|
||||
core.canvas[map].canvas.style.opacity = opacity;
|
||||
}
|
||||
else if (core.isset(core.dymCanvas[map])) {
|
||||
core.dymCanvas[map].canvas.style.opacity = opacity;
|
||||
}
|
||||
else
|
||||
console.log("未找到"+map);
|
||||
}
|
||||
|
||||
////// 设置某个canvas的绘制属性（如颜色等） //////
|
||||
@ -161,9 +168,14 @@ ui.prototype.setFillStyle = function (map, style) {
|
||||
core.canvas[m].fillStyle = style;
|
||||
}
|
||||
}
|
||||
else {
|
||||
else if (core.isset(core.canvas[map])) {
|
||||
core.canvas[map].fillStyle = style;
|
||||
}
|
||||
else if (core.isset(core.dymCanvas[map])) {
|
||||
core.dymCanvas[map].fillStyle = style;
|
||||
}
|
||||
else
|
||||
console.log("未找到"+map);
|
||||
}
|
||||
|
||||
|
||||
@ -174,8 +186,7 @@ ui.prototype.setFillStyle = function (map, style) {
|
||||
ui.prototype.closePanel = function () {
|
||||
core.status.boxAnimateObjs = [];
|
||||
clearInterval(core.status.event.interval);
|
||||
core.clearMap('ui');
|
||||
core.setAlpha('ui', 1.0);
|
||||
core.clearLastEvent();
|
||||
core.unLockControl();
|
||||
core.status.event.data = null;
|
||||
core.status.event.id = null;
|
||||
@ -184,6 +195,14 @@ ui.prototype.closePanel = function () {
|
||||
core.status.event.interval = null;
|
||||
}
|
||||
|
||||
////// 一般清除事件 //////
|
||||
ui.prototype.clearLastEvent = function () {
|
||||
if (core.isset(core.dymCanvas.selector))
|
||||
core.deleteCanvas("selector");
|
||||
core.clearMap('ui');
|
||||
core.setAlpha('ui', 1);
|
||||
}
|
||||
|
||||
////// 左上角绘制一段提示 //////
|
||||
ui.prototype.drawTip = function (text, itemIcon) {
|
||||
var textX, textY, width, height, hide = false, alpha = 0;
|
||||
@ -351,21 +370,28 @@ ui.prototype.getTitleAndIcon = function (content) {
|
||||
}
|
||||
|
||||
// 绘制选择光标
|
||||
ui.prototype.drawWindowSelector = function(background,canvas,x,y,w,h) {
|
||||
var dstImage = core.canvas[canvas];
|
||||
|
||||
ui.prototype.drawWindowSelector = function(background,x,y,w,h) {
|
||||
if (core.isset(core.dymCanvas.selector)) {
|
||||
core.relocateCanvas("selector", x, y);
|
||||
core.resizeCanvas("selector", w, h);
|
||||
}
|
||||
else {
|
||||
core.ui.createCanvas("selector", x, y, w, h, 165);
|
||||
}
|
||||
core.setOpacity("selector", 0.8);
|
||||
var dstImage = core.dymCanvas.selector;
|
||||
// back
|
||||
dstImage.drawImage(background,130,66,28,28,x+2,y+2,w-4,h-4);
|
||||
dstImage.drawImage(background, 130, 66, 28, 28, 2, 2,w-4,h-4);
|
||||
// corner
|
||||
dstImage.drawImage(background,128,64,2,2,x,y,2,2);
|
||||
dstImage.drawImage(background,158,64,2,2,x+w-2,y,2,2);
|
||||
dstImage.drawImage(background,128,94,2,2,x,y+h-2,2,2);
|
||||
dstImage.drawImage(background,158,94,2,2,x+w-2,y+h-2,2,2);
|
||||
dstImage.drawImage(background, 128, 64, 2, 2, 0, 0, 2, 2);
|
||||
dstImage.drawImage(background, 158, 64, 2, 2,w-2, 0, 2, 2);
|
||||
dstImage.drawImage(background, 128, 94, 2, 2, 0,h-2, 2, 2);
|
||||
dstImage.drawImage(background, 158, 94, 2, 2,w-2,h-2, 2, 2);
|
||||
// border
|
||||
dstImage.drawImage(background,130,64,28,2,x+2,y,w-4,2);
|
||||
dstImage.drawImage(background,130,94,28,2,x+2,y+h-2,w-4,2);
|
||||
dstImage.drawImage(background,128,66,2,28,x,y+2,2,h-4);
|
||||
dstImage.drawImage(background,158,66,2,28,x+w-2,y+2,2,h-4);
|
||||
dstImage.drawImage(background, 130, 64, 28, 2, 2, 0,w-4, 2);
|
||||
dstImage.drawImage(background, 130, 94, 28, 2, 2,h-2,w-4, 2);
|
||||
dstImage.drawImage(background, 128, 66, 2, 28, 0, 2, 2,h-4);
|
||||
dstImage.drawImage(background, 158, 66, 2, 28,w-2, 2, 2,h-4);
|
||||
}
|
||||
|
||||
// 绘制皮肤
|
||||
@ -502,7 +528,7 @@ ui.prototype.drawTextBox = function(content, showAll) {
|
||||
content = core.replaceText(content);
|
||||
|
||||
core.status.boxAnimateObjs = [];
|
||||
core.clearMap('ui');
|
||||
core.clearLastEvent();
|
||||
|
||||
// drawImage
|
||||
content = content.replace(/(\f|\\f)\[(.*?)]/g, function (text, sympol, str) {
|
||||
@ -909,7 +935,7 @@ ui.prototype.drawChoices = function(content, choices) {
|
||||
while (core.status.event.selection>=choices.length) core.status.event.selection-=choices.length;
|
||||
var len = core.canvas.ui.measureText(core.replaceText(choices[core.status.event.selection].text || choices[core.status.event.selection])).width;
|
||||
if (isWindowSkin)
|
||||
this.drawWindowSelector(background, 'ui' ,208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28);
|
||||
this.drawWindowSelector(background, 208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28);
|
||||
else
|
||||
core.strokeRect('ui', 208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28, "#FFD700", 2);
|
||||
}
|
||||
@ -927,8 +953,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) {
|
||||
if (!core.isset(core.status.event.selection) || core.status.event.selection>1) core.status.event.selection=1;
|
||||
if (core.status.event.selection<0) core.status.event.selection=0;
|
||||
|
||||
core.clearMap('ui');
|
||||
core.setAlpha('ui', 1);
|
||||
core.clearLastEvent();
|
||||
core.setFillStyle('ui', core.material.groundPattern);
|
||||
var globalFont = core.status.globalAttribute.font;
|
||||
core.setFont('ui', "bold 19px "+globalFont);
|
||||
@ -1322,8 +1347,7 @@ ui.prototype.drawWaiting = function(text) {
|
||||
core.lockControl();
|
||||
core.status.event.id = 'waiting';
|
||||
|
||||
core.clearMap('ui');
|
||||
core.setAlpha('ui', 1);
|
||||
core.clearLastEvent();
|
||||
core.setFillStyle('ui', core.material.groundPattern);
|
||||
|
||||
var globalFont = core.status.globalAttribute.font;
|
||||
@ -1444,8 +1468,7 @@ ui.prototype.drawBook = function (index) {
|
||||
clearInterval(core.interval.tipAnimate);
|
||||
core.clearMap('data');
|
||||
|
||||
core.clearMap('ui');
|
||||
core.setAlpha('ui', 1);
|
||||
core.clearLastEvent();
|
||||
core.setFillStyle('ui', core.material.groundPattern);
|
||||
core.fillRect('ui', 0, 0, 416, 416);
|
||||
|
||||
@ -1759,8 +1782,7 @@ ui.prototype.drawMaps = function (index, x, y) {
|
||||
|
||||
if (!core.isset(index)) {
|
||||
core.status.event.data = null;
|
||||
core.clearMap('ui');
|
||||
core.setAlpha('ui', 1);
|
||||
core.clearLastEvent();
|
||||
|
||||
core.clearMap('animate');
|
||||
core.fillRect('animate', 0, 0, 416, 416, 'rgba(0,0,0,0.4)');
|
||||
@ -2414,7 +2436,7 @@ ui.prototype.drawKeyBoard = function () {
|
||||
core.lockControl();
|
||||
core.status.event.id = 'keyBoard';
|
||||
|
||||
core.clearMap('ui');
|
||||
core.clearLastEvent();
|
||||
|
||||
var left = 16, top = 48, right = 416 - 2 * left, bottom = 416 - 2 * top;
|
||||
core.fillRect('ui', left, top, right, bottom, core.material.groundPattern);
|
||||
@ -2664,7 +2686,7 @@ ui.prototype.drawPaint = function () {
|
||||
core.status.event.id = 'paint';
|
||||
core.status.event.data = {"x": null, "y": null, "erase": false};
|
||||
|
||||
core.clearMap('ui');
|
||||
core.clearLastEvent();
|
||||
core.clearMap('route');
|
||||
|
||||
core.setAlpha('route', 1);
|
||||
@ -2718,3 +2740,75 @@ ui.prototype.drawHelp = function () {
|
||||
]);
|
||||
}
|
||||
|
||||
////// 动态canvas //////
|
||||
|
||||
////// canvas创建 //////
|
||||
ui.prototype.createCanvas = function (name, x, y, width, height, z) {
|
||||
var newCanvas = document.createElement("CANVAS");
|
||||
newCanvas.id = name;
|
||||
newCanvas.style.display = 'block';
|
||||
newCanvas.width = width;
|
||||
newCanvas.height = height;
|
||||
newCanvas.style.width = width * core.domStyle.scale + 'px';
|
||||
newCanvas.style.height = height * core.domStyle.scale + 'px';
|
||||
newCanvas.style.left = x * core.domStyle.scale + 'px';
|
||||
newCanvas.style.top = y * core.domStyle.scale + 'px';
|
||||
newCanvas.style.zIndex = z;
|
||||
newCanvas.style.position = 'absolute';
|
||||
core.dymCanvas[name] = newCanvas.getContext('2d');
|
||||
core.dom.dymCanvas.appendChild(newCanvas);
|
||||
core.dymCanvas._list.push({
|
||||
"id": name,
|
||||
"style": {
|
||||
"left": x,
|
||||
"top": y,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
////// canvas查找 //////
|
||||
ui.prototype.findCanvas = function (name) {
|
||||
var index = 0;
|
||||
while (index < core.dymCanvas._list.length && core.dymCanvas._list[index].id != name) index++;
|
||||
if (index == core.dymCanvas._list.length) {
|
||||
return -1;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
////// canvas重定位 //////
|
||||
ui.prototype.relocateCanvas = function (name, x, y) {
|
||||
var index = core.findCanvas(name);
|
||||
if (core.isset(x)) {
|
||||
core.dymCanvas[name].canvas.style.left = x * core.domStyle.scale + 'px';
|
||||
core.dymCanvas._list[index].style.left = x;
|
||||
}
|
||||
if (core.isset(y)) {
|
||||
core.dymCanvas[name].canvas.style.top = y * core.domStyle.scale + 'px';
|
||||
core.dymCanvas._list[index].style.top = y;
|
||||
}
|
||||
}
|
||||
|
||||
////// canvas重置 //////
|
||||
ui.prototype.resizeCanvas = function (name, width, height) {
|
||||
var dstCanvas = core.dymCanvas[name].canvas;
|
||||
if (core.isset(width)) {
|
||||
dstCanvas.width = width;
|
||||
dstCanvas.style.width = width * core.domStyle.scale + 'px';
|
||||
}
|
||||
if (core.isset(height)) {
|
||||
dstCanvas.height = height;
|
||||
dstCanvas.style.height = height * core.domStyle.scale + 'px';
|
||||
}
|
||||
}
|
||||
////// canvas删除 //////
|
||||
ui.prototype.deleteCanvas = function (name) {
|
||||
var index = core.findCanvas(name);
|
||||
if (index == -1) {
|
||||
console.error("未找到"+name);
|
||||
}
|
||||
var obj = core.dom.dymCanvas.removeChild(core.dom.dymCanvas.childNodes[index]);
|
||||
obj = null;
|
||||
core.dymCanvas[name] = null;
|
||||
core.dymCanvas._list.splice(index,1);
|
||||
}
|
||||
|
||||
4
main.js
4
main.js
@ -68,7 +68,9 @@ function main() {
|
||||
'debuffCol': document.getElementById('debuffCol'),
|
||||
'skillCol': document.getElementById('skillCol'),
|
||||
'hard': document.getElementById('hard'),
|
||||
'statusCanvas': document.getElementById('statusCanvas')
|
||||
'statusCanvas': document.getElementById('statusCanvas'),
|
||||
'dymCanvas': document.getElementById('dymCanvas'),
|
||||
'dym': document.getElementsByClassName('dym'),
|
||||
};
|
||||
this.mode = 'play';
|
||||
this.loadList = [
|
||||
|
||||
@ -110,11 +110,16 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
||||
},
|
||||
{
|
||||
"type": "showImage",
|
||||
"name": "bg.jpg",
|
||||
"code": 1,
|
||||
"image": "bg.jpg",
|
||||
"loc": [
|
||||
0,
|
||||
0
|
||||
]
|
||||
],
|
||||
"dw": 100,
|
||||
"dh": 100,
|
||||
"opacity": 100,
|
||||
"time": 0
|
||||
},
|
||||
{
|
||||
"type": "comment",
|
||||
@ -163,7 +168,9 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "showImage"
|
||||
"type": "hideImage",
|
||||
"code": 1,
|
||||
"time": 0
|
||||
},
|
||||
{
|
||||
"type": "comment",
|
||||
@ -179,7 +186,9 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
||||
"function": "function(){\ncore.control.checkBgm()\n}"
|
||||
},
|
||||
{
|
||||
"type": "showImage"
|
||||
"type": "hideImage",
|
||||
"code": 1,
|
||||
"time": 0
|
||||
},
|
||||
{
|
||||
"type": "comment",
|
||||
@ -202,6 +211,11 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
||||
"type": "function",
|
||||
"function": "function(){\ncore.control.checkBgm()\n}"
|
||||
},
|
||||
{
|
||||
"type": "hideImage",
|
||||
"code": 1,
|
||||
"time": 0
|
||||
},
|
||||
{
|
||||
"type": "comment",
|
||||
"text": "这段代码会结束事件，选择录像文件，播放录像或重新开始"
|
||||
@ -339,7 +353,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
||||
"hatred": 2,
|
||||
"moveSpeed": 100,
|
||||
"animateSpeed": 300,
|
||||
"floorChangeTime": 800,
|
||||
"floorChangeTime": 800
|
||||
},
|
||||
"flags": {
|
||||
"enableFloor": true,
|
||||
|
||||
34
styles.css
34
styles.css
@ -21,7 +21,7 @@
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 320;
|
||||
z-index: 370;
|
||||
}
|
||||
|
||||
#startPanel {
|
||||
@ -32,7 +32,7 @@
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
z-index: 250;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
#startTop {
|
||||
@ -42,7 +42,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #000;
|
||||
z-index: 300;
|
||||
z-index: 350;
|
||||
}
|
||||
|
||||
#startTopProgressBar {
|
||||
@ -77,12 +77,12 @@
|
||||
height: 100%;
|
||||
width: auto;
|
||||
transform:translate(-50%,-50%);
|
||||
z-index: 210;
|
||||
z-index: 260;
|
||||
}
|
||||
|
||||
#startLogo {
|
||||
position: absolute;
|
||||
z-index: 240;
|
||||
z-index: 290;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
#startTitle {
|
||||
position: absolute;
|
||||
z-index: 230;
|
||||
z-index: 280;
|
||||
}
|
||||
|
||||
#startButtonGroup {
|
||||
@ -106,7 +106,7 @@
|
||||
background-color: #000;
|
||||
opacity: 0.85;
|
||||
display: none;
|
||||
z-index: 260;
|
||||
z-index: 310;
|
||||
bottom: 0;
|
||||
margin-bottom: 7%;
|
||||
}
|
||||
@ -142,7 +142,7 @@
|
||||
display: none;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
z-index: 180;
|
||||
z-index: 230;
|
||||
}
|
||||
|
||||
#logoLabel {
|
||||
@ -170,7 +170,7 @@
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
background: url(project/images/ground.png) repeat;
|
||||
z-index: 135;
|
||||
z-index: 185;
|
||||
display: none;
|
||||
}
|
||||
#statusBar .status{
|
||||
@ -200,7 +200,7 @@
|
||||
#toolBar {
|
||||
position: absolute;
|
||||
background: url(project/images/ground.png) repeat;
|
||||
z-index: 160;
|
||||
z-index: 210;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -255,7 +255,7 @@ p#name {
|
||||
position: absolute;
|
||||
background: #000000;
|
||||
overflow: hidden;
|
||||
z-index: 135;
|
||||
z-index: 185;
|
||||
}
|
||||
|
||||
#bg {
|
||||
@ -298,16 +298,16 @@ p#name {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#image {
|
||||
z-index: 105;
|
||||
}
|
||||
|
||||
#ui {
|
||||
z-index: 110;
|
||||
z-index: 160;
|
||||
}
|
||||
|
||||
#data {
|
||||
z-index: 120;
|
||||
z-index: 170;
|
||||
}
|
||||
|
||||
#dymCanvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user