Convert text to a text GIF image with RuneScape chat effects.
More examples
Refer to this wikiHow guide on How to Write Text Effects on RuneScape.
npm install react-native-runescape-text
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,
},
});getRuneScapeText(string, [options], [wordWrapOptions]);| 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 |
| 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 |
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 |
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 |
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.
| 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 |