收藏
回答

游戏引擎机制问题

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小游戏 需求 工具 1.02.1809260 WAGame.js:21 Wechat Lib:2.2.5, 2018.8.29 20:04:24

各位大神好:


     小弟我在测试开发者工具的时候,出现如下诡异问题原因不解,请各位高手解答。


    - 需求的场景描述(希望解决的问题)

        1、直接使用如下canvas函数是直接可以在屏幕中显示的。

        

let ctx = canvas.getContext('2d');
ctx.fillStyle = "#FFFFFF";
ctx.font = "30px Arial";
ctx.fillText("Hello World", 50, 50);

        

        2、使用绘制图片函数则无法显示任何信息(注:当前为静态显示)

import BG from './runtime/bg'
import BackGround from './runtime/background'
const BG_IMG_SRC = 'images/bg.jpg'
const screenWidth = window.innerWidth
const screenHeight = window.innerHeight
let ctx = canvas.getContext('2d')
 
export default class Main1 {
  constructor() {
    this.restart();
  }
  restart() {
    //print hello world
    console.log("test2");
    ctx.fillStyle = "#FFFFFF";
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 50, 50);
    this.img = new Image();
    this.img.src = BG_IMG_SRC;
    this.width = 512;
    this.height = 512;
    this.top = 0
    ctx.drawImage(
      this.img,
      0,
      0,
      this.width,
      this.height,
      0,
      -screenHeight + this.top,
      screenWidth,
      screenHeight
    )
  }
}


    3、采用游戏样例中的循环刷新代码则可以显示图片

import BackGround from './runtime/background'
 
let ctx   = canvas.getContext('2d')
 
/**
 * 游戏主函数
 */
export default class Main {
  constructor() {
    // 维护当前requestAnimationFrame的id
    this.aniId    = 0
    this.restart()
  }
 
  restart() {
    this.bg       = new BackGround(ctx)
    this.bindLoop     = this.loop.bind(this)
 
    // 清除上一局的动画
    //window.cancelAnimationFrame(this.aniId);
    this.aniId = window.requestAnimationFrame(
      this.bindLoop,
      canvas
    )
    console.log("this.aniId=" + this.aniId);
  }
 
  /**
   * canvas重绘函数
   * 每一帧重新绘制所有的需要展示的元素
   */
  render() {
    //ctx.clearRect(0, 0, canvas.width, canvas.height)
    this.bg.render(ctx)
  }
 
  // 实现游戏帧循环
  loop() {
    this.render()
    this.aniId = window.requestAnimationFrame(
      this.bindLoop,
      canvas
    )
    //console.log("this.aniId=" + this.aniId);
  }
}

    - 希望提供的能力

1、请说为什么没有循环绘制,文字输出显示而图片不显示;

2、有没有引擎的说明手册或者API等等。

回答关注问题邀请回答
收藏

1 个回答

  • 王博
    王博
    2018-10-12

    ?????

    2018-10-12
    赞同
    回复
登录 后发表内容