Jump to content

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

Go to solution Solved by glantucan,

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 post
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 post
Share on other sites
  • 2 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...