Игра Simple React Native Image - Lagging. Как оптимизировать? - PullRequest
Новая
       62

Игра Simple React Native Image - Lagging. Как оптимизировать?

0 голосов
/ 26 сентября 2018

Я пытаюсь реализовать простую игру img tapping с реагировать на нативный язык в учебных целях. Я использую этот библиотечный компонент https://github.com/bberak/react-native-game-engine игровой цикл в качестве игрового цикла.

Что я пытаюсь сделатьсделать, это визуализировать некоторые изображения со случайными местоположениями на экране с небольшим радиусом, затем увеличить его до значения, после уменьшения его и, наконец, удалить изображение с экрана (или при нажатии) - как в этой игре: http://mouseaccuracy.com/

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Dimensions, View,ToastAndroid,TouchableOpacity,Image,Text } from "react-native";



    const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
    import { GameLoop } from "react-native-game-engine";
    import { Fonts } from '../utils/Fonts';
    import FastImage from 'react-native-fast-image'
    import * as Progress from 'react-native-progress';
    import SwordImage from "../assets/tapfight/sword.png";
    import ShieldImage from "../assets/tapfight/shield.png";


          this.renderSwordOrCircle(circle)
        )


            })




    )




    }


       }

     renderHealth = () =>{
    return(
      <View>
        <View style={{ alignItems:'center' ,position: "absolute", top: 0, left: 0}}>
        <Text style={{fontFamily:Fonts.MainFont,color:'white',fontSize:25}}>{this.playerHealth}</Text>
        <Progress.Bar color='red' progress={this.playerHealth/100} width={100} height={18} />

        </View>
        <View style={{ alignItems:'center',position: "absolute", top: 0, right: 0}}>
        <Text style={{fontFamily:Fonts.MainFont,color:'white',fontSize:25}}>{this.enemyHealth}</Text>
        <Progress.Bar  color='red' progress={this.enemyHealth/100} width={100} height={18} />
         <FastImage resizeMode="contain" style={{width:100,height:100}} source={require('../assets/tapfight/guard_2_head.png')}></FastImage>
        </View>

      </View>


    )



     }


      render() {
        if(this.state.fight==true){
          return (
            <View style={{flex:1,backgroundColor:'transparent'}} > 
             <GameLoop style={{flex:1}} onUpdate={this.updateCircle}> 
             {this.renderHealth()} 
             {this.renderCircles()}     
             </GameLoop>       
             </View>

          );

        }else{

    return(
      null
    )

        }

      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      }
    });

Что я делаю, так это то, что я генерирую изображения каждые 600 мс на экране, и игрок пытается их коснуться. Проблема в том, что когда на экране более 2 изображений, частота кадров падает значительно. Испытано на устройстве Android.обновление состояния один раз в конце функции updateCircle.Игровой цикл является обновлением круга компонента

1 Ответ

0 голосов
/ 26 сентября 2018

Ваша проблема в том, что вы пытаетесь анимировать компонент, который не создан для анимации .

Я не очень хорошо знаю компонент FastImage, но я понимаю, что его цельдля предварительной загрузки изображений, а не для анимации.

Вы должны использовать Animated.Image для изображения и Animated.timing для управления анимацией Animated.Image

...