Twine学习笔记2：进阶操作

上一篇学习笔记总结了Twine的基础操作，这篇主要记录一些进阶的操作。使用的是默认的Harlowe 2.1.0格式。

设置文本格式

对齐格式

可以通过编辑故事样式表设置文字的对齐方式，语法是css。

比如设置为特定的tag的片段文字居中：

tag可以在片段中添加：

文字间距

文字间距同样通过故事样式表设置，比如下面就是吧文字间距设置为15像素。

文本文字颜色

可如下设置为红色：

当然也可以用16进制颜色，可以在这个网站取色：https://htmlcolorcodes.com/zh/

链接文字颜色

可以用以下css代码设置（不截图了），反正就是一般的css就是了：

tw-link { color:green; }

另外如下可设置链接被光标覆盖时的颜色：

.enchantment-link:hover, tw-link:hover { color: red; }

链接就是之前用双中括号写的文字，如下的“第三页”：

设置字体

如下可以将字体设置为arial：

tw-passage {    font-family: arial; }

设置字体大小

tw-passage {   
 text-align: left;  /*对齐方式*/
 font-size: 4vh;    /*视窗高度的百分比*/
 font-size: 4vw;    /*视窗宽度的百分比*/
 font-size: 4vmin;  /*当前vw和v中较小的一个值*/
 line-height: normal; /*设置合理的行间距*/
}

添加图片

如下代码可以添加图片：

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564072952285&di=b85baf61e7d63ecc000af7c9178a7fb8&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F3b54501f5b3daca771001a2bcc93fbae78662d62.png"> 

其实就是一般的html，要调整大小可以这样写：

要添加背景图片可以如下编辑故事样式表：

可以看见同样可以通过tag来指定特定的片段，效果如图：

添加保存与读取按钮

可以在片段中用如下代码添加保存按钮：

(link: "save")[(save-game: "file A")]

然后在另一个片段中用如下代码添加读取按钮：

(link: "load")[(load-game: "file A")]

当你按下保存按钮之后，再之后的某个片段按下读取按钮，就会回到保存的地方。

设置工具条

默认的时候可以看到左边有一个可以返回的工具条：

如下编辑故事样式表可以隐藏工具条：

tw-sidebar { visibility: hidden }

或者干脆删除掉：

tw-sidebar tw-icon.redo {
 display: none; 
}
tw-sidebar tw-icon.undo { 
display: none; 
}

添加音乐

添加背景音乐

可以通过故事JavaScript编辑器添加背景音乐：

添加音效

可以在片段中加入如下html代码插入音效：

html看不懂的查查语法就知道了：http://www.w3school.com.cn/tags/tag_audio.asp