Best way to create a cutscene OR "Why doesn't this work?"

[OttoRobba]

Hi everyone.

 

I'm porting my team's GGJ entry into Phaser just so that I can learn how to use it. We have an animation made for the intro - it is rather simple and would work as a slideshow.

 

Now, the anim_intro.png is rather large, 21760x640 pixels so that might explain why it won't work (and I would love to know the size limitations for sprite sheets) but either way, I'm keen on knowing both a better approach to cutscenes and how to fix it. You can see the code for it below:

var game = new Phaser.Game(1280, 640, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload() {	game.load.spritesheet('introAnimation', 'assets/images/anim_intro.png', 1280, 640, 14);}function update() {}function create() {	var introAnim = game.add.sprite(0,0,'introAnimation');	introAnim.animations.add('introAnim');	introAnim.animations.play('play', 30, true);}

[XekeDeath]

I don't know about size limitations, except that 21760 does seem quite wide... Wide enough to kill a mobile browser without mercy or remorse...

As for the other problem, it might be because:

introAnim.animations.add('introAnim'); //This says 'introAnim' is the animation name...introAnim.animations.play('play', 30, true); //This says 'play' is the animation name...

[OttoRobba]

 

I don't know about size limitations, except that 21760 does seem quite wide... Wide enough to kill a mobile browser without mercy or remorse...

As for the other problem, it might be because:

introAnim.animations.add('introAnim'); //This says 'introAnim' is the animation name...introAnim.animations.play('play', 30, true); //This says 'play' is the animation name...

That must be it, thanks. I feel silly for that mistake. Tried with a smaller, power of 2 image, worked fine.

The browser being killed part is correct as well. Thanks

Makes me wonder though. What would be the *right* way to have a fullscreen cutscene?

[XekeDeath]

Depends on what you want your cutscene to look like. Though, as with most coding things, can there really be a *right* way?

Maybe you can cut out the images into separate, smaller, reusable ones, and position them in code.

Use solid colour fills for backgrounds to make use of the Graphics object, or experiment with smaller images being stretched.

[OttoRobba]

Well, maybe not the *right* as in "do it no other way!" but maybe a best-practice for classical animation (do the storyboard, do the tween, export it, display it).

 

It seems that, in general, this is not always the greatest idea. Maybe the best path is, like you describe, smaller objects animated with code (as in Binding of Isaac, Super Meat Boy, et al...).

 

Thanks for the help Xeke