Showing sprites outside of game dimensions

[Ninjadoodle]

Hi guys

Just wondering if this is possible. If I set my game size to let's say 320x320px, is there a way to show sprites/graphics outside of those co-ordinates?

To describe a little further - the game would show at 320x320 in a browser window, but graphics outside of that box would also be visible.

I've been doing this sort of thing in Construct 2, but can't seem to figure out how to do the same in Phaser?

Thank in advance for any help!

[bruno_]

I haven't tried anything like that.

But I suppose if you have 2 (or more) canvas you could do that.

It would be as if separate Phaser games, so you should do code to coordinate that.

 

Depending of what you are trying to do, plain html/js/css outside of the game could also be possible.

Or just make the game bigger, but the playable area 320x320.

[Horizonicblue]

3 hours ago, bruno_ said:

Depending of what you are trying to do, plain html/js/css outside of the game could also be possible.

Or just make the game bigger, but the playable area 320x320.

This two are good options I guess

but why you want to show sprite outside game dimensions?

[Ninjadoodle]

Hi guys

Thank you for the tips! I don't think they will achieve what i'm trying to do tho.

Here is an example of what need to setup ...

- I am designing my game inside a square (320x320).

- My backgrounds are larger both vertically and horizontally.

- If the game is played on a phone in portrait, I want the game to show more - top and bottom.

- If the game is played in landscape, I would like to show more - left and right.

I'm achieving the same effect in Construct 2 by setting the game size at 320x320, then using the 'Scale Outer' scaling mode.

Any more tips would be greatly appreciated!!

[bruno_]

It's just the background?

You can change the background using css media queries.

[Ninjadoodle]

Hi @bruno_

I need more than the background. I'd like to basically show anything lying outside the game area.

I had a look around, and it looks like this might be very hard to do using Phaser. I had a look at the scaling modes and none of them seem to do what I need.

For an example you can look at my game ... http://ninjadoodle.com/games/lightybulb-2

This game was done with the Panda.js, and designed as a square. If you stretch the browser window, the game will show more of the background on the top or on the sides as required.

If anybody knows how to achieve something similar, I would be really appreciate the advice

[eddieone]

Hi Ninjadoodle, what about?

game.scale.scaleMode = Phaser.ScaleManager.NO_SCALE;

 

[Ninjadoodle]

Hi guys

Thank you for the tips.

I'm pretty sure I have this figured out now. I've been playing with the settings, and using a combination of SHOW_ALL and setting the game size depending on the available screen space, I seem to get exactly what I need.

I'll write up a tutorial for this in the near future, in case anybody is looking for the same thing.

Thank you for your help