收藏
回答

背景图片显示不了,黑屏

框架类型 问题类型 终端类型 微信版本 基础库版本
小游戏 需求 微信iOS客户端 8.0.58 3.8.8

刚学习小游戏开发,参考模板小游戏,做一个简单的页面,放置一个背景图,模拟器上面可以呈现:

但上传体验版,就显示不了,黑屏:

请教问题出在哪里。

以下完整代码:

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);
    }
}
回答关注问题邀请回答
收藏

1 个回答

  • 广颯中校
    广颯中校
    星期三 10:56
    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
    
    星期三 10:56
    有用 1
    回复
登录 后发表内容