I want to write score inside of a box image.
First I placed the box in the place then I added score string above it using label like this.
private void drawScoreBoxes() {
scoreImage = new Image(scoreTexture);
stage.addActor(scoreImage);
scoreImage.setPosition(UiConstants.BOX_POS_X,UiConstants.BOX_POS_Y2);
}
private void drawScore() {
Label.LabelStyle scoreStyle = new Label.LabelStyle();// style
scoreStyle.font = game.font2;
scoreLabel2 = new Label(scoreController.getScoreString(), scoreStyle);// label
scoreLabel2.setPosition(scoreImage.getX()+scoreImage.getWidth()/2,scoreImage.getY());
}
The score string should come exactly in the middle of the box image.In this case,when number of digit of score increases,string alignment is not proper.
How can I align it center always?
I found methods like getLabelAlign(),setAlignment(alignment) etc.
But I don't know how to use it properly.
You have two options:
1. Use TextButton:
Drawable scoreDrawable = new TextureRegionDrawable(new TextureRegion(scoreTexture));
TextButtonStyle textButtonStyle = new TextButtonStyle( scoreDrawable, scoreDrawable, scoreDrawable, font );
TextButton tb = new TextButton( scoreController.getScoreString() );
tb.setDisabled( true );
Or 2. Set Label bounds and align text:
LabelStyle labelStyle = new LabelStyle( font, Color.BLACK );
Label scoreLabel = new Label( scoreController.getScoreString(), labelStyle );
scoreLabel.setBounds( scoreImage.getX(), scoreImage.getY(), scoreImage.getWidth(), scoreImage.getHeight() );
scoreLabel.setAlignment( Align.center );
Use TextButton instead of Image + Label
TextButton is a Button that contains Label, you can pass Image drawable part to Button that show as background part of your Label.
button = new TextButton("Button1", textButtonStyle);
stage.addActor(button);
A TextButton takes a string to render and a ButtonStyle, in this case a TextButtonStyle, which is basically a class that contains all the information about the button (font, drawable to render while not pressed, drawable to render while pressed etc).
Related
I am using ImageButton in my game and I want to show it touched or pressed. How can I accomplish this, I am new to libgdx framework.
TextureRegion btLeft = new TextureRegion(new Texture("NUMBEROFF.png"));
Drawable drawableLeft = new TextureRegionDrawable(new TextureRegion(btLeft));
buttonLeft = new ImageButton(drawableLeft);
There are different constructors for ImageButton that allows you to add multiple Drawables for when the button is in different states (up, down, and checked). But I prefer to use the ImageButtonStyle to do this.
https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/ImageButton.ImageButtonStyle.html
ImageButtonStyle style = new ImageButtonStyle();
style.imageUp = ...your drawable for up (normal) state
style.imageChecked = ...your drawable for checked state
style.imageDown = ...your drawable for down (pressed) state
ImageButton button = new ImageButton(style);
I have textInput on stage, it's not the component; but rather a textField which is set to behave as inputText. I also have a button on stage to bold the selected portion of the text in the inputField.
Here's the code, which works perfectly fine:
var formatDefBold: TextFormat = new TextFormat();
formatDefBold.bold = false;
var formatBold: TextFormat = new TextFormat();
formatBold.bold = true;
boldBtn.addEventListener(MouseEvent.CLICK, makeBold);
function makeBold(event: MouseEvent):void
{
var sbi:Number = myInputField.selectionBeginIndex;
var sei:Number = myInputField.selectionEndIndex;
if (sbi != sei)
{
var section:TextFormat = myInputField.getTextFormat(sbi,sei);
if (section.bold == false)
{
myInputField.setTextFormat(formatBold, sbi, sei);
}
else
{
myInputField.setTextFormat(formatDefBold, sbi, sei);
}
stage.focus = this[selectedTextField]; // highlight the selected text again.
}
}
PROBLEM:
When I rotate the textInput, the text disappears. If I embed the font and choose another anti-aliasing method like "Anti-Alias for animation", the rotated textInput displays the text fine, but the makeBold function doesn't work.
I've tried different fonts. Sans, Arial, which I embedded all it's styles (Bold, Italic, Bold-Italic). nothing!
I've tried placing the textInput inside a movieClip and rotate the movieClip instead. doesn't work.
I've also tried setting the embedFonts parameter for the textInput too, not sure if I did it correctly
myInputField.embedFonts = true;
this time the text disappears even when the textField is not rotated.
I'm really stuck and can't think of anything else to make the bold function work with a rotated textInput.
Embedding method
For any operations like rotation applied to a text field, you should first embed the text font.
myText.text = "rotation with embed font";
myText.rotation = 10;
Your text field 'myText' is physically put on the scene. When you click on it, in the window 'Properties', do that:
anti-alias (Anti-alias for animation)
font embed
To embed the font, click on 'embed' button > window 'Font Embedding' > 'Character ranges' > select: 'Uppercase', 'Lowercase', 'Numerals', 'Punctuation'. (don't click on 'All')
3D method
You can also rotate a dynamic text field without embedding fonts using the 3D methods available in Flash Player 10.
var myTextField:TextField = new TextField();
this.addChild(myTextField);
var fo:TextFormat = new TextFormat("Arial", 11, 0xFF0000);
myTextField.defaultTextFormat = fo;
myTextField.text = "3D rotation";
myTextField.rotationZ = 45;
In your case...
In your case, the following code works perfectly (you just have to put a button named 'boldBtn' on your scene):
var myInputField:TextField = new TextField();
this.addChild(myInputField);
var fo:TextFormat = new TextFormat("Verdana", 12, 0x000000, false);
myInputField.defaultTextFormat = fo;
myInputField.text = "3D rotation";
myInputField.rotationZ = 45;
boldBtn.addEventListener(MouseEvent.CLICK, makeBold);
function makeBold(event:MouseEvent):void
{
fo.bold = !fo.bold;
myInputField.setTextFormat(fo);
}
I set the anti-aliasing to it's default value which is "use device fonts" and used rotationZ to rotate the text field. and it worked!
using rotation (not rotationZ) with default anti-aliasing doesn't show the text.
and using rotation (not rotationZ) with anti-aliasing makes the bold function not work.
so this is solved with just adding this line of code:
myInputField.rotationZ = 45;
I'm trying to make a button(movieClip-button), that when you hover over it(MOUSE_OVER), it calls a function that displays some text. The only problem is that it doesn't work :p. Or atleast not the way i want it to work. The thing is when i hover over it the first time, nothing displays. If i then remove the mouse from the movieclip and hover over it again it works just fine. Here's my code:
private var priceString:TextField = new TextField();
private function addText(price:String):void{
var priceStringFormat = new TextFormat;
priceStringFormat.color = 0xFF0000;
priceStringFormat.font = 'TradeGothic';
priceStringFormat.size = 30;
priceString.x = 285;
priceString.y = 15;
priceString.setTextFormat(priceStringFormat);
priceString.autoSize = TextFieldAutoSize.LEFT;
priceString.text = "Upgrade Costs: " + price;
getStage.addChild(priceString);
}
I can't myself see the problem:s. Other text fields in the same format in the same class works just fine. The getStage var is holding the stage access. (It works with other text fields). Strange is also that if i try to add a movieclip instead of the textfield, it works just fine.
This is how it should look:
http://i.stack.imgur.com/5a0jf.png
setTextFormat needs to happen after you set the text property. If for whatever reason you need to do the formatting before you set the textFormat, use
priceString.defaultTextFormat = priceStringFormat
If you're saying you want to create a tooltip when you hover over a button, you should probably put the TextField into a Sprite object. Add the TextField as a child of the Sprite, and the Sprite as a child of the stage. Then, either tween the alpha value of the Sprite or toggle its visibility using Sprite.visible.
PS: for a detailed tutorial, see:
http://hub.tutsplus.com/tutorials/create-a-customizable-tooltip-in-actionscript-30--active-1793
EDIT:
Based on the image you provided, what you would need is to create a sprite with the TextField as its child in the constructor of your button, and set the sprite's visible property to false.
In your mouseover handler for the button, set the sprite's visible property to true, and in reset it in your mouseout handler.
I have a rectangle on which I would like to display a label. I have tried to do this by creating a rectangle sprite, and then adding a textField to the display tree of the sprite.
The problem is that there seems to be a lot of extra blank padding surrounding the textField. Although the text fits within the box, the boundaries of the textField extend beyond the visible region of it's containing rectangle. This causes the rectangle's width and height to change also.
The issue is that I want the user to be able to drag the rectangle around the screen. I added an event listener on MOUSE_DOWN to initiate the drag. However, the user can start the drag by clicking on the area surrounding the visible rectangle, rather than only on the rectangle itself. I assume this is because the user will actually be clicking on the extra blank space coming from the the TextField and seeping out over the edges
Any ideas?
I think what you're looking for is the textField.autoSize parameter. It makes the text field bounds shrink to the size of the text (otherwise it has a default height/width regardless of the text it contains)
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
var textField:TextField = new TextField();
textField.autoSize = TextFieldAutoSize.LEFT;
textField.text = "your text"; //set this AFTER autoSize
You can also set the width of the your textField to the width of your rectangle. Or forgo the autosize property and manually set the height/width of your text box to the height/width of the rectangle, though this would truncate any text that doesn't fit.
There is always some padding on the text field. Getting the exact bounds of the actual text can be tricky (though it is possible). An easier way is to just mask your text box.
If your rectangle is drawn with the graphics class, you could do this:
var rectangle:Sprite = new Sprite();
rectangle.graphics.beginFill(0xFF0000);
rectangle.graphics.drawRect(0,0,100,100);
addChild(rectangle);
var myMask:Shape = new Shape();
myMask.graphics.copyFrom(rectangle.graphics);
rectangle.addChild(myMask);
var textField:TextField = new TextField();
textField.width = rectangle.width;
textField.height = rectangle.height;
textField.mask = myMask;
rectangle.addChild(textField);
One other option you could do, is in your event listener, check to see if the target is the text box and exit the function. (just make sure your text field's mouseEnabled property is true (default) if you use this method)
function rectangleClickHandler(e:Event):void {
if(e.target == myTextField) return;
//rest of your code
}
One other thing you could do, and may be simpler than masks etc is just make the text field not receive mouse events. This will stop any mouse events being fired from interaction with the text field, but you'll still be able to process them on your rectangle.
The important item here is the mouseEnabled flag. You leave the mouseChildren enabled on your container, but disable the mouseEnabled of both the container and the textfield.
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.text = "Testing the text mouse enabled";
var rectangle:Sprite = new Sprite();
rectangle.graphics.beginFill(0xFF0000);
rectangle.graphics.drawRect(0,0,100,100);
var container:Sprite = new Sprite();
container.addChild( rectangle );
container.addChild( tf );
addChild( container );
// IMPORTANT FLAGS HERE
tf.mouseEnabled = false;
container.mouseEnabled = false;
container.mouseChildren = true;
container.addEventListener( MouseEvent.ROLL_OVER, rollOverHandler, false, 0, true );
The event handler will only fire when other children of the container are rolled over, not the text field. Using this method you can selectively active mouse enabled components in a container object.
I am trying to display several PNG Images on a JLayeredPane with overlapping.
Here is the current code for generating the JLabel containing the image and adding it to the JLayeredPane :
BufferedImage im = ImageIO.read(new File(fname));
JLabel uLabel = createLabelForImage(im);
mapLayeredPane.add(uLabel, new Integer(zIndex++), 1);
And the createLabelForImage() method :
protected JLabel createLabelForImage(BufferedImage im) {
JLabel label = new JLabel(new ImageIcon(im));
label.setVerticalAlignment(JLabel.TOP);
label.setHorizontalAlignment(JLabel.CENTER);
label.setOpaque(true);
label.setBounds(0, 0, im.getWidth(), im.getHeight());
return label;
}
What I get is the objects are correctly overlapping but the transparent background of the PNG images is replaced with a kind of white-gray color.
Is it a problem with ImageIcon ? With JLayeredPane ? Maybe I have to set something like label.setBakground(sort_of_transparency_code) or something like that ?
Thanks in advance :)
Your label should not be opaque if you want to see through, see JComponent.setOpaque
If true the component paints every pixel within its bounds.
Otherwise, the component may not paint some or all of its
pixels, allowing the underlying pixels to show through.