Jump'n'run with phaser and tiled

[shakeshake]

Hi guys,

 

some days ago, I started with my first game ever and I decided to use js, phaser and tiled. The goal of this project is a jump'n'run game with different levels. There's a timer counting backwards, when the time reaches 0 it's over. But there are collectables which give you more time.

During the last few days I learned a lot about tiles, sprites, canvas etc. and now I have finally setup a working phaser project with tilemap, timer, player and different states.

 

The source is on github and a demo is available here.

 

I have three problems with my game:

1. When the player stands on the cupboard, he's shaking. I have no idea why.

2. In firefox I get the following error: TypeError: PIXI.BaseTextureCache[a].destroy is not a function.

3. In chrome on mac I get constant 60fps, on windows about 30 and on mobile devices about 5.

 

How can I fix these errors? Do you have any hints for me?

 

And if you have some general advices for me that'd be awesome as I have no experience in online game development.

 

Cheers

[drhayes]

I don't know about your other problems, but as for your "shaking on the cupboard" problem try adding a little drag to your sprite like this, assuming you're using Arcade physics: "sprite.body.drag.setTo(5, 5);" Sometimes impulse-based physics engines have some indeterminacy around separations on collision which results in that jitter you're seeing. At least, that's my first guess. ( =

[Skeptron]

For of all, you should be really cautious with the size of the canvas. On my Chrome I have a scroll bar because the world's height is too big : it is annoying and it consumes performance. So first if you tune this well you might gain FPS.

 

For the jittering, it might be caused by non-rounded pixel values. This sometimes causes unexpected jittering.

[shakeshake]

Thanks for your feedback. I disabled upscaling of the game and I got some fps more. Fun thing, in chrome on windows I get 72 fps, in IE11 42 fps...

 

For the jittering, it really is some sort of rounding issue, when I change the game height to the height of the map, the jittering is gone. But I don't want to set the game height to the height of the map, I'd like the have that camera moving effect and not reveal the whole map. Currently the map's height is 640 and I'd like the game height to be around 480. With game height 480 it's jittering. Could I set a better game height (I tried different heights randomly but without success)? Or how can I use the sprite.body.drag thing? Set it for the player or the cupboard?

[shakeshake]

Can someone give me a hint with the sprite.body.drag thing?