Skip to content

flyskywhy/react-native-runescape-text

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-runescape-text

npm version npm downloads npm licence Platform

Discord Twitter Follow

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

Selling rune scimmy 15k
More examples
Default styling
Free armor trimming!
Lorem ipsum

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