reactjs - 简单的 React Native Image Game 是滞后的。我该如何优化?
问题描述
我正在尝试使用 react native 实现一个简单的 img 点击游戏以用于学习目的。我正在使用这个库https://github.com/bberak/react-native-game-engine游戏循环组件作为游戏循环。
我想做的是在屏幕上以小半径渲染一些随机位置的img,然后将其增加到一个值,然后减小它并最终从屏幕上删除img(或点击时) - 就像在这个游戏中一样: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 个图像时 fps 显着下降。在 android 实际设备中测试。我正在更新状态一次updateCircle 函数结束。游戏循环是 updateCircle 组件
解决方案
您的问题是您正在尝试为不是为动画制作的组件制作动画。
我不太了解 FastImage 组件,但我知道它的目的是预加载图像,而不是动画。
您应该使用 Animated.Image 作为图像,并使用 Animated.timing 来管理 Animated.Image 的动画
推荐阅读
- python - 如何更改此代码以在 GUI tkinter 中工作?
- swift - 在这里,我试图将数据存储在 Swift4 的文本文件中,但它不起作用
- javascript - 根据页面上另一个元素的存在更改 css 元素值
- tkinter - 在 Python 上显示消息
- python - Python3多处理进程如何传递变量?
- python - 无法从 python 使用 Ookla 的 Speedtest 命令(参数无效)
- javascript - 如何使用 javascript 添加可搜索的下拉列表
- assembly - Intel x86 - 中断服务例程责任
- python - 在将每条消息记录到文件时,如何让 discord.py 显示名称?
- javascript - Eloquent Javascript 练习:深度比较