Phaser帧动画没有效果

使用场景：场内需要动效的元素！
帧动画使用的图片必须是雪碧图或者序列图
引用phaser官网的图片如下：

动画进入游戏加载时人物跑动 running_bg 的sprites.xml文件布局
原文件

<TextureAtlas imagePath="sprites.png"><SubTexture name="8.png" x="0" y="678" width="414" height="338"/><SubTexture name="2.png" x="0" y="0" width="414" height="324"/><SubTexture name="9.png" x="0" y="336" width="414" height="339"/><SubTexture name="5.png" x="40" y="1017" width="414" height="200"/><SubTexture name="6.png" x="40" y="1230" width="414" height="200"/><SubTexture name="7.png" x="0" y="1650" width="244" height="200"/>
</TextureAtlas>

更改后的文件

<TextureAtlas imagePath="sprites.png"><!--<SubTexture name="8.png" x="0" y="678" width="414" height="338"/>--><SubTexture name="2.png" x="0" y="0" width="414" height="324"/><SubTexture name="9.png" x="0" y="336" width="414" height="339"/><!--<SubTexture name="5.png" x="40" y="1017" width="414" height="200"/><SubTexture name="6.png" x="40" y="1230" width="414" height="200"/><SubTexture name="7.png" x="0" y="1650" width="244" height="200"/>-->
</TextureAtlas>

start_gif 的all.xml布局

<TextureAtlas imagePath="all1.png"><SubTexture name="0.png" x="0" y="0" width="244" height="240"/><SubTexture name="1.png" x="0" y="240" width="244" height="240"/><SubTexture name="2.png" x="0" y="460" width="244" height="238"/><SubTexture name="3.png" x="0" y="674" width="244" height="236"/><SubTexture name="4.png" x="0" y="888" width="244" height="236"/><SubTexture name="5.png" x="0" y="1100" width="244" height="236"/><!--<SubTexture name="7.png" x="0" y="1320" width="245" height="240"/>-->
</TextureAtlas>

