Twine Games
[分享] SugarCube 2 - 打字机效果宏(支持选项显示和鼠标点击跳过)
垃圾作品，不要看了，新版本已更新2.0版本文字打印机点击即可跳转 
最近在制作文字游戏时需要打字机效果，研究了一下实现了一个支持选项显示和鼠标点击跳过的打字机效果宏，分享给大家。 
 
 
特性： 
- 打字机效果显示文字 
- 支持选项的延迟显示 
- 支持任意鼠标按键点击跳过 
- 打字完成后平滑显示选项 
- 使用简单，只需一个宏 
 
 
使用方法： 
将以下代码添加到你的 JavaScript 部分： 
 
 
[code] 
// 这里是JavaScript代码 
/* ---------分割线-----------文字打印js----------------- */ 
//使用方法： 
//<<typewriter 50>> 
//主要文字内容 
//<<choices>> 
//[[选项1->目标1]] 
//[[选项2->目标2]] 
//<</typewriter>> 
//50是打字速度(毫秒),可以调整 
setup.typewriter = (() => { 
let currentTyping = null; 
 
 
function typewriter(element, text, speed = 50, choiceElement = null) { 
if (currentTyping) { 
} 
 
 
element.textContent = ''; 
element.classList.add('typing'); 
 
const cursor = document.createElement('span'); 
cursor.className = 'cursor'; 
element.appendChild(cursor); 
 
let i = 0; 
let aborted = false; 
 
function handleSkip(e) { 
// 任意鼠标按键都可以触发跳过 
aborted = true; 
} 
document.addEventListener('mousedown', handleSkip); 
 
return new Promise(resolve => { 
currentTyping = { abort: false }; 
 
function type() { 
if (currentTyping.abort || aborted) { 
document.removeEventListener('mousedown', handleSkip); 
element.innerHTML = text; 
finish(); 
return; 
} 
 
 
if (i < text.length) { 
const char = text.charAt(i); 
if (char === '\n') { 
element.insertBefore(document.createElement('br'), cursor); 
} else { 
element.insertBefore(document.createTextNode(char), cursor); 
} 
i++; 
setTimeout(type, speed); 
} else { 
document.removeEventListener('mousedown', handleSkip); 
finish(); 
} 
} 
 
 
function finish() { 
cursor.remove(); 
if (choiceElement) { 
setTimeout(() => { 
choiceElement.style.display = 'block'; 
choiceElement.style.opacity = '1'; 
choiceElement.style.transform = 'translateY(0)'; 
}, 100); 
} 
resolve(); 
} 
 
 
type(); 
}); 
} 
 
 
return typewriter; 
})(); 
 
 
Macro.add('typewriter', { 
tags: ['choices'], 
handler: function() { 
if (!this.args[0]) { 
return this.error('No typing speed specified'); 
} 
 
 
const speed = this.args[0]; 
const $wrapper = $('<div/>').addClass('typewriter'); 
 
let $choices = null; 
 
if (this.payload[1]) { 
$choices = $('<div/>').addClass('choice-container').css({ 
'display': 'none', 
'opacity': '0', 
'transform': 'translateY(20px)', 
'transition': 'all 0.5s ease' 
}); 
 
$choices.wiki(this.payload[1].contents); 
} 
 
this.output.appendChild($wrapper[0]); 
if ($choices) { 
this.output.appendChild($choices[0]); 
} 
 
setup.typewriter($wrapper[0], this.payload[0].contents, speed, $choices ? $choices[0] : null); 
} 
}); 
/* ---------分割线-----------文字打印js----------------- */ 
[把上面的JavaScript代码放这里] 
[/code] 
 
 
CSS样式（添加到你的StyleSheet）: 
[code] 
.choice-container { 
opacity: 0; 
transform: translateY(20px); 
transition: all 0.5s ease; 
margin-top: 1rem; 
} 
 
 
.choice-container a { 
display: block; 
margin: 0.5rem 0; 
padding: 0.8rem 1.5rem; 
background: linear-gradient(45deg, #2a2a2a, #333); 
border: 1px solid #444; 
border-radius: 6px; 
color: #eee; 
text-decoration: none; 
transition: all 0.2s ease; 
} 
 
 
.choice-container a:hover { 
background: linear-gradient(45deg, #333, #3a3a3a); 
border-color: #555; 
transform: translateY(-2px); 
box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
} 
 
 
.typewriter { 
opacity: 0; 
min-height: 1em; 
} 
 
 
opacity: 1; 
} 
 
 
.cursor { 
display: inline-block; 
width: 2px; 
height: 1em; 
background-color: #fff; 
margin-left: 2px; 
animation: blink 1s step-end infinite; 
} 
 
 
@keyframes blink { 
0%, 100% { opacity: 1; } 
50% { opacity: 0; } 
} 
[/code] 
 
 
使用示例： 
[code] 
<<typewriter 50>> 
这里是要打字显示的文本内容... 
<<choices>> 
[[选项1->场景1]] 
[[选项2->场景2]] 
<</typewriter>> 
[/code] 
 
 
参数说明： 
- typewriter 后面的数字(50)是打字速度，数字越小越快 
- 文本会逐字显示 
- choices 标签中放置选项链接 
- 任意点击鼠标即可跳过打字效果 
 
 
注意事项： 
1. 确保代码放在正确的位置（JavaScript放在StoryScript，CSS放在StyleSheet） 
2. 选项样式可以根据自己的需求修改 
 
 
希望对大家有帮助！如有问题欢迎讨论。 
2024-11-14
浏览843
👀 | 代码分享
登录后评论
1
5