create container like this page?

[rossi46]

I create a game( example width: 1000px; height: 500px) . But in game, i want to create a container( example width: 500px, height: 500px). In that container, i create group, this group has 20 sprites and this height is 2000px. i want tween group in that container, how to do that????

I want to do like this link : https://staticpff.yggdrasilgaming.com/slots/jokerizer/index.85.html?lang=en&gameid=7301&prepaid=yes&appsrv=https://pff.yggdrasilgaming.com&skin=A&currency=EUR&org=Demo&recover=Yes&rev=85&translate=no&debug=no&wagerid=&channel=pc&fullscreen=no&channelID=&clientHistoryURL=&topOrg=&cheatPanel=no&uid=&userid=&home=

This link above is extract I want to do. Hope everybody help me.

Thanks all. Sorry for my bad english.

[rgk]

Use a responsive template. Like https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Responsive

[rossi46]

On 12/5/2016 at 3:00 PM, rgk said:

Use a responsive template. Like https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Responsive

I don't understand this. See my link above. How to create a container that contains many icons. And how to tweens that icon in that container. If icon's height is greater than height or how to create a group in that container. example( how to create game: 1366x768. How to create a container 900x600 center of game. In that container, how to create a group has 15 icons and height of group is 1500. That group just display 3 icons have height > 0 and height < 0 don't display. How to tween group in that container). Thanks

See my images. I want to create a full screen canvas as img-1. I want to create a container just like img-2. And I has a group that has 15 icons (has y  from -1500 to 300) . I want to see 3 icons and many other icons have y < 0 don't display extract when a sprite has x < 0 in the world game we don't see it. In img-1, I create group but many icons outsite the container, it display on the world game( I just want it display on container). And how to tween this group from - 1500 to 300 in that container.

Thank all for your help. Hope every body can help me.

[kevinleedrum]

I am facing a similar problem with a scrolling inventory panel so I'm curious to know how others would handle this.

In your case, would it be feasible to place the building in front of the icons with a transparent opening in the middle for the icon reels (or split the background into three images, with the middle section rendered behind the icons)?  I know it would not be ideal, but I thought I would suggest it in case there is no better way.

Edit: I think the answer is to draw a white rectangle to use as the mask for the icons.

var reelArea = game.add.graphics(0, 0);
reelArea.beginFill(0xffffff);
reelArea.drawRect(233, 84, 900, 600);
reelArea.endFill();

// ... 

icon.mask = reelArea;

 

[rossi46]

7 hours ago, kevinleedrum said:

I am facing a similar problem with a scrolling inventory panel so I'm curious to know how others would handle this.

In your case, would it be feasible to place the building in front of the icons with a transparent opening in the middle for the icon reels (or split the background into three images, with the middle section rendered behind the icons)?  I know it would not be ideal, but I thought I would suggest it in case there is no better way.

Edit: I think the answer is to draw a white rectangle to use as the mask for the icons.

var reelArea = game.add.graphics(0, 0);
reelArea.beginFill(0xffffff);
reelArea.drawRect(233, 84, 900, 600);
reelArea.endFill();

// ... 

icon.mask = reelArea;

 

Thank kevinleedrum. I also think about mask. But how to scale when  change the browser resolution. 

@

rich

Can you or anyone help me. Thanks