第 17 课 · Sprite2D 精灵节点

⏱ 预计时长 30 分钟📊 难度入门📚 模块 第 3 部分 · 2D 游戏开发实战

🎯 本课学习目标

学会导入图片素材到项目
用 Sprite2D 显示图片并调节属性
实现图片翻转、透明与九宫格

精灵（Sprite）是 2D 游戏里「看得见的角色/物体」。本课掌握 Sprite2D 节点的全部基础用法。

📖 详细教学步骤

准备一张图片素材素材

准备一张 PNG 图片（可先自己画，或用 Godot 官方示例素材）
把图片拖入资源面板（会自动导入）
图片出现在资源面板，点击可预览

💡 支持 PNG、JPG、SVG、WebP 等格式。透明背景推荐 PNG。

添加 Sprite2D 并设置纹理实操

右键场景根节点 → 添加子节点 → Sprite2D
选中 Sprite2D，在检查器找到 Texture（纹理） 属性
把资源面板里的图片拖到 Texture 上
主视图立刻显示图片

💡 也可以直接把图片从资源面板拖到主视图，Godot 会自动创建 Sprite2D。

常用属性：翻转 / 透明 / 居中属性

在检查器里：

Flip H：水平翻转（左右镜像）
Flip V：垂直翻转（上下镜像）
Modulate：调色/透明度（A 通道控制透明）
Centered：是否以中心点为锚（默认勾选）
Offset：显示偏移

GDSCRIPTextends Node2D

@onready var sprite = $Sprite2D

func _ready():
    sprite.flip_h = true          # 水平翻转
    sprite.modulate.a = 0.5       # 半透明
    sprite.modulate = Color(1, 0, 0, 1)  # 红色调

用代码切换图片实操

游戏里常需要换图（比如玩家换装）：

GDSCRIPTextends Node2D

@onready var sprite = $Sprite2D

func _ready():
    # 加载新纹理并赋值
    sprite.texture = load("res://images/player2.png")

# 或预加载更高效
const TEXTURE_1 = preload("res://images/player1.png")
const TEXTURE_2 = preload("res://images/player2.png")

func switch_to_2():
    sprite.texture = TEXTURE_2

九宫格拉伸（关键）进阶

UI 框/进度条拉伸不变形，靠九宫格（Region）：

选中 Sprite2D → 检查器 Region Enabled 打勾
用 Edit Region 在纹理上框出九宫格区域
再缩放图片，四角不变形

💡 进度条、按钮底图常用此技巧，第 34 课会实战。

⚠️

图片拖进主视图却显示黑色方块？

通常是图片本身有黑色背景（不是透明 PNG），或者图片资源还没导入完成，稍等刷新即可。

⚠️

图片显示超大/超小？

检查图片分辨率与场景尺寸。可用检查器 Scale 调整，或用「Import」面板把图片设为 2D 纹理。

🧪 动手试一试

🏋️ 课后练习

导入两张不同图片，创建两个 Sprite2D，用代码实现：点击鼠标时在两者间切换图片并翻转方向。

texture 赋值 + flip_h 切换。监听点击可先用 Input 简单判断（第18课学）。

💡

图片素材建议统一放在项目里的 images/ 文件夹，方便管理。

💡

选中 Sprite2D 后按 T 键可快速切换为「就地编辑」网格视图。

🎓 本课小结

Sprite2D 显示图片的核心节点：拖入素材 → 设置 Texture；支持翻转、透明、调色、代码换图；九宫格用于不变形拉伸。