解包提取壁纸引擎的壁纸资源,然后做一个动态壁纸网页!

前言

最近使用壁纸引擎时,突然发觉做个动态壁纸主页好像也挺不错的诶,于是就有了这篇文章

如何提取壁纸引擎的资源?

首先,壁纸引擎的资源分为两类,视频类和场景类

视频类

对于视频类,打开你的壁纸引擎,在“已安装”选项卡里,找到你要提取的壁纸,右键选择“资源管理器”打开,就可以看到壁纸的视频文件了

Image

因为视频类壁纸本质上就是在背景循环播放一个视频

场景类

场景类就要复杂一些了,有些壁纸本体的资源文件都被打包成了“scene.pkg”,需要使用工具解包,这里使用GitHub大佬“notscuffed”开发的“RePKG”以及哔哩哔哩大佬“Bury我们past”开发的“RePKG_GUI”RePKG图形化工具进行解包

开始解包

开始解包

Image

打开壁纸引擎,在“已安装”选项卡里,找到你要提取的壁纸,右键选择“资源管理器”打开,就可以看到场景壁纸的资源文件“scene.pkg”了,我们打开“RePKG-GUI.exe”

Image

然后直接把“scene.pkg”文件拖到上方的“单个”的路径栏里面,当然,你也可以选择旁边的“PKG/MPKG”手动选择,点击提取开始解包,解包完成后,它会问你要不要查看文件,默认是解包在“scene.pkg”文件的文件夹内的

Image

可以看到解包成功了,可以看到此壁纸包含的音视频贴图以及着色器文件

找不到场景壁纸的视频文件?

这是由于场景类壁纸是由壁纸引擎直接渲染的,而非视频,所以资源解包出来都是壁纸的贴图文件之类的,那就代表场景壁纸没法提取视频文件啦?也不是,壁纸引擎提供了一种解决方案:“预渲染”,还是打开壁纸引擎,右键你需要导出视频文件的壁纸,选择“发送到移动设备”,在选择“导出.mpkg文件”

Image

这里选择“预渲染”,这里可以调整视频的裁剪和分辨率以及帧率,调整好后选择“确认”,选择保存的路径,这时候壁纸引擎会出现一个消息框,静静等待转换壁纸完成即可。

解包视频文件

Image

打开你保存的路径,把导出的“.mpkg文件”拖到“RePKG_GUI”提取

Image

提取完成后可以看到,已经成功导出了视频文件

移植到网页!

这一步就非常简单了,这里我制作一个简单的小网页,自动播放一个视频,并且铺满网页的背景

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>壁纸</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .video-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    #bg-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; 
      z-index: -1;
    }
    
    .content {
      position: relative;
      z-index: 1;
      color: white;
      text-align: center;
      padding-top: 50px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <video id="bg-video" autoplay muted loop playsinline>
      <source src="pc.mp4" type="video/mp4">
    </video>
  <script>
    const video = document.getElementById('bg-video');
    
    video.addEventListener('loadedmetadata', () => {
      adjustVideoSize();
    });
    
    window.addEventListener('resize', adjustVideoSize);
    
    function adjustVideoSize() {
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      
      video.style.width = `${windowWidth}px`;
      video.style.height = `${windowHeight}px`;
    }
  </script>
</body>
</html>
Image

就可以很容易的实现动态壁纸网页的效果啦

最后

我自己做了个加了点小功能的版本,可以看看:

https://atri.nihao.moe

本文标题:解包提取壁纸引擎的壁纸资源,然后做一个动态壁纸网页!
本文链接:https://xiau.net/1925.html/
转载需注明出处(*σ´∀`)σ

评论

  1. Image
    是阿改哦
    3 月前
    2025-11-02 12:27:00

    有意思 回去试试((

    • Image
      博主
      是阿改哦
      3 月前
      2025-11-04 1:46:20

      可以可以))))(/ω\)

发送评论 编辑评论


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