Prevent objects to adjust their width

Heya,

ok, not exactly sure how to describe this but, when you place for example a button or via a plugin an HTML element into the scene it's width will be automatically resized if it's going out of the viewport.

Example:

Here the button while is fully visible:

but walking to the right makes the button slowly leave the viewport and it gets resized

The button is just example as mentioned, HTML elements also get this treatment.

Don't use Button or other form controls. They are not "native" to Construct, there are lots of issues with them.

They may be ok for some types of games like quizzes, but I wouldn't use them in a platformer.

It's less about the button to be honest, I'm using an iframe to load in HTML text elements.

Why?

Because I need certain words to be click-able / be able to style the text and I didn't see any other real solution for this.

Could you explain in more detail what are you trying to achieve?

Sure thing

Sorry for being vague, to begin with.

We are using Construct to make a "website" if you will.

The platforming has no real function aside from walking to the side and triggering a few boxes.

Like here:

This is an iframe box in a "speech bubble" so to speak.

Oh, so you are using some external "HTML" plugin, like this one?

I don't know anything about this, sorry. Maybe you can disable resizing with CSS, or if you know javascript you can try to change this in plugin source code. Or try another plugin, I think I've seen a few similar ones (for C2 at least).

To be very precise I was using this:

I assumed that the button element and the iframe behave in the same way which is why I asked for the button at the beginning.

To be very precise I was using this:

plugin-html-iframe_t149647

I assumed that the button element and the iframe behave in the same way which is why I asked for the button at the beginning.

It is really tough to get html/css to play nice with Construct. A few years back I spent several months working on this, and was able to achieve some success, but in the end I decided it is typically better to reinvent the controls inside the canvas whenever possible. Does everything need to exist in a webpage for SEO reasons?

> To be very precise I was using this:

> plugin-html-iframe_t149647

>

> I assumed that the button element and the iframe behave in the same way which is why I asked for the button at the beginning.

>

It is really tough to get html/css to play nice with Construct. A few years back I spent several months working on this, and was able to achieve some success, but in the end I decided it is typically better to reinvent the controls inside the canvas whenever possible. Does everything need to exist in a webpage for SEO reasons?

My inner web-designer will flail me for saying this, but SEO is not a major concern.

The method I choose here was simply because I didn't find any other means to have a few paragraphs of text where I could have certain words of it link to external pages (imagine a list with client names etc)

[quote:2fmk793g]a few paragraphs of text where I could have certain words of it link to external pages (imagine a list with client names etc)

If nothing else works, you can probably do this with sprite font.

It will be a tiresome task, but with sprite font you should be able to calculate the exact position of each letter, underline or highlight words (using sprites) to make them look like Internet links. And on mouse click detect which word was clicked.

[quote:3dhonxth]a few paragraphs of text where I could have certain words of it link to external pages (imagine a list with client names etc)

If nothing else works, you can probably do this with sprite font.

It will be a tiresome task, but with sprite font you should be able to calculate the exact position of each letter, underline or highlight words (using sprites) to make them look like Internet links. And on mouse click detect which word was clicked.

I see... Any chance you could give a pointer towards the right direction on how to do the linking?

If you move the html elements with css instead of the set position actions things won't resize. It does draw outside the canvas area, but you can use the "clip" css property to address that.

Anyways here's an example. It basically get's the position and size of everything in windows coordinates and does the above.

https://www.dropbox.com/s/iaunubjjay2b5 ... .capx?dl=1

The example was for c2, but the only change for c3 is probably replacing c2canvas with c3canvas.

The size of the button is smaller than it actually should be. A fix for that is giving each button an id and using javascript to get the size. I thought it wasn't needed though.

saeris

Seems like R0J0 found a better solution (as he always does )

Anyway, SpriteFont has a number of expressions (characterHeight, characterWidth, characterSpacing, lineHeight), which you can use to calculate the screen position of any character in your text. So if you need to highlight the word "John", you find coordinates of letters "J" and "n" and put some sprite with blend mode in that position, or draw a line underneath. It's not an easy task, but possible.

You don't necessarily need a spritefont, it's trickier since all it really has is text height and width but you could use a regular text object, all you need is a copy of the text that you can mess with for a few ticks without user seeing it here's a slightly messy way of doing it:

https://drive.google.com/open?id=1bXwxT ... R42s8qi5Yn

Maukka

Nice demo, but it only works with some words, many other words are highlighted incorrectly:

The biggest problem with Text object is that it renders differently in different browsers and platforms. Even if you manage to correctly calculate coordinates of a given word in text, the whole text object may be shifted up or down in browser window and there is no way to detect this.