『游戏UI』AI出全图+Spine特效+游戏引擎实战.md8.6 KBit/ai/『游戏UI』AI出全图+Spine特效+游戏引擎实战.md
---
title: "『游戏UI』AI出全图+Spine特效+游戏引擎实战"
source_url: "https://mp.weixin.qq.com/s/EzHvAfJUy-HRN1XFohk1ig"
source_site: "mp.weixin.qq.com"
clipped_at: "2026-06-27T05:47:55.799193+00:00"
clipper: "aiwiki-url-ingest"
extractor: "weixin_static"
author: "小游码匠"
---
# 『游戏UI』AI出全图+Spine特效+游戏引擎实战
码匠来了！抽点时间把游戏赶一下工期，时间真不够用啊，今天制作好友匹配对战场景，UI由ChatGPT\-Image2出图，自己将图中的UI元素拆出图层，然后再看UI上设计上如果涉及动画就将动画做几组，OK，干活儿。
**AI提供UI**
现在Image2出UI设计图已经相当不错了。接下来下载原图，开始导入PhotoShop做下一步工作。
**拆解UI**
其中VS这个图层需要动画支撑，所以这个先导出Spine作为动画处理，其他的图层为UI界面元素。（原本旗帜元素也应该是动画元素，我看背景上有了，就先不作为动画元素了）
我点了几笔白色，用来作为光的效果。OK,先导出这三个图层，一个粒子、一个光、一个VS，看这三个图片能干啥呢？
**制作动画**
导入图片开始制作。
如下创建三个骨骼和插槽，一个为光、Vs、粒子，但是粒子一个不行，所以我们在外面创建一个lizis用来放多个粒子。
UI动画没有运动规律参考，全看你自己审美来做，我审美差得很，就凑合做一下。
A：首次进场或当匹配到队友后展示
B：等待开局状态
这个看起来有点随意，后面看看怎么改动，暂时没有思路。
**上引擎**
首先还是按照Image2给的UI原型参考开始布局引擎UI，原型UI图如下所示。
参考原型设计，首先是设计游戏背景图，如下处理背景设计，点击Canvas，widget组件中，将Left、Right、Top、Bottom全部设为0，然后添加Spine组件，将背景图拖入SpriteFrame中，这样背景图永远和设备屏幕高宽大小一致。适应全品类手机。
背景如设计好后，接下来按照原型图开始添加一个UsersPlane的节点，这个用来放置玩家自己以及匹配的敌人面板。按照层级机构依次将结构节点精灵依次创建出来，然后对每一个节点放入SpriteFrame图片，这样界面就出来了。
我们将UserPlane节点复制一个，名字改为EnemyPlane，这个是敌人的面板，只是图片不一样而已，然后找到对应的素材将敌人的素材换上来，因为User和EnemyUI结构一致的。
在创建一个Spine动画挂载节点，VS节点，将Spine的JSON数据放入SkeletonData中。看到动画列中有te、loop两个动画，一个是触发特效te，一个是等待房主开始对战中的loop。
编写UI面板及动画控制脚本。PipeiFriendsPlane.ts
这里主要说的是Spine两个动画一个te和loop逻辑，就是te（不循环）播放完成后开始播放loop（循环）,这样在游戏技巧中我们可以组合各种特效，而不用全部放入一个动画轨道，非常灵活。
PipeiFriendsPlane.ts
Spine核心写法大概如下：
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
```
public initAnimations(callback?: Function): void { this.userPlane.setPosition(-450, this.userPlane.position.y, 0); this.enemyPlane.setPosition(450, this.enemyPlane.position.y, 0); tween(this.userPlane) .to(1, { position: v3(0, this.userPlane.position.y, 0) }, { easing: 'backOut' }) .start(); tween(this.enemyPlane) .to(1, { position: v3(0, this.enemyPlane.position.y, 0) }, { easing: 'backOut' }) .call(()=>{ callback?.(); const animeSpineTrack = this.vsSpine.setAnimation(0, 'te', false); this.vsSpine.setTrackCompleteListener(animeSpineTrack, (e, t)=>{ // console.log(e, t) this.vsSpine.setAnimation(0, 'loop', true); }); }) .start(); }
```
我们先播放te
-
```
this.vsSpine.setAnimation(0, 'te', false);
```
在动画轨道监听结束后播放loop
-
```
this.vsSpine.setAnimation(0, 'loop', true);
```
在网游阶段，我会将动画Action指令发送到后端，由小游码匠网游框架广播全部游戏玩家执行initAnimations，而不是现在单机载入这样的。
-
```
initAnimations
```
OK看下效果。
公众号消息回复如下内容即刻加入我们欢迎加入『小游码匠』共创合作社区群
学习、成长、合作、创新期待您的加入
【杂货铺】
[『游戏UI设计』：从AI出图到引擎落地，一套工作流打通场景及UI风格画](https://mp.weixin.qq.com/s?__biz=MzUzMDQ5OTk5OQ==&mid=2247485947&idx=1&sn=a83dc628534ea79befaae8f22a6a1ac6&scene=21#wechat_redirect)
[AI生图 \+ Spine动画 \+ Unity实战：码匠超完整级Unity小游戏教程发布！](https://mp.weixin.qq.com/s?__biz=MzUzMDQ5OTk5OQ==&mid=2247485886&idx=1&sn=6aab4f48515bbd8e2ce3f10b97bd599e&scene=21#wechat_redirect)
[AI生图 \+ Spine动画 \+ Cocos实战：码匠手把手带你做一款完整小游戏，简单好玩！](https://mp.weixin.qq.com/s?__biz=MzUzMDQ5OTk5OQ==&mid=2247485806&idx=1&sn=6a906c8b44f1043145c29170e02cda0c&scene=21#wechat_redirect)
[【小游戏联机】一键匹配对战模式，码匠网游框架开发者文档网站发布](https://mp.weixin.qq.com/s?__biz=MzUzMDQ5OTk5OQ==&mid=2247486089&idx=1&sn=e9c0ca9f9a05a08f1b4f58eb1b6a947f&scene=21#wechat_redirect)
[游戏作曲革命！零基础也能做出专业级BGM，AI一键逆向编曲全解](https://mp.weixin.qq.com/s?__biz=MzUzMDQ5OTk5OQ==&mid=2247485451&idx=1&sn=9b43d7f29f57c11f297d0d21f7fb15a0&scene=21#wechat_redirect)