Phaser 3 Text Inverted Crop Box
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm trying to create a Text object in Phaser 3 that you can scroll up and down interactively, and I'm having trouble finding some functionality that will support this. I understand that I can crop the top of the text with Text.setCrop(...) but that will only suffice to crop either the top or the bottom of the text object, not both. What I need is the ability to either set multiple crop boxes on the Text object, or a sort of "inverted" crop box which will allow me to render only what's inside the box and hide the rest of it.
Anyone aware of a trick or something that will allow me to do this? I can't use BitmapText or a Sprite object for this, it has to be a Text object.
canvas phaser-framework
asked Nov 15 '18 at 13:44
galarantgalarant
1,066919
add a comment |
I'm trying to create a Text object in Phaser 3 that you can scroll up and down interactively, and I'm having trouble finding some functionality that will support this. I understand that I can crop the top of the text with Text.setCrop(...) but that will only suffice to crop either the top or the bottom of the text object, not both. What I need is the ability to either set multiple crop boxes on the Text object, or a sort of "inverted" crop box which will allow me to render only what's inside the box and hide the rest of it.
Anyone aware of a trick or something that will allow me to do this? I can't use BitmapText or a Sprite object for this, it has to be a Text object.
canvas phaser-framework
asked Nov 15 '18 at 13:44
galarantgalarant
1,066919
Without code I'm not sure I understand what you're trying to do. It almost sounds like you just need to add a rectangle above/below the text box and then have functionality to move the text under it?
– James Skemp
Nov 16 '18 at 3:12
@JamesSkemp sorry for the missing context, I figured out the answer and added some details below
– galarant
Nov 17 '18 at 17:47
add a comment |
I'm trying to create a Text object in Phaser 3 that you can scroll up and down interactively, and I'm having trouble finding some functionality that will support this. I understand that I can crop the top of the text with Text.setCrop(...) but that will only suffice to crop either the top or the bottom of the text object, not both. What I need is the ability to either set multiple crop boxes on the Text object, or a sort of "inverted" crop box which will allow me to render only what's inside the box and hide the rest of it.
Anyone aware of a trick or something that will allow me to do this? I can't use BitmapText or a Sprite object for this, it has to be a Text object.
canvas phaser-framework
asked Nov 15 '18 at 13:44
galarantgalarant
1,066919
I'm trying to create a Text object in Phaser 3 that you can scroll up and down interactively, and I'm having trouble finding some functionality that will support this. I understand that I can crop the top of the text with Text.setCrop(...) but that will only suffice to crop either the top or the bottom of the text object, not both. What I need is the ability to either set multiple crop boxes on the Text object, or a sort of "inverted" crop box which will allow me to render only what's inside the box and hide the rest of it.
Anyone aware of a trick or something that will allow me to do this? I can't use BitmapText or a Sprite object for this, it has to be a Text object.
canvas phaser-framework
canvas phaser-framework
asked Nov 15 '18 at 13:44
galarantgalarant
1,066919
asked Nov 15 '18 at 13:44
galarantgalarant
1,066919
asked Nov 15 '18 at 13:44
galarantgalarant
1,066919
asked Nov 15 '18 at 13:44
galarantgalarant
1,066919
asked Nov 15 '18 at 13:44
galarantgalarant
1,066919
1,066919
Without code I'm not sure I understand what you're trying to do. It almost sounds like you just need to add a rectangle above/below the text box and then have functionality to move the text under it?
– James Skemp
Nov 16 '18 at 3:12
@JamesSkemp sorry for the missing context, I figured out the answer and added some details below
– galarant
Nov 17 '18 at 17:47
add a comment |
Without code I'm not sure I understand what you're trying to do. It almost sounds like you just need to add a rectangle above/below the text box and then have functionality to move the text under it?
– James Skemp
Nov 16 '18 at 3:12
@JamesSkemp sorry for the missing context, I figured out the answer and added some details below
– galarant
Nov 17 '18 at 17:47
Without code I'm not sure I understand what you're trying to do. It almost sounds like you just need to add a rectangle above/below the text box and then have functionality to move the text under it?
– James Skemp
Nov 16 '18 at 3:12
Without code I'm not sure I understand what you're trying to do. It almost sounds like you just need to add a rectangle above/below the text box and then have functionality to move the text under it?
– James Skemp
Nov 16 '18 at 3:12
@JamesSkemp sorry for the missing context, I figured out the answer and added some details below
– galarant
Nov 17 '18 at 17:47
@JamesSkemp sorry for the missing context, I figured out the answer and added some details below
– galarant
Nov 17 '18 at 17:47
add a comment |
1 Answer
1
active
oldest
votes
Apparently I can use a Phaser.Display.Masks.GeometryMask to acheive the desired effect. Unfortunately Phaser 3 does not support masks on container children, but as long as the Text object is not a direct child of the container, the mask will hide the overflow content on both the top and bottom of the Text:
/**
* Unfortunately because of the container child masking issue in Phaser 3,
* we cannot add the content directly as a child of the container.
* Thus if the container mutates, we will need to manually mutate the content (and mask) along with it.
* For more info refer to: https://github.com/photonstorm/phaser/issues/3673
*/
let x = 100
let y = 100
container = scene.add.container(x, y)
container.content = container.scene.add.text(
container.x - container.width / 2,
container.y - container.height / 2,
"", container.defaultStyles
)
this.content.setOrigin(0, 0)
// set up a mask on the content
// this will hide overflow text when we scroll
let maskShape = scene.add.graphics(container.x, container.y)
maskShape
.clear()
.fillStyle(0x000000, 0)
.fillRect(
container.x - container.width / 2,
container.y - container.height / 2,
container.width, container.height
)
let mask = container.createGeometryMask(maskShape)
container.content.setMask(mask)answered Nov 17 '18 at 17:46
galarantgalarant
1,066919
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320842%2fphaser-3-text-inverted-crop-box%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Apparently I can use a Phaser.Display.Masks.GeometryMask to acheive the desired effect. Unfortunately Phaser 3 does not support masks on container children, but as long as the Text object is not a direct child of the container, the mask will hide the overflow content on both the top and bottom of the Text:
/**
* Unfortunately because of the container child masking issue in Phaser 3,
* we cannot add the content directly as a child of the container.
* Thus if the container mutates, we will need to manually mutate the content (and mask) along with it.
* For more info refer to: https://github.com/photonstorm/phaser/issues/3673
*/
let x = 100
let y = 100
container = scene.add.container(x, y)
container.content = container.scene.add.text(
container.x - container.width / 2,
container.y - container.height / 2,
"", container.defaultStyles
)
this.content.setOrigin(0, 0)
// set up a mask on the content
// this will hide overflow text when we scroll
let maskShape = scene.add.graphics(container.x, container.y)
maskShape
.clear()
.fillStyle(0x000000, 0)
.fillRect(
container.x - container.width / 2,
container.y - container.height / 2,
container.width, container.height
)
let mask = container.createGeometryMask(maskShape)
container.content.setMask(mask)answered Nov 17 '18 at 17:46
galarantgalarant
1,066919
add a comment |
Apparently I can use a Phaser.Display.Masks.GeometryMask to acheive the desired effect. Unfortunately Phaser 3 does not support masks on container children, but as long as the Text object is not a direct child of the container, the mask will hide the overflow content on both the top and bottom of the Text:
/**
* Unfortunately because of the container child masking issue in Phaser 3,
* we cannot add the content directly as a child of the container.
* Thus if the container mutates, we will need to manually mutate the content (and mask) along with it.
* For more info refer to: https://github.com/photonstorm/phaser/issues/3673
*/
let x = 100
let y = 100
container = scene.add.container(x, y)
container.content = container.scene.add.text(
container.x - container.width / 2,
container.y - container.height / 2,
"", container.defaultStyles
)
this.content.setOrigin(0, 0)
// set up a mask on the content
// this will hide overflow text when we scroll
let maskShape = scene.add.graphics(container.x, container.y)
maskShape
.clear()
.fillStyle(0x000000, 0)
.fillRect(
container.x - container.width / 2,
container.y - container.height / 2,
container.width, container.height
)
let mask = container.createGeometryMask(maskShape)
container.content.setMask(mask)answered Nov 17 '18 at 17:46
galarantgalarant
1,066919
add a comment |
Apparently I can use a Phaser.Display.Masks.GeometryMask to acheive the desired effect. Unfortunately Phaser 3 does not support masks on container children, but as long as the Text object is not a direct child of the container, the mask will hide the overflow content on both the top and bottom of the Text:
/**
* Unfortunately because of the container child masking issue in Phaser 3,
* we cannot add the content directly as a child of the container.
* Thus if the container mutates, we will need to manually mutate the content (and mask) along with it.
* For more info refer to: https://github.com/photonstorm/phaser/issues/3673
*/
let x = 100
let y = 100
container = scene.add.container(x, y)
container.content = container.scene.add.text(
container.x - container.width / 2,
container.y - container.height / 2,
"", container.defaultStyles
)
this.content.setOrigin(0, 0)
// set up a mask on the content
// this will hide overflow text when we scroll
let maskShape = scene.add.graphics(container.x, container.y)
maskShape
.clear()
.fillStyle(0x000000, 0)
.fillRect(
container.x - container.width / 2,
container.y - container.height / 2,
container.width, container.height
)
let mask = container.createGeometryMask(maskShape)
container.content.setMask(mask)answered Nov 17 '18 at 17:46
galarantgalarant
1,066919
Apparently I can use a Phaser.Display.Masks.GeometryMask to acheive the desired effect. Unfortunately Phaser 3 does not support masks on container children, but as long as the Text object is not a direct child of the container, the mask will hide the overflow content on both the top and bottom of the Text:
/**
* Unfortunately because of the container child masking issue in Phaser 3,
* we cannot add the content directly as a child of the container.
* Thus if the container mutates, we will need to manually mutate the content (and mask) along with it.
* For more info refer to: https://github.com/photonstorm/phaser/issues/3673
*/
let x = 100
let y = 100
container = scene.add.container(x, y)
container.content = container.scene.add.text(
container.x - container.width / 2,
container.y - container.height / 2,
"", container.defaultStyles
)
this.content.setOrigin(0, 0)
// set up a mask on the content
// this will hide overflow text when we scroll
let maskShape = scene.add.graphics(container.x, container.y)
maskShape
.clear()
.fillStyle(0x000000, 0)
.fillRect(
container.x - container.width / 2,
container.y - container.height / 2,
container.width, container.height
)
let mask = container.createGeometryMask(maskShape)
container.content.setMask(mask)/**
* Unfortunately because of the container child masking issue in Phaser 3,
* we cannot add the content directly as a child of the container.
* Thus if the container mutates, we will need to manually mutate the content (and mask) along with it.
* For more info refer to: https://github.com/photonstorm/phaser/issues/3673
*/
let x = 100
let y = 100
container = scene.add.container(x, y)
container.content = container.scene.add.text(
container.x - container.width / 2,
container.y - container.height / 2,
"", container.defaultStyles
)
this.content.setOrigin(0, 0)
// set up a mask on the content
// this will hide overflow text when we scroll
let maskShape = scene.add.graphics(container.x, container.y)
maskShape
.clear()
.fillStyle(0x000000, 0)
.fillRect(
container.x - container.width / 2,
container.y - container.height / 2,
container.width, container.height
)
let mask = container.createGeometryMask(maskShape)
container.content.setMask(mask)/**
* Unfortunately because of the container child masking issue in Phaser 3,
* we cannot add the content directly as a child of the container.
* Thus if the container mutates, we will need to manually mutate the content (and mask) along with it.
* For more info refer to: https://github.com/photonstorm/phaser/issues/3673
*/
let x = 100
let y = 100
container = scene.add.container(x, y)
container.content = container.scene.add.text(
container.x - container.width / 2,
container.y - container.height / 2,
"", container.defaultStyles
)
this.content.setOrigin(0, 0)
// set up a mask on the content
// this will hide overflow text when we scroll
let maskShape = scene.add.graphics(container.x, container.y)
maskShape
.clear()
.fillStyle(0x000000, 0)
.fillRect(
container.x - container.width / 2,
container.y - container.height / 2,
container.width, container.height
)
let mask = container.createGeometryMask(maskShape)
container.content.setMask(mask)answered Nov 17 '18 at 17:46
galarantgalarant
1,066919
answered Nov 17 '18 at 17:46
galarantgalarant
1,066919
answered Nov 17 '18 at 17:46
galarantgalarant
1,066919
answered Nov 17 '18 at 17:46
galarantgalarant
1,066919
1,066919
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320842%2fphaser-3-text-inverted-crop-box%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Without code I'm not sure I understand what you're trying to do. It almost sounds like you just need to add a rectangle above/below the text box and then have functionality to move the text under it?
– James Skemp
Nov 16 '18 at 3:12
@JamesSkemp sorry for the missing context, I figured out the answer and added some details below
– galarant
Nov 17 '18 at 17:47