[教程] 动态登录背景

[Thekingofglory]

首先，我们要明确一点：动图的登录界面并不是通过 .gif 文件实现的，它是通过一张张的 .png 图片的动画播放构成的。

因为这个真的很难理解，我也是通过查找资料，研究一个已经被弃用了的代码，持续一个星期多实现的。

所以，建议珍惜并尊重我的劳动成果，感谢支持。

 

而主题部分呢，我们还是通过盖住登录界面的方式，来实现我们的动图。

但是建议选一些小巧的视频，因为如果很长真的很占内存。

比如说：我的全部视频分成每一帧后，共200张图片，这200张假如是1080p，30fps的话，整个主题大概170MB。

而分成4K，60fps，整个主题大概700MB，而某些电脑因为不支持4K，游戏加载不出来，选定主题后游戏会自动卡死并关闭。

手机主题和电脑的实现功能类似，在这里不进行具体说明。

下面开始。

 

        1. 首先，去PS或者你觉得好用的网站、应用等，分解你的视频或者GIF，首先命名成 "background-animation.png" ，之后导出。

            导出后，重命名为 "background-animation-1.png" ， "background-animation-2.png" ， "background-animation-3.png" ………………以此按每帧类推。

            不命名成 "background.png" 的原因是我们需要一张底图。

            编辑：在这里并不需要一张底图，此书写错误是我写教程的时候疏忽导致的，在这里表示抱歉。

 

▲（以下内容仅参考，但请认真在第三步末尾阅读我对代码的解释，如果你想更新主题方便一些的话，请阅读完解释后看第四步）▲

 

        2.去 PokeMMO\data\themes\（主题名），用记事本，或者你觉得方便使用的编码器打开 "main-widgets.xml" ，拉到末尾，在 "</themes>" 之前，加入以下代码：

    <theme name="logingui" ref="logingui">
        <param name="background"><image>login-background-animation</image></param>
       </theme>
    <theme name="characterselectgui" ref="characterselectgui">
        <param name="background"><image>login-background-animation</image></param>
	</theme>

（在此处加的原因是使主题更新更便捷，无需去代码文件之中翻找，避免出错）

 

        3. 接下来，在同一文件夹下打开 "gfx.xml"，也用同样的方式打开。

           拉到文件的末尾，在最后一行（最后一行是</themes>）的前面新增一行，加入以下代码：

    <images file="animation/background-animation-1.png" filter="nearest">
        <area name="background-animation-001" xywh="*"/>
    </images>
    <images file="animation/background-animation-2.png" filter="nearest">
        <area name="background-animation-002" xywh="*"/>
    </images>


    <images>
        <animation name="animation" timeSource="enabled">
	<frame ref="background-animation-001" duration="30"/>
	<frame ref="background-animation-002" duration="30"/>
        </animation>
      
          <images>
        <composed name="login-background-animation">
            <alias ref="animation"/>
            <alias ref="login-background"/>
        </composed>
    </images>

 

 

解释：

"duration" 的意思是持续时间，"=" 后面的就是它所对应的数值，单位是毫秒，所以此主题中，切换图片的时间为每30毫秒即每0.03秒（即30fps）。

    <images file="animation/background-animation-1.png" filter="lineal">
        <area name="background-animation-001" xywh="*"/>
    </images>

此代码中，最上一行是我的图片放在的文件夹里，中间一行（"area name" ）是我对此图片给予的命名，你需要把每一帧都给予命名，之后才能将其赋予动态内容。

"filter" 是过滤器，"nearest" 是针对像素的，你也可以选择 "linear"，这是针对其他

    <images>
        <animation name="animation" timeSource="enabled">
	<frame ref="background-animation-001" duration="30"/>
	<frame ref="background-animation-002" duration="30"/>
        </animation>
    </images>

在给两张图给予命名后，赋予动态内容，每一行是每一张图（即每一帧）被给予的命名，你必须保持它们一致（ "frame ref" 和 "area name" ）。

          <images>
        <composed name="login-background-animation">
            <alias ref="animation"/>
            <alias ref="login-background"/>
        </composed>
    </images>

（因为太长不好展示，所以我只用了两张图来进行举例，在实际应用中，你需要根据图片的数量来新建和图片数量相等的代码）

