Specify portion of a sprite to be shown

[GaryS]

Hi all,

 

I'm very new to both game development, and Phaser. The problems I'm coming up against seem incredibly simple... while the docs are very comprehensive, there's not much in the way of explaination. It seems that unless I know exactly how a given problem is usually solved, I'm unlikely to know what functionality I should be searching for in the docs to solve my problem!

 

So in essence: If my question(s) seem like any idiot should know this stuff without thinking, be aware that I have no idea what I'm doing - please be gentle.

 

 

In an attempt to get my first game working across all resolutions, I'm planning to have a minimum game area surrounded by a frame.

The idea is that if my game area is say, 300px high, but the display allows for 400px, the remaining 100px will be taken up with another sprite.

 

To this end, I have a 1px wide image that represents my frame... this is intended to stretch the width of the screen and placed at top and bottom, keeping the play area centered.

At the bottom of the first frame is pixel data that should be positioned at the bottom of the sprite, and the top is a single colour that is meant to be cut off as the resolution decreases....

 

When I place the sprite on the screen, it seems that the portion of the image displayed begins from 0,0. As the height of the sprite is smaller than the height of my image, the bottom of the image containing the border-like pixel data is cut off.

So in this instance, my image is 300px high. I have a sprite 100px high. I want it to display the bottom 100px of my image... seems like something that should be easy, indeed it's the kind of thing I'd do in CSS usually.

 

Can anyone point me in the right direction here?

 

Thanks

[lewster32]

Possibly what you're after is cropping: http://phaser.io/examples/v2/sprites/vertical-crop

[GaryS]

I looked at cropping for this, but I'm not sure how I'd apply it with the tilemap I was using.

In the end, I changed to using a sprite and 'scaling' it widthways, rather than using a tilemap. Then I simply positioned it so that it was 200px out of bounds, leaving the remaining bottom 100px.

That seems to have worked, though relies on knowing the height of the sprite image.

Presumably I could have achieved the same thing by applying a crop to the sprite and positioning it?