react-native-runescape-text

Convert text to a text GIF image with RuneScape chat effects.

Refer to this wikiHow guide on How to Write Text Effects on RuneScape.

Getting started

npm install react-native-runescape-text

Examples

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {GCanvasView} from '@flyskywhy/react-native-gcanvas';
import getRuneScapeText from 'react-native-runescape-text';

export default class WebglCubeMaps extends Component {
  constructor(props) {
    super(props);
    this.canvas = null;
    this.state = {
      debugInfo: 'hello world',
      hasOc1: false,
    };
  }

  takePicture = () => {
    const options = {
      scale: 1,
      fps: 10,
      motion: 'scroll',
    };
    const {width, height, extension, buffer} = getRuneScapeText(this.state.debugInfo, options);

    console.warn(width, height, extension);
    console.warn(buffer);
  };

  render() {
    return (
      <View style={styles.container}>
        {Platform.OS !== 'web' && (
          <GCanvasView
            style={{
              width: 1000, // 1000 should enough for offscreen canvas usage
              height: 1000,
              position: 'absolute',
              left: 1000, // 1000 should enough to not display on screen means offscreen canvas :P
              top: 0,
              zIndex: -100, // -100 should enough to not bother onscreen canvas
            }}
            offscreenCanvas={true}
            onCanvasCreate={(canvas) => this.setState({hasOc1: true})}
            devicePixelRatio={1} // should not 1 < devicePixelRatio < 2 as float to avoid pixel offset flaw when GetImageData with PixelsSampler in @flyskywhy/react-native-gcanvas/core/src/support/GLUtil.cpp
            isGestureResponsible={false}
          />
        )}
        {Platform.OS === 'web' || this.state.hasOc1 && (
          <TouchableOpacity onPress={this.takePicture}>
            <Text style={styles.welcome}>Click me console.warn()</Text>
          </TouchableOpacity>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginVertical: 20,
  },
});

Syntax

getRuneScapeText(string, [options], [wordWrapOptions]);

Parameters

| Parameter | Type | Required | Default | Description | | ----------------------------------- | -------- | -------- | ------- | ------------------------------------------------------------------------------------- | | string | string | Yes | none | Text to convert | | options | Object | No | {} | Options to configure script behavior | | wordWrapOptions | Object | No | {} | Options to configure word-wrap behavior |

Options

| Property | Type | Required | Default | Description | | ---------------- | --------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | version | string | No | "osrs" | Game version to use, either: osrs or rs3 | | color | string | No | "yellow" | Default color effect of the text, either: yellow, red, green, cyan, purple, white, glow1, glow2, glow3, flash1, flash2, flash3, or any other color format in tinycolor2 | | motion | string | No | "none" | Default motion effect of the text, either: none, wave, wave2, shake, scroll, or slide | | width | number | No | 0 | Image width want to clip on center, 0 means no clip and width of Return value depend on string text length | | height | number | No | 0 | Image height want to clip on center, 0 means no clip and height of Return value depend on font height | | suffix | string | No | ":" | String that should suffix each color and motion string | | replacement | string | No | "" | String to replace characters the font does not support when supportNonAscii is false | | supportNonAscii | boolean | No | true | Determines whether the text support Non-ASCII characters like Chinese | | trimStart | boolean | No | false | Determines whether the text will be trimStart() | | maxMessageLength | number | No | 280 | Max message length allowed after the string has been sanitized | | scale | number | No | 2 | Scale factor of the font (multiples of 16px), prefer integer values greater than or equal to 1, decimal values will render blurry text | | font | string | No | runescape_uf| font name | | fps | number | No | 20 | Frames per second to render animations at, prefer integer values less than or equal to 60 | | cycleDuration | number | No | 3000 | Duration in milliseconds of one cycle before the animation loops | | imageSmoothingEnabled | boolean | No | true | Determines whether to linear filter the text image | | imageGradientEnabled | boolean | No | true | Determines whether to let the color in text image be gradient, if false, it's better also set imageSmoothingEnabled be false | | gradientThreshold | number | No | 100 | When imageGradientEnabled is false, if pixel's a > gradientThreshold, a will be modified to 255, otherwise rgba will be modified to 00000000 | | showLogs | boolean | No | false | Determines whether to print runtime logs or not | | returnBufferType | string | No | Buffer | Determines return buffer type, either: Buffer, Array or ArrayOfImageData |

WordWrapOptions

Property information can be found here. The defaults chosen by this module are listed below:

| Property | Default | | -------- | ------------------------ | | width | 50 | | indent | "" | | newline | "\n" | | escape | (str) => str.trimEnd() | | trim | false | | cut | false |

Return value

The return value is an Object with the following properties:

| Property | Type | Description | | --------- | ----------------- | ------------------------------------- | | width | number | Image width | | height | number | Image height | | framesLength | number | GIF frames length | | extension | string | File extension gif | | buffer | <Buffer>, <Array> or ArrayOfImageData | result in a buffer or array of a GIF image, or an array contains many ImageData |

Install custom Font

Ref to custom fonts in README.md of @flyskywhy/react-native-gcanvas to install custom fonts and registerFont() if on Android, e.g. install from src/assets/runescape_uf.ttf and

if (Platform.OS === 'android') {
  registerFont(`${RNFS.ExternalDirectoryPath}/fonts/runescape_uf.ttf`);
}

then options.font = 'runescape_uf' before run getRuneScapeText().

Consider react-native-font-picker, and here is the result of Font Picker to fillText on @flyskywhy/react-native-gcanvas.

Exceptions

| Error | Description | | ---------------------- | --------------------------------------------- | | InvalidArgumentError | Thrown if required string argument is missing | | TypeError | Thrown if argument type is unexpected | | ValueError | Thrown if string is empty | | ValueError | Thrown if the parsed message string is empty |