Ren'Py 视觉特效完全指南2026最新:字体描边发光+ATL动画+Transform变换实战
Ren’Py作为强大的视觉小说引擎,其文本渲染系统为开发者提供了丰富的字体控制和视觉表现能力。本文将系统性地介绍Ren’Py中的字体基础设置、颜色控制、特效实现以及动态变化效果,帮助开发者创建更具视觉吸引力的文本内容。
1. 字体基础设置
1.1 字体文件导入与配置
在Ren’Py中,字体管理主要通过 gui.text_font 和 gui.name_text_font 等配置项实现。首先需要将自定义字体文件放入游戏目录的 game 文件夹中。
# 在 options.rpy 文件中设置全局字体init python: # 设置对话文本字体 config.font_replacement_map["NotoSans-Regular.ttf"] = ("YourCustomFont.ttf", 0, 0)
# 设置UI文本字体 gui.text_font = "YourCustomFont.ttf" gui.name_text_font = "YourBoldFont.ttf" gui.interface_text_font = "YourInterfaceFont.ttf"1.2 默认字体配置
Ren’Py提供了多层级的字体配置系统,可以根据不同界面元素设置不同的字体:
# 对话框字体设置define gui.text_font = "NotoSans-Regular.ttf"define gui.text_size = 22
# 角色名称字体设置define gui.name_text_font = "NotoSans-Bold.ttf"define gui.name_text_size = 30
# 菜单文本字体设置define gui.interface_text_font = "NotoSans-Medium.ttf"define gui.interface_text_size = 241.3 动态字体大小调整
在游戏中根据情境动态调整字体大小:
# 定义不同字体的样式style.small_text: font "NotoSans-Regular.ttf" size 16
style.normal_text: font "NotoSans-Regular.ttf" size 22
style.large_text: font "NotoSans-Regular.ttf" size 32
# 在脚本中使用label start: "你好!{size=+10}这是一段放大的文字{/size}" "正常大小的文字" "{size=-5}这是缩小的文字{/size}"2. 颜色控制技术
2.1 十六进制颜色代码应用
Ren’Py支持标准的十六进制颜色代码格式:
# 基础颜色设置define gui.text_color = "#FFFFFF" # 白色define gui.accent_color = "#FF6B6B" # 红色强调色
# 在文本中直接使用颜色标签label start: "这是{color=#FF0000}红色{/color}的文字" "这是{color=#00FF00}绿色{/color}的文字" "这是{color=#0000FF}蓝色{/color}的文字"2.2 RGBA颜色模式应用
对于需要透明度控制的场景,RGBA模式更为灵活:
# 定义带透明度的颜色init python: WHITE_ALPHA = "#FFFFFF80" # 50% 透明度的白色 RED_SOFT = "#FF000040" # 25% 透明度的红色
# 在文本中使用RGBA颜色label start: "这是{color=#FFFFFF80}半透明{/color}的白色文字" "这是{color=#FF000060}淡红色{/color}的文字"2.3 静态与动态颜色定义
静态颜色定义:
# 在styles.rpy中定义文本颜色样式style.important_text: color "#FF6B6B" bold True
style.warning_text: color "#FFA502" italic True
# 使用样式label start: "{style=important_text}重要提示:{/style}请注意看这里" "{style=warning_text}警告:{/style}操作不可逆"动态颜色变化:
# 定义动态颜色变化的函数init python: def rainbow_text(text): """创建彩虹渐变效果的文本""" colors = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#8B00FF"] result = "" for i, char in enumerate(text): color = colors[i % len(colors)] result += "{{color={}}}{ }{{/color}}".format(color, char) return result
# 在脚本中使用label start: $ rainbow_msg = rainbow_text("这是一个彩虹渐变的文本效果!") "[rainbow_msg]"3. 字体特效实现
3.1 描边效果(Outline)
描边效果是增强文本可读性的重要手段,特别在复杂背景下:
# 在styles.rpy中设置描边样式style.outlined_text: outlines [(2, "#000000", 1, 0)] # 宽度, 颜色, 强度, 偏移
style.double_outline: outlines [(3, "#000000", 2, 0), (1, "#FFFFFF", 1, 0)] # 双层描边
style.glow_outline: outlines [(4, "#FF6B6B", 3, 0), (2, "#FF6B6B", 2, 0), (1, "#FFFFFF", 1, 0)]
# 描边参数说明:# - 第一个数字:描边宽度(像素)# - 第二个参数:描边颜色(十六进制或颜色名)# - 第三个数字:描边强度/透明度(0-255)# - 第四个数字:描边偏移(像素,支持负值)
# 使用示例label start: "{style=outlined_text}带黑色描边的文字{/style}" "{style=double_outline}双层描边效果{/style}" "{style=glow_outline}发光描边效果{/style}"3.2 阴影效果(Shadow)
阴影效果为文本增加深度感:
# 定义不同类型的阴影效果style.shadow_text: color "#FFFFFF" drop_shadow [(2, 2, "#00000080", 2, 2)] # x偏移, y偏移, 颜色, 模糊, 距离
style.soft_shadow: color "#FFFFFF" drop_shadow [(4, 4, "#00000040", 4, 6)]
style.colored_shadow: color "#FFFFFF" drop_shadow [(3, 3, "#FF6B6B80", 3, 3)]
style.multiple_shadows: color "#FFFFFF" drop_shadow [(2, 2, "#00000080", 1, 2), (5, 5, "#FF6B6B40", 3, 5)]
# 阴影参数详解:# - x_offset: 水平阴影偏移,正数向右# - y_offset: 垂直阴影偏移,正数向下# - color: 阴影颜色,支持透明度# - blur: 模糊半径,值越大越柔和# - spread: 阴影扩散距离
label start: "{style=shadow_text}带阴影的文字效果{/style}" "{style=soft_shadow}柔和阴影效果{/style}" "{style=colored_shadow}彩色阴影效果{/style}" "{style=multiple_shadows}多层阴影效果{/style}"3.3 发光效果(Glow)
发光效果通过多层描边和阴影组合实现:
# 内发光效果style.inner_glow: color "#FFFFFF" outlines [(2, "#FFFFFF", 255, 0), (4, "#FFD700", 128, 0)] drop_shadow [(0, 0, "#FFD70060", 2, 0)]
# 外发光效果style.outer_glow: color "#FFFFFF" outlines [(6, "#00BFFF", 64, 0), (4, "#00BFFF", 128, 0), (2, "#FFFFFF", 255, 0)] drop_shadow [(0, 0, "#00BFFF80", 4, 0)]
# 彩虹发光style.rainbow_glow: color "#FFFFFF" outlines [(8, "#FF0000", 48, 0), (6, "#00FF00", 64, 0), (4, "#0000FF", 96, 0), (2, "#FFFFFF", 255, 0)]
label start: "{style=inner_glow}内发光效果{/style}" "{style=outer_glow}外发光效果{/style}" "{style=rainbow_glow}彩虹发光效果{/style}"3.4 渐变颜色文本
Ren’Py不支持原生的渐变文本,但可以通过字符级别的颜色控制实现:
# 定义渐变文本生成函数init python: def gradient_text(text, start_color, end_color): """ 创建线性渐变文本效果 :param text: 要处理的文本 :param start_color: 起始颜色(十六进制) :param end_color: 结束颜色(十六进制) :return: 渐变效果文本 """ # 将十六进制颜色转换为RGB def hex_to_rgb(hex_color): return tuple(int(hex_color[i:i+2], 16) for i in (1, 3, 5))
start_rgb = hex_to_rgb(start_color) end_rgb = hex_to_rgb(end_color)
result = "" text_len = len(text)
for i, char in enumerate(text): if text_len > 1: ratio = i / (text_len - 1) else: ratio = 0
# 插值计算当前字符的颜色 current_rgb = tuple( int(start_rgb[j] + (end_rgb[j] - start_rgb[j]) * ratio) for j in range(3) )
color_hex = "#{:02X}{:02X}{:02X}".format(*current_rgb) result += "{{color={}}}{ }{{/color}}".format(color_hex, char)
return result
def rainbow_gradient(text): """创建彩虹渐变效果""" return gradient_text(text, "#FF0000", "#8B00FF")
# 使用示例label start: $ gradient_msg = gradient_text("这是一个从蓝到紫的渐变效果", "#0000FF", "#8B00FF") "[gradient_msg]"
$ rainbow_msg = rainbow_gradient("彩虹渐变文字效果演示") "[rainbow_msg]"4. 动态变化效果
4.1 颜色渐变动画
使用ATL实现颜色渐变动画:
# 定义颜色渐变动画文本image rainbow_text = Text("彩虹文字效果!", color="#FF0000", size=36): ease 1.0 color "#FF7F00" ease 1.0 color "#FFFF00" ease 1.0 color "#00FF00" ease 1.0 color "#0000FF" ease 1.0 color "#4B0082" ease 1.0 color "#8B00FF" repeat
# 使用颜色渐变label start: show rainbow_text at center "观察彩虹颜色渐变动画" hide rainbow_text4.2 字体大小动态变化
通过ATL实现字体大小的动态变化:
# 定义大小变化动画image pulsing_text = Text("脉冲文字效果", size=24, color="#FFFFFF"): ease 0.5 size 48 ease 0.5 size 24 repeat
image growing_text = Text("持续放大文字", size=16, color="#FFFFFF"): linear 2.0 size 64 pause 1.0 size 16 repeat
label start: show pulsing_text at center "这是脉冲大小变化效果" hide pulsing_text
show growing_text at center "这是持续放大效果" hide growing_text4.3 透明度动态调整
实现文本透明度的动态变化:
# 定义透明度变化动画image fading_text = Text("淡入淡出效果", size=32, color="#FFFFFF"): alpha 0.0 ease 1.0 alpha 1.0 pause 1.0 ease 1.0 alpha 0.0 repeat
image blinking_text = Text("闪烁效果", size=28, color="#FF0000"): alpha 1.0 ease 0.3 alpha 0.2 ease 0.3 alpha 1.0 repeat
label start: show fading_text at center "这是淡入淡出效果" hide fading_text
show blinking_text at center "这是闪烁效果" hide blinking_text4.4 复杂ATL文本动画组合
结合多种效果创建复杂动画:
# 定义复杂的组合动画效果image complex_animation = Text("复杂动画效果", size=30, color="#FFFFFF"): # 大小和透明度变化 parallel: ease 1.0 size 40 ease 1.0 size 30 repeat parallel: ease 1.0 alpha 0.5 ease 1.0 alpha 1.0 repeat parallel: ease 2.0 color "#FF6B6B" ease 2.0 color "#4ECDC4" repeat
# 旋转和缩放组合image rotating_scaling_text = Text("旋转缩放", size=24, color="#FFD700"): parallel: ease 2.0 rotate 360 repeat parallel: ease 1.0 zoom 1.5 ease 1.0 zoom 1.0 repeat
# 弹性跳动效果image bouncing_text = Text("弹性跳动", size=28, color="#FFFFFF"): ease 0.3 yoffset -30 ease 0.3 yoffset 0 ease 0.2 yoffset -10 ease 0.2 yoffset 0 repeat
label start: show complex_animation at center "这是复杂的组合动画效果" hide complex_animation
show rotating_scaling_text at center "这是旋转缩放组合效果" hide rotating_scaling_text
show bouncing_text at center "这是弹性跳动效果" hide bouncing_text5. 综合案例演示
案例1:游戏标题屏幕动态效果
# 标题屏幕的综合实现init python: # 定义标题屏幕样式 style.title_text: font "YourTitleFont.ttf" size 72 color "#FFFFFF" outlines [(4, "#000000", 128, 0), (2, "#FFD700", 255, 0)] drop_shadow [(6, 6, "#FFD70080", 4, 6)]
# 标题动画image title_main = Text("魔幻冒险", style="title_text"): parallel: ease 2.0 yoffset -10 ease 2.0 yoffset 10 repeat parallel: ease 3.0 alpha 0.8 ease 3.0 alpha 1.0 repeat parallel: ease 1.0 zoom 1.05 ease 1.0 zoom 1.0 repeat
# 副标题动画image subtitle_text = Text("开启你的奇幻之旅", size=32, color="#FFFFFF"): color "#FFFFFF" outlines [(2, "#000000", 128, 0)] ease 1.5 color "#FFD700" ease 1.5 color "#FFFFFF" repeat
# 开始菜单按钮动画image start_button = Text("开始游戏", size=24, color="#FFFFFF"): outlines [(2, "#000000", 255, 0)] drop_shadow [(3, 3, "#00000080", 2, 3)] ease 0.3 size 28 ease 0.3 size 24 repeat
# 标题屏幕label title_screen: scene bg title_room
show title_main at center show subtitle_text at center: yoffset 100
show start_button at center: yoffset 200
with dissolve
"点击任意位置开始游戏..."
hide title_main hide subtitle_text hide start_button
with dissolve
jump start案例2:战斗界面伤害数字效果
# 战斗界面的动态效果实现init python: # 伤害数字样式 style.damage_critical: font "DamageFont.ttf" size 48 color "#FF0000" bold True outlines [(3, "#000000", 255, 0)] drop_shadow [(5, 5, "#00000080", 3, 5)]
style.damage_normal: font "DamageFont.ttf" size 36 color "#FFFFFF" bold True outlines [(2, "#000000", 255, 0)] drop_shadow [(3, 3, "#00000080", 2, 3)]
style.heal_text: font "HealFont.ttf" size 36 color "#00FF00" bold True outlines [(2, "#000000", 255, 0)] drop_shadow [(3, 3, "#00000080", 2, 3)]
# 暴击伤害动画image critical_damage = Text("暴击!9999", style="damage_critical"): parallel: ease 0.2 size 64 ease 0.2 size 48 repeat 3 parallel: ease 0.5 yoffset -50 ease 0.5 yoffset -20 repeat 2 parallel: ease 0.3 alpha 0.5 ease 0.3 alpha 1.0 repeat 4
# 普通伤害动画image normal_damage = Text("1500", style="damage_normal"): ease 0.5 yoffset -30 ease 0.5 yoffset -10 ease 0.3 alpha 0.0
# 治疗动画image heal_effect = Text("+500", style="heal_text"): parallel: ease 0.5 yoffset -40 ease 0.5 yoffset -15 parallel: ease 0.3 alpha 1.0 ease 0.3 alpha 0.0 repeat 2
# 战斗界面演示label battle_demo: scene bg battle_field
"战斗开始!"
"敌人发动攻击!" show critical_damage at center with flash pause 1.5 hide critical_damage
"主角反击!" show normal_damage at center: xoffset 100 pause 1.0 hide normal_damage
"主角发动治疗魔法!" show heal_effect at center: xoffset -100 pause 1.0 hide heal_effect
"战斗结束!"总结
通过本文的介绍,我们系统地学习了Ren’Py中的字体设置、颜色控制、特效实现和动态变化等技术。这些技术可以单独使用,也可以组合创造出丰富的视觉效果。在实际开发中,建议:
-
合理使用字体特效:过度使用会影响可读性和性能
-
保持风格一致:在同一游戏中保持字体特效风格的统一性
-
性能优化:复杂的ATL动画可能会影响游戏性能,需要注意优化
-
测试兼容性:确保字体文件在不同平台上的兼容性
掌握这些技术后,您可以为Ren’Py游戏创造出更具视觉冲击力和表现力的文本效果,提升整体的游戏体验。
14:30
加入Ren’Py的图片变换代码介绍
14:33
我将在原文基础上为您补充Ren’Py图片变换技术的相关内容:
6. 图片变换技术
6.1 基本图片变换
Ren’Py提供了丰富的图片变换功能,可以通过内建函数实现各种视觉效果:
# 定义基本变换# 1. 缩放变换image character_scaled = Transform("character.png", zoom=1.5)image character_small = Transform("character.png", zoom=0.8)
# 2. 旋转变换image character_rotated = Transform("character.png", rotate=45)image character_rotate_180 = Transform("character.png", rotate=180)
# 3. 翻转变换image character_h_flip = Transform("character.png", xzoom=-1) # 水平翻转image character_v_flip = Transform("character.png", yzoom=-1) # 垂直翻转
# 4. 透明度变换image character_alpha = Transform("character.png", alpha=0.5)image character_semi = Transform("character.png", alpha=0.3)
# 5. 颜色调整image character_tint = Transform("character.png", tint="#FF000040") # 红色半透明image character_grayscale = Transform("character.png", matrix=im.matrix.desaturate())
# 6. 裁剪变换image character_cropped = Transform("character.png", crop=(0, 0, 500, 500)) # 左上角500x5006.2 组合变换
多个变换可以组合使用:
# 组合变换示例image character_combined = Transform("character.png"): zoom 1.2 rotate 15 alpha 0.9
# 使用im.Matrix进行颜色变换image character_brightness = Transform("character.png", matrix=im.matrix.brightness(0.2))image character_contrast = Transform("character.png", matrix=im.matrix.contrast(1.2))image character_saturation = Transform("character.png", matrix=im.matrix.saturation(0.5))
# 链式变换image character_chain = im.Scale("character.png", 600, 600)image character_chain_alpha = im.Alpha(character_chain, 0.8)image character_chain_rotate = im.Rotate(character_chain_alpha, 30)6.3 ATL变换动画
使用ATL语言创建动态的图片变换效果:
# 基本ATL变换动画image character_idle = "character.png": ease 2.0 yoffset 10 ease 2.0 yoffset 0 repeat
image character_breathing = "character.png": parallel: ease 2.0 zoom 1.05 ease 2.0 zoom 1.0 repeat parallel: ease 1.0 alpha 0.9 ease 1.0 alpha 1.0 repeat
# 旋转动画image spinning_item = "item.png": ease 3.0 rotate 360 repeat
# 摆动动画image swaying_tree = "tree.png": ease 1.5 rotate -5 ease 1.5 rotate 5 repeat
# 闪烁动画image blinking_star = "star.png": alpha 1.0 ease 0.3 alpha 0.2 ease 0.3 alpha 1.0 repeat
# 呼吸式缩放image breathing_heart = "heart.png": ease 0.5 zoom 1.2 ease 0.5 zoom 1.0 repeat6.4 复杂变换组合
实现更复杂的多重变换效果:
# 角色入场动画image character_entrance = "character.png": zoom 0.0 alpha 0.0 parallel: ease 1.0 zoom 1.0 parallel: ease 1.0 alpha 1.0 parallel: ease 0.5 rotate -10 ease 0.5 rotate 0
# 角色离场动画image character_exit = "character.png": parallel: ease 1.0 zoom 0.5 parallel: ease 1.0 alpha 0.0 parallel: ease 0.5 rotate 15
# 受伤效果image character_damage = "character.png": ease 0.1 xzoom -1 ease 0.1 xzoom 1 ease 0.1 xzoom -1 ease 0.1 xzoom 1 parallel: ease 0.4 zoom 1.1 ease 0.4 zoom 1.0
# 攻击效果image character_attack = "character.png": parallel: ease 0.1 xoffset -20 ease 0.2 xoffset 30 ease 0.1 xoffset 0 parallel: ease 0.1 zoom 1.2 ease 0.2 zoom 0.9 ease 0.1 zoom 1.0
# 精神状态变化效果image character_confused = "character.png": ease 0.2 rotate 5 ease 0.2 rotate -5 ease 0.2 rotate 10 ease 0.2 rotate -10 repeat
image character_angry = "character.png": parallel: ease 0.3 xzoom -1.1 ease 0.3 xzoom 1.1 repeat 3 parallel: ease 0.6 yoffset 5 ease 0.6 yoffset 0 repeat 26.5 变换函数和矩阵变换
使用函数和矩阵实现高级变换效果:
# 定义自定义变换函数init python: # 创建模糊效果 def blur_image(image, amount): return im.FactorScale(image, 1.0, 1.0)
# 创建边框效果 def add_border(image, color, size): bg = im.Solid(color, image.width + 2*size, image.height + 2*size) return im.Composite((image.width + 2*size, image.height + 2*size), (0, 0), bg, (size, size), image)
# 使用矩阵变换image sepia_effect = Transform("character.png", matrix=im.matrix.sepia())image invert_effect = Transform("character.png", matrix=im.matrix.invert())image negative_effect = Transform("character.png", matrix=im.matrix.negative())
# 自定义颜色矩阵init python: # 创建自定义色彩滤镜 custom_matrix = im.matrix( (0.393, 0.769, 0.189, 0.0), # R通道 (0.349, 0.686, 0.168, 0.0), # G通道 (0.272, 0.534, 0.131, 0.0), # B通道 (0.000, 0.000, 0.000, 1.0) # A通道 )
image custom_color = Transform("character.png", matrix=custom_matrix)
# 动态颜色变换image rainbow_character = "character.png": ease 1.0 matrix im.matrix.tint(1.0, 0.0, 0.0) # 红色 ease 1.0 matrix im.matrix.tint(0.0, 1.0, 0.0) # 绿色 ease 1.0 matrix im.matrix.tint(0.0, 0.0, 1.0) # 蓝色 ease 1.0 matrix im.matrix.tint(1.0, 1.0, 0.0) # 黄色 repeat6.6 条件变换
根据游戏状态动态应用变换:
# 定义状态变量default character_state = "normal"
# 定义不同状态的变换image character_dynamic = ConditionSwitch( "character_state == 'normal'", "character.png", "character_state == 'happy'", Transform("character.png", matrix=im.matrix.tint(1.0, 1.0, 0.8)), "character_state == 'sad'", Transform("character.png", matrix=im.matrix.tint(0.8, 0.8, 1.0)), "character_state == 'angry'", Transform("character.png", matrix=im.matrix.tint(1.0, 0.8, 0.8)), "character_state == 'ghost'", Transform("character.png", alpha=0.5))
# 在脚本中使用label emotion_test: $ character_state = "normal" show character_dynamic at center "正常状态"
$ character_state = "happy" "开心状态"
$ character_state = "sad" "伤心状态"
$ character_state = "angry" "生气状态"
$ character_state = "ghost" "幽灵状态"6.7 变换与动画结合的综合案例
# 综合战斗效果演示# 1. 角色准备攻击image character_charge = "character.png": parallel: ease 0.3 xoffset -10 ease 0.3 xoffset 0 repeat 2 parallel: ease 0.6 zoom 1.1 ease 0.6 zoom 1.0 repeat 2 parallel: ease 0.3 alpha 0.8 ease 0.3 alpha 1.0 repeat 3
# 2. 攻击冲击波效果image shockwave = "shockwave.png": zoom 0.0 alpha 1.0 ease 0.2 zoom 2.0 ease 0.2 alpha 0.0
# 3. 受击震动效果image hit_shake = "character.png": ease 0.05 xoffset -10 ease 0.05 xoffset 10 ease 0.05 xoffset -8 ease 0.05 xoffset 8 ease 0.05 xoffset -5 ease 0.05 xoffset 5 ease 0.05 xoffset 0
# 4. 治疗光芒效果image heal_light = "heal_light.png": alpha 0.0 ease 0.5 alpha 0.8 ease 1.0 alpha 0.0
# 战斗场景综合演示label battle_animation: scene bg battlefield
show character_idle at left show enemy_idle at right
"角色准备攻击!" show character_charge at left pause 1.5 hide character_charge
"角色发动攻击!" show character_attack at left show shockwave at center with flash pause 0.5 hide shockwave hide character_attack
"敌人受到攻击!" show hit_shake at right show critical_damage at right: yoffset -50 with flash pause 1.0 hide hit_shake hide critical_damage
"角色发动治疗!" show heal_light at left show heal_effect at left: yoffset -30 pause 1.5 hide heal_light hide heal_effect
"战斗结束!"6.8 图片变换性能优化建议
# 性能优化技巧
# 1. 预渲染复杂变换init python: # 预先渲染常用的复杂变换 optimized_character = im.MatrixColor( im.Scale("character.png", 400, 600), im.matrix.sepia() )
# 2. 使用缓存变换image cached_transform = Transform("character.png", zoom=1.2): cache True # 启用缓存
# 3. 避免在循环中创建新变换# 错误做法:# for i in range(100):# show Transform("character.png", rotate=i*3.6)
# 正确做法:image rotating_character = "character.png": linear 10.0 rotate 360 repeat
# 4. 使用条件变换替代动态创建image optimized_character = ConditionSwitch( "flag == True", Transform("character.png", zoom=1.2), "flag == False", "character.png")通过掌握这些图片变换技术,您可以为Ren’Py游戏创建出丰富多样的视觉效果,从基础的缩放旋转到复杂的组合动画,让游戏画面更加生动和吸引人。合理运用这些技术,能够显著提升游戏的表现力和用户体验。
14:33
整合成一篇,并且加上各个参数的解析
14:35
我将为您整合成一篇完整的技术文章,并详细解析各个参数:
Ren’Py视觉特效完全指南:字体、颜色与图片变换
引言
Ren’Py作为强大的视觉小说引擎,其视觉表现系统为开发者提供了丰富的字体控制、颜色处理和图片变换能力。本文将系统性地介绍Ren’Py中的字体特效、颜色控制、动态变化以及图片变换技术,帮助开发者创建更具视觉吸引力的游戏内容。每个技术点都配备详细的参数解析,确保开发者能够精确控制每一个视觉效果。
1. 字体基础设置
1.1 字体文件导入与配置
在Ren’Py中,字体管理主要通过全局配置项实现。首先需要将自定义字体文件(.ttf、.otf格式)放入游戏目录的 game 文件夹中。
# 在 options.rpy 文件中设置全局字体init python: # 字体替换映射表 # 参数说明: # - 第一个字符串:原字体名称(系统默认字体) # - 第二个字符串:替换后的字体文件名 # - 第三个整数:字体样式标志位(0=正常,1=粗体,2=斜体) # - 第四个整数:字体样式标志位(与第三个参数组合使用) config.font_replacement_map["NotoSans-Regular.ttf"] = ("YourCustomFont.ttf", 0, 0)
# 全局文本字体设置 # 参数说明: # - gui.text_font: 对话文本使用的字体文件名 # - gui.name_text_font: 角色名称文本使用的字体文件名 # - gui.interface_text_font: 界面文本(菜单、按钮等)使用的字体文件名 gui.text_font = "YourCustomFont.ttf" gui.name_text_font = "YourBoldFont.ttf" gui.interface_text_font = "YourInterfaceFont.ttf"1.2 默认字体配置参数详解
# 对话框字体设置define gui.text_font = "NotoSans-Regular.ttf"define gui.text_size = 22 # 字体大小(像素单位)
# 角色名称字体设置define gui.name_text_font = "NotoSans-Bold.ttf"define gui.name_text_size = 30 # 字体大小
# 菜单文本字体设置define gui.interface_text_font = "NotoSans-Medium.ttf"define gui.interface_text_size = 24 # 字体大小
# 颜色设置(十六进制格式)define gui.text_color = "#FFFFFF" # 文本颜色(白色)define gui.text_color_idle = "#888888" # 未激活文本颜色define gui.text_color_hover = "#FFD700" # 悬停时文本颜色define gui.text_color_insensitive = "#444444" # 禁用状态文本颜色1.3 动态字体大小调整
# 定义不同字体的样式# 参数说明:# - font: 字体文件名或字体对象# - size: 字体大小(像素单位)style.small_text: font "NotoSans-Regular.ttf" size 16
style.normal_text: font "NotoSans-Regular.ttf" size 22
style.large_text: font "NotoSans-Regular.ttf" size 32
# 在脚本中使用标签语法# {size=+数字}: 相对当前字体大小增加指定像素值# {size=-数字}: 相对当前字体大小减少指定像素值# {size=数字}: 设置为指定的绝对字体大小label start: "你好!{size=+10}这是一段放大的文字{/size}" "正常大小的文字" "{size=-5}这是缩小的文字{/size}" "{size=40}这是固定大小40像素的文字{/size}"2. 颜色控制技术
2.1 十六进制颜色代码
# 十六进制颜色代码格式说明# #RRGGBB: 6位十六进制,分别代表红、绿、蓝通道# #RRGGBBAA: 8位十六进制,最后两位代表alpha透明度通道# 每个通道范围:00-FF(十进制0-255)
# 基础颜色设置define gui.text_color = "#FFFFFF" # 纯白色define gui.accent_color = "#FF6B6B" # 红色强调色define gui.accent_color = "#FF6B6B80" # 半透明红色(50%透明度)
# 常用颜色参考:# 黑色:#000000 白色:#FFFFFF# 红色:#FF0000 绿色:#00FF00 蓝色:#0000FF# 黄色:#FFFF00 青色:#00FFFF 品红:#FF00FF# 灰色:#808080 橙色:#FFA500 紫色:#800080
# 在文本中直接使用颜色标签label start: "这是{color=#FF0000}红色{/color}的文字" "这是{color=#00FF00}绿色{/color}的文字" "这是{color=#0000FF}蓝色{/color}的文字"2.2 RGBA颜色模式详解
# RGBA颜色格式详解# #RGBA格式:#RGBA(4位)或 #RRGGBBAA(8位)# R: 红色通道(00-FF)# G: 绿色通道(00-FF)# B: 蓝色通道(00-FF)# A: Alpha透明度通道(00=完全透明,FF=完全不透明)
# 定义带透明度的颜色init python: # 半透明白色:50%透明度 WHITE_ALPHA = "#FFFFFF80" # 透明度计算:80(十六进制)= 128(十进制)= 50%
# 淡红色:25%透明度 RED_SOFT = "#FF000040" # 透明度计算:40(十六进制)= 64(十进制)= 25%
# 完全透明的颜色 TRANSPARENT = "#00000000"
# 几乎不透明的颜色 ALMOST_OPAQUE = "#FFFFFFE0" # 透明度计算:E0(十六进制)= 224(十进制)= 88%
# 在文本中使用RGBA颜色label start: "这是{color=#FFFFFF80}半透明{/color}的白色文字" "这是{color=#FF000060}淡红色{/color}的文字" "这是{color=#00FF00E0}深绿色{/color}的文字"2.3 静态与动态颜色定义
# 在styles.rpy中定义文本颜色样式style.important_text: color "#FF6B6B" # 颜色值(十六进制) bold True # 粗体
style.warning_text: color "#FFA502" # 颜色值 italic True # 斜体
style.custom_color: color "#4ECDC4" # 青绿色 font "NotoSans-Bold.ttf" size 24
# 使用样式标签label start: "{style=important_text}重要提示:{/style}请注意看这里" "{style=warning_text}警告:{/style}操作不可逆" "{style=custom_color}自定义颜色文本{/style}"
# 动态颜色变化函数init python: def rainbow_text(text): """ 创建彩虹渐变效果的文本
参数说明: - text: 要处理的字符串 - 返回:带有彩虹颜色标签的字符串
颜色顺序:红->橙->黄->绿->蓝->靛->紫 """ colors = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#8B00FF"] result = "" for i, char in enumerate(text): color = colors[i % len(colors)] result += "{{color={}}}{ }{{/color}}".format(color, char) return result
def gradient_text(text, start_color, end_color): """ 创建线性渐变文本效果
参数说明: - text: 要处理的文本字符串 - start_color: 起始颜色(十六进制格式,如"#FF0000") - end_color: 结束颜色(十六进制格式,如"#0000FF") - 返回:带有渐变颜色标签的字符串 """ def hex_to_rgb(hex_color): """将十六进制颜色转换为RGB元组""" return tuple(int(hex_color[i:i+2], 16) for i in (1, 3, 5))
start_rgb = hex_to_rgb(start_color) end_rgb = hex_to_rgb(end_color)
result = "" text_len = len(text)
for i, char in enumerate(text): if text_len > 1: ratio = i / (text_len - 1) else: ratio = 0
# 线性插值计算当前字符的颜色 current_rgb = tuple( int(start_rgb[j] + (end_rgb[j] - start_rgb[j]) * ratio) for j in range(3) )
color_hex = "#{:02X}{:02X}{:02X}".format(*current_rgb) result += "{{color={}}}{ }{{/color}}".format(color_hex, char)
return result
# 在脚本中使用动态颜色label start: $ rainbow_msg = rainbow_text("这是一个彩虹渐变的文本效果!") "[rainbow_msg]"
$ gradient_msg = gradient_text("从蓝到紫的渐变", "#0000FF", "#8B00FF") "[gradient_msg]"3. 字体特效实现
3.1 描边效果(Outline)详解
# 描边样式设置style.outlined_text: # outlines参数说明:[(width, color, strength, offset), ...] # - width: 描边宽度(像素,正整数) # - color: 描边颜色(十六进制或颜色名) # - strength: 描边强度(0-255,值越大越不透明) # - offset: 描边偏移量(像素,支持负值) outlines [(2, "#000000", 1, 0)] # 基本黑色描边
style.double_outline: # 双层描边,外层粗,内层细 outlines [ (3, "#000000", 2, 0), # 外层:3像素黑色描边 (1, "#FFFFFF", 1, 0) # 内层:1像素白色描边 ]
style.glow_outline: # 发光描边效果(多层描边) outlines [ (4, "#FF6B6B", 3, 0), # 外层大范围红色 (2, "#FF6B6B", 2, 0), # 中层红色 (1, "#FFFFFF", 1, 0) # 内层白色 ]
style.offset_outline: # 带偏移的描边效果 outlines [ (2, "#000000", 1, 2), # 向下偏移2像素 (1, "#FFFFFF", 1, -1) # 向上偏移1像素 ]
# 描边参数详细解析:# 1. width(宽度):# - 值越小:描边越细,适合精细设计# - 值越大:描边越粗,适合醒目效果# - 范围建议:1-8像素## 2. color(颜色):# - 支持格式:"#RRGGBB"、"颜色名称"、"(R,G,B,A)"# - 推荐使用黑色或白色作为基础描边色# - 可以使用半透明色创建柔和效果## 3. strength(强度):# - 0: 完全透明(无效果)# - 255: 完全不透明# - 128: 50%透明度# - 数值越大,描边越清晰## 4. offset(偏移):# - 0: 正常居中描边# - 正数:向右下方偏移# - 负数:向左上方偏移# - 可用于创建立体感效果
# 使用示例label start: "{style=outlined_text}带黑色描边的文字{/style}" "{style=double_outline}双层描边效果{/style}" "{style=glow_outline}发光描边效果{/style}" "{style=offset_outline}偏移描边立体效果{/style}"3.2 阴影效果(Shadow)详解
# 阴影样式设置style.shadow_text: color "#FFFFFF" # drop_shadow参数说明:[(x_offset, y_offset, color, blur, spread), ...] # - x_offset: 水平阴影偏移(像素) # - y_offset: 垂直阴影偏移(像素) # - color: 阴影颜色(支持透明度) # - blur: 模糊半径(像素,值越大越柔和) # - spread: 阴影扩散距离(像素) drop_shadow [(2, 2, "#00000080", 2, 2)]
style.soft_shadow: color "#FFFFFF" # 柔和阴影:大偏移、大模糊、半透明 drop_shadow [(4, 4, "#00000040", 4, 6)]
style.colored_shadow: color "#FFFFFF" # 彩色阴影:使用非黑色阴影色 drop_shadow [(3, 3, "#FF6B6B80", 3, 3)]
style.multiple_shadows: color "#FFFFFF" # 多层阴影:创建深度感 drop_shadow [ (2, 2, "#00000080", 1, 2), # 近阴影 (5, 5, "#FF6B6B40", 3, 5) # 远阴影 ]
style.inner_shadow: color "#FFFFFF" # 内阴影效果(负偏移+负扩散) drop_shadow [(-1, -1, "#00000080", 2, -2)]
style.3d_shadow: color "#FFFFFF" # 3D立体阴影 drop_shadow [ (1, 1, "#000000AA", 0, 0), (2, 2, "#000000AA", 0, 0), (3, 3, "#000000AA", 0, 0), (4, 4, "#000000AA", 0, 0), (5, 5, "#000000AA", 0, 0) ]
# 阴影参数详细解析:# 1. x_offset, y_offset(偏移量):# - (0, 0): 无偏移,垂直下方阴影# - (正, 正): 向右下方投射阴影# - (负, 负): 向左上方投射阴影# - (正, 0): 纯水平偏移# - (0, 正): 纯垂直偏移## 2. color(颜色):# - "#000000": 纯黑色阴影(最常用)# - "#00000080": 半透明黑色(80=50%透明度)# - "#FF6B6B40": 彩色阴影(红色,25%透明度)# - 建议使用半透明色获得更自然效果## 3. blur(模糊半径):# - 0: 锐利边缘,清晰阴影# - 1-3: 轻微模糊,适合近距离阴影# - 4-8: 中等模糊,适合中距离阴影# - 9+: 强烈模糊,适合远距离或环境光效果## 4. spread(扩散距离):# - 正数: 阴影向外扩展,增加阴影面积# - 负数: 阴影向内收缩,减小阴影面积# - 0: 正常扩散# - 用于精细调整阴影大小
# 使用示例label start: "{style=shadow_text}标准阴影效果{/style}" "{style=soft_shadow}柔和阴影效果{/style}" "{style=colored_shadow}彩色阴影效果{/style}" "{style=multiple_shadows}多层阴影效果{/style}" "{style=inner_shadow}内阴影效果{/style}" "{style=3d_shadow}3D立体效果{/style}"3.3 发光效果(Glow)详解
# 内发光效果style.inner_glow: color "#FFFFFF" # 组合描边和阴影实现内发光 outlines [ (2, "#FFFFFF", 255, 0), # 白色核心 (4, "#FFD700", 128, 0) # 金色外层 ] drop_shadow [(0, 0, "#FFD70060", 2, 0)]
style.strong_glow: color "#FFFFFF" # 强烈发光效果 outlines [ (2, "#FFFFFF", 255, 0), (6, "#FFD700", 96, 0), (4, "#FFD700", 128, 0), (2, "#FFD700", 160, 0) ] drop_shadow [(0, 0, "#FFD70080", 4, 0)]
# 外发光效果style.outer_glow: color "#FFFFFF" outlines [ (6, "#00BFFF", 64, 0), # 外层淡蓝色 (4, "#00BFFF", 128, 0), # 中层蓝色 (2, "#FFFFFF", 255, 0) # 内层白色核心 ] drop_shadow [(0, 0, "#00BFFF80", 4, 0)]
style.intense_glow: color "#FFFFFF" # 强烈外发光 outlines [ (10, "#FF0000", 32, 0), (8, "#FF0000", 64, 0), (6, "#FF0000", 96, 0), (4, "#FF0000", 128, 0), (2, "#FFFFFF", 255, 0) ] drop_shadow [(0, 0, "#FF000080", 6, 0)]
# 彩虹发光style.rainbow_glow: color "#FFFFFF" # 多色发光效果 outlines [ (8, "#FF0000", 48, 0), # 红色外层 (6, "#00FF00", 64, 0), # 绿色中层 (4, "#0000FF", 96, 0), # 蓝色内层 (2, "#FFFFFF", 255, 0) # 白色核心 ]
style.fire_glow: color "#FFFFFF" # 火焰发光效果 outlines [ (6, "#FF0000", 64, 0), # 红色外层 (4, "#FF7F00", 96, 0), # 橙色中层 (2, "#FFFF00", 128, 0), # 黄色内层 (1, "#FFFFFF", 255, 0) # 白色核心 ] drop_shadow [(0, 0, "#FF450040", 5, 0)]
# 发光效果参数组合建议:# 1. 弱光效果:3-5层,透明度64-128# 2. 中等发光:5-7层,透明度32-160# 3. 强烈发光:7-10层,透明度16-255# 4. 核心原则:从外到内,透明度递增,宽度递减
# 使用示例label start: "{style=inner_glow}内发光效果{/style}" "{style=strong_glow}强烈内发光{/style}" "{style=outer_glow}外发光效果{/style}" "{style=intense_glow}强烈外发光{/style}" "{style=rainbow_glow}彩虹发光效果{/style}" "{style=fire_glow}火焰发光效果{/style}"4. 动态变化效果
4.1 颜色渐变动画详解
# 定义颜色渐变动画文本# ATL(Animation Toolkit Language)语法详解image rainbow_text = Text("彩虹文字效果!", color="#FF0000", size=36): # ease: 缓动动画函数 # - ease 1.0 color "#FF7F00": 在1秒内平滑过渡到橙色 # - ease: 使用ease-in-out缓动函数(开始和结束时较慢) ease 1.0 color "#FF7F00" # 橙色 ease 1.0 color "#FFFF00" # 黄色 ease 1.0 color "#00FF00" # 绿色 ease 1.0 color "#0000FF" # 蓝色 ease 1.0 color "#4B0082" # 靛色 ease 1.0 color "#8B00FF" # 紫色 repeat # 重复整个动画序列
image smooth_transition = Text("平滑过渡", color="#FFFFFF", size=32): # linear: 线性动画(恒定速度) linear 2.0 color "#FF6B6B" # 2秒线性过渡到红色 linear 2.0 color "#4ECDC4" # 2秒线性过渡到青色 repeat
# 不同的缓动函数对比:# - ease: ease-in-out(慢-快-慢)# - easein: ease-in(慢-快)# - easeout: ease-out(快-慢)# - linear: 线性(恒定速度)# - pause: 暂停指定时间
# 使用缓动函数的不同效果image easing_comparison = Text("缓动函数对比", color="#FFFFFF", size=24): # 快速开始,缓慢结束 easeout 1.0 color "#FF0000" pause 0.5 # 缓慢开始,快速结束 easein 1.0 color "#00FF00" pause 0.5 # 开始和结束都慢,中间快 ease 1.0 color "#0000FF" pause 0.5 # 恒定速度 linear 1.0 color "#FFFF00" repeat
# 颜色动画参数说明:# - 时间参数(1.0, 2.0等):动画持续时间(秒)# - color目标值:十六进制颜色代码# - 建议时间范围:0.1-10秒# - 根据效果需求选择合适的缓动函数
# 使用示例label start: show rainbow_text at center "观察彩虹颜色渐变动画" hide rainbow_text
show smooth_transition at center "这是平滑颜色过渡效果" hide smooth_transition
show easing_comparison at center "这是不同缓动函数的对比效果" hide easing_comparison4.2 字体大小动态变化详解
# 定义大小变化动画image pulsing_text = Text("脉冲文字效果", size=24, color="#FFFFFF"): # 脉冲效果:放大缩小循环 ease 0.5 size 48 # 0.5秒内放大到48像素 ease 0.5 size 24 # 0.5秒内缩小回24像素 repeat # 无限循环
image growing_text = Text("持续放大文字", size=16, color="#FFFFFF"): # 持续放大效果 linear 2.0 size 64 # 2秒线性放大到64像素 pause 1.0 # 暂停1秒 size 16 # 瞬间回到原始大小 repeat
image elastic_scale = Text("弹性缩放", size=20, color="#FFFFFF"): # 弹性缩放效果 parallel: ease 0.3 size 40 ease 0.3 size 20 repeat parallel: ease 0.3 alpha 0.7 ease 0.3 alpha 1.0 repeat
image heartbeat = Text("心跳效果", size=28, color="#FF0000"): # 心跳节奏效果 parallel: ease 0.1 size 34 ease 0.1 size 28 ease 0.1 size 34 ease 0.1 size 28 ease 0.4 size 28 # 停顿 repeat parallel: ease 0.1 alpha 0.8 ease 0.1 alpha 1.0 repeat
# 大小变化参数说明:# - size目标值:字体大小(像素)# - 时间参数:动画持续时间(秒)# - ease/linear: 动画类型# - 建议:大字体32-72px,小字体12-18px# - 避免过大的变化(如10px→100px)
# 大小变化设计建议:# 1. 脉冲效果:±20-30%变化,0.3-0.8秒周期# 2. 呼吸效果:±10-20%变化,1-2秒周期# 3. 强调效果:+50-100%变化,0.2-0.5秒# 4. 持续放大:200-400%增长,2-5秒时间
# 使用示例label start: show pulsing_text at center "这是脉冲大小变化效果" hide pulsing_text
show growing_text at center "这是持续放大效果" hide growing_text
show elastic_scale at center "这是弹性缩放效果" hide elastic_scale
show heartbeat at center "这是心跳效果" hide heartbeat4.3 透明度动态调整详解
# 定义透明度变化动画# alpha参数说明:# - alpha 0.0: 完全透明(不可见)# - alpha 0.5: 50%透明度# - alpha 1.0: 完全不透明(完全可见)
image fading_text = Text("淡入淡出效果", size=32, color="#FFFFFF"): alpha 0.0 # 初始状态:完全透明 ease 1.0 alpha 1.0 # 1秒内淡入(0.0→1.0) pause 1.0 # 暂停1秒 ease 1.0 alpha 0.0 # 1秒内淡出(1.0→0.0) repeat
image blinking_text = Text("闪烁效果", size=28, color="#FF0000"): alpha 1.0 # 初始状态:完全不透明 ease 0.3 alpha 0.2 # 快速变暗 ease 0.3 alpha 1.0 # 快速变亮 repeat
image warning_blink = Text("警告!", size=40, color="#FF0000"): # 紧急警告闪烁 parallel: ease 0.1 alpha 0.0 ease 0.1 alpha 1.0 repeat parallel: ease 0.2 size 50 ease 0.2 size 40 repeat
image soft_pulse = Text("柔和脉冲", size=30, color="#FFFFFF"): # 柔和的透明度脉冲 ease 2.0 alpha 0.3 ease 2.0 alpha 1.0 repeat
image quick_flash = Text("快速闪烁", size=24, color="#FFFFFF"): # 快速闪烁效果 alpha 1.0 ease 0.1 alpha 0.0 ease 0.1 alpha 1.0 ease 0.1 alpha 0.0 ease 0.1 alpha 1.0 pause 1.0 repeat
# 透明度变化设计建议:# 1. 淡入淡出:1-3秒时间,用于场景转换# 2. 普通闪烁:0.3-0.6秒周期,用于提示# 3. 紧急闪烁:0.1-0.2秒周期,用于警告# 4. 柔和脉冲:2-4秒周期,用于氛围效果
# 透明度值参考:# - 0.0-0.2: 几乎不可见# - 0.3-0.4: 淡淡可见# - 0.5-0.6: 半透明# - 0.7-0.8: 较清晰# - 0.9-1.0: 完全清晰
# 使用示例label start: show fading_text at center "这是淡入淡出效果" hide fading_text
show blinking_text at center "这是闪烁效果" hide blinking_text
show warning_blink at center "这是紧急警告闪烁" hide warning_blink
show soft_pulse at center "这是柔和脉冲效果" hide soft_pulse4.4 复杂ATL文本动画组合详解
# ATL并行动画详解# parallel: 并行执行多个动画# 每个parallel块内的动画同时进行
image complex_animation = Text("复杂动画效果", size=30, color="#FFFFFF"): # 大小和透明度同时变化 parallel: ease 1.0 size 40 # 同时进行大小变化 ease 1.0 size 30 repeat parallel: ease 1.0 alpha 0.5 # 同时进行透明度变化 ease 1.0 alpha 1.0 repeat parallel: ease 2.0 color "#FF6B6B" # 同时进行颜色变化 ease 2.0 color "#4ECDC4" repeat
# 旋转和缩放组合image rotating_scaling_text = Text("旋转缩放", size=24, color="#FFD700"): parallel: ease 2.0 rotate 360 # 2秒旋转360度 repeat parallel: ease 1.0 zoom 1.5 # 1秒放大到1.5倍 ease 1.0 zoom 1.0 # 1秒缩回原始大小 repeat
# 弹性跳动效果image bouncing_text = Text("弹性跳动", size=28, color="#FFFFFF"): # yoffset: 垂直位置偏移(像素) # 正数:向下移动,负数:向上移动 ease 0.3 yoffset -30 # 向上跳动 ease 0.3 yoffset 0 # 落回原位 ease 0.2 yoffset -10 # 小跳 ease 0.2 yoffset 0 # 落回原位 repeat
# 多方向移动效果image orbiting_text = Text("环绕运动", size=24, color="#FFFFFF"): # 组合xoffset和yoffset实现圆周运动 parallel: ease 2.0 xoffset 100 # 水平移动 ease 2.0 xoffset -100 repeat parallel: ease 2.0 yoffset 0 # 垂直移动(用sin模拟) ease 1.0 yoffset 50 ease 2.0 yoffset 0 ease 1.0 yoffset -50 repeat
# 组合变换效果image combined_effects = Text("组合效果", size=32, color="#FFFFFF"): parallel: ease 1.0 zoom 1.3 ease 1.0 zoom 1.0 repeat parallel: ease 0.5 rotate 15 ease 0.5 rotate -15 repeat parallel: ease 0.8 alpha 0.6 ease 0.8 alpha 1.0 repeat parallel: ease 1.0 color "#FF6B6B" ease 1.0 color "#4ECDC4" repeat
# ATL动画参数详解:# 1. 位置参数:# - xoffset: 水平偏移(正数右移,负数左移)# - yoffset: 垂直偏移(正数下移,负数上移)# - xalign: 水平对齐(0=左,0.5=中,1=右)# - yalign: 垂直对齐(0=顶,0.5=中,1=底)## 2. 尺寸参数:# - size: 字体大小(像素)# - zoom: 缩放比例(1.0=原始,2.0=两倍)# - xzoom: 水平缩放# - yzoom: 垂直缩放## 3. 外观参数:# - alpha: 透明度(0.0-1.0)# - rotate: 旋转角度(度数)# - color: 颜色(十六进制)## 4. 时间参数:# - 建议范围:0.1-10秒# - 快速效果:0.1-0.5秒# - 普通效果:0.5-2秒# - 慢速效果:2-5秒
# 使用示例label start: show complex_animation at center "这是复杂的组合动画效果" hide complex_animation
show rotating_scaling_text at center "这是旋转缩放组合效果" hide rotating_scaling_text
show bouncing_text at center "这是弹性跳动效果" hide bouncing_text
show combined_effects at center "这是完整的组合效果" hide combined_effects5. 图片变换技术
5.1 基本图片变换详解
# Transform函数参数详解# Transform(image, [参数1, 参数2, ...])# image: 图片文件名或图片对象
# 1. 缩放变换# zoom参数:缩放比例# - zoom 1.0: 原始大小(默认)# - zoom 2.0: 放大2倍# - zoom 0.5: 缩小50%image character_scaled = Transform("character.png", zoom=1.5)image character_small = Transform("character.png", zoom=0.8)image character_large = Transform("character.png", zoom=2.0)
# xzoom和yzoom:分别控制水平和垂直缩放image character_stretched = Transform("character.png", xzoom=1.5, yzoom=0.8) # 拉伸效果image character_compressed = Transform("character.png", xzoom=0.8, yzoom=1.5) # 压缩效果
# 2. 旋转变换# rotate参数:旋转角度(度数)# - 正数:顺时针旋转# - 负数:逆时针旋转# - 360: 完整旋转一圈image character_rotated = Transform("character.png", rotate=45) # 顺时针45度image character_rotate_180 = Transform("character.png", rotate=180) # 翻转180度image character_rotate_neg = Transform("character.png", rotate=-30) # 逆时针30度
# 3. 翻转变换# xzoom和yzoom使用负值实现翻转# - xzoom -1: 水平翻转(镜像)# - yzoom -1: 垂直翻转image character_h_flip = Transform("character.png", xzoom=-1) # 水平翻转image character_v_flip = Transform("character.png", yzoom=-1) # 垂直翻转image character_both_flip = Transform("character.png", xzoom=-1, yzoom=-1) # 双向翻转
# 4. 透明度变换# alpha参数:透明度(0.0-1.0)# - 0.0: 完全透明# - 0.5: 半透明# - 1.0: 完全不透明image character_alpha = Transform("character.png", alpha=0.5)image character_semi = Transform("character.png", alpha=0.3)image character_mostly_opaque = Transform("character.png", alpha=0.9)
# 5. 颜色调整# tint参数:着色(十六进制颜色代码)# - tint "#FF000040": 红色半透明覆盖# - tint "#00FF0080": 绿色半透明覆盖# - 格式:#RRGGBB 或 #RRGGBBAAimage character_tint = Transform("character.png", tint="#FF000040") # 红色半透明image character_green_tint = Transform("character.png", tint="#00FF0080") # 绿色半透明
# 6. 裁剪变换# crop参数:裁剪区域# - crop (x, y, width, height)# - x, y: 起始坐标(左上角)# - width, height: 裁剪宽度和高度image character_cropped = Transform("character.png", crop=(0, 0, 500, 500)) # 左上角500x500image character_center_crop = Transform("character.png", crop=(100, 100, 400, 400)) # 中间部分5.2 组合变换详解
# 组合变换示例# 多个参数可以同时应用于同一张图片
image character_combined = Transform("character.png"): zoom 1.2 # 放大1.2倍 rotate 15 # 旋转15度 alpha 0.9 # 90%不透明度
# 使用im.Matrix进行高级颜色变换# im.matrix类:颜色矩阵变换# 参数说明:各通道的系数矩阵
# 1. 亮度调整# im.matrix.brightness(value)# - value: 亮度调整值(-1.0到1.0)# - 0.0: 无变化# - 正数:增加亮度# - 负数:降低亮度image character_brightness = Transform("character.png", matrix=im.matrix.brightness(0.2)) # 增加20%亮度image character_darken = Transform("character.png", matrix=im.matrix.brightness(-0.2)) # 降低20%亮度
# 2. 对比度调整# im.matrix.contrast(value)# - value: 对比度调整值(0.0到2.0)# - 1.0: 无变化# - 大于1.0: 增加对比度# - 小于1.0: 降低对比度image character_contrast = Transform("character.png", matrix=im.matrix.contrast(1.2)) # 增加20%对比度image character_soft = Transform("character.png", matrix=im.matrix.contrast(0.8)) # 降低对比度
# 3. 饱和度调整# im.matrix.saturation(value)# - value: 饱和度调整值(0.0到1.0)# - 1.0: 无变化# - 大于1.0: 增加饱和度# - 小于1.0: 降低饱和度# - 0.0: 完全去饱和(灰度图)image character_saturated = Transform("character.png", matrix=im.matrix.saturation(1.5)) # 增加50%饱和度image character_grayscale = Transform("character.png", matrix=im.matrix.saturation(0.0)) # 完全灰度
# 4. 特殊效果矩阵# im.matrix.sepia(): 怀旧棕褐色效果# im.matrix.invert(): 反相效果(颜色反转)# im.matrix.negative(): 负片效果image sepia_effect = Transform("character.png", matrix=im.matrix.sepia())image invert_effect = Transform("character.png", matrix=im.matrix.invert())image negative_effect = Transform("character.png", matrix=im.matrix.negative())
# 链式变换# 使用im.前缀函数进行图像处理链# im.Scale(image, width, height): 缩放图片# im.Alpha(image, alpha): 调整透明度# im.Rotate(image, angle): 旋转图片# im.FactorScale(image, xzoom, yzoom): 按比例缩放
image character_chain = im.Scale("character.png", 600, 600) # 缩放到600x600image character_chain_alpha = im.Alpha(character_chain, 0.8) # 调整透明度image character_chain_rotate = im.Rotate(character_chain_alpha, 30) # 旋转30度
# 自定义颜色矩阵# im.matrix(r1, g1, b1, a1, r2, g2, b2, a2, r3, g3, b3, a3, r4, g4, b4, a4)# 每个参数值范围:0.0到1.0init python: # 自定义暖色调滤镜 warm_matrix = im.matrix( (1.1, 0.0, 0.0, 0.0), # R通道:增强红色 (0.0, 1.0, 0.0, 0.0), # G通道:保持不变 (0.0, 0.0, 0.9, 0.0), # B通道:稍微降低蓝色 (0.0, 0.0, 0.0, 1.0) # A通道:保持不变 )
# 自定义冷色调滤镜 cool_matrix = im.matrix( (0.9, 0.0, 0.0, 0.0), # R通道:降低红色 (0.0, 1.0, 0.0, 0.0), # G通道:保持不变 (0.0, 0.0, 1.1, 0.0), # B通道:增强蓝色 (0.0, 0.0, 0.0, 1.0) # A通道:保持不变 )
image warm_tone = Transform("character.png", matrix=warm_matrix)image cool_tone = Transform("character.png", matrix=cool_matrix)5.3 ATL变换动画详解
# ATL图片变换动画# 使用ATL语法创建动态图片变换效果
# 基本ATL变换动画image character_idle = "character.png": # 呼吸效果:轻微上下移动 # yoffset: 垂直位置偏移 ease 2.0 yoffset 10 # 2秒向下移动10像素 ease 2.0 yoffset 0 # 2秒回到原位 repeat
image character_breathing = "character.png": # 综合呼吸效果:缩放+透明度变化 parallel: ease 2.0 zoom 1.05 # 放大到1.05倍 ease 2.0 zoom 1.0 # 缩回原始大小 repeat parallel: ease 1.0 alpha 0.9 # 透明度变化 ease 1.0 alpha 1.0 repeat
# 旋转动画image spinning_item = "item.png": ease 3.0 rotate 360 # 3秒旋转360度 repeat
# 摆动动画image swaying_tree = "tree.png": ease 1.5 rotate -5 # 向左摆动5度 ease 1.5 rotate 5 # 向右摆动5度 repeat
# 闪烁动画image blinking_star = "star.png": alpha 1.0 # 初始状态 ease 0.3 alpha 0.2 # 变暗 ease 0.3 alpha 1.0 # 变亮 repeat
# 呼吸式缩放image breathing_heart = "heart.png": ease 0.5 zoom 1.2 # 放大 ease 0.5 zoom 1.0 # 缩回 repeat
# 淡入淡出动画image fading_orb = "orb.png": alpha 0.0 # 从完全透明开始 ease 1.0 alpha 1.0 # 淡入 pause 1.0 # 停顿 ease 1.0 alpha 0.0 # 淡出 repeat
# 弹跳效果image bouncing_ball = "ball.png": ease 0.3 yoffset 100 # 下落 ease 0.3 yoffset 0 # 上升 ease 0.15 yoffset 25 # 小反弹 ease 0.15 yoffset 0 # 回到原位 repeat
# 旋转缩放组合image rotating_scaling = "gem.png": parallel: ease 2.0 rotate 360 # 旋转 repeat parallel: ease 1.0 zoom 1.2 # 缩放 ease 1.0 zoom 1.0 repeat
# 颜色变化动画image color_changing_gem = "gem.png": ease 1.0 matrix im.matrix.tint(1.0, 0.0, 0.0) # 红色 ease 1.0 matrix im.matrix.tint(0.0, 1.0, 0.0) # 绿色 ease 1.0 matrix im.matrix.tint(0.0, 0.0, 1.0) # 蓝色 repeat
# ATL动画参数详解:# 1. 位置参数:# - xoffset, yoffset: 位置偏移(像素)# - xpos, ypos: 绝对位置# - xalign, yalign: 对齐方式(0-1)# - anchor: 锚点位置## 2. 变换参数:# - rotate: 旋转角度# - zoom: 统一缩放# - xzoom, yzoom: 分方向缩放## 3. 外观参数:# - alpha: 透明度# - matrix: 颜色矩阵# - blend: 混合模式## 4. 时间控制:# - ease: 缓动动画# - linear: 线性动画# - pause: 暂停# - repeat: 重复# - time: 绝对时间控制5.4 复杂变换组合详解
# 角色入场动画image character_entrance = "character.png": # 初始状态 zoom 0.0 # 缩放到0(不可见) alpha 0.0 # 完全透明 # 并行执行多个动画 parallel: ease 1.0 zoom 1.0 # 1秒内放大到正常大小 parallel: ease 1.0 alpha 1.0 # 1秒内淡入 parallel: ease 0.5 rotate -10 # 先向左旋转10度 ease 0.5 rotate 0 # 再回到正常角度
# 角色离场动画image character_exit = "character.png": parallel: ease 1.0 zoom 0.5 # 缩小到50% parallel: ease 1.0 alpha 0.0 # 淡出 parallel: ease 0.5 rotate 15 # 向右旋转15度
# 受伤效果image character_damage = "character.png": # 颤抖效果 parallel: ease 0.1 xzoom -1 # 水平翻转 ease 0.1 xzoom 1 # 恢复 ease 0.1 xzoom -1 # 再次翻转 ease 0.1 xzoom 1 # 恢复 parallel: ease 0.4 zoom 1.1 # 稍微放大 ease 0.4 zoom 1.0 # 恢复
# 攻击效果image character_attack = "character.png": parallel: # 向前冲刺 ease 0.1 xoffset -20 # 向左移动 ease 0.2 xoffset 30 # 向右冲出 ease 0.1 xoffset 0 # 回到原位 parallel: # 攻击时的缩放 ease 0.1 zoom 1.2 # 放大 ease 0.2 zoom 0.9 # 缩小 ease 0.1 zoom 1.0 # 恢复
# 精神状态变化效果image character_confused = "character.png": # 困惑状态:左右摇晃 ease 0.2 rotate 5 # 向右摇晃 ease 0.2 rotate -5 # 向左摇晃 ease 0.2 rotate 10 # 大幅右摇 ease 0.2 rotate -10 # 大幅左摇 repeat
image character_angry = "character.png": # 愤怒状态:剧烈颤抖 parallel: ease 0.3 xzoom -1.1 # 快速水平翻转 ease 0.3 xzoom 1.1 repeat 3 # 重复3次 parallel: ease 0.6 yoffset 5 # 上下震动 ease 0.6 yoffset 0 repeat 2
image character_happy = "character.png": # 开心状态:轻微跳跃 ease 0.2 yoffset -15 # 跳起 ease 0.2 yoffset 0 # 落下 ease 0.3 yoffset -8 # 小跳 ease 0.3 yoffset 0 # 落下 repeat
image character_sad = "character.png": # 伤心状态:缓慢下沉 ease 1.0 yoffset 20 # 向下移动 ease 1.0 alpha 0.7 # 变暗 parallel: ease 2.0 zoom 0.9 # 稍微缩小 repeat
# 魔法效果image magic_cast = "wizard.png": parallel: # 施法时的旋转 ease 0.5 rotate 30 ease 0.5 rotate -30 repeat 3 parallel: # 能量聚集 ease 1.0 zoom 1.1 ease 0.5 zoom 1.0 parallel: # 颜色变化 ease 0.5 matrix im.matrix.tint(0.5, 0.0, 1.0) # 紫色 ease 0.5 matrix im.matrix.tint(1.0, 1.0, 1.0) # 恢复
# 传送效果image teleport_out = "character.png": parallel: ease 0.5 zoom 0.0 # 缩小到消失 parallel: ease 0.5 alpha 0.0 # 同时淡出 parallel: ease 0.5 rotate 720 # 快速旋转两圈
image teleport_in = "character.png": zoom 0.0 alpha 0.0 rotate 720 parallel: ease 0.5 zoom 1.0 # 放大出现 parallel: ease 0.5 alpha 1.0 # 淡入 parallel: ease 0.5 rotate 0 # 旋转归零5.5 变换函数和矩阵变换详解
# 定义自定义变换函数init python: # 创建模糊效果 def blur_image(image, amount): """ 创建模糊效果 参数说明: - image: 图片对象或文件名 - amount: 模糊强度(0-10) - 返回:处理后的图片对象 """ # 注意:Ren'Py的模糊效果需要其他库支持 # 这里使用FactorScale模拟简单模糊 return im.FactorScale(image, 1.0, 1.0)
# 创建边框效果 def add_border(image, color, size): """ 为图片添加边框 参数说明: - image: 图片对象或文件名 - color: 边框颜色(十六进制) - size: 边框宽度(像素) - 返回:带边框的图片对象 """ # 创建背景色块 bg = im.Solid(color, image.width + 2*size, image.height + 2*size) # 组合背景和原图 return im.Composite( (image.width + 2*size, image.height + 2*size), (0, 0), bg, # 背景在(0,0) (size, size), image # 图片在(size,size) )
# 使用自定义变换函数image bordered_character = add_border("character.png", "#000000", 5)image bordered_item = add_border("item.png", "#FFD700", 3)
# 矩阵变换详解# im.matrix类提供了多种颜色变换方法
# 1. 基础颜色变换# im.matrix.tint(r, g, b): 着色变换# - r, g, b: 红、绿、蓝通道的乘数# - 值范围:0.0到2.0# - 1.0: 不改变# - 大于1.0: 增强该通道# - 小于1.0: 减弱该通道image red_tint = Transform("character.png", matrix=im.matrix.tint(1.5, 1.0, 1.0)) # 增强红色image green_tint = Transform("character.png", matrix=im.matrix.tint(1.0, 1.5, 1.0)) # 增强绿色image blue_tint = Transform("character.png", matrix=im.matrix.tint(1.0, 1.0, 1.5)) # 增强蓝色
# 2. 透明度变换# im.matrix.opacity(value): 调整透明度# - value: 透明度(0.0-1.0)# - 1.0: 不透明# - 0.5: 半透明# - 0.0: 完全透明image semi_transparent = Transform("character.png", matrix=im.matrix.opacity(0.5))
# 3. 颜色反转# im.matrix.invert(): 颜色反转image inverted = Transform("character.png", matrix=im.matrix.invert())
# 4. 灰度变换# im.matrix.desaturate(): 去饱和# im.matrix.grayscale(): 转换为灰度image desaturated = Transform("character.png", matrix=im.matrix.desaturate())image grayscale = Transform("character.png", matrix=im.matrix.grayscale())
# 5. 特殊效果# im.matrix.sepia(): 怀旧效果image sepia = Transform("character.png", matrix=im.matrix.sepia())
# 自定义颜色矩阵详解# im.matrix(r1, g1, b1, a1, r2, g2, b2, a2, r3, g3, b3, a3, r4, g4, b4, a4)# 创建4x4颜色变换矩阵# 前三行:RGB通道的变换系数# 最后一行:偏移量
init python: # 夜间效果矩阵 night_matrix = im.matrix( (0.8, 0.0, 0.0, 0.0), # R通道:降低80% (0.0, 0.8, 0.0, 0.0), # G通道:降低80% (0.0, 0.0, 1.2, 0.0), # B通道:增强120%(蓝色调) (0.0, 0.0, 0.0, 1.0) # A通道:不变 )
# 老照片效果矩阵 old_photo_matrix = im.matrix( (1.1, 0.1, 0.1, 0.0), # R通道:增强红色,添加绿色和蓝色 (0.1, 1.0, 0.1, 0.0), # G通道:略微调整 (0.1, 0.1, 0.8, 0.0), # B通道:降低蓝色 (0.0, 0.0, 0.0, 1.0) # A通道:不变 )
# 高对比度矩阵 high_contrast_matrix = im.matrix( (1.5, 0.0, 0.0, -0.25), # R通道:增强对比度,调整偏移 (0.0, 1.5, 0.0, -0.25), # G通道:增强对比度 (0.0, 0.0, 1.5, -0.25), # B通道:增强对比度 (0.0, 0.0, 0.0, 1.0) # A通道:不变 )
image night_scene = Transform("background.png", matrix=night_matrix)image old_photo = Transform("photo.png", matrix=old_photo_matrix)image high_contrast = Transform("image.png", matrix=high_contrast_matrix)
# 动态颜色变换image rainbow_character = "character.png": # 使用缓动函数实现颜色平滑过渡 ease 1.0 matrix im.matrix.tint(1.0, 0.0, 0.0) # 红色 ease 1.0 matrix im.matrix.tint(0.0, 1.0, 0.0) # 绿色 ease 1.0 matrix im.matrix.tint(0.0, 0.0, 1.0) # 蓝色 ease 1.0 matrix im.matrix.tint(1.0, 1.0, 0.0) # 黄色 ease 1.0 matrix im.matrix.tint(1.0, 0.0, 1.0) # 品红 ease 1.0 matrix im.matrix.tint(0.0, 1.0, 1.0) # 青色 repeat
# 组合变换效果image combined_transform = "character.png": parallel: # 颜色和透明度同时变化 ease 1.0 matrix im.matrix.tint(1.5, 1.0, 1.0) # 红色增强 ease 1.0 matrix im.matrix.tint(1.0, 1.0, 1.0) # 恢复 repeat parallel: ease 0.5 alpha 0.7 ease 0.5 alpha 1.0 repeat parallel: ease 1.0 zoom 1.1 ease 1.0 zoom 1.0 repeat5.6 条件变换详解
# 定义状态变量default character_state = "normal"default time_of_day = "day"
# 定义不同状态的变换# ConditionSwitch根据条件动态选择显示的图片# 参数格式:ConditionSwitch("条件1", 图片1, "条件2", 图片2, ...)
image character_dynamic = ConditionSwitch( "character_state == 'normal'", "character.png", # 正常状态 "character_state == 'happy'", Transform("character.png", matrix=im.matrix.tint(1.0, 1.0, 0.8)), # 开心状态(偏黄色) "character_state == 'sad'", Transform("character.png", matrix=im.matrix.tint(0.8, 0.8, 1.0)), # 伤心状态(偏蓝色) "character_state == 'angry'", Transform("character.png", matrix=im.matrix.tint(1.0, 0.8, 0.8)), # 愤怒状态(偏红色) "character_state == 'ghost'", Transform("character.png", alpha=0.5), # 幽灵状态(半透明) "character_state == 'invisible'", Transform("character.png", alpha=0.0) # 隐身状态)
# 复杂条件变换image dynamic_background = ConditionSwitch( "time_of_day == 'day'", "bg_day.png", "time_of_day == 'evening'", Transform("bg_evening.png", matrix=im.matrix.tint(1.2, 0.8, 0.6)), "time_of_day == 'night'", Transform("bg_night.png", matrix=im.matrix.brightness(-0.3)), "time_of_day == 'dawn'", Transform("bg_dawn.png", matrix=im.matrix.tint(1.0, 0.9, 0.8)))
# 结合动画的条件变换image animated_character = ConditionSwitch( "character_state == 'idle'", "character_idle", "character_state == 'walking'", "character_walking", "character_state == 'running'", "character_running", "character_state == 'fighting'", "character_fighting")
# 多级条件变换image complex_switch = ConditionSwitch( "character_state == 'normal' and time_of_day == 'day'", "character_normal_day.png", "character_state == 'normal' and time_of_day == 'night'", Transform("character_normal_night.png", matrix=im.matrix.brightness(-0.2)), "character_state == 'angry' and time_of_day == 'day'", Transform("character_angry.png", matrix=im.matrix.tint(1.2, 0.8, 0.8)), "character_state == 'angry' and time_of_day == 'night'", Transform("character_angry_night.png", matrix=im.matrix.tint(1.0, 0.6, 0.6)))
# 在脚本中使用条件变换label emotion_test: # 切换不同的情绪状态 $ character_state = "normal" show character_dynamic at center "正常状态"
$ character_state = "happy" "开心状态"
$ character_state = "sad" "伤心状态"
$ character_state = "angry" "生气状态"
$ character_state = "ghost" "幽灵状态"
$ character_state = "invisible" "隐身状态"
$ character_state = "normal"
# 时间变化的演示label time_test: # 切换不同的时间状态 $ time_of_day = "day" show dynamic_background "白天"
$ time_of_day = "evening" "傍晚"
$ time_of_day = "night" "夜晚"
$ time_of_day = "dawn" "黎明"5.7 变换与动画结合的综合案例
# 综合战斗效果演示
# 1. 角色准备攻击image character_charge = "character.png": parallel: # 前后摇摆积蓄能量 ease 0.3 xoffset -10 ease 0.3 xoffset 0 repeat 2 parallel: # 能量聚集放大 ease 0.6 zoom 1.1 ease 0.6 zoom 1.0 repeat 2 parallel: # 颜色变红表示愤怒 ease 0.3 matrix im.matrix.tint(1.0, 0.8, 0.8) ease 0.3 matrix im.matrix.tint(1.0, 1.0, 1.0) repeat 3
# 2. 攻击冲击波效果image shockwave = "shockwave.png": zoom 0.0 # 从小开始 alpha 1.0 # 完全不透明 ease 0.2 zoom 2.0 # 快速扩大 ease 0.2 alpha 0.0 # 同时淡出
# 3. 受击震动效果image hit_shake = "character.png": # 快速左右震动 ease 0.05 xoffset -10 ease 0.05 xoffset 10 ease 0.05 xoffset -8 ease 0.05 xoffset 8 ease 0.05 xoffset -5 ease 0.05 xoffset 5 ease 0.05 xoffset 0
# 4. 治疗光芒效果image heal_light = "heal_light.png": alpha 0.0 ease 0.5 alpha 0.8 # 渐现 ease 1.0 alpha 0.0 # 渐隐
# 5. 护盾效果image shield = "shield.png": alpha 0.0 ease 0.3 alpha 0.6 parallel: ease 2.0 rotate 360 # 旋转护盾 repeat parallel: ease 1.0 zoom 1.1 # 脉动缩放 ease 1.0 zoom 1.0 repeat
# 6. 魔法施放效果image magic_cast = "wizard.png": parallel: # 施法手势 ease 0.3 yoffset -10 ease 0.3 yoffset 0 repeat 2 parallel: # 魔法颜色变化 ease 0.5 matrix im.matrix.tint(0.5, 0.0, 1.0) # 紫色魔法 ease 0.5 matrix im.matrix.tint(1.0, 1.0, 1.0) repeat
# 战斗场景综合演示label battle_animation: scene bg battlefield
# 显示战斗角色 show character_idle at left show enemy_idle at right
"战斗开始!"
# 角色准备攻击 "角色准备攻击!" show character_charge at left pause 1.5 hide character_charge
# 角色发动攻击 "角色发动攻击!" show character_attack at left show shockwave at center with flash # 闪光效果 pause 0.5 hide shockwave hide character_attack
# 敌人受到攻击 "敌人受到攻击!" show hit_shake at right show critical_damage at right: yoffset -50 with flash pause 1.0 hide hit_shake hide critical_damage
# 角色发动治疗 "角色发动治疗!" show heal_light at left show heal_effect at left: yoffset -30 pause 1.5 hide heal_light hide heal_effect
# 角色施放魔法 "角色施放魔法!" show magic_cast at left show shield at left pause 2.0 hide magic_cast hide shield
"战斗结束!"5.8 图片变换性能优化详解
# 性能优化技巧和最佳实践
# 1. 预渲染复杂变换# 预先渲染常用的复杂变换,避免运行时重复计算init python: # 预先渲染常用的复杂变换 # 这会提前生成变换后的图片,提高运行时性能 optimized_character = im.MatrixColor( im.Scale("character.png", 400, 600), im.matrix.sepia() )
# 预渲染多个变换 character_normal = im.Scale("character.png", 300, 450) character_small = im.Scale("character.png", 200, 300) character_large = im.Scale("character.png", 400, 600)
# 2. 使用缓存变换# cache参数:启用变换缓存# True: 启用缓存(推荐用于静态变换)# False: 禁用缓存(用于动态变换)image cached_transform = Transform("character.png", zoom=1.2): cache True # 启用缓存,提高性能
image dynamic_transform = "character.png": ease 1.0 zoom 1.2 cache False # 动态变换禁用缓存
# 3. 避免在循环中创建新变换# 错误做法:在循环中动态创建变换,性能很差# label bad_example:# for i in range(100):# show Transform("character.png", rotate=i*3.6)# pause 0.1
# 正确做法:使用ATL动画预定义image rotating_character = "character.png": linear 10.0 rotate 360 # 10秒旋转360度 repeat
label good_example: show rotating_character at center pause 10.0 hide rotating_character
# 4. 使用条件变换替代动态创建# 避免在运行时动态创建大量Transform对象image optimized_character = ConditionSwitch( "flag == True", Transform("character.png", zoom=1.2), "flag == False", "character.png")
# 5. 合理使用图片大小# 避免过大的图片尺寸,影响性能# 建议尺寸:# - 角色立绘:800x1200 或更小# - 背景图:1920x1080 或根据游戏分辨率# - 道具图:256x256 或更小# - UI图标:64x64 或更小
# 6. 批量处理变换# 使用Composite批量处理多个图片image batch_processed = im.Composite( (800, 600), (0, 0), "background.png", (100, 100), im.Scale("character.png", 200, 300), (500, 100), im.Scale("item.png", 100, 100))
# 7. 避免过度复杂的矩阵变换# 简单的矩阵变换比复杂的快# 简单变换(推荐)image simple_tint = Transform("character.png", matrix=im.matrix.tint(1.2, 1.0, 1.0))
# 复杂变换(谨慎使用)image complex_matrix = Transform("character.png", matrix=im.matrix( (1.1, 0.1, 0.1, 0.0), (0.1, 1.0, 0.1, 0.0), (0.1, 0.1, 0.8, 0.0), (0.0, 0.0, 0.0, 1.0)))
# 8. 使用ATL的repeat和time控制# 优化动画性能image optimized_animation = "sprite.png": # 使用repeat而不是重复的ease语句 ease 0.5 xoffset 10 ease 0.5 xoffset -10 repeat
# 9. 合理使用alpha和zoom# 避免在单个动画中同时使用过多的变换image performance_friendly = "character.png": # 只使用必要的变换 parallel: ease 1.0 zoom 1.1 ease 1.0 zoom 1.0 repeat
# 10. 图片格式优化# 使用合适的图片格式:# - PNG: 适合透明背景,质量高# - JPG: 适合照片,文件小# - WebP: 新格式,压缩效果好# 建议测试不同格式的性能表现6. 综合案例演示
6.1 游戏标题屏幕动态效果
# 标题屏幕的综合实现init python: # 定义标题屏幕样式 # 参数详解: # - font: 字体文件名 # - size: 字体大小(像素) # - color: 文字颜色(十六进制) # - outlines: 描边设置 [(宽度, 颜色, 强度, 偏移)] # - drop_shadow: 阴影设置 [(x偏移, y偏移, 颜色, 模糊, 扩散)]
style.title_text: font "YourTitleFont.ttf" size 72 color "#FFFFFF" # 多层描边创建深度感 outlines [(4, "#000000", 128, 0), (2, "#FFD700", 255, 0)] # 发光阴影效果 drop_shadow [(6, 6, "#FFD70080", 4, 6)]
# 标题动画image title_main = Text("魔幻冒险", style="title_text"): # 三个并行动画同时进行 parallel: # 上下浮动效果 ease 2.0 yoffset -10 ease 2.0 yoffset 10 repeat parallel: # 透明度呼吸效果 ease 3.0 alpha 0.8 ease 3.0 alpha 1.0 repeat parallel: # 轻微缩放脉动 ease 1.0 zoom 1.05 ease 1.0 zoom 1.0 repeat
# 副标题动画image subtitle_text = Text("开启你的奇幻之旅", size=32, color="#FFFFFF"): color "#FFFFFF" # 简单描边 outlines [(2, "#000000", 128, 0)] # 颜色渐变循环 ease 1.5 color "#FFD700" # 金色 ease 1.5 color "#FFFFFF" # 白色 repeat
# 开始菜单按钮动画image start_button = Text("开始游戏", size=24, color="#FFFFFF"): outlines [(2, "#000000", 255, 0)] drop_shadow [(3, 3, "#00000080", 2, 3)] # 按钮悬停效果模拟 ease 0.3 size 28 # 放大 ease 0.3 size 24 # 缩回 repeat
# 背景装饰动画image floating_particles = "particles.png": alpha 0.0 parallel: ease 2.0 alpha 0.6 # 淡入 ease 2.0 alpha 0.3 # 半透明 repeat parallel: ease 5.0 yoffset -100 # 向上浮动 ease 1.0 yoffset 0 # 瞬间回到下方 repeat
# 标题屏幕label title_screen: scene bg title_room
# 显示各个元素 show title_main at center show subtitle_text at center: yoffset 100 # 副标题位置
show start_button at center: yoffset 200 # 按钮位置
show floating_particles at truecenter
with dissolve # 淡入效果
"点击任意位置开始游戏..."
# 离开动画 hide title_main hide subtitle_text hide start_button hide floating_particles
with dissolve # 淡出效果
jump start6.2 战斗界面伤害数字效果
# 战斗界面的动态效果实现init python: # 伤害数字样式 # 参数说明: # - font: 字体文件名 # - size: 字体大小(像素) # - color: 文字颜色 # - bold: 是否加粗(True/False) # - outlines: 描边设置 # - drop_shadow: 阴影设置
style.damage_critical: font "DamageFont.ttf" size 48 color "#FF0000" bold True # 粗描边增强可读性 outlines [(3, "#000000", 255, 0)] # 红色发光阴影 drop_shadow [(5, 5, "#00000080", 3, 5)]
style.damage_normal: font "DamageFont.ttf" size 36 color "#FFFFFF" bold True outlines [(2, "#000000", 255, 0)] drop_shadow [(3, 3, "#00000080", 2, 3)]
style.heal_text: font "HealFont.ttf" size 36 color "#00FF00" bold True outlines [(2, "#000000", 255, 0)] drop_shadow [(3, 3, "#00000080", 2, 3)]
# 暴击伤害动画image critical_damage = Text("暴击!9999", style="damage_critical"): # 三层并行动画 parallel: # 大小脉动 ease 0.2 size 64 ease 0.2 size 48 repeat 3 parallel: # 上下跳动 ease 0.5 yoffset -50 ease 0.5 yoffset -20 repeat 2 parallel: # 闪烁效果 ease 0.3 alpha 0.5 ease 0.3 alpha 1.0 repeat 4
# 普通伤害动画image normal_damage = Text("1500", style="damage_normal"): # 向上飘出并淡出 ease 0.5 yoffset -30 # 向上移动 ease 0.5 yoffset -10 ease 0.3 alpha 0.0 # 淡出
# 治疗动画image heal_effect = Text("+500", style="heal_text"): # 绿色治疗效果 parallel: ease 0.5 yoffset -40 # 向上飘起 ease 0.5 yoffset -15 parallel: ease 0.3 alpha 1.0 ease 0.3 alpha 0.0 repeat 2
# 闪避效果image dodge_text = Text("闪避!", size=32, color="#00FFFF"): outlines [(2, "#000000", 255, 0)] # 快速移动 ease 0.1 xoffset -30 ease 0.1 xoffset 30 ease 0.1 xoffset 0
# 格挡效果image block_text = Text("格挡", size=32, color="#FFFFFF"): outlines [(2, "#0000FF", 255, 0)] # 震动效果 ease 0.1 xoffset -5 ease 0.1 xoffset 5 repeat 3
# 战斗界面演示label battle_demo: scene bg battle_field
"战斗开始!"
# 敌人发动攻击 "敌人发动攻击!" show critical_damage at center with flash # 闪光强调暴击 pause 1.5 hide critical_damage
# 主角反击 "主角反击!" show normal_damage at center: xoffset 100 # 伤害数字位置偏移 pause 1.0 hide normal_damage
# 主角发动治疗 "主角发动治疗魔法!" show heal_effect at center: xoffset -100 pause 1.0 hide heal_effect
# 闪避演示 "敌人再次攻击,主角闪避!" show dodge_text at center pause 0.8 hide dodge_text
# 格挡演示 "敌人攻击,主角格挡!" show block_text at center pause 1.0 hide block_text
"战斗结束!"文章分享
如果这篇文章对你有帮助,欢迎分享给更多人!