Forums » Help » text entry game state

So I was gonna write this but I don't wana reinvent the wheel

I was going to have it so when the player hits spacebar (or whatever key I assign) the game recognizes it as the player wanting to say something to other players and opens a text entry mode where he can type something and it appears in a message box if he hits enter (a chat game state if you will) I'm thinking I'll have to

track cursor position
get the state of caps lock
get the state of the shift key
put in a delay so one key press doesn't type 4 letters and so a player can hold down the !!!!!! button

another neat thing I thought of is the speech bubble behind the text could be different if the sentence contains ! or ? or keywords
probably more I haven't thought of
here is a snippet so far

	update: function() {
		switch (this.menustate){
		case 0: //Chatlog command line
			this.unbindAll()
//ig.KEY.CAPS
//ig.KEY.TAB
			ig.input.bind( ig.KEY.MOUSE1, 'leftclick' );
			ig.input.bind( ig.KEY.MOUSE2, 'rightclick' );
			ig.input.bind( ig.KEY.A, 'a' );
			ig.input.bind( ig.KEY.B, 'b' );
			ig.input.bind( ig.KEY.C, 'c' );
			ig.input.bind( ig.KEY.D, 'd' );
			ig.input.bind( ig.KEY.E, 'e' );
			ig.input.bind( ig.KEY.F, 'f' );
			ig.input.bind( ig.KEY.G, 'g' );
			ig.input.bind( ig.KEY.H, 'h' );
			ig.input.bind( ig.KEY.I, 'i' );
			ig.input.bind( ig.KEY.J, 'j' );
			ig.input.bind( ig.KEY.K, 'k' );
			ig.input.bind( ig.KEY.L, 'l' );
			ig.input.bind( ig.KEY.M, 'm' );
			ig.input.bind( ig.KEY.N, 'n' );
			ig.input.bind( ig.KEY.O, 'o' );
			ig.input.bind( ig.KEY.P, 'p' );
			ig.input.bind( ig.KEY.Q, 'q' );
			ig.input.bind( ig.KEY.R, 'r' );
			ig.input.bind( ig.KEY.S, 's' );
			ig.input.bind( ig.KEY.T, 't' );
			ig.input.bind( ig.KEY.U, 'u' );
			ig.input.bind( ig.KEY.V, 'v' );
			ig.input.bind( ig.KEY.W, 'w' );
			ig.input.bind( ig.KEY.X, 'x' );
			ig.input.bind( ig.KEY.Y, 'y' );
			ig.input.bind( ig.KEY.Z, 'z' );
			ig.input.bind( ig.KEY.DELETE, 'delete' );
			ig.input.bind( ig.KEY.BACKSPACE, 'backspace' );
			ig.input.bind( ig.KEY.ESC, 'esc' );
			ig.input.bind( ig.KEY.SPACE, 'space' );
			ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
			ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
			ig.input.bind( ig.KEY._0, '0' );
			ig.input.bind( ig.KEY._1, '1' );
			ig.input.bind( ig.KEY._2, '2' );
			ig.input.bind( ig.KEY._3, '3' );
			ig.input.bind( ig.KEY._4, '4' );
			ig.input.bind( ig.KEY._5, '5' );
			ig.input.bind( ig.KEY._6, '6' );
			ig.input.bind( ig.KEY._7, '7' );
			ig.input.bind( ig.KEY._8, '8' );
			ig.input.bind( ig.KEY._9, '9' );
			ig.input.bind( ig.KEY.END, 'end' );
			ig.input.bind( ig.KEY.HOME, 'home' );
			ig.input.bind( ig.KEY.INSERT, 'insert' );
			ig.input.bind( ig.KEY.ENTER, 'enter');
			var player = ig.game.getEntitiesByType( EntityPlayer );
			if( ig.input.state('a')){
				player.messagebox = player.messagebox + "a"
				cursorPosition = cursorPosition +1;
                        break;	
...

I'll have to change it to manipulate the string at the indicated position
Is this already somewhere I looked and didn't find it...
If not, would anyone be interested in the code if I do it?

Sounds tricky. Or you could just use an HTML element - something like this. If you're planning a mobile app however, this may not be the best option.

Wow yes that's almost exactly what I'm going for even with the speech bubble. Nice work. I am guessing you take focus away from the canvas? What are you sending it to the canvas with?

It does seem to have some minor issues with keys being held down perhaps if you send a release event when the focus is taken away from the canvas

Thanks. It saves having to reinvent the wheel, if you want to go that route. :)

Is there a way to bind this in a for loop so it doesn't take up so much space on my code.

i was thinkin something like

var alphabet = Array = ("abcdefghijklmnopqrstuvwxyz").split("");
         for (i in alphabet){
            ig.input.bind( ig.KEY/'[i]...
         }

try

("abcdefghijklmnopqrstuvwxyz").split("").forEach(function(chr) {
	ig.input.bind(ig.KEY[chr])});

Needs to be caps I think

 ("ABCDEFGHIJKLMNOPQRSTUVWXYZ").split("").forEach(function(chr) {
         ig.input.bind(ig.KEY[chr],[chr])});

and in update

         ("ABCDEFGHIJKLMNOPQRSTUVWXYZ").split("").forEach(function(chr) {
            if( ig.input.pressed([chr])){
               console.log(chr)
            }
         });

So far this code is working really well...
this is how I solved capital and lowercase for now
I've seen some functions for caps lock but I dono if I'm going to mess with that for now.

if(ig.input.pressed('backspace')&&(ig.game.createcharhud.charname.length > 0)){
               ig.game.createcharhud.charname = ig.game.createcharhud.charname.slice(0,- 1)
               //console.log(ig.game.createcharhud.charname);
            }
         
         ("ABCDEFGHIJKLMNOPQRSTUVWXYZ").split("").forEach(function(chr) {
            if( ig.input.pressed([chr])&&(ig.game.createcharhud.charname.length<15)){
               if (ig.input.state('shift')){
                  ig.game.createcharhud.charname = ig.game.createcharhud.charname + chr;
               }else{
                  ig.game.createcharhud.charname = ig.game.createcharhud.charname + chr.toLowerCase();   
               }
            }
         });

Also server side I want to edit this string to only allow alphabetic and period characters... so "This name" is getting filtered This.name" is okay.

##str.replace( /[^a-zA-Z]/, "")## looks good for removing non alphabetic but I'd like to allow single periods probably not double periods

I've optimized a little your code @ShawnSwander to detect backspace and capslock (and organized it a bit).

MyGame = ig.Game.extend({

	name: '',
	config: {
		bindDefaultLetterKeys: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
	},

	// Load a font
	fonts: {
		gameTitle: new ig.Font( 'media/04b04.font.png' ),
		text: new ig.Font( 'media/04b03.font.png' ),
	},
	init: function() {
		// Initialize your game here; bind keys etc.
		( ig.game.config.bindDefaultLetterKeys ).split("").forEach(function(chr) {
        	ig.input.bind(ig.KEY[chr],[chr])
     	});
     	ig.input.bind( ig.KEY.CAPS, 'caps_lock' );
     	ig.input.bind( ig.KEY.SHIFT, 'shift' );
     	ig.input.bind( ig.KEY.SPACE, 'spacebar' );
     	ig.input.bind( ig.KEY.BACKSPACE, 'backspace' );

     	ig.game.spawnEntity( EntityHud, 0, 0 );

	},

The EntityHud.js:

ig.module(
    'game.entities.hud'
)
.requires(
    'impact.entity'
)
.defines(function(){

    EntityHud = ig.Entity.extend({

        size: {x: 320, y: 20},
        zIndex:800,
        collides: ig.Entity.COLLIDES.NEVER,
        gravityFactor: 0,

        init: function( x, y, settings ) {
            this.parent( x, y, settings );
            this.pos.x=ig.game.screen.x;
            this.pos.y=ig.game.screen.y;
        },

        update: function(){
            this.pos.x=ig.game.screen.x;
            this.pos.y=ig.game.screen.y;

            if ( ig.input.pressed('spacebar') && ig.game.name.trim().length > 0 ) {

                // Add a space into the name
                ig.game.name += ' ';

            } else if ( ig.input.pressed('backspace') && ig.game.name.length > 0 ) {

                // Clear the last character
                ig.game.name = ig.game.name.slice(0, -1);

            } else {

                // For each letter, if pressed insert lower/upper letter
                ( ig.game.config.bindDefaultLetterKeys ).split("").forEach(function(chr) {

                    if( ig.input.pressed([chr]) ){
                        
                        if ( ig.input.state('shift') || ig.input.state('caps_lock') ){
                            ig.game.name += chr.toUpperCase();
                        } else {
                            ig.game.name += chr.toLowerCase();   
                        }
                    }
                });

            }

            this.parent();
        },

        draw: function(){
            this.parent();

            if (ig.game.name) {
                var x = ig.system.width/2,
                    y = ig.system.height/2;

                ig.game.fonts.text.draw( ig.game.name, x, y, ig.Font.ALIGN.CENTER );
            }



        }

    });

});