Jump to content

Add/Change text on a texture?


Recommended Posts

Hello everyone.

I'm new to Pixi.js and I'm wondering if this would be possible:

Basically, a user should be able to enter a text which then will be added to a texture (some kind of card). This card will be placed on a board and these cards will be reorganized in a certain way.

The user should be able to click on the text and change it.

Is this feasible in Pixi.js? I'm still reading tutorials but right now I'm not sure how you would add input text to a texture and make it editable.

best regards



Link to comment
Share on other sites

Welcome to the forums!

Yes. However you wouldnt be able to do it without learning first what is Sprite, what is Texture, BaseTexture, how "Texture.from(myCanvas)" works, how actually "PIXI.Text" works and some other things. Please spend some time learning pixi and experimenting. 

pixijs examples: https://pixijs.io/examples/#/demos-basic/container.js

pixijs wiki: https://github.com/pixijs/pixi.js/wiki

also clone sources locally and open in separate IDE window, learn which hotkey in your IDE helps to find classes you want to look.

For input use something like pixi-text-input: https://github.com/Mwni/PIXI.TextInput , or just position html input element on top of your "texture" or whatever you will call it after you spend some time with pixi, accessability plugin has tricks like that.

Edited by ivan.popelyshev
Link to comment
Share on other sites

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...