From b76f194aac83d60dfe682b75f26f1268e4c0f664 Mon Sep 17 00:00:00 2001 From: fux4 Date: Wed, 28 Nov 2018 16:22:20 +0800 Subject: [PATCH] windowskin! --- libs/ui.js | 134 ++++++++++++++++++++++++++----------- project/data.js | 3 +- project/images/winskin.png | Bin 0 -> 6242 bytes 3 files changed, 98 insertions(+), 39 deletions(-) create mode 100644 project/images/winskin.png diff --git a/libs/ui.js b/libs/ui.js index 444cc561..a4a8d108 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -344,6 +344,54 @@ ui.prototype.getTitleAndIcon = function (content) { }; } +// 绘制选择光标 +ui.prototype.drawWindowSelector = function(x,y,w,h) { + var srcImage = core.material.images.images['winskin.png']; + var dstImage = core.canvas.ui; + + // back + dstImage.drawImage(srcImage,130,66,28,28,x+2,y+2,w-4,h-4); + // corner + dstImage.drawImage(srcImage,128,64,2,2,x,y,2,2); + dstImage.drawImage(srcImage,158,64,2,2,x+w-2,y,2,2); + dstImage.drawImage(srcImage,128,94,2,2,x,y+h-2,2,2); + dstImage.drawImage(srcImage,158,94,2,2,x+w-2,y+h-2,2,2); + // border + dstImage.drawImage(srcImage,130,64,28,2,x+2,y,w-4,2); + dstImage.drawImage(srcImage,130,94,28,2,x+2,y+h-2,w-4,2); + dstImage.drawImage(srcImage,128,66,2,28,x,y+2,2,h-4); + dstImage.drawImage(srcImage,158,66,2,28,x+w-2,y+2,2,h-4); +} + +// 绘制皮肤 +ui.prototype.drawWindowSkin = function(x,y,w,h,direction,px,py) { + // 仿RM窗口皮肤 ↓ + var srcImage = core.material.images.images['winskin.png']; + var dstImage = core.canvas.ui; + + // back + dstImage.drawImage(srcImage,0,0,128,128,x+1,y+1,w-2,h-2); + // corner + dstImage.drawImage(srcImage,128,0,16,16,x,y,16,16); + dstImage.drawImage(srcImage,176,0,16,16,x+w-16,y,16,16); + dstImage.drawImage(srcImage,128,48,16,16,x,y+h-16,16,16); + dstImage.drawImage(srcImage,176,48,16,16,x+w-16,y+h-16,16,16); + // border + dstImage.drawImage(srcImage,144,0,32,16,x+16,y,w-32,16); + dstImage.drawImage(srcImage,144,48,32,16,x+16,y+h-16,w-32,16); + dstImage.drawImage(srcImage,128,16,16,32,x,y+16,16,h-32); + dstImage.drawImage(srcImage,176,16,16,32,x+w-16,y+16,16,h-32); + // arrow + if(core.isset(px) && core.isset(py)){ + if(direction == 'up'){ + dstImage.drawImage(srcImage,128,96,32,32,px,y+h-3,32,32); + }else if(direction == 'down') { + dstImage.drawImage(srcImage,160,96,32,32,px,y-29,32,32); + } + } + // 仿RM窗口皮肤 ↑ +} + ////// 绘制一个对话框 ////// ui.prototype.drawTextBox = function(content, showAll) { @@ -439,49 +487,54 @@ ui.prototype.drawTextBox = function(content, showAll) { top = 32 * py + 32 + yoffset; } + var width = right - left; + + core.setAlpha('ui', 0.85); + this.drawWindowSkin(left,top,width,height,position,px*32,py*32); + core.setAlpha('ui', 1); + // var left = 97, top = 64, right = 416 - 2 * left, bottom = 416 - 2 * top; //core.setAlpha('ui', 0.85); var borderColor = main.borderColor||"#FFFFFF"; - core.setAlpha('ui', textAttribute.background[3]); - core.setFillStyle('ui', core.arrayToRGB(textAttribute.background)); - core.setStrokeStyle('ui', borderColor); + // core.setFillStyle('ui', core.arrayToRGB(textAttribute.background)); + // core.setStrokeStyle('ui', borderColor); - core.fillRect('ui', left, top, right, height); - core.strokeRect('ui', left - 1, top - 1, right + 1, height + 1, borderColor, 2); + // core.fillRect('ui', left, top, right, height); + // core.strokeRect('ui', left - 1, top - 1, right + 1, height + 1, borderColor, 2); - var xoffset = 10; + // var xoffset = 10; - // draw triangle - if (position=='up' && core.isset(px) && core.isset(py)) { - core.canvas.ui.clearRect(32*px+xoffset, top+height-1, 32-2*xoffset, 2); - core.canvas.ui.beginPath(); - core.canvas.ui.moveTo(32*px+xoffset-1, top+height-1); - core.canvas.ui.lineTo(32*px+16, top+height+yoffset-2); - core.canvas.ui.lineTo(32*px+32-xoffset+1, top+height-1); - core.canvas.ui.moveTo(32*px+xoffset-1, top+height-1); - core.canvas.ui.closePath(); - core.canvas.ui.fill(); - // core.canvas.ui.stroke(); - // core.drawLine('ui', 32*px+4+1, top+height+1, 32*px + 28-1, top+height+1, core.arrayToRGB(textAttribute.background), 3); - core.drawLine('ui', 32*px+xoffset, top+height, 32*px+16, top+height+yoffset-2); - core.drawLine('ui', 32*px+32-xoffset, top+height, 32*px+16, top+height+yoffset-2); - } - if (position=='down' && core.isset(px) && core.isset(py)) { - core.canvas.ui.clearRect(32*px+xoffset, top-2, 32-2*xoffset, 3); - core.canvas.ui.beginPath(); - core.canvas.ui.moveTo(32*px+xoffset-1, top+1); - core.canvas.ui.lineTo(32*px+16-1, top-yoffset+2); - core.canvas.ui.lineTo(32*px+32-xoffset-1, top+1); - core.canvas.ui.moveTo(32*px+xoffset-1, top+1); - core.canvas.ui.closePath(); - core.canvas.ui.fill(); - // core.canvas.ui.stroke(); - // core.drawLine('ui', 32*px+4+1, top+height+1, 32*px + 28-1, top+height+1, core.arrayToRGB(textAttribute.background), 3); - core.drawLine('ui', 32*px+xoffset, top, 32*px+16, top-yoffset+2); - core.drawLine('ui', 32*px+32-xoffset, top, 32*px+16, top-yoffset+2); - } + // // draw triangle + // if (position=='up' && core.isset(px) && core.isset(py)) { + // core.canvas.ui.clearRect(32*px+xoffset, top+height-1, 32-2*xoffset, 2); + // core.canvas.ui.beginPath(); + // core.canvas.ui.moveTo(32*px+xoffset-1, top+height-1); + // core.canvas.ui.lineTo(32*px+16, top+height+yoffset-2); + // core.canvas.ui.lineTo(32*px+32-xoffset+1, top+height-1); + // core.canvas.ui.moveTo(32*px+xoffset-1, top+height-1); + // core.canvas.ui.closePath(); + // core.canvas.ui.fill(); + // // core.canvas.ui.stroke(); + // // core.drawLine('ui', 32*px+4+1, top+height+1, 32*px + 28-1, top+height+1, core.arrayToRGB(textAttribute.background), 3); + // core.drawLine('ui', 32*px+xoffset, top+height, 32*px+16, top+height+yoffset-2); + // core.drawLine('ui', 32*px+32-xoffset, top+height, 32*px+16, top+height+yoffset-2); + // } + // if (position=='down' && core.isset(px) && core.isset(py)) { + // core.canvas.ui.clearRect(32*px+xoffset, top-2, 32-2*xoffset, 3); + // core.canvas.ui.beginPath(); + // core.canvas.ui.moveTo(32*px+xoffset-1, top+1); + // core.canvas.ui.lineTo(32*px+16-1, top-yoffset+2); + // core.canvas.ui.lineTo(32*px+32-xoffset-1, top+1); + // core.canvas.ui.moveTo(32*px+xoffset-1, top+1); + // core.canvas.ui.closePath(); + // core.canvas.ui.fill(); + // // core.canvas.ui.stroke(); + // // core.drawLine('ui', 32*px+4+1, top+height+1, 32*px + 28-1, top+height+1, core.arrayToRGB(textAttribute.background), 3); + // core.drawLine('ui', 32*px+xoffset, top, 32*px+16, top-yoffset+2); + // core.drawLine('ui', 32*px+32-xoffset, top, 32*px+16, top-yoffset+2); + // } // 名称 @@ -646,8 +699,12 @@ ui.prototype.drawChoices = function(content, choices) { var borderColor = main.borderColor||"#FFFFFF"; - core.fillRect('ui', left, top, width, height, background); - core.strokeRect('ui', left - 1, top - 1, width + 1, height + 1, borderColor, 2); + core.setAlpha('ui', 0.85); + this.drawWindowSkin(left,top,width,height); + core.setAlpha('ui', 1); + + // core.fillRect('ui', left, top, width, height, background); + // core.strokeRect('ui', left - 1, top - 1, width + 1, height + 1, borderColor, 2); // 如果有内容 if (core.isset(contents)) { @@ -708,7 +765,8 @@ ui.prototype.drawChoices = function(content, choices) { while (core.status.event.selection<0) core.status.event.selection+=choices.length; 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; - core.strokeRect('ui', 208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28, "#FFD700", 2); + // core.strokeRect('ui', 208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28, "#FFD700", 2); + this.drawWindowSelector(208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28); } return; } diff --git a/project/data.js b/project/data.js index 072fa120..ba432862 100644 --- a/project/data.js +++ b/project/data.js @@ -9,7 +9,8 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "MT0" ], "images": [ - "bg.jpg" + "bg.jpg", + "winskin.png" ], "tilesets": [], "animates": [ diff --git a/project/images/winskin.png b/project/images/winskin.png new file mode 100644 index 0000000000000000000000000000000000000000..f3144531b9b8ae8f65fbe4c147df617005b4d1f3 GIT binary patch literal 6242 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 Qe&YZGox8WHv>cxPAH(q*dH?_b literal 0 HcmV?d00001