Nicholls

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

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;}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.