I'm trying to add some texture regions to some buttons that I plan on putting in a scroll pane. I'm pretty sure I've gotten the scroll pane part down but I'm not so sure about the regions part. Any tutorial that I've found regarding scroll panes uses normal text to fill in the tables. Here's what I have so far I'm lost on how to add the different texture regions to the buttons.
TextureAtlas atlas = new TextureAtlas("data/StoreAtlas.pack");
uiskin = new Skin(Gdx.files.internal("SkinLocation.jpg"), atlas);
uiskin.addRegions(atlas);
TextureRegion Magnet = uiskin.getRegion("Magnet");
TextureRegion Life = uiskin.getRegion("Life");
TextureRegion BonusCoins = uiskin.getRegion("BonusCoins");
TextureRegion Ice = uiskin.getRegion("Ice");
TextureRegion LavaBombs = uiskin.getRegion("LavaBombs");
TextureRegion Foreground = uiskin.getRegion("Foreground");
TextureRegion Background = uiskin.getRegion("BackGround");
Button MagnetButton = new Button();
Button LifeButton = new Button();
Button BounusCoinsButton = new Button();
Button IceButton = new Button();
Button LavaBombsButton = new Button();
I'm new at this so if someone knew of a good explanation or example that would be awesome. Thanks.
You have to create a TextureRegionDrawable for the desired image and place it in the constructor of the button. So, in your case, you would do something like...
Button MagnetButton = new Button(new TextureRegionDrawable(Magnet);
Button LifeButton = new Button(new TextureRegionDrawable(Life));
//etc...
What this essentially does is it changes the attribute up for the button's style to the specified Drawable. There are other attributes such as down and over that would show the specified image when the button is pressed down or moused over. If you don't specify those attributes, it defaults to whatever you set up to, which should be enough for your case.
However, if you ever want to do anything more complex, you may want to consider using a Skin. In your case, the skin you created is invalid, as you're using a .jpg file, while Skin files are .json files. You can read more about Skins here.
Related
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?
I made a simple puzzle game in ROBLOX and I've decided to re-make it in AS3.
I've created a grid of buttons with click events, and now I need to change their color when clicked. I've currently got this:
trace("Button clicked:", event.currentTarget.id);
event.currentTarget.graphics.beginFill(0xA00000)
event.currentTarget.graphics.endFill()
the trace prints fine but the color doesn't change (causes no errors either)
The buttons are movie clips with labels inside.
beginFill and endFill are used to control the filled color of drawing commands like drawRect, they don't just change the fill of any arbitrary display object.
To change the color of a display object you can use ColorTransform:
var colorTransform:ColorTransform = new ColorTransform();
colorTransform.color = 0xA00000;
DisplayObject(event.currentTarget).transform.colorTransform = colorTransform;
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);
Basically I've got a bitmap which is an image that the user captures from a webcam which was previously stored as bitmapdata which I converted into a bitmap and added it onto the stage..
From here I want the bitmap to be selectable so I can do other things to it, so I realised I would need to add this into sprite in order to add event listeners onto it.
Having done so, for some reason my application ain't wanting to recognise the events added?
Here is the code I've got..
Bitmap..
//Create a new bitmap from the video capture
image = new Bitmap(bitmap,"auto",true);
//Set the width and height properties
image.width=150;
image.height=125;
//Set the stage position
image.x = 430;
image.y = 280;
stage.addChild(image);
Sprite..
var imageSprite:Sprite;
imageSprite = new Sprite();
imageSprite.x = 200;
imageSprite.y = 50;
imageSprite.addChild(image);
stage.addChild(imageSprite);
Event listener:
imageSprite.addEventListener(MouseEvent.MOUSE_DOWN, SelectWebImage1);
Function:
function SelectWebImage1(e:MouseEvent): void {
trace("Clicked");
}
I receive no errors from this but I noticed that when I have that code written in my application, all of the code underneath it doesn't seem to function?
I really don't know what i'm doing wrong, any help appreciated thanks!
When you set Sprite's dimensions, you implicitly set its scale, and also if you place some graphics by using width and height, the width and height includes any sprite's children, accounting for their position. You should place that bitmap into imageSprite and not set x,y proerties for the bitmap, this way you won't have to account for its position inside the sprite to position the bitmap.
I'm trying to create a TextField which will look smooth enough when animated. The only option, when I can get smoothly-animated textfield, is setting antiAliasType property to AntiAliasType.NORMAL; But I'd like to play with text antialiasing to make letters a little bit thicker. So I change the antiAliasType to AntiAliasType.ADVANCED.
After that the textfield looks jumpy when animated (it looks like glyphs are being snapped to pixel-grid). Change of property gridFitType of the textField doesn't make any sense.
Has anyone achieved smooth text-field animation when antiAliasType is switched to AntiAliasType.ADVANCED? (The jumpy text occurs when switching to TLF text fields either)
Here is my short code:
var p:TextField = new TextField();
var font:Font = new Font1XXX();
// font is embedded int the library and exported as Font1XXX class
var tfor:TextFormat = new TextFormat();
tfor.font = font.fontName;
tfor.size = 15;
tfor.color = 0xFFFFFF;
p.defaultTextFormat = tfor;
p.autoSize = TextFieldAutoSize.LEFT;
p.antiAliasType = AntiAliasType.ADVANCED;
p.gridFitType = GridFitType.NONE;
// change to GridFitType.NONE does not make any sense;
p.selectable = false;
p.embedFonts = true;
p.text = "HELLO WORLD";
addChild(p);
If you don't need selectable text, draw the textfield into a bitmap and add the bitmap to the stage instead of the textfield.
Every text in flash is snapped to whole pixels, resulting in any animation in regards to them will feel "jagged".
Workarounds are to convert any "static text" into a shape and place inside movieclip or to "copy" the text into a bitmap and animate that bitmap. Depending on what type of animation you want to do, different solutions are required for best visual experience.
For instance, scrolling text, it would probably be best to cache it as bitmap and then move it along the axis.
Scaling up/down a text (if it is scaled a lot). This sucks, I haven't found a good way to resolve this without visual artifacts. Best solution is usually to copy the text into another clip, hide the text and then animate quickly or try to cover it with other effects so focus is taken away from the text itself.