drawTextBox next
This commit is contained in:
oc
parent
0b5de8ccb1
commit
9491ab9287
@ -515,6 +515,7 @@
|
||||
<canvas class='gameCanvas' id='curtain' 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="next"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='inputDiv' style='display: none'>
|
||||
|
||||
@ -498,6 +498,7 @@
|
||||
<canvas class='gameCanvas' id='curtain' 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="next"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='inputDiv' style='display: none'>
|
||||
|
||||
@ -147,6 +147,7 @@
|
||||
<canvas class='gameCanvas' id='curtain' 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="next"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='inputDiv'>
|
||||
|
||||
@ -19,7 +19,6 @@ control.prototype._init = function () {
|
||||
this.registerAnimationFrame("totalTime", false, this._animationFrame_totalTime);
|
||||
this.registerAnimationFrame("autoSave", true, this._animationFrame_autoSave);
|
||||
this.registerAnimationFrame("globalAnimate", true, this._animationFrame_globalAnimate);
|
||||
//this.registerAnimationFrame("selector", false, this._animationFrame_selector);
|
||||
this.registerAnimationFrame("animate", true, this._animationFrame_animate);
|
||||
this.registerAnimationFrame("heroMoving", true, this._animationFrame_heroMoving);
|
||||
this.registerAnimationFrame("weather", true, this._animationFrame_weather);
|
||||
@ -151,23 +150,6 @@ control.prototype._animationFrame_globalAnimate = function (timestamp) {
|
||||
core.animateFrame.globalTime = timestamp;
|
||||
}
|
||||
|
||||
control.prototype._animationFrame_selector = function (timestamp) {
|
||||
if (timestamp - core.animateFrame.selectorTime <= 20) return;
|
||||
var opacity = null;
|
||||
if (core.dymCanvas._selector) opacity = parseFloat(core.dymCanvas._selector.canvas.style.opacity);
|
||||
else if (core.dymCanvas._uievent_selector) opacity = parseFloat(core.dymCanvas._uievent_selector.canvas.style.opacity);
|
||||
if (!core.isset(opacity)) return;
|
||||
if (core.animateFrame.selectorUp)
|
||||
opacity += 0.02;
|
||||
else
|
||||
opacity -= 0.02;
|
||||
if (opacity > 0.95 || opacity < 0.55)
|
||||
core.animateFrame.selectorUp = !core.animateFrame.selectorUp;
|
||||
core.setOpacity("_selector", opacity);
|
||||
core.setOpacity("_uievent_selector", opacity);
|
||||
core.animateFrame.selectorTime = timestamp;
|
||||
}
|
||||
|
||||
control.prototype._animationFrame_animate = function (timestamp) {
|
||||
if (timestamp - core.animateFrame.animateTime < 50 || !core.status.animateObjs || core.status.animateObjs.length == 0) return;
|
||||
core.clearMap('animate');
|
||||
@ -2648,6 +2630,11 @@ control.prototype._resize_canvas = function (obj) {
|
||||
canvas.style.left = parseFloat(canvas.getAttribute("_left")) * core.domStyle.scale + "px";
|
||||
canvas.style.top = parseFloat(canvas.getAttribute("_top")) * core.domStyle.scale + "px";
|
||||
}
|
||||
// resize next
|
||||
main.dom.next.style.width = main.dom.next.style.height = 5 * core.domStyle.scale + "px";
|
||||
main.dom.next.style.borderBottomWidth = main.dom.next.style.borderRightWidth = 4 * core.domStyle.scale + "px";
|
||||
|
||||
|
||||
}
|
||||
|
||||
control.prototype._resize_statusBar = function (obj) {
|
||||
|
||||
15
libs/ui.js
15
libs/ui.js
@ -452,6 +452,7 @@ ui.prototype.closePanel = function () {
|
||||
ui.prototype.clearUI = function () {
|
||||
core.status.boxAnimateObjs = [];
|
||||
if (core.dymCanvas._selector) core.deleteCanvas("_selector");
|
||||
main.dom.next.style.display = 'none';
|
||||
core.clearMap('ui');
|
||||
core.setAlpha('ui', 1);
|
||||
}
|
||||
@ -1117,10 +1118,20 @@ ui.prototype.drawTextBox = function(content, showAll) {
|
||||
var content_top = this._drawTextBox_drawTitleAndIcon(titleInfo, hPos, vPos, alpha);
|
||||
|
||||
// Step 5: 绘制正文
|
||||
return this.drawTextContent('ui', content, {
|
||||
var config = this.drawTextContent('ui', content, {
|
||||
left: hPos.content_left, top: content_top, maxWidth: hPos.validWidth,
|
||||
lineHeight: vPos.lineHeight, time: (showAll || textAttribute.time<=0 || core.status.event.id!='action')?0:textAttribute.time
|
||||
});
|
||||
|
||||
// Step 6: 绘制光标
|
||||
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 (pInfo.position == 'up' && pInfo.px != null && Math.abs(pInfo.px * 32 + 16 - left) < 50)
|
||||
left = hPos.right - 64;
|
||||
main.dom.next.style.left = left * core.domStyle.scale + "px";
|
||||
return config;
|
||||
}
|
||||
|
||||
ui.prototype._drawTextBox_drawImages = function (content) {
|
||||
@ -1168,7 +1179,7 @@ ui.prototype._drawTextBox_getHorizontalPosition = function (content, titleInfo,
|
||||
ui.prototype._drawTextBox_getVerticalPosition = function (content, titleInfo, posInfo, validWidth) {
|
||||
var textAttribute = core.status.textAttribute || core.initStatus.textAttribute;
|
||||
var lineHeight = textAttribute.textfont + 6;
|
||||
var height = 30 + this.getTextContentHeight(content, {
|
||||
var height = 45 + this.getTextContentHeight(content, {
|
||||
lineHeight: lineHeight, maxWidth: validWidth
|
||||
});
|
||||
if (titleInfo.title) height += textAttribute.titlefont + 5;
|
||||
|
||||
3
main.js
3
main.js
@ -74,7 +74,8 @@ function main() {
|
||||
'inputMessage': document.getElementById('inputMessage'),
|
||||
'inputBox': document.getElementById('inputBox'),
|
||||
'inputYes': document.getElementById('inputYes'),
|
||||
'inputNo': document.getElementById('inputNo')
|
||||
'inputNo': document.getElementById('inputNo'),
|
||||
'next': document.getElementById('next')
|
||||
};
|
||||
this.mode = 'play';
|
||||
this.loadList = [
|
||||
|
||||
34
styles.css
34
styles.css
@ -160,8 +160,7 @@
|
||||
}
|
||||
|
||||
.onChoiceAnimate {
|
||||
animation: 2s ease-in-out 0s infinite normal none running;
|
||||
animation-name: onChoice;
|
||||
animation: onChoice 2s ease-in-out 0s infinite normal none running;
|
||||
}
|
||||
|
||||
#floorMsgGroup {
|
||||
@ -382,8 +381,7 @@ p#name {
|
||||
}
|
||||
|
||||
#_selector, #_uievent_selector {
|
||||
animation: 2s ease-in-out 0s infinite normal none running;
|
||||
animation-name: selector;
|
||||
animation: selector 2s ease-in-out 0s infinite normal none running;
|
||||
}
|
||||
|
||||
@-webkit-keyframes selector {
|
||||
@ -398,3 +396,31 @@ p#name {
|
||||
100% { opacity: 0.95; }
|
||||
}
|
||||
|
||||
#next {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-right-width: 4px;
|
||||
border-right-style: solid;
|
||||
-webkit-animation: next .5s ease-in-out alternate infinite;
|
||||
animation: next .5s ease-in-out alternate infinite;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0.7;
|
||||
z-index: 169;
|
||||
}
|
||||
|
||||
@-webkit-keyframes next {
|
||||
100% {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
}
|
||||
}
|
||||
@keyframes next {
|
||||
100% {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user