Jump to content

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


jdnichollsc
 Share

Recommended Posts

Hi guys!

 

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

 

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;}
Link to comment
Share on other sites

  • 4 weeks later...

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

Link to comment
Share on other sites

  • 2 years later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...