jdnichollsc Posted August 24, 2015 Share Posted August 24, 2015 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 Kishore, MichaelD and Nick 3 Link to comment Share on other sites More sharing options...
glantucan Posted August 24, 2015 Share Posted August 24, 2015 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! jdnichollsc 1 Link to comment Share on other sites More sharing options...
Kishore Posted August 26, 2015 Share Posted August 26, 2015 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.JSBasicGame.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 More sharing options...
jdnichollsc Posted August 27, 2015 Author Share Posted August 27, 2015 I need see your code in your game to debug, please use the same width in bimapdata and canvasInputRegards Link to comment Share on other sites More sharing options...
theaidem Posted September 19, 2015 Share Posted September 19, 2015 Hi, thanks for example, but i have same problem with update screen, i .e I cant put some text into fieldhere is my coffee codeclass 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, noAlso if I click right button on canvas in your example, it lost binding focus function Link to comment Share on other sites More sharing options...
theaidem Posted September 19, 2015 Share Posted September 19, 2015 it's works correctly only for Phaser.CANVASbut > Also if I click right button on canvas in your example, it lost binding focus functionstill opened issue any ideas? barbarawalters and Fenopiù 1 1 Link to comment Share on other sites More sharing options...
vastron Posted February 15, 2018 Share Posted February 15, 2018 Hi guys, does this work on mobile devices? Link to comment Share on other sites More sharing options...
Recommended Posts