刚学习小游戏开发,参考模板小游戏,做一个简单的页面,放置一个背景图,模拟器上面可以呈现:
但上传体验版,就显示不了,黑屏:
请教问题出在哪里。
以下完整代码:
const WINDOW_INFO = wx.getWindowInfo();
const IMAGE_SRC="./images/index_bg.jpg";
const BACKGROUND_WIDTH = 1312;
const BACKGROUND_HEIGHT = 736;
/**
* 游戏主函数
*/
export default class Main {
constructor() {
this.init();
}
/**
* 初始化
*/
init(){
//创建画布
this.canvas = wx.createCanvas();
//获取canvas的2D绘图上下文,画笔
this.canvas.width = WINDOW_INFO.screenWidth;
this.canvas.height = WINDOW_INFO.screenHeight;
this.context = this.canvas.getContext("2d");
//设置背景图片
this.image = wx.createImage();
this.image.src= IMAGE_SRC;
this.imageLoaded = false;
this.image.onload=()=>{
this.imageLoaded = true;
};
//将图片绘制到画布上, 并且渲染至屏幕
requestAnimationFrame(this.render.bind(this));
}
/**
* 绘制
*/
render(){
const timeId= setInterval(() => {
if(this.imageLoaded){
console.log('图片加载成功了');
clearInterval(timeId);
this.context.drawImage(
this.image,
0,
0,
BACKGROUND_WIDTH,
BACKGROUND_HEIGHT,
0,
0,
this.canvas.width,
this.canvas.height
);
}else{
console.log('图片加载中');
}
}, 100);
}
}
const IMAGE_SRC="./images/index_bg.jpg";
将图片的路径改为绝对路径后,真机可以显示图片了,但是退出重新进入小游戏,就又黑屏了,日志显示图片是加载成功的。
const IMAGE_SRC="/images/index_bg.jpg";
重新进入小游戏,黑屏;
开启高性能模式解决问题,在game.json里面配置,参考文档:https://developers.weixin.qq.com/minigame/dev/guide/performance/perf-high-performance.html
"iOSHighPerformance": true, "iOSHighPerformance+": true