我在创建带有原型的 js 中使用精灵表动画.当我单独做它时,它工作正常,但是当我将其集成到项目中时,动画不可见,控制台中没有列出任何错误。 请看小提琴来理解我的问题。here is the js fiddle link
小提琴链接
当我单独运行此代码时,它工作正常.但是在我的项目中实现时,动画是不可见的。 控制台中不显示任何错误。
[下锅][2][锅1][3]
[锅2][4]
这是一个修改的小提琴。https://jsfiddle.net/lannymcnie/t4a2cdbc/
我的更改:
- 我使用单个容器,这使得整个动画集更容易移动。这称为
this.container
,所有子项都添加到其中。这将删除所有"lc"容器。 - 我将动画重命名为
lc1
、lc2
和lc3
。它们作为变量存储在 PotChips 实例上,以便于参考。它们将添加到同一容器中。 - 创建实例时,我使用局部变量"lc",该变量仅在局部函数中使用:
var lc = this.lc1 = new ...etc
- 我将
this
作为lc.on()
方法的第 3 个参数传递,该方法在 PotChips 实例的范围内调用该方法。这意味着您可以使用this
引用实例的任何属性。 - 我删除了多余的 Ticker 侦听器。你只需要一个,它现在在构造函数中。
- 我摆脱了精灵表的"运行"第二个参数。这是原始"授予运行"SpriteSheet演示使用的"第一个动画/帧"参数。相反,我立即打电话给
lc.gotoAndPlay(0)
.您应该能够使用框架名称,但由于某种原因它们不起作用 - 我将进一步研究。 - 我摆脱了 lc 实例上的所有 x/y 参数。您可能希望使用正确的值重新添加它们。
- 我更改了精灵表图像以使用 HTTPS 以避免控制台错误
这并不完美(前 2 个动画似乎没有在正确的时间被删除),但它应该是一个好的开始,并向您展示如何解决其中一些问题。
希望对您有所帮助!