How do I make a text box? I can't find any tutorials anywhere.



  • Hello! I'm working on a mostly text based game, and I'm wondering how you'd be able to make a text box of sorts.

    IE, one where you can just input text onto it without having to specify the coordinates, and it's just automatically place it below anything that's already been posted.

    Having some kind of scrolling mechanic so it doesn't run out of room would also be needed.

    (Sorry if I haven't explained this well, I'm struggling to find the right words. All I can say is that it's similar to the sort of text box you'd find in a game like Zork.)

    I have a hunch I should be using textfield for this, but I've noticed there's one for OpenFL, Flash, and Flixel.


  • administrators

    Your best bet is probably to use a OpenFL / Flash (those are the same) TextField, as FlxInputText is not that mature at the moment in my experience. Also, you should be able to find a ton of tutorials on those, since the API is the same as in AS3 / Flash - just search for "flash input textfield" or something along those lines. Should be trivial to convert the AS3 Code to Haxe.

    You can use the helper methods FlxG.addChildBelowMouse() and FlxG.removeChild() to add / remove the TextField, as it won't be compatible with Flixel's add(). Also note that it will be displayed above all Flixel sprites.



  • @gama11 said in How do I make a text box? I can't find any tutorials anywhere.:

    TextField

    Alright, thank you. Lets hope this doesn't break everything. ^^

    Edit: Well, it did. At least it gave me an error this time. >~<

    ReferenceError: Error #1069: Property FlxG not found on flash.text.TextField and there is no default value.
    	at Tile_TUT/create()
    	at flixel::FlxGame/switchState()
    	at flixel::FlxGame/update()
    	at flixel::FlxGame/step()
    	at flixel::FlxGame/onEnterFrame()
    

  • administrators

    @vulpicula Huh? What does your code look like?



  • @gama11 Don't laugh, please. :P

    var _textField:TextField = new TextField();
    _textField.text = "Test!";
    _textField.FlxG.addChildBelowMouse();
    

    I have been importing it using import flash.text.TextField;



  • @vulpicula

    This is using openfl.text.TextField so some things need to be dealt with that HF usually takes care of. I tried to deal with some of those here.

    import openfl.text.TextField;
    import openfl.text.TextFieldType;
    import openfl.text.TextFormat;
    

    ...

    private var _textField:TextField;
    

    ...

    // openfl TextField needs to be scaled
    var oflScaleX = FlxG.game.width / FlxG.width;
    var oflScaleY = FlxG.game.height / FlxG.height;
    
    // easy way to match haxeflixel font using regular FlxText you probably need anyway.
    var txtRegular = new FlxText(50, 30, 0, "This is a FlxText and below is an openfl.text.TextField", 8);
    add(txtRegular);
    
    // get the haxeflixel font from txtRegular. 
    // If you won't be having a regular FlxText, you'll need to add a font asset.
    var font = txtRegular.font;
    
    _textField = new TextField();
    
    _textField.embedFonts = true;
    
    // set the defaultTextFormat and scale the text size
    _textField.defaultTextFormat = new TextFormat(font, Std.int(8 * oflScaleY), FlxColor.CYAN);
    
    // scale and position
    _textField.x = 50 * oflScaleX;
    _textField.y = 50 * oflScaleY;
    _textField.width = (FlxG.width - 100) * oflScaleX;
    _textField.height = (FlxG.height - 100) * oflScaleY;
    
    _textField.text = "Test!";
    _textField.type = TextFieldType.INPUT;
    _textField.multiline = true;
    _textField.wordWrap = true;
    _textField.border = true;
    _textField.borderColor = FlxColor.YELLOW;
    _textField.backgroundColor = FlxColor.GRAY;
    
    // add the _textField
    FlxG.addChildBelowMouse(_textField);
    
    // set focus to _textField
    FlxG.stage.focus = _textField;
    
    // put the cursor at the end
    _textField.setSelection(_textField.length, _textField.length);
    

    You'll need to remove the _textField. You might do this somewhere else, I was in a substate so I used override close().

    override public function close():Void
    {
    	// remove the openfl _textField when closing the FlxSubState
    	FlxG.removeChild(_textField);
    	_textField = null;
    	
    	super.close();
    }
    

  • administrators

    Note that openfl.text.TextField is the same as flash.text.TextField.



  • @gama11 I've basically had to go with FlxTextField instead due to some very strange bugs with scaling.

    ...not that FlxTextField is any better, as I've been unable to get that to even show up. >~<


  • administrators

    FlxTextField is actually just a very light wrapper around an OpenFL TextField.

    What scaling bugs?



  • @gama11

    It was when resizing the window it went off. The solution was to use something like:

    FlxG.signals.gameResized.add(updateSize);
    

    ...

    function updateSize(width:Int, height:Int) 
    {
    	var oflScaleX = width / FlxG.initialWidth;
    	var oflScaleY = height / FlxG.initialHeight;
    	
    	_textField.x = 50 * oflScaleX;
    	_textField.y = 50 * oflScaleY;
    	_textField.width = (FlxG.width - 100) * oflScaleX;
    	_textField.height = (FlxG.height - 100) * oflScaleY;
    }	
    

    except the hard coded values should be the size/location you create it at. I just used those values for the example.

    I think that works now unless I misunderstand the initialWidth/Height.


Log in to reply
 

Looks like your connection to HaxeFlixel was lost, please wait while we try to reconnect.