Input type text in Canvas with Phaser and CanvasInput! :D

[jdnichollsc]

Hi guys!

 

See my example of input text in Canvas using Phaser with CanvasInput!

 

Codepen: http://codepen.io/jdnichollsc/pen/waVMdB?editors=001

 

Regards, Nicholls

[glantucan]

Wow!

 

It does look awesome!

 

I will try to use it on my actual project and see if it's really 'la verga'  ;P

 

Thank you very much

 

Regards from Spain!

[Kishore]

Hi guys!

 

See my example of input text in Canvas using Phaser with CanvasInput!

 

Codepen: http://codepen.io/jdnichollsc/pen/waVMdB?editors=001

 

Regards, Nicholls

 

Hi Nicholls,

 

I tried the code you have given. Its capturing the text entered by user but it ain't updating on the screen.. Can you help to resolve this issue?

thanks in advance..!

 

this code contains in Mainmenu.JS

BasicGame.MainMenu = function (game) {};BasicGame.MainMenu.prototype = {	create: function () 	{		myInput = createInput(this.game.world.centerX,this.game.world.centerY);		myInput.anchor.set(0.5);		myInput.canvasInput.value('Text');		myInput.canvasInput.focus();	}};function inputFocus(sprite){  sprite.canvasInput.focus();  console.log(sprite.canvasInput._value);}function createInput(x, y){  var bmd = game.add.bitmapData(400, 50);      var myInput = game.add.sprite(x, y, bmd);  myInput.canvasInput = new CanvasInput  ({    canvas: bmd.canvas,    fontSize:20,    fontFamily: 'Arial',    fontColor: '#212121',    fontWeight: 'bold',    width: 300,    padding: 8,    borderWidth: 1,    borderColor: '#000',    borderRadius: 3,    boxShadow: '1px 1px 0px #fff',    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',    placeHolder: 'Enter message here...'  });  myInput.inputEnabled = true;  myInput.input.useHandCursor = true;      myInput.events.onInputUp.add(inputFocus, this);  return myInput;}

[jdnichollsc]

I need see your code in your game to debug, please use the same width in bimapdata and canvasInput

Regards
 

[theaidem]

Hi, thanks for example, but i have same problem with update screen, i .e I cant put some text into field

here is my coffee code

class Load	constructor: (game)->		# Some Code...	preload: ->		# Some Code...	create: ->		@stage.backgroundColor = 0x00CCFF		@stage.disableVisibilityChange = yes		@state.start("Lobby", no, no)class Lobby	constructor: (game)->		# Some Code...	preload: ->		# Some Code...	create: ->		myInput = @createInput(@game.world.centerX, 50)		myInput.anchor.set(0.5)	update: ->		# Some Code...	render: ->		# Some Code...	inputFocus: (sprite)->		sprite.canvasInput.focus()	createInput: (x, y)->		bmd = @add.bitmapData(420, 50)		input = @add.sprite(x, y, bmd)		input.canvasInput = new CanvasInput {			canvas: bmd.canvas			fontSize: 22			fontFamily: 'Arial'			fontColor: '#212121'			fontWeight: 'bold'			width: 400			padding: 8			borderWidth: 1			borderColor: '#000'			borderRadius: 3			boxShadow: '1px 1px 0px #fff'			innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)'			placeHolder: 'Enter message here...'		  }		input.inputEnabled = true		input.input.useHandCursor = true 		input.events.onInputUp.add(@inputFocus, @)		inputgame = new Phaser.Game(1000, 700, Phaser.AUTO)game.state.add 'Load', Load, yesgame.state.add 'Lobby', Lobby, no

Also if I click right button on canvas in your example, it lost binding focus function

[theaidem]

it's works correctly only for Phaser.CANVAS
but 

> Also if I click right button on canvas in your example, it lost binding focus function
still opened issue 

any ideas?

[vastron]

Hi guys, does this work on mobile devices?