bdf1/tianta
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

style(dialog): modify talking dialog with title

Browse Source 
fix #1
This commit is contained in:
bdf1 2022-11-10 02:38:10 +13:00
parent 970b2824aa
commit c3fca29f6f
2 changed files with 93 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
project/floors/nandu.js
View File

@ -224,6 +224,18 @@ main.floors.nandu=
{ {
"type": "setText", "type": "setText",
"position": "down", "position": "down",
"title": [
255,
255,
255,
1
],
"text": [
255,
255,
255,
1
],
"background": "winskin2.png", "background": "winskin2.png",
"time": 20 "time": 20
}, },

81
project/plugins.js
View File

@ -356,6 +356,87 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
// 立刻移动 // 立刻移动
core.setAutoHeroMove(); core.setAutoHeroMove();
} }
////// 绘制一个对话框 //////
core.ui.drawTextBox = function (content, config) {
config = config || {};
this.clearUI();
content = core.replaceText(content);
let ctx = core.getContextByName(config.ctx || 'ui');
if (ctx && main.mode == 'play') {
core.createCanvas(ctx, 0, 0, core._PX_, core._PY_, 141);
ctx = core.getContextByName(ctx);
}
// Step 1: 获得标题信息和位置信息
var textAttribute = core.status.textAttribute;
var titleInfo = this._getTitleAndIcon(content);
var posInfo = this._getPosition(titleInfo.content);
if (posInfo.position != 'up' && posInfo.position != 'down') posInfo.px = posInfo.py = null;
if (!posInfo.position) posInfo.position = textAttribute.position;
content = this._drawTextBox_drawImages(posInfo.content, config.ctx);
if (config.pos) {
delete posInfo.px;
delete posInfo.py;
posInfo.pos = config.pos;
}
posInfo.ctx = ctx;
// Step 2: 计算对话框的矩形位置
var hPos = this._drawTextBox_getHorizontalPosition(content, titleInfo, posInfo);
var vPos = this._drawTextBox_getVerticalPosition(content, titleInfo, posInfo, hPos.validWidth);
posInfo.xoffset = hPos.xoffset;
posInfo.yoffset = vPos.yoffset - 4;
if (ctx && main.mode == 'play') {
ctx.canvas.setAttribute('_text_left', hPos.left);
ctx.canvas.setAttribute('_text_top', vPos.top);
}
// Step 3: 绘制背景图
var isWindowSkin = this.drawBackground(hPos.left, vPos.top, hPos.right, vPos.bottom, posInfo);
if (titleInfo.title) {
let titlefont = core.status.textAttribute.titlefont,
titleStyle = core.arrayToRGBA(core.status.textAttribute.title);
let tf = this._buildFont(titlefont, true),
width = this.calWidth(ctx, titleInfo.title, tf);
this.drawBackground(hPos.left, vPos.top - titlefont - 12, hPos.left + width + 30, vPos.top, posInfo);
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
core.fillText(ctx, titleInfo.title, hPos.left + (width + 30) / 2, vPos.top - (titlefont + 12) / 2, titleStyle, tf);
ctx.restore();
}
titleInfo.title = null;
var alpha = isWindowSkin ? this._drawWindowSkin_getOpacity() : textAttribute.background[3];
// Step 4: 绘制标题、头像、动画
var content_top = this._drawTextBox_drawTitleAndIcon(titleInfo, hPos, vPos, alpha, config.ctx);
// Step 5: 绘制正文
var config = this.drawTextContent(config.ctx || 'ui', content, {
left: hPos.content_left,
top: content_top,
maxWidth: hPos.validWidth,
lineHeight: vPos.lineHeight,
time: (config.showAll || config.async || textAttribute.time <= 0 || core.status.event.id != 'action') ? 0 : textAttribute.time
});
// Step 6: 绘制光标
if (main.mode == 'play') {
main.dom.next.style.display = 'block';
main.dom.next.style.borderRightColor = main.dom.next.style.borderBottomColor = core.arrayToRGB(textAttribute.text);
main.dom.next.style.top = (vPos.bottom - 20) * core.domStyle.scale + "px";
var left = (hPos.left + hPos.right) / 2;
if (posInfo.position == 'up' && !posInfo.noPeak && posInfo.px != null && Math.abs(posInfo.px * 32 + 16 - left) < 50)
left = hPos.right - 64;
main.dom.next.style.left = left * core.domStyle.scale + "px";
}
return config;
}
}, },
"drawLight": function () { "drawLight": function () {