Skip to content

Latest commit

 

History

History
46 lines (33 loc) · 1.71 KB

README.md

File metadata and controls

46 lines (33 loc) · 1.71 KB

React-Pixel-Character-Editor

A GUI for creating and modifying character definitions for the react-pixel-text-renderer.

How to:

  • Create a definition in the grid. A single click will toggle a square on and off. A click followed by a shift-click will toggle all squares in the line between the two clicks.

  • Enter a character in the text input to associate with the definition.

  • Click Record Def. The definition has now been appened to the definitions object.

  • Click the JSON button. The custom definitions will be downloaded as a JSON file.

  • This file will be able to be used with the react-pixel-text-renderer instead of using it's included definitions.

Use with React-Pixel-Text-Renderer:

  • Place the customDefs.json file in the folder for your app that uses the react-pixel-text-renderer.

  • In your app import like this:

import customDefs from './customDefs.json';
  • Pass the custom defs to the component as a prop:
<TextRenderer
  customDefs = {customDefs}
  bgColor = {'rgba(0,10,50,1)'}
  color = {[230, 0, 190]}
  text={"it's good it's bad it's ugly it's a pixel text renderer."}
  scale={20}
  charSpaces={8}
  animate={true}
/>

What's next for the Character Editor?

  • A sandbox area to try out the Text Renderer package with UI for modifying it's props
  • A button for starting from a blank definition file
  • UI improvements
  • Look into performance issues with hover states on larger grids

What's next for react-pixel-text-renderer?

  • Another challenge would be to define the grid size on a per character basis rather than on a character set basis. This would complicate the calculations for when to jump to a new line.