Как я могу показать текст, используя pixi js? - PullRequest
Новая
       32

Как я могу показать текст, используя pixi js?

0 голосов
/ 05 октября 2019

Я первый, кто разработал реактивную версию с pixi js. Я хотел бы воспроизвести простой экран, отображающий текст или изображение, используя pixi js в выставочном проекте Reaction-native. Я попытался воспроизвести экран, но не смог.

Это ошибки при запуске проекта. 

context.scale is not a function. (In 'context.scale(this.resolution, this.resolution)', 'context.scale' is undefined)
updateText
    mypath\node_modules\pixi.js\lib\core\text\Text.js:188:22
renderWebGL
    mypath\node_modules\pixi.js\lib\core\text\Text.js:373:24
renderWebGL
    mypath\node_modules\pixi.js\lib\core\display\Container.js:416:45
render
    mypath\node_modules\pixi.js\lib\core\renderers\webgl\WebGLRenderer.js:386:34
render
    mypath\node_modules\pixi.js\lib\core\Application.js:135:29
emit
    mypath\node_modules\pixi.js\lib\core\ticker\TickerListener.js:99:29
update
    mypath\node_modules\pixi.js\lib\core\ticker\Ticker.js:411:41
_tick
    mypath\node_modules\pixi.js\lib\core\ticker\Ticker.js:147:29
_callTimer
    mypath\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:154:15
callTimers
    mypath\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:414:17
__callFunction
    mypath\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:366:47
<unknown>
    mypath\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106:26
__guard
    mypath\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314:10
callFunctionReturnFlushedQueue
    mypath\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105:17
  ...

Вот мой файл package.json. 

...
"dependencies": {
    "@expo/vector-icons": "^9.0.0",
    "expo": "^33.0.7",
    "expo-asset-utils": "^1.1.1",
    "expo-gl": "~5.0.1",
    "expo-pixi": "^1.1.0",
    "expokit": "^32.0.3",
    "lodash": "^4.17.11",
    "native-base": "^2.10.0",
    "prop-types": "^15.6.2",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-gesture-handler": "^1.0.9",
    "react-native-svg": "^9.11.1",
    "react-native-web": "^0.11.2",
    "react-navigation": "^3.0.9",
    "react-navigation-redux-helpers": "^2.0.9",
    "react-redux": "^6.0.0",
    "react-style-proptype": "^3.2.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "expo-cli": "^2.10.1",
    "eslint": "^5.16.0",
    "eslint-config-universe": "^1.0.7",
    "prettier": "^1.17.0"
  },
  "resolutions": {
    "expo-pixi/@expo/browser-polyfill": "0.0.1-alpha.3"
  },
  "private": true
...

Вот мой файл app.json. 

...
 "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./src/assets/images/icon.png",
    "splash": {
      "image": "./src/assets/images/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#222222"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    }
  }
...

Это мой код. 

import React from 'react';
import { GLView } from 'expo-gl';
import ExpoPixi,{ PIXI } from 'expo-pixi';

export default class GameReady extends React.Component {
  render() {
    return (
      <GLView
        style={{ flex: 1 }}
        onContextCreate={async context => {
           const app = new PIXI.Application({ context });
          const style = new PIXI.TextStyle({
            fontFamily: 'Arial',
            fontSize: 36,
            fontStyle: 'italic',
            fontWeight: 'bold',
            fill: ['#ffffff', '#00ff99'], // gradient
            stroke: '#4a1850',
            strokeThickness: 5,
            dropShadow: true,
            dropShadowColor: '#000000',
            dropShadowBlur: 4,
            dropShadowAngle: Math.PI / 6,
            dropShadowDistance: 6,
            wordWrap: true,
            wordWrapWidth: 440,
          });

          const richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style);
          richText.x = 50;
          richText.y = 250;

          app.stage.addChild(richText);
        }}
      />
    );
  }
}

Пожалуйста, дайте мне знать, как это исправить.

...