（注意：我所说的所有文件文件不包含底图 "background.png" ，如果你的主题之前有此文件，你需要将其改成透明，但如果你想要区域动画，还是有必要加入 "background.png" 的，并在显示动画的区域改成透明，其余部分覆盖内容）

 

        4. 为了大家自主更新主题更方便，我不建议直接在 "main-widgets" 和 "gfx.xml" 文件中定位每一张图片，因为这真的很长，更新起来很麻烦。

           所以：把你的 "gfx.xml" 和 "main-widgets.xml" 替换成原版，打开 "theme.xml" 文件，拉到最下面，在 "</themes>" 的上一行新建一行，输入：

	<include filename="login-animation.xml"/>

           保存，关闭

           再在主题的主文件夹中，新建一个 .txt （文本文档）文件，命名为 "login-animation.txt" ，打开，输入以下代码：

<?xml version="1.0" encoding="UTF-8"?>
<themes>
    <images file="animation/background-animation-1.png" filter="nearest">
        <area name="background-animation-001" xywh="*"/>
    </images>
    <images file="animation/background-animation-2.png" filter="nearest">
        <area name="background-animation-002" xywh="*"/>
    </images>


    <images>
        <animation name="login-background-animation" timeSource="enabled">
            <frame ref="background-animation-001" duration="30"/>
            <frame ref="background-animation-002" duration="30"/>
		</animation>
	</images>

 	<theme name="logingui" ref="logingui">
		<param name="background"><image>login-background-animation</image></param>
   	</theme>
	<theme name="characterselectgui" ref="characterselectgui">
		<param name="background"><image>login-background-animation</image></param>
   	</theme>

      <images>
        <composed name="login-background-animation">
            <alias ref="animation"/>
            <alias ref="login-background"/>
        </composed>
    </images>
</themes>

           保存，关闭。

           之后，把文件扩展名改成 .xml 就可以了。

 

        5.接下来去编辑实体内容：

           在主文件夹建一个新文件夹，命名为 "animation" ，把每一帧图片放在这里（PokeMMO\data\themes\（主题名）\animation），记住保持 ".png" 格式，就完成啦！！！

 

 

以下是我所编辑后呈现的内容：

折叠

因为没有好的视频，所以我用了我的签名作为登录界面，我提取了共51帧，因为代码太长很难在此呈现，所以我不能把我编辑的东西截图贴在这里，在此表示抱歉。

此gif是1080p，30fps，在gif的前一部分因为电脑开的东西太多了，有些卡顿。

如果你成功了的话，你也可以贴出你的gif来展示你的伟大的成果 🙂

感谢阅读，如果你尝试了第四步的方法，但无法运行，请告诉我，我会在万圣节活动之后再找出解决方法。

Edited November 3, 2022 by Thekingofglory

[MIIVIIM]

<images file="animation/background-animation-1.png" filter="nearest">
        <area name="background-animation-001" xywh="*"/>
    </images>
    <images file="animation/background-animation-2.png" filter="nearest">
        <area name="background-animation-002" xywh="*"/>
    </images>

请问这段代码中的"background-animation-001"和"background-animation-002"是否为首帧与尾帧？

[Thekingofglory]

3小时前，MIIVIIM 说：

<images file="animation/background-animation-1.png" filter="nearest">
        <area name="background-animation-001" xywh="*"/>
    </images>
    <images file="animation/background-animation-2.png" filter="nearest">
        <area name="background-animation-002" xywh="*"/>
    </images>

请问这段代码中的"background-animation-001"和"background-animation-002"是否为首帧与尾帧？

如果是两张图片的话，是的

而多张图片，你需要多次建立

比如五张：

    <images file="animation/background-animation-1.png" filter="nearest">
        <area name="background-animation-001" xywh="*"/>
    </images>
    <images file="animation/background-animation-2.png" filter="nearest">
        <area name="background-animation-002" xywh="*"/>
    </images>
    <images file="animation/background-animation-3.png" filter="nearest">
        <area name="background-animation-003" xywh="*"/>
    </images>
    <images file="animation/background-animation-4.png" filter="nearest">
        <area name="background-animation-004" xywh="*"/>
    </images>
    <images file="animation/background-animation-5.png" filter="nearest">
        <area name="background-animation-005" xywh="*"/>
    </images>

 

[Thekingofglory]

当然，如果你觉得图片名字太长也可以在animation\background-animation-3.png这里改

🙂

[ImNotJX]

非常感谢分享，帮助非常大~

[Tiany]

感谢分享！

[llrsqxt]

用4里面那个方法会出现不兼容的现象

 

[llrsqxt]

做完之后不兼容是为什么