I've created a table with scened2d that contains buttons, but i have many issues with thoses buttons.
First issue is scaling, whenever i try to set a button's with and height an issue appear
when i set it with :
table.add(btn).with(100).height(30);
or
btnStyle.up.setMinWidth(80);
btnStyle.up.setMinHeight(40);
btnStyle.down.setMinWidth(80);
btnStyle.down.setMinHeight(40);
the button is correctly scaled but the background is acting weird
But if i don't set their with and height, their background are normal but the buttons are way too big
Second issue, the buttons don't "work" as i can't click on then (nothing change)
here is the code
// style
final Skin skin = new Skin(Gdx.files.internal("skin/glassy-ui.json"));
final BitmapFont font = skin.getFont("font");
final TextButton.TextButtonStyle btnStyle = new TextButton.TextButtonStyle();
btnStyle.font = font;
btnStyle.up = skin.getDrawable("button");
btnStyle.down = skin.getDrawable("button-down");
btnStyle.up.setMinWidth(80);
btnStyle.up.setMinHeight(40);
btnStyle.down.setMinWidth(80);
btnStyle.down.setMinHeight(40);
// buttons
Textbutton btn = new TextButton("some text", btnStyle);
how can i scale my buttons correctly and what could cause the buttons to stop working ?
(there is already a question about buttons scaling but it didn't helped much)
For getting the clicks on the button, you have to add a ChangeListener.
The assets you are using as button background are too big, or their padding is too big. Use the Skin Composer to get a preview for your skin.
With the buttons not working, did you remember to call setInputProcessor on your stage?
Related
I've read some tutorials and documentation on scene2d's UI capabilities, but I can't quite figure out how the skins work. I simply want a TextButton that changes color when pressed. I managed to get the background of the TextButton to change, but that's not what I wanted. It should have no background.
I would be very grateful if anyone could provide an example of how this could be done. It seems very simple, so I think I'm missing something obvious here. If a skin is involved, please write it programmatically.
Thank you.
Turns out it was as simple as I thought, it just didn't work when I tried it the first time.
When defining the TextButtonStyle you can assign downFontColor the color you want your text to be while it is being pressed. You can also assign checkedFontColor the color you want the text toggle between when pressed.
Example:
TextButtonStyle textButtonStyle = new TextButtonStyle();
textButtonStyle.font = someBitmapFont;
textButtonStyle.fontColor = Color.WHITE;
textButtonStyle.downFontColor = Color.BLACK;
//Optional color to toggle between when pressed
textButtonStyle.checkedFontColor = Color.GREEN;
final TextButton textButton = new TextButton("Text", textButtonStyle);
This will produce a white TextButton that turns black when it is pressed. When the mouse/touch is released it'll either turn green or white, depending on the state of the toggle.
You can also tint it, but the effect depends on the base color (if it is white, then it works perfectly, else it depends). Anyway, it's done like this:
button.getLabel().setColor(myColor);
I’ve been trying to add the property filter3d to a view3d, while preserving an image background. I’ve instantiated a stage3DManager, as well as setting a stage3DProxy:
stage3DManager = Stage3DManager.getInstance(_stage);
stage3DProxy = stage3DManager.getFreeStage3DProxy();
stage3DProxy.addEventListener(Stage3DEvent.CONTEXT3D_CREATED, onContextCreated);
The view3d only gets instantiated when the context3d is created:
away3dView = new View3D();
away3dView.stage3DProxy = stage3DProxy;
away3dView.shareContext = true;
// away3dView.filters3d = [new MotionBlurFilter3D()]; <—— (╯°□°）╯︵ ┻━┻)
When trying to add this line of code, it just makes the ‘background’ shrink or disappear, depending on the way the background has been created.
I’ve tried two different ways of adding the background:
Assigning a BitmapTexture to the background property on View3d results in a displacement of the background
view.background = new BitmapTexture(footballBackgroundBmd);
Using starling, as shown on this tutorial, results in the removal of the background
starlingCheckerboard = new Starling(BackgroundImage, _stage, stage3DProxy.viewPort, stage3DProxy.stage3D);
Both of these methods display a background image and works nicely.
However, when adding the filters3d property on the View3d it breaks.
I understand that adding a filters3d will affect the entire view, but I do not understand what is happening with the background.
I am not entirely sure if I’m doing something completely wrong here :/
How can I resize the radio button component that comes with Flash CS5.5?
The default look is quite small. The same applies to the radio button label which is also quite small.
Thanks in advance
You can find the graphical assets in the library. The folder will be "Component Assets" -> "RadioButtonSkins". Take note that there are many movie clips that comprise the various states of the radio button
As for the text/label portion of the radio button, you have to do that through code. Here is an example function you could have:
function styleRadioButton(rb:RadioButton, myTextFormat:TextFormat):void {
rb.setStyle("embedFonts", true); //if you want to use an embedded font
rb.setStyle("textFormat", myTextFormat); //set the text format
rb.setStyle("antiAliasType", AntiAliasType.ADVANCED); //if you want smoother looking fonts
rb.textField.autoSize = TextFieldAutoSize.LEFT; //if you want the label to automatically grow
}
So if you have an instance of a checkbox called myRadio, you could do this:
var textFormat:TextFormat = new TextFormat("Arial", 24, 0xFF0000); //make a red, 24px Arial text format
styleCheckBox(myRadio,textFormat);
Now, one easier thing you could also do is just place your radio button inside of a MovieClip or Sprite container and scale said container. To do this:
1 - place an instance of a radio button on the stage
2 - with the newly made instance selected, press F8 (or Modify -> Convert To Symbol)
3 - Scale the newly made movie clip
I have a MovieClip called navbar and it has buttons over it. How do I connect the buttons to the MovieClip so that when the MovieClip is moved the buttons move with it? I have been able to make the navbar draggable but the buttons aren't dragged with it.
I have tried the following:
navbar.addChild(button1);
This just made the button disappear.
Your approach is correct: adding the buttons as children to the MovieClip will allow them all to be moved as one item.
The button disappearing could be any number of reasons, for instance x and y now relative to new parent (i.e. setting button y to 600 is now 600 pixels down from the navbar, not from the stage or old parent).
Try commenting out any properties you have set on the button and see if that resolves the issue, from there you can determine which property is causing the button to disappear.
So you should basically just have something like this:
var button1:Button = new Button();
navbar.addChild(button1);
If even with that minimal code doesn't result in the button displaying on the navbar, you'll need to post more code so that we can see where the problem is occurring.
you can calculate distance from Movieclip's X,Y to buttons and you can write a code like this:
var diff1:int = navbar.x - example_button1.x;
stage.addEventListener(Event.ENTER_FRAME, function(event:Event):void{
example_button1.x=navbar.x-diff1;
});
you can duplicate example_buttons and diff variables.
or you can startDrag() sametime with same event listener,
navbar.addEventListener(someEvent.some, function(event:someEvent):void{
MovieClip(root).navbar.startDrag();
MovieClip(root).example_button1.startDrag();
});
MovieClip(root) allows you to effect main stage. With this property you can effect an object from inside of navbar for example.
As you supposed, if you want the navbar and the buttons to act like a unique element you need to put buttons inside the navbar and not just over it.
The reason the button is disappearing is due to the fact that it has been put on the stage in Designer so, when you add it to navbar, you have it into two different display stacks, and that's not allowed.
You should put buttons inside the navbar in Designer, or export them for AS and then instance them dynamically, as follow:
var btn:Button1 = new Button1()
navbar.addChild(btn)
Class name Button1 is assigned in the MovieClip properties window of the Library, under Export for ActionScript.
HI,
I want to implement tweener effects in my application, but I have a rectangle,
shape = new Shape();
shape.graphics.beginFill(0xF9F9F9);
shape.graphics.drawRect(200,80,700,450);
shape.graphics.endFill();
account_label.label ="Accounts";
account_label.setPosition(200,530);
account_label.width =140;
personal_details_label.label ="Personal Details";
personal_details_label.setPosition(340,530);
personal_details_label.width=180;
the above code shows my rectangle and two buttons,
Intially Accounts Form was selected by default, when i click PersonalDetails button i have to show the screen change effect (From Right to Left that means Personal DetailsForm is moving from right to left ) within that rectangle. Is this possible ?
I'm a fan of tweensy, but you can do this with most tweening engines easily
Tweensy.to(shape, {x:-100}, 2.0);
Tweensy.onComplete = animationComplete; //optional
The important part to consider when working with animations is timing. Either disable buttons or setup a proper fallbacks. The animations can take a few seconds and if the user can restart the animation, or if objects aren't cleared or initialized properly you can run into some issues.