过渡动画 ScreenTransitionAnimation

项目结构

添加场景,根节点为 CanvasLayer2D 并重命名为 ScreenTransition:

添加子节点 ColorRectAnimationPlayer,在 ColorRect 中将颜色(Color)设置为黑色:

找到 Material,新建 Shader(先不管Shader Param 中的 Wipe Image,后面才会加入,这里是做好之后的样子):

Shader Code

Shader 中敲入代码:

shader_type canvas_item;
// 申明 shader 的类型,因为是 2d 游戏,所以是 canvas_item 类型的

uniform sampler2D wipeImage; // 全局变量 wipeImage
uniform float percent : hint_range(0, 1); // 限制在 0 和 1 之间的百分比范围

void fragment() {
float texVal = texture(wipeImage, UV).r;
// 对图像的 r 通道进行采样

if (texVal < percent) {
// 在 Animation 中进行动态改变 percent 并且让 百分比不断变大,就可以有一个动态变透明的效果(虽然没有完全弄懂,但大致是这样没错的)
COLOR.a = 0.0;
}
}

AnimationPlayer

先为根节点添加一个脚本:

extends CanvasLayer

signal screen_covered

func emit_screen_covered():
emit_signal("screen_covered")
   // 这个函数用来发送信号

然后打开 Animation Player 添加 default 动画:

第一个轨道中的 ColorRect > material:shader 必须在 shader 检查器其中点击小钥匙添加动画帧才可以添加

ScreenTransitionManager

新建场景 ScreenTransitionManager 并在项目设置中设置为自动加载的场景,为根节点添加脚本:

extends Node

var screenTransitionScene = preload("res://scenes/UI/ScreenTransition.tscn")

func transition_to_scene(scenePath):
var screenTransition = screenTransitionScene.instance()
add_child(screenTransition)
yield(screenTransition, "screen_covered")
get_tree().change_scene(scenePath)

调用方法

以项目中的开始菜单为例子,点击开始菜单调用函数的过程如下:

func on_playButton_pressed():
$"/root/LevelManager".change_level

change_levelLevelManager中 的函数,将它这样修改即可:

func change_level(levelIndex):
currentLevelIndex = levelIndex
if (currentLevelIndex >= levelScenes.size()):
currentLevelIndex = 0
$"/root/SceenTransitionManager".transition_to_scene(levelScenes[currentLevelIndex].resource_path) // 获取路径并通过动画过渡脚本来延迟调用场景的切换,达到淡入淡出的效果
作者:Sy_

评论

  1. 博主 置顶
    Windows Chrome
    7 月前
    2024-7-12 1:13:04

    Shader 这块一点也没看懂,只能复制粘贴了 5555555555““⌇●﹏●⌇

    • TobyKSKGD
      Sy_
      Windows Edge
      7 月前
      2024-7-13 7:13:13

      ∠( ᐛ 」∠)_

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