Auto Text, Scroll Text
This commit is contained in:
ckcz123
parent
c02bd41fbb
commit
95ccc2574b
@ -53,6 +53,7 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
|
||||
* [x] 同一个点的多事件处理（做法详见文档）。
|
||||
* [x] 增加新地图后可以接档而不用重新开始。
|
||||
* [x] 增加可以接收用户输入的事件(type:input)。
|
||||
* [x] 滚动字幕；自动剧情文本。
|
||||
* [x] 可以同时show/hide多个事件。
|
||||
* [x] 现在可以支持滑冰和推箱子事件了。
|
||||
* [x] 地图中每个块的可通行方向控制（悬崖效果）。
|
||||
|
||||
@ -150,14 +150,14 @@
|
||||
|
||||
### text：显示一段文字（剧情）
|
||||
|
||||
使用`{"type": "text"}`可以显示一段文字。后面`"data"`可以指定文字内容。
|
||||
使用`{"type": "text"}`可以显示一段文字。后面`"text"`可以指定文字内容。
|
||||
|
||||
``` js
|
||||
"events": { // 该楼的所有可能事件列表
|
||||
// 如果大括号里只有"data"项(没有"action"或"enable")，则可以省略到只剩下中括号
|
||||
"x,y": [ // 实际执行的事件列表
|
||||
{"type": "text", "data": "在界面上的一段文字"}, // 显示文字事件
|
||||
{"type": "text", "data": "这是第二段文字"}, // 显示第二个文字事件
|
||||
{"type": "text", "text": "在界面上的一段文字"}, // 显示文字事件
|
||||
{"type": "text", "text": "这是第二段文字"}, // 显示第二个文字事件
|
||||
// ...
|
||||
// 按顺序写事件，直到结束
|
||||
]
|
||||
@ -171,7 +171,7 @@
|
||||
// 如果大括号里只有"data"项(没有"action"或"enable")，则可以省略到只剩下中括号
|
||||
"x,y": [ // 实际执行的事件列表
|
||||
"在界面上的一段文字",// 直接简写，和下面写法完全等价
|
||||
{"type": "text", "data": "这是第二段文字"}, // 显示第二个文字事件
|
||||
{"type": "text", "text": "这是第二段文字"}, // 显示第二个文字事件
|
||||
// ...
|
||||
// 按顺序写事件，直到结束
|
||||
]
|
||||
@ -261,26 +261,49 @@
|
||||
|
||||
|
||||
|
||||
### autoText：自动剧情文本
|
||||
|
||||
使用`{"type": "autoText"}`可以使用剧情文本。
|
||||
|
||||
``` js
|
||||
"x,y": [ // 实际执行的事件列表
|
||||
{"type": "autoText", "text": "一段自动显示的剧情文字", "time": 5000}
|
||||
]
|
||||
```
|
||||
|
||||
text为文本正文内容，和上面的写法完全一致。
|
||||
|
||||
time为可选项，代表该自动文本的时间。可以不指定，不指定默认为3000毫秒。
|
||||
|
||||
用户无法跳过自动剧情文本，只能等待time时间结束后自动过。
|
||||
|
||||
回放录像时将忽略自动剧情文本的显示。
|
||||
|
||||
!> 由于用户无法跳过自动剧情文本，因此对于大段剧情文本请自行添加“是否跳过剧情”的提示，否则可能会非常不友好。
|
||||
|
||||
### setText：设置剧情文本的属性
|
||||
|
||||
使用`{"type": "setText"}`可以设置剧情文本的各项属性。
|
||||
|
||||
``` js
|
||||
"x,y": [ // 实际执行的事件列表
|
||||
{"type": "setText", "position": "up", "title": [255,0,0], "text": [255,255,0], "background": [0,0,255,0.3], "bold": true},
|
||||
"这段话将显示在上方，标题为红色，正文为黄色粗体，背景为透明度0.3的蓝色"
|
||||
{"type": "setText", "title": [255,0,0], "text": [255,255,0], "background": [0,0,255,0.3]},
|
||||
{"type": "setText", "position": "up", "bold": true, "scroll": 70},
|
||||
"这段话将显示在上方，标题为红色，正文为黄色粗体，背景为透明度0.3的蓝色，70毫秒速度滚动"
|
||||
]
|
||||
```
|
||||
|
||||
position为可选项，表示设置文字显示位置。只能为up（上），center（中）和down（下）三者。
|
||||
title为可选项，如果设置则为一个RGB三元组或RGBA四元组，表示标题（名字）颜色。 默认值：`[255,215,0,1]`
|
||||
|
||||
title为可选项，如果设置则为一个RGB三元组或RGBA四元组，表示标题（名字）颜色。
|
||||
text为可选项，如果设置则为一个RGB三元组或RGBA四元组，表示正文颜色。 默认值：`[255,255,255,1]`
|
||||
|
||||
text为可选项，如果设置则为一个RGB三元组或RGBA四元组，表示正文颜色。
|
||||
background为可选项，如果设置则为一个RGB三元组或RGBA四元组，表示背景色。 默认值：`[0,0,0,0.85]`
|
||||
|
||||
background为可选项，如果设置则为一个RGB三元组或RGBA四元组，表示背景色。
|
||||
position为可选项，表示设置文字显示位置。只能为up（上），center（中）和down（下）三者。 默认值： `center`
|
||||
|
||||
bold为可选项，如果设置则为true或false，表示正文是否使用粗体。
|
||||
bold为可选项，如果设置则为true或false，表示正文是否使用粗体。 默认值：`false`
|
||||
|
||||
scroll为可选项，表示文字滚动的速度。若此项设置为0将直接全部显示，若大于0则会设置为相邻字符依次显示的时间间隔。 默认值：`50`
|
||||
|
||||
### tip：显示一段提示文字
|
||||
|
||||
|
||||
@ -124,6 +124,7 @@ function core() {
|
||||
'data': null,
|
||||
'selection': null,
|
||||
'ui': null,
|
||||
'interval': null,
|
||||
},
|
||||
'textAttribute': {
|
||||
'position': "center",
|
||||
@ -131,6 +132,7 @@ function core() {
|
||||
"background": [0,0,0,0.85],
|
||||
"text": [255,255,255,1],
|
||||
"bold": false,
|
||||
"scroll": 50,
|
||||
},
|
||||
'curtainColor': null,
|
||||
'usingCenterFly':false,
|
||||
|
||||
@ -266,6 +266,8 @@ events.prototype.doEvents = function (list, x, y, callback) {
|
||||
events.prototype.doAction = function() {
|
||||
// 清空boxAnimate和UI层
|
||||
core.status.boxAnimateObjs = [];
|
||||
clearInterval(core.status.event.interval);
|
||||
|
||||
core.clearMap('ui', 0, 0, 416, 416);
|
||||
core.setAlpha('ui', 1.0);
|
||||
|
||||
@ -301,7 +303,17 @@ events.prototype.doAction = function() {
|
||||
if (core.status.replay.replaying)
|
||||
core.events.doAction();
|
||||
else
|
||||
core.ui.drawTextBox(data.data);
|
||||
core.ui.drawTextBox(data.text);
|
||||
break;
|
||||
case "autoText":
|
||||
if (core.status.replay.replaying)
|
||||
core.events.doAction();
|
||||
else {
|
||||
core.ui.drawTextBox(data.text);
|
||||
setTimeout(function () {
|
||||
core.events.doAction();
|
||||
}, data.time || 3000);
|
||||
}
|
||||
break;
|
||||
case "setText": // 设置文本状态
|
||||
if (data.position=='up'||data.position=='down'||data.position=='center') {
|
||||
@ -316,6 +328,9 @@ events.prototype.doAction = function() {
|
||||
if (core.isset(data.bold)) {
|
||||
core.status.textAttribute.bold=data.bold;
|
||||
}
|
||||
if (core.isset(data.scroll)) {
|
||||
core.status.textAttribute.scroll=data.scroll;
|
||||
}
|
||||
core.events.doAction();
|
||||
break;
|
||||
case "tip":
|
||||
|
||||
59
libs/ui.js
59
libs/ui.js
@ -15,6 +15,7 @@ main.instance.ui = new ui();
|
||||
////// 结束一切事件和绘制，关闭UI窗口，返回游戏进程 //////
|
||||
ui.prototype.closePanel = function () {
|
||||
core.status.boxAnimateObjs = [];
|
||||
clearInterval(core.status.event.interval);
|
||||
core.clearMap('ui', 0, 0, 416, 416);
|
||||
core.setAlpha('ui', 1.0);
|
||||
core.unLockControl();
|
||||
@ -22,11 +23,14 @@ ui.prototype.closePanel = function () {
|
||||
core.status.event.id = null;
|
||||
core.status.event.selection = null;
|
||||
core.status.event.ui = null;
|
||||
core.status.event.interval = null;
|
||||
}
|
||||
|
||||
////// 绘制一个对话框 //////
|
||||
ui.prototype.drawTextBox = function(content) {
|
||||
|
||||
clearInterval(core.status.event.interval);
|
||||
|
||||
// 获得name, image, icon
|
||||
var id=null, name=null, image=null, icon=null;
|
||||
if (content.indexOf("\t[")==0 || content.indexOf("\\t[")==0) {
|
||||
@ -97,13 +101,6 @@ ui.prototype.drawTextBox = function(content) {
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
if (ss.length==3) {
|
||||
px=parseInt(ss[1]);
|
||||
py=parseInt(ss[2]);
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,7 +128,7 @@ ui.prototype.drawTextBox = function(content) {
|
||||
|
||||
var top;
|
||||
if (position=='center') {
|
||||
top = (416 - height) / 2;
|
||||
top = parseInt((416 - height) / 2);
|
||||
}
|
||||
else if (position=='up') {
|
||||
if (px==null || py==null) {
|
||||
@ -227,15 +224,37 @@ ui.prototype.drawTextBox = function(content) {
|
||||
}
|
||||
}
|
||||
|
||||
core.setAlpha('ui', textAttribute.text[3]);
|
||||
core.setFillStyle('ui', core.arrayToRGB(textAttribute.text));
|
||||
|
||||
for (var i=0;i<contents.length;i++) {
|
||||
core.fillText('ui', contents[i], content_left, content_top, null, font);
|
||||
content_top+=21;
|
||||
var drawContent = function (content) {
|
||||
|
||||
core.clearMap("ui", content_left, content_top - 18, validWidth, top + height - content_top + 10);
|
||||
core.setAlpha('ui', textAttribute.background[3]);
|
||||
core.setFillStyle('ui', core.arrayToRGB(textAttribute.background));
|
||||
core.fillRect("ui", content_left, content_top - 18, validWidth, top + height - content_top + 10);
|
||||
|
||||
core.setAlpha('ui', textAttribute.text[3]);
|
||||
core.setFillStyle('ui', core.arrayToRGB(textAttribute.text));
|
||||
var contents = core.splitLines("ui", content, validWidth, font);
|
||||
|
||||
for (var i=0;i<contents.length;i++) {
|
||||
core.fillText('ui', contents[i], content_left, content_top + 21*i, null, font);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (textAttribute.scroll<=0 || core.status.event.id!='action') {
|
||||
drawContent(content);
|
||||
}
|
||||
else {
|
||||
var index=0;
|
||||
core.status.event.interval = setInterval(function () {
|
||||
drawContent(content.substring(0, ++index));
|
||||
if (index==content.length) {
|
||||
clearInterval(core.status.event.interval);
|
||||
}
|
||||
}, textAttribute.scroll);
|
||||
}
|
||||
|
||||
// core.fillText('ui', '<点击任意位置继续>', 270, top+height-13, '#CCCCCC', '13px Verdana');
|
||||
}
|
||||
|
||||
////// 绘制一个选项界面 //////
|
||||
@ -400,7 +419,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) {
|
||||
max_length = Math.max(max_length, core.canvas.ui.measureText(contents[i]).width);
|
||||
}
|
||||
|
||||
var left = Math.min(208 - 40 - max_length / 2, 100);
|
||||
var left = Math.min(208 - 40 - parseInt(max_length / 2), 100);
|
||||
var top = 140 - (lines-1)*30;
|
||||
var right = 416 - 2 * left, bottom = 416 - 140 - top;
|
||||
|
||||
@ -418,10 +437,10 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) {
|
||||
|
||||
var len=core.canvas.ui.measureText("确定").width;
|
||||
if (core.status.event.selection==0) {
|
||||
core.strokeRect('ui', 208-38-len/2-5, top+bottom-35-20, len+10, 28, "#FFD700", 2);
|
||||
core.strokeRect('ui', 208-38-parseInt(len/2)-5, top+bottom-35-20, len+10, 28, "#FFD700", 2);
|
||||
}
|
||||
if (core.status.event.selection==1) {
|
||||
core.strokeRect('ui', 208+38-len/2-5, top+bottom-35-20, len+10, 28, "#FFD700", 2);
|
||||
core.strokeRect('ui', 208+38-parseInt(len/2)-5, top+bottom-35-20, len+10, 28, "#FFD700", 2);
|
||||
}
|
||||
|
||||
}
|
||||
@ -776,7 +795,7 @@ ui.prototype.drawWaiting = function(text) {
|
||||
var text_length = core.canvas.ui.measureText(text).width;
|
||||
|
||||
var right = Math.max(text_length+50, 220);
|
||||
var left = 208-right/2, top = 208 - 32 - 16, bottom = 416 - 2 * top;
|
||||
var left = 208-parseInt(right/2), top = 208 - 32 - 16, bottom = 416 - 2 * top;
|
||||
|
||||
core.fillRect('ui', left, top, right, bottom, background);
|
||||
core.strokeRect('ui', left - 1, top - 1, right + 1, bottom + 1, '#FFFFFF', 2);
|
||||
@ -822,7 +841,7 @@ ui.prototype.drawPagination = function (page, totalPage) {
|
||||
var length = core.canvas.ui.measureText(page + " / " + page).width;
|
||||
|
||||
core.canvas.ui.textAlign = 'left';
|
||||
core.fillText('ui', page + " / " + totalPage, (416 - length) / 2, 403);
|
||||
core.fillText('ui', page + " / " + totalPage, parseInt((416 - length) / 2), 403);
|
||||
|
||||
core.canvas.ui.textAlign = 'center';
|
||||
if (page > 1)
|
||||
@ -1231,7 +1250,7 @@ ui.prototype.drawSLPanel = function(index) {
|
||||
core.setAlpha('ui', 1);
|
||||
core.canvas.ui.textAlign = 'center';
|
||||
|
||||
var u=416/6, size=117;
|
||||
var u=416/6, size=118;
|
||||
|
||||
var name=core.status.event.id=='save'?"存档":"读档";
|
||||
for (var i=0;i<6;i++) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user