Arrow BBCode与CSS样式：创建精美视觉叙事的10个技巧

Arrow BBCode与CSS样式：创建精美视觉叙事的10个技巧

【免费下载链接】ArrowGame Narrative Design Tool项目地址: https://gitcode.com/gh_mirrors/arrow/Arrow

Arrow是一款强大的Game Narrative Design Tool，它提供了丰富的BBCode标签和CSS样式定制功能，帮助开发者打造引人入胜的游戏叙事体验。本文将分享10个实用技巧，让你轻松掌握Arrow的视觉叙事设计能力。

1. 掌握基础BBCode标签

Arrow的HTML-JS运行时支持多种基础BBCode标签，包括[b]、[i]、[u]、[h1-6]、[color]、[size]、[img]、[url]和[p]等。这些标签可以直接在内容节点中使用，快速实现文本格式化。

例如，使用[h2]标签创建小标题，[b]和[i]标签强调关键内容：

[h2]任务目标[/h2] 你需要[b]收集[/b]所有[i]古老卷轴[/i]以解锁秘密通道。

2. 使用自定义[attr]标签增强样式控制

Arrow提供了独特的[attr]自定义BBCode标签，允许你为HTML元素添加数据属性，从而实现更精细的样式控制。这是结合BBCode和CSS的强大方式。

使用方法示例：

[attr=data-place value=home]看看这个地方！[/attr]

这将生成以下HTML：

<span>[data-place="home"] { color: green; background-color: #f5f5f5; padding: 2px 5px; border-radius: 3px; }

3. 利用[style]标签实现快速内联样式

对于需要快速应用样式的场景，Arrow的[style]标签允许你直接添加内联CSS样式。这在快速迭代或不想修改CSS文件时特别有用。

使用示例：

我是一只勇敢的[style=font-size:3rem; font-weight:bold; color:brown;]大[/style]熊！

生成的HTML将包含内联样式：

我是一只勇敢的<span style="font-size:3rem; font-weight:bold; color:brown;">大</span>熊！

4. 了解CSS样式文件结构

Arrow的HTML-JS运行时使用arrow.css文件进行样式定义。你可以在runtimes/html-js/arrow.css找到这个文件，其中包含了各种样式占位块和辅助类。

要自定义节点类型的样式，可以直接编辑arrow.css文件。例如，修改对话节点的样式：

.node[data-type="dialog"] { background-color: #f0f8ff; border-left: 4px solid #4a86e8; padding: 10px; margin-bottom: 15px; }

5. 使用数据属性进行高级样式定制

Arrow运行时会自动为HTML元素设置多种数据属性，可用于高级样式定制。这些属性包括：

• .node[data-name][data-type][data-uid][data-played='true|false']- 所有节点通用
• #console[data-{variable-name}="{current-value}"]- 控制台变量
• #content[data-open-nodes="{node-names}"]- 打开的节点

例如，你可以根据节点类型和播放状态来设置不同样式：

.node[data-type="monolog"][data-played="true"] { opacity: 0.7; border-color: #cccccc; }

6. 定制角色对话样式

对于对话节点，Arrow提供了特殊的样式支持。你可以利用character-profile元素的data-name和data-tag-{key}属性来定制不同角色的对话样式。

在arrow.css中添加：

.character-profile[data-name="mage"] { color: #6a5acd; font-family: "Times New Roman", serif; } .character-profile[data-tag-class="warrior"] { color: #cd5c5c; font-weight: bold; }

7. 隐藏或显示已跳过的节点

默认情况下，Arrow会隐藏已跳过的节点。你可以通过修改arrow.css来改变这一行为，例如显示已跳过的节点但降低其不透明度：

首先移除或注释掉默认的隐藏样式：

/* 注释掉这部分 .node[data-played='true'][data-skipped='true'] { display: none; } */

然后添加新的样式：

.node[data-played='true'][data-skipped='true'] { opacity: 0.5; border: 1px dashed #999999; }

8. 自定义运行时界面元素

你可以通过修改arrow.css来自定义运行时的各种界面元素，如按钮、控制台和内容区域。

例如，修改"Back"按钮的样式：

#play-back { background-color: #4a86e8; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; } #play-back:hover { background-color: #3a76d8; }

9. 结合变量数据创建动态样式

Arrow运行时会将当前变量值作为数据属性添加到#console元素上，这使你可以根据游戏变量创建动态样式。

例如，如果有一个"health"变量，你可以这样使用：

#console[data-health="low"] { background-color: #fff0f0; } #console[data-health="high"] { background-color: #f0fff0; }

10. 构建自定义运行时模板

如果你需要将自定义样式应用到多个项目中，可以修改HTML-JS运行时的源文件并重建模板。这样，通过"Quick Export"导出的项目将自动包含你的样式定制。

1. 修改runtimes/html-js目录下的arrow.css和其他源文件
2. 在Arrow编辑器中激活"Auto Rebuild Runtime(s)"快速偏好设置
3. 导出项目时，Arrow会自动使用你的自定义模板

通过这些技巧，你可以充分利用Arrow的BBCode和CSS样式功能，创建出视觉吸引力强、叙事效果出色的游戏体验。无论是简单的文本格式化还是复杂的动态样式，Arrow都能满足你的设计需求。

记得查阅runtimes/html-js/readme.md获取更多关于运行时定制的详细信息，开始你的创意叙事设计之旅吧！

【免费下载链接】ArrowGame Narrative Design Tool项目地址: https://gitcode.com/gh_mirrors/arrow/Arrow