<script>
let url = '域名'
var game = new window.Phaser.Game(414, 830, window.Phaser.CANVAS)
//场景一，加载游戏开始资源
var bootState = function (game) {this.preload = function () {//进入游戏时的资源加载动画资源game.load.atlasXML('running_bg', `${url}/running/sprites.png`, `${url}/running/sprites.xml`)game.load.image('loading', `${url}/loadbg.jpg`)}this.create = function () {//在第一个场景运行好之后，启动第二个场景game.state.start('loader')//(此处省略不相关代码)...}
}// 场景二 LOADING
var loaderState = function (game) {var loadImgthis.init = function () {//使用加载动画loadImg.play('loadImg_away', 10, true)//(此处省略不相关代码)...}//加载场景三 的资源文件this.preload = function () {game.load.atlasXML('running', `${url}/running/sprites.png`, `${url}/running/sprites.xml`)game.load.atlasXML('start_gif', `${url}/gif/start/all1.png`, `${url}/gif/start/all.xml`)//(此处省略不相关代码)...game.load.onFileComplete.add(function (progress) {progressText.text = '游戏加中' + progress + '%...'if (progress == 100) {//加载游戏开始场景game.state.start('runState')}})}
}//游戏开始场景
var runState = function (game) {//省略定义的变量...//创建游戏内的元素this.create = function () {...//创建游戏人物running = game.add.sprite(165, 220, 'running')//人物动作帧动画runningMan = running.animations.add('running_away', [1, 2])runningMan.play(10, true)...}//游戏逻辑this.update = function () {...//碰撞处理function xxx(){// 角色碰到障碍物动画var hithit = running.animations.add('start_gif', [3, 4])hit.play(10, true)...//恢复碰撞前动画setTimeout(() => {hit = running.animations.add('start_gif', [1, 2])hit.play(10, true)},800)}}
}game.state.add('boot', bootState)
game.state.add('loader', loaderState)
game.state.add('runState', runState)
game.state.start('boot')//启动第一个场景
</script>

以上是我复原了原来的代码
我自己遇到的几个坑：
1、掉用同一个文件，但是只是换了一个引用名称

//场景一预加载的
game.load.atlasXML('running_bg', `${url}/running/sprites.png`, `${url}/running/sprites.xml`)
//场景三游戏资源加载的
game.load.atlasXML('running', `${url}/running/sprites.png`, `${url}/running/sprites.xml`)

当某一天你改动这个文件的时候，或许长场景一的还能正常，但是场景三的就会报错了，就比如：
这是原来的文件

但是后来有需求说场景一不要这么多帧了，然后你就很利索的删了不要的帧布局

那么，问题来了，问题在下面第二点的误区

2、动画帧的误区
以为running.animations.add(‘start_gif’, [3, 4])中的 start_gif 是使用引用哪个start_gif，其实这里的 start_gif 单纯只是一个命名，不是上面的动画引用名称

//资源加载
game.load.atlasXML('running', `${url}/running/sprites.png`, `${url}/running/sprites.xml`)
game.load.atlasXML('start_gif', `${url}/gif/start/all1.png`, `${url}/gif/start/all.xml`)
...//下面代码是场景三，游戏画面//创建游戏人物
running = game.add.sprite(165, 220, 'running')
//碰撞处理function xxx(){// 角色碰到障碍物动画var hithit = running.animations.add('start_gif', [3, 4])hit.play(10, true)...}

由于以前写落的代码，没有深究，到前几天换素材的时候发现换完素材就报错了，

然后我就去看了一下，

它报错的是813行代码找不到index这个属性，确实它真正的错误是在812行，它找不到位置在【3,4】上的帧，所有就报错了。
解决：
巨大误区，一眼看到上面动的 hit = running.animations.add(‘start_gif’, [3, 4])，第一时间就以为是start_gif 的问题，然后赶紧去查看它引用的 xml 文件

发现一切还好啊，都有6个帧，怎么就没有第【3,4】帧呢？在这里纠结了大半天

其实，在 running = game.add.sprite(165, 220, ‘running’) 创建了这个动画图集的时候，
hit = running.animations.add(‘start_gif’, [3, 4]) 这个里面的动画名称 start_gif 就是单纯的给个动画名称而已，不会再引用上面加载的 start_gif 。

仅此记录！

Phaser帧动画没有效果相关推荐

android 自定义帧动画,Android 自定义方式实现帧动画效果
前言首先说下为啥要通过自定义处理的方式去实现Android的帧动画效果,因为通过系统原生支持的xml和java代码这两种方式实现,在播放的图片量很多时,会出现内存溢出,此现象也是在做项目当中有遇到, ...
android帧动画实现方法之一
好多动画离不开帧动画的使用,下面就实现帧动画的制作方式之一,以后会推出其他方法. 上面是文件存放位置. a.xml文件的代码如下: <?xml version="1.0" e ...
深入理解CSS3 Animation 帧动画
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
属性动画、帧动画、补间动画的介绍使用及对比
属性动画.帧动画.补间动画的介绍使用及对比版权声明:转载必须注明本文转自南轩的博客: http://blog.csdn.net/nanxuan521 在android开发中经常会碰到一些动画需求,其 ...
属性动画、帧动画、补间动画
补间动画(Tween Animation) 1.补间动画的特性: a.渐变动画支持四种类型:平移(Translate).旋转(Rotate).缩放(Scale).不透明度 b. 只是显示的位置变动,V ...
android 张口逐帧动画,《Android 动画》逐帧动画
关于 Android 的动画学习可以分为以下几个大类: 逐帧动画补间动画(也说 View 动画) 属性动画转场动画这里注意,我只是从学习的角度分为了这四类:从面试的角度,只需要说前面三类,转场动 ...
鼠标滚轮仿星球大战文字帧动画的实现
最近研究了一下利用鼠标滚轮控制文字帧动画的效果,在此记录一下实现过程. 不多说,先看一下效果图: 滚动鼠标滚轮之后文字会渐渐显示再渐渐消失,当菜单下的progressbar满了的时候,就会触发换页动画 ...
Android开发总结之动画(帧动画+补间动画)
一.概述动画的概念动画的概念不同于一般意义上的动画片,动画是一种综合艺术,它是集合了绘画.漫画.电影.数字媒体.摄影.音乐.文学等众多艺术门类于一身的艺术表现形式. 动画的英文有很多表述, ...
CSS3 帧动画分段,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
vue商品列表滚动效果_vue+帧动画实现获奖奖品列表滚动循环展示
实现效果初级方法: 实现原理: 由于列表的总数是变化的,所以不能用css把动画写死,通过定时器移动列表,实现动画效果计算总高度,建一个变量存储移动距离,两者之前比较,当移动距离>=总高度就 ...

Phaser帧动画没有效果

Phaser帧动画没有效果相关推荐

最新文章

热门文章