How to Coding a Text Box as button and List Box

  • How to code:

    1. Text with Box?
    2. Text Box as a Button with loading bar for cooldown after press?
    3. List Box?

    here are the example of the picture that I made using photoshop. but I don't know how to coding it in haxeflixel without picture and just only coding.

    Text Box

    Loading Cooldown

    List Box

    is it possible? and also please teach me to coding the color of the box

  • Yes, it's possible with something like:

    background = new FlxSprite();
    background.makeGraphic(1000, 300, FlxColor.WHITE);
    var rect = background.pixels.rect.clone();
    var border = 4;
    rect.x = border;
    rect.y = border;
    rect.width -= border * 2;
    rect.height -= border * 2;
    background.pixels.fillRect(rect, FlxColor.BLACK);

    But my code will generate a bitmap for specified size.

    I wonder if someone here renders such stuff directly to screen?

  • The FlxBar can be used for your loading bar but you kinda have to create a FlxText above it, probably by writing a wrapper as a FlxSpriteGroup containing the FlxBar and the FlxText.

  • @starry-abyss what class to use with that code? sry i ask noob question :) it didnt work with flixel.util.flxcolor.

  • Sorry, I just copied the code from a project! background is FlxSprite. I updated the code now. :-)

  • As @DleanJeans said, I would extend the flxGroup class and inside it have a flxSpritefor the background (possibly a [sliced]( one so any size will work), a flxBar for the cooldown bar, a flxText for the text and so on.

    Author of Discover Haxeflixel | The #1 book to learn HaxeFlixel!


  • So much information that informative. I am going to try all of that above after i am at home <3

  • @MegaLeon using flxsprite. do it mean i need to have an image first? ( asset )

  • Not necessary. @starry-abyss showed how you can draw the graphic with the code above. Or you can use an image if you want.

  • @DleanJeans sorry, is there a samples code with that bar and text box button? it is so hard to find the tutorial of that text box button, bar and i am confuse what package to use, and what import to use. :( hope people not mad with my newbieness :(

Log in to reply