drawTextBox next

editor-mobile.html

@@ -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'>

editor.html

@@ -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'>

index.html

@@ -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'>

libs/control.js

@@ -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) {

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;

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 = [

styles.css

@@ -160,8 +160,7 @@
 }
 
 .onChoiceAnimate {
-    animation: 2s ease-in-out 0s infinite normal none running;
+    animation: onChoice 2s ease-in-out 0s infinite normal none running;
-    animation-name: onChoice;
 }
 
 #floorMsgGroup {
@@ -382,8 +381,7 @@ p#name {
 }
 
 #_selector, #_uievent_selector {
-    animation: 2s ease-in-out 0s infinite normal none running;
+    animation: selector 2s ease-in-out 0s infinite normal none running;
-    animation-name: selector;
 }
 
 @-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);
+    }
+}