Phaser帧动画没有效果

最新推荐文章于 2024-07-03 23:56:01 发布

撑起自己半边天

最新推荐文章于 2024-07-03 23:56:01 发布

阅读量394

点赞数

分类专栏： phaser 文章标签： phaser 前端动画

本文链接：https://blog.csdn.net/weixin_43840289/article/details/125402969

版权

phaser 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

使用场景：场内需要动效的元素！
帧动画使用的图片必须是雪碧图或者序列图
引用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 loadImg
	this.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 hit
          hit = 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 hit
          hit = 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 。

仅此记录！