Rex Dialog cover gets proportionally smaller as camera zoom level is increased.
lagouyn opened this issue · comments
I'm using:
phaser3-rex-plugins -- 1.80.1
phaser 3 -- 3.80.1
When invoking a Rex Dialog for which I have specified that it should use a cover, it works well when the camera zoom is 1.
But when I increased the camera zoom (for example, to 1.5) and then invoked the dialog, cover did not cover the entire game ... instead, it was centered on the game with area around it that was not shaded.
I experimented by changing FullWindowRectangle window to do this...
scale = camera.zoom;
...instead of this...
scale = 1 / camera.zoom;
...and to me it looks like it fixed the issue.
Could you please take a look?
Thank you.
-lagouyn
This demo shows that FullWindowRectangle can resize automatically for camera.zoom between 0.5 to 1.5.
Please provide a simplest runnable test code for your case.
Is this dialog / cover put inot a built-in Container?
Thank you for investigating this.
Could you try the following (sorry the formatting got messed up on the
paste):
Check out the effect of changing the main camera and `cam2` zoom settings.
Also selectively un-comment the `setVisible()` lines for the two cameras.
Also selectively un-comment the `ignore()` lines for the two cameras.
Note especially that when zoom is involved, the spatial relationship
between the dialog and its cover gets a little weird.
Thanks again!
-lagouyn
'use strict'
class Demo extends Phaser.Scene {
constructor() {
super({
key: 'examples'
})
}
preload() {
this.load.image('classroom', '
https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/assets/images/backgrounds/classroom.png'
);
this.load.scenePlugin({
key: 'rexuiplugin',
url: '
https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js
',
sceneKey: 'rexUI'
});
}
create() {
this.img = this.add.image(400, 300, 'classroom');
this.cameras.main.setZoom(1.2);
this.cam2 = this.cameras.add(0,0,800,600);
this.cam2.setZoom(.5);
// this.cameras.main.setVisible(false);
// this.cam2.setVisible(false);
this.showDialog();
}
showDialog() {
return new Promise((resolve) => {
const FONT_FAMILY = 'ariel';
const FONT_SIZE = '22px';
const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const x = 300;
const y = 280;
const width = 150;
const height = undefined;
const background = this.rexUI.add.roundRectangle(0, 0, 10, 10, 10,
COLOR_PRIMARY);
const titleField = this.add.text(0, 0, 'title', {fontFamily: FONT_FAMILY,
fontSize: FONT_SIZE});
const okButton = this.rexUI.add.label({
orientation: 'x',
background: this.rexUI.add.roundRectangle(0, 0, 10, 10, 10, COLOR_LIGHT),
text: this.add.text(0, 0, 'OK', {
fontFamily: FONT_FAMILY,
fontSize: FONT_SIZE
}),
space: {
top: 8, bottom: 8, left: 8, right: 8
}
})
.setInteractive()
.on('pointerdown', () => {
dialog.emit('closeDialog', '');
});
const dialog = this.rexUI.add.sizer({
orientation: 'y',
x,
y,
width,
height,
})
.addBackground(background)
.add(titleField, 0, 'center', {top: 20, bottom: 10, left: 20, right: 20},
false)
.add(okButton, 0, 'center', {top: 10, bottom: 20, left: 20, right: 20},
false)
.layout()
.on('closeDialog', (description) => {
dialog.modalClose(description);
});
this.cameras.main.ignore(dialog);
this.cam2.ignore(this.img);
dialog.modalPromise({
defaultBehavior: false,
manualClose: true,
duration: {
in: 100,
out: 100
},
cover: {
alpha: 0.5
}
}).then((closeEventData) => {
const description = closeEventData;
resolve(description);
});
});
}
}
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
backgroundColor: 0xffffff,
width: 800,
height: 600,
scale: {
mode: Phaser.Scale.RESIZE,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
scene: Demo,
};
var game = new Phaser.Game(config);
[image: image.png]
…On Mon, Mar 11, 2024 at 2:41 AM Rex ***@***.***> wrote:
Is this dialog / cover put inot a built-in Container?
—
Reply to this email directly, view it on GitHub
<#413 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHWG7NIRUVG6ETYJILC3MDDYXV36DAVCNFSM6AAAAABEOOWCXOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXHE4TEMBZHA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
I see, the cover / FullWindowRectangle is assigned to 2nd camera, not main camera (1st camera).
Update FullWindowRectangle to get renderable camera on repo. NPM package will upgrade at end of this month.
Thank you!-lagouynOn Mar 11, 2024, at 7:11 PM, Rex ***@***.***> wrote:
I see, the cover / FullWindowRectangle is assigned to 2nd camera, not main camera (1st camera).
Update FullWindowRectangle to get renderable camera on repo. NPM package will upgrade at end of this month.
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>
Question: does
https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js
have your fixes for both:
#413
-and-
#414
?
…On Mon, Mar 11, 2024 at 7:24 PM Allan Young ***@***.***> wrote:
Thank you!
-lagouyn
On Mar 11, 2024, at 7:11 PM, Rex ***@***.***> wrote:
I see, the cover / FullWindowRectangle is assigned to 2nd camera, not main
camera (1st camera).
Update FullWindowRectangle to get renderable camera on repo. NPM package
will upgrade at end of this month.
—
Reply to this email directly, view it on GitHub
<#413 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHWG7NIJZO4JNTLS2OYB2ODYXZP5ZAVCNFSM6AAAAABEOOWCXOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBZHAYTGMZVHE>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
Yes, they are fixed. But npm package has not upgraded yet.
Hi.
Using the code that I sent you yesterday, if I run the same code today, I'm
still seeing an unexpected appearance.
With create() modified slightly:
create() {
this.img = this.add.image(400, 300, 'classroom');
this.cameras.main.setZoom(2);
this.cam2 = this.cameras.add(0,0,800,600);
this.cam2.setZoom(1);
this.cameras.main.setVisible(false); // i set this to invisible to
better show the dialog and its cover, which `cam2` renders
// this.cam2.setVisible(false);
this.showDialog();
}
...and these ignore's:
this.cameras.main.ignore(dialog);
this.cam2.ignore(this.img);
...
I get this, which shows the cover being scaled to be not screen-filling,
and its very offset from its dialog:
[image: image.png]
…On Tue, Mar 12, 2024 at 9:48 AM Rex ***@***.***> wrote:
Yes, they are fixed. But npm package has not upgraded yet.
—
Reply to this email directly, view it on GitHub
<#413 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHWG7NIY4YH6OWGPB2MFSSTYX4WVPAVCNFSM6AAAAABEOOWCXOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJSGEYTENBYGY>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
Hi again.
Aside from the sample app, I pulled your latest code into my main project.
I do see that that camera ignore issue appears to be fixed.
For a dialog created with `rexUI.add.dialog` with a cover, the cover issue
at various camera zoom levels appears to be fixed.
However, for a dialog created with `rexUI.add.sizer` with a cover, the
cover issue appears to still exist.
A partial snippet of the latter:
this.scene.input.keyboard.disableGlobalCapture();
const dialog = this.scene.rexUI.add.sizer({
orientation: 'y',
x,
y,
width,
height,
})
.addBackground(background)
.add(titleField, 0, 'center', {top: 20, bottom: 10, left: 20, right: 20},
false)
.add(descriptionField, 0, 'left', {top: 20, bottom: 20, left: 20, right:
20}, true)
.add(okButton, 0, 'center', {top: 10, bottom: 20, left: 20, right: 20},
false)
.layout()
.on('closeDialog', (description) => {
this.scene.input.keyboard.enableGlobalCapture();
dialog.modalClose(description);
});
this.scene.cameras.main.ignore(dialog);
dialog.modalPromise({
defaultBehavior: false, // User has to invoke dialog.modalClose(data)
manually
manualClose: true, // Other closing methods will be disabled
duration: {
in: 100,
out: 100
},
cover: {
alpha: 0.5
}
}).then((closeEventData) => {
const description = closeEventData;
resolve(description);
});
[image: image.png]
…On Tue, Mar 12, 2024 at 10:19 AM Allan Young ***@***.***> wrote:
Hi.
Using the code that I sent you yesterday, if I run the same code today,
I'm still seeing an unexpected appearance.
With create() modified slightly:
create() {
this.img = this.add.image(400, 300, 'classroom');
this.cameras.main.setZoom(2);
this.cam2 = this.cameras.add(0,0,800,600);
this.cam2.setZoom(1);
this.cameras.main.setVisible(false); // i set this to invisible to
better show the dialog and its cover, which `cam2` renders
// this.cam2.setVisible(false);
this.showDialog();
}
...and these ignore's:
this.cameras.main.ignore(dialog);
this.cam2.ignore(this.img);
...
I get this, which shows the cover being scaled to be not screen-filling,
and its very offset from its dialog:
[image: image.png]
On Tue, Mar 12, 2024 at 9:48 AM Rex ***@***.***> wrote:
> Yes, they are fixed. But npm package has not upgraded yet.
>
> —
> Reply to this email directly, view it on GitHub
> <#413 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AHWG7NIY4YH6OWGPB2MFSSTYX4WVPAVCNFSM6AAAAABEOOWCXOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJSGEYTENBYGY>
> .
> You are receiving this because you authored the thread.Message ID:
> ***@***.***>
>
Here is a demo for showing camera-ignore and cover size.
It uses the latest version minify rexUI plugin, npm package has not upgraded yet.
Edit: Add another method to create dialog by sizer, the cover still can fill with window
Thanks for sending your demo a few days ago. Thank you also very much for
looking into and fixing the issues that I reported.
I encountered a new issue where camera zoom and cover are not working well
together...
For this test, I pulled your latest code from your master branch.
This time, it's a little modal that uses rexUI's '*scrollablePanel*'. As
before, I'm using two cameras ... the main camera can be zoomed, and the
secondary camera is always at 1x.
Attached is a screenshot with the main camera set to 1.5x, the secondary
camera set to 1x ... and, as before, I'm telling the main camera to ignore
this modal.
The visual appearance is similar to the cover with other modal game objects
that I reported last week (and that you fixed). Could you take a look at
this new scenario? Thank you!
…-lagouyn
[image: image.png]
On Tue, Mar 12, 2024 at 7:57 PM Rex ***@***.***> wrote:
Here <https://codepen.io/rexrainbow/pen/ExJKVvz> is a demo for showing
camera-ignore and cover size.
It uses the latest version minify rexUI plugin, npm package has not
upgraded yet.
—
Reply to this email directly, view it on GitHub
<#413 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHWG7NIK5PZH7LYOG565EBTYX66DJAVCNFSM6AAAAABEOOWCXOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJTGI2DKNJSGM>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
The same, provide a simplest runnable test code (on codepen, for example) to demonstrate your case directly, please.
Hi.
Could you please try the following. Thank you! :)
const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;
class Demo extends Phaser.Scene {
constructor() {
super({
key: 'examples'
})
}
preload() {
this.load.image('classroom', '
https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/assets/images/backgrounds/classroom.png'
);
this.load.scenePlugin({
key: 'rexuiplugin',
url: '
https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js
',
sceneKey: 'rexUI'
});
}
create() {
this.img = this.add.image(400, 300, 'classroom');
this.cameras.main.setZoom(1.2);
this.cam2 = this.cameras.add(0, 0, 800, 600);
this.cam2.setZoom(.5);
var scrollablePanel = this.rexUI.add.scrollablePanel({
x: 400, y: 300,
width: 280, height: 320,
scrollMode: 'y',
background: this.rexUI.add.roundRectangle({
strokeColor: COLOR_LIGHT,
radius: 10
}),
panel: {
child: createPanel(this),
mask: { padding: 1, },
},
slider: {
track: this.rexUI.add.roundRectangle({ width: 20, radius:
10, color: COLOR_DARK }),
thumb: this.rexUI.add.roundRectangle({ radius: 13, color:
COLOR_LIGHT })
},
space: {
left: 20, right: 20, top: 20, bottom: 20,
panel: 10
},
expand: {
panel: false
},
align: {
panel: 'right'
}
})
.layout()
this.cameras.main.ignore(scrollablePanel);
this.cam2.ignore(this.img);
scrollablePanel.modalPromise({
defaultBehavior: false, // User has to invoke
dialog.modalClose(data) manually
manualClose: true, // Other closing methods will be disabled
duration: {
in: 100,
out: 100
},
cover: {
alpha: 0.5
}
})
}
update() { }
}
var createPanel = function (scene) {
var sizer = scene.rexUI.add.sizer({
orientation: 'y',
space: { item: 3 }
})
for (var i = 0; i < 3; i++) {
sizer.add(
scene.rexUI.add.label({
height: 60,
space: { left: 10, right: 10, top: 10, bottom: 10 },
background: scene.rexUI.add.roundRectangle({ color:
COLOR_DARK, strokeColor: COLOR_LIGHT, radius: 10 }),
text: scene.add.text(0, 0, `Item ${i}`, { fontSize: 20 })
}),
{ expand: true }
)
}
return sizer;
}
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
scene: Demo
};
var game = new Phaser.Game(config);
…On Sat, Mar 16, 2024 at 5:01 AM Rex ***@***.***> wrote:
The same, provide a simplest runnable test code (on codepen, for example)
to demonstrate your case directly, please.
—
Reply to this email directly, view it on GitHub
<#413 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHWG7NJTSLZK3EEZM2MAHRDYYQYDHAVCNFSM6AAAAABEOOWCXOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBRHE3DINZVGM>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
Bug fixed, adding game object did not sync cameraFilter property well.
Please get last minify file of rexui plugin.
Your fixe works great. Thank you very much!
-lagouyn
…On Sat, Mar 16, 2024 at 9:39 AM Rex ***@***.***> wrote:
Bug fixed, adding game object did not sync cameraFilter property well.
Please get last minify file of rexui plugin.
—
Reply to this email directly, view it on GitHub
<#413 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHWG7NNXHTNTWNPJID7VRG3YYRYUVAVCNFSM6AAAAABEOOWCXOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBSGA2DAOJWGI>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
Hi and thanks again!I have an unrelated question…Regarding gestures (particulars for mobile device support), I’d like to be able to specify a particular game object to receive certain kinds of gesture events, and to have other game objects ignore those gesture events.For example, in my game I have a map that can have game objects on it. I would like to be able to have gestures work only when they are on my map … I want the other game objects to ignore those gestures (I want these other kinds of game objects to respond to “regular” events, like pointer down/up, drag, etc).So, for example, I’d like to be able to scroll/zoom the camera only when the gesture was directly on the map itself.I’ve read through your docs and tried some of your examples, but I haven’t figured out a way to target specific game objects for certain gesture events.Could you advise?Thank you.-lagouynOn Mar 16, 2024, at 2:36 PM, Allan Young ***@***.***> wrote:Your fixe works great. Thank you very much!-lagouynOn Sat, Mar 16, 2024 at 9:39 AM Rex ***@***.***> wrote:
Bug fixed, adding game object did not sync cameraFilter property well.
Please get last minify file of rexui plugin.
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>
Hi and thanks again!I have an unrelated question…Regarding gestures (particulars for mobile device support), I’d like to be able to specify a particular game object to receive certain kinds of gesture events, and to have other game objects ignore those gesture events.For example, in my game I have a map that can have game objects on it. I would like to be able to have gestures work only when they are on my map … I want the other game objects to ignore those gestures (I want these other kinds of game objects to respond to “regular” events, like pointer down/up, drag, etc).So, for example, I’d like to be able to scroll/zoom the camera only when the gesture was directly on the map itself.I’ve read through your docs and tried some of your examples, but I haven’t figured out a way to target specific game objects for certain gesture events.Could you advise?Thank you.-lagouynOn Mar 16, 2024, at 2:36 PM, Allan Young @.> wrote:Your fixe works great. Thank you very much!-lagouynOn Sat, Mar 16, 2024 at 9:39 AM Rex @.> wrote: Bug fixed, adding game object did not sync cameraFilter property well. Please get last minify file of rexui plugin. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>
Please open another new issue for this unrelated gestures case.
Hello,Thanks for your reply.I have created #418-lagouynOn Mar 18, 2024, at 4:03 PM, Rex ***@***.***> wrote:
Hi and thanks again!I have an unrelated question…Regarding gestures (particulars for mobile device support), I’d like to be able to specify a particular game object to receive certain kinds of gesture events, and to have other game objects ignore those gesture events.For example, in my game I have a map that can have game objects on it. I would like to be able to have gestures work only when they are on my map … I want the other game objects to ignore those gestures (I want these other kinds of game objects to respond to “regular” events, like pointer down/up, drag, etc).So, for example, I’d like to be able to scroll/zoom the camera only when the gesture was directly on the map itself.I’ve read through your docs and tried some of your examples, but I haven’t figured out a way to target specific game objects for certain gesture events.Could you advise?Thank you.-lagouynOn Mar 16, 2024, at 2:36 PM, Allan Young @.> wrote:Your fixe works great. Thank you very much!-lagouynOn Sat, Mar 16, 2024 at 9:39 AM Rex @.> wrote: Bug fixed, adding game object did not sync cameraFilter property well. Please get last minify file of rexui plugin. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>
Please open another new issue for this unrelated gestures case.
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>