How do I Create A Button With Tween Buttons?

  • I want to move a CSS Button with text from outside the screen left to the middle of the frame.

    I understand the main ideas here but when I tween my CSS styled buttons into the frame its as if the text (of the button) is not actually attached to the button itself and the button. What is more, the button kind of scales inm from the left.. See the attached video..

    https://www.screencast.com/t/2RFHscXm

    Is this even possible? Should I just be using images instead?

  • html elements like buttons and text boxes will automatically scale themselves like that to try to keep as much on the screen as possible. Another issue with html elements is that they float above the canvas, so nothing can ever pop up above them. Different browsers can render them slightly differently as well. You can also run into focus problems...

    using images as buttons solves all those issues. There are a couple things to watch out for when using images - if you have overlapping image buttons, a click will happen on both if the mouse pointer is over both, so you have to make things work the way your players expect. Plus, things can get a little tricky handling multi-touch properly. All things considered, I much prefer making my own buttons with images.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Okay thanks. Presumably I would then need to have different button images for different languages etc. Is that the standard practice using Construct or is there a way to somehow use images but with separate (translat-able) text? ..or does the text object use CSS too?

    Apologies for my newb questions.

    Cheers

  • I don't think there is a standard way to do it...

    when I need a lot of buttons, I find it easier to have one button sprite (with a normal, hover, and down animation), and I then pin a text object to each one for the text (and sometimes an icon as well). That would allow for easier translations...

    the only issue I have had with this approach is if the button is then pinned to something else - then the text lags behind the button a little. So, what I have to do is pin the text to the same object that the button is pinned to. Then everything moves nicely together.

  • I'm trying out some pinning and moving but no matter what I try the pinned objects always seem to lag behind the 'parent' object. ANything I should be doing different? I also tried adding everything to a timeline and keyframing them all with the same movement but there is still the lag. It's passable, but doesnt look professional.

  • are you still using html buttons, or did you switch to making buttons from sprites and text objects?

    html buttons are not part of the canvas, and getting rid of the lag is pretty complicated. ROJOhound found a solution a year or so ago, but I would have to do some searching to find it.

    if you are using sprites/text, then everything must be pinned to the same moving object. If you have a panel that slides in, and buttons pinned to that, and text pinned to the buttons, then the text will lag behind. The text should also be pinned to the panel.

    make a small test file with sample buttons so we can see what is going on.

  • Apologies, you are correct. I was using CSS Buttons with the pinning. When I switch to just sprites everything works fine. I must remember never to use any of the CSS stuff if it moves. Cheers

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)