Text Input Plugin


start:
  - show room_night: CONTINUE
  - show deuzi: normal AT CENTER WITH FADE
  - deuzi says: Hey, I thought I would find you here. I'm Deuzilene. You're the new student, right?
  - deuzi says: What's your name?
  - call TextInput: name player Alex
  - deuzi says happy: Nice to meet you {TextInputName_player}. 
  - player says: Thank you, nice to meet you too Deuzilene.
  - deuzi says: One more question, where do you come from?
  - call TextInput: var hometown
  - deuzi says normal: So, you're from {hometown}? I think there's another student from there too.
  - deuzi says: I hope you'll meet them soon! Now you can go back to sleep.
  - endgame:
									



backgrounds:
  room_night: assets/backgrounds/room_night.jpg

characters:
  deuzi:
    displayName: Deuzilene
    color: "#ca90cf"
    looks:
      normal: assets/characters/Char3NormalSchool.png
      happy: assets/characters/Char3HappySchool.png
      angry: assets/characters/Char3AngrySchool.png
  player:
    color: "#FFFFFF"

extra:
  spritesheets:
    confirmBtn: assets/gui/confirm.png 163 82

								


class TextInput extends RenJS.Plugin {

	async onCall(params) {
		const str = params.body.split(' ');
		await this.showTextInput(...str);
		this.game.resolveAction();
	}

	onStart(){
		// keep track of which names are changed during game
		this.game.managers.logic.vars.names = []
	}

	onLoad(slot,dataParsed){
		for (const name of dataParsed.vars.names){
			// add names to character objects
			this.game.managers.character.characters[name].name = dataParsed.vars[`TextInputName_${name}`]
		}
	}

	showTextInput(propertyType,propertyName,defaultValue){
		return new Promise(resolve=>{
			// lock game scale so it won't resize while showing the text box, or it will look bad
			this.game.lockScale = true;
			// create html input
			const input = this.createInputElement(defaultValue);

			const confirmChange = async ()=>{
				if (input.value != ""){
					// play an sfx if you want
					// this.game.managers.audio.playSFX('buttonsfx');
					if (propertyType == 'var'){
						this.game.managers.logic.vars[propertyName] = input.value;
					}
					if (propertyType == 'name' && this.game.managers.character.characters[propertyName]){
						this.game.managers.logic.vars[`TextInputName_${propertyName}`] = input.value;
						this.game.managers.logic.vars.names.push(propertyName);
						// change also the character name to show in nameBoxes
						this.game.managers.character.characters[propertyName].config.displayName = input.value;
					}
					
					// hide everything
					let tween = this.game.add.tween(input.style).to({opacity:0},750,Phaser.Easing.Linear.None,true);
					await this.game.screenEffects.transition.FADEOUT(btn);
					// destroy everything
					btn.destroy();
					input.remove();
					// re activate hud
					this.game.gui.hud.show();
					// unlock scaling
					this.game.lockScale = false;

					// end action
					resolve();
				}
			}

			// confirm on enter
			input.onkeydown = function(e){
				if(e.keyCode==13){
					confirmChange();
				}
				e.stopPropagation();
			};
			input.style.opacity = 0;
			document.body.appendChild(input);
			// create confirm button ass well
			const btn = this.game.add.button(
				this.game.world.centerX,
				this.game.world.centerY+100,
				"confirmBtn",
				confirmChange,
				this,1,0,2,0);
			btn.anchor.set(0.5);

			// deactivate the hud, so players won't mess up with it while inputing text
			this.game.gui.hud.hide();
			// fade in background and input element
			this.game.screenEffects.transition.FADEIN(btn);
			this.game.add.tween(input.style).to({opacity:1},750,Phaser.Easing.Linear.None,true);
		})
	}

	createInputElement(defaultValue){
		const input = document.createElement("input");
		input.type = "text";
		input.value = defaultValue ? defaultValue : ""
		// add a css class to the input
		// input.className = "canvas-input";
		
		// if you want max input text length, add it here
		// input.setAttribute('maxlength', '10');

		// the input element needs to be scaled along he game
		const scale = this.game.scale.width/this.game.width;
		const inputProps = {
			x:100,
			y:350,
			width:600,
			height:50,
			fontSize:25
		}
		const canvas = this.game.canvas;
		const canvasWidth = canvas.offsetWidth;
		const canvasHeight = canvas.offsetHeight;
		const topLeft = [(canvasWidth/2)-(this.game.scale.width/2)+canvas.offsetLeft, (canvasHeight/2)-(this.game.scale.height/2)+canvas.offsetTop]
		input.style.position = "absolute";
		input.style.left = (topLeft[0]+(inputProps.x*scale))+"px";
		input.style.top = (topLeft[1]+(inputProps.y*scale))+"px";
		input.style.width = (inputProps.width*scale)+"px";
		input.style.height = (inputProps.height*scale)+"px";
		input.style['font-size'] = (inputProps.fontSize*scale)+"px";
		return input;
	}

	async changeProperty(value,propertyType,propertyName){
		
	}
}

RenJSGame.addPlugin('TextInput',TextInput)
								

Return to the Gallery Download from Github