emscripten + sdl = 抛出异常：TypeError：无法设置未定义的属性“widthNative”

Posted 2023-02-22

【中文标题】emscripten + sdl = 抛出异常：TypeError：无法设置未定义的属性“widthNative”

【英文标题】：emscripten + sdl = exception thrown: TypeError: cannot set property 'widthNative' of undefined

【发布时间】：2016-04-28 20:38:04

【问题描述】：

我今天刚刚启动并运行了 emscripten，但无论我使用什么示例，我都会不断收到以下错误：

exception thrown: TypeError: Cannot set property 'widthNative' of undefined,TypeError: Cannot set property 'widthNative' of undefined
    at Object.Browser.updateCanvasDimensions (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:6964:30)
    at Object.Browser.setCanvasSize (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:6944:17)
    at _emscripten_set_canvas_size (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:9485:15)
    at Array._Emscripten_CreateWindow (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:150624:2)
    at _SDL_CreateWindow (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:58841:41)
    at _SDL_CreateWindowAndRenderer (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:34710:8)
    at _main (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:10433:4)
    at Object.asm._main (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:179274:19)
    at Object.callMain (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:179457:30)
    at doRun (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:179515:60)
2016-04-28 16:30:39.060 app.out.js:6964 Uncaught TypeError: Cannot set property 'widthNative' of undefinedBrowser.updateCanvasDimensions @ app.out.js:6964Browser.setCanvasSize @ app.out.js:6944_emscripten_set_canvas_size @ app.out.js:9485_Emscripten_CreateWindow @ app.out.js:150624_SDL_CreateWindow @ app.out.js:58841_SDL_CreateWindowAndRenderer @ app.out.js:34710_main @ app.out.js:10433asm._main @ app.out.js:179274callMain @ app.out.js:179457doRun @ app.out.js:179515run @ app.out.js:179529(anonymous function) @ app.out.js:179618

我正在使用 chrome 和 osx elcrapitan。

用这个来编译：

/Users/rspice/LocalDev/Emscripten/emscripten/1.35.0/em++  -s USE_SDL=2 -s GL_DEBUG=1 /Users/rspice/LocalDev/UAPDevTests/src/main.cpp  -o /Users/rspice/LocalDev/UAPDevTests/bld/app.out.js --use-preload-plugins

我将http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html#generating-html教程中的 .cpp 复制到我自己的文件中

谢谢。

编辑：

如果我从网络上的其他地方运行此 .cpp，我会看到红色框和一条线，但出现错误：

app.out.js:6269 emscripten_set_main_loop_timing: Cannot set timing mode for main loop since a main loop does not exist! Call emscripten_set_main_loop first to set one up.

我不明白，因为它存在......

main.cpp

#include <stdio.h>
#include <SDL2/SDL.h>
#include <assert.h>
#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#endif

SDL_Window * window;
SDL_Renderer * renderer;

void render_func(void) 
    SDL_SetRenderDrawColor(renderer, 200, 0, 0, 255);
    SDL_RenderClear(renderer);

    SDL_SetRenderDrawColor(renderer, 0, 255, 0, 255);
    SDL_RenderDrawLine(renderer, 0, 0, 640, 320);
    SDL_RenderPresent(renderer);

#ifdef EMSCRIPTEN
    emscripten_cancel_main_loop();
#endif


int main(int argc, char* argv[])

    assert(SDL_Init(SDL_INIT_VIDEO) == 0);
    SDL_CreateWindowAndRenderer(640, 320, 0, &window, &renderer);

#ifdef EMSCRIPTEN
    emscripten_set_main_loop(render_func, 0, 1);
#else
    render_func();
#endif

    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    SDL_Quit();
    return 0;

如果我运行这个 .cpp 我会得到

(index):40 you should see a smoothly-colored square - no sharp lines but the square borders!
2016-04-29 09:36:44.049 (index):40 and here is some text that should be HTML-friendly: amp: |&| double-quote: |"| quote: |'| less-than, greater-than, html-like tags: |<cheez></cheez>|
2016-04-29 09:36:44.050 (index):40 another line.

但没有颜色或正方形。

hello_world_sdl.cpp

#include <stdio.h>
#include <SDL/SDL.h>

#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#endif

extern "C" int main(int argc, char** argv) 
  printf("hello, world!\n");

  SDL_Init(SDL_INIT_VIDEO);
  SDL_Surface *screen = SDL_SetVideoMode(256, 256, 32, SDL_SWSURFACE);

#ifdef TEST_SDL_LOCK_OPTS
  EM_ASM("SDL.defaults.copyOnLock = false; SDL.defaults.discardOnLock = true; SDL.defaults.opaqueFrontBuffer = false;");
#endif

  if (SDL_MUSTLOCK(screen)) SDL_LockSurface(screen);
  for (int i = 0; i < 256; i++) 
    for (int j = 0; j < 256; j++) 
#ifdef TEST_SDL_LOCK_OPTS
      // Alpha behaves like in the browser, so write proper opaque pixels.
      int alpha = 255;
#else
      // To emulate native behavior with blitting to screen, alpha component is ignored. Test that it is so by outputting
      // data (and testing that it does get discarded)
      int alpha = (i+j) % 255;
#endif
      *((Uint32*)screen->pixels + i * 256 + j) = SDL_MapRGBA(screen->format, i, j, 255-i, alpha);
    
  
  if (SDL_MUSTLOCK(screen)) SDL_UnlockSurface(screen);
  SDL_Flip(screen);

  printf("you should see a smoothly-colored square - no sharp lines but the square borders!\n");
  printf("and here is some text that should be HTML-friendly: amp: |&| double-quote: |\"| quote: |'| less-than, greater-than, html-like tags: |<cheez></cheez>|\nanother line.\n");

  SDL_Quit();

  return 0;

当我尝试加载图像的示例时，我收到了 IMG_Error: 或类似的东西，但我会在之后调查。

现在我很确定这对我来说并不清楚，我不明白生成的 JS 以及运行模块需要做什么......因为我没有写任何东西，而且一个有效的包括 JS 代码。你们知道有什么好的例子吗？

【问题讨论】：

拥有一个小示例和工具集版本仍然会有所帮助。

我添加了更多细节，抱歉，我对这个 Emscripten 还很陌生，事实上我在这里发帖。还有什么需要的吗？

我能够通过以下示例在屏幕上呈现一些东西：***.com/questions/29335510/… 如果我构建为 .html 并查看它嵌入，我只能让它运行，否则我会得到同样的错误，或侦听器错误。

你能发布你用来运行 Emscripten 模块的 javascript 代码吗？此外，最好在问题中发布 cpp 文件，而不是根据教程中的版本链接（注意***.com/help/mcve）

更新了，我想错过了写 JS 来运行 Emscripten 模块的部分，知道有什么好的例子吗？

【参考方案1】：

答案是我在 JS 中需要这个模块。

  var Module = 
    print: (function() 
      var element = document.getElementById('output');
      return function(text) 
        element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
      ;
    )(),
    canvas: document.getElementById('canvas')
  ;

“基本上就是这样，是的。定义 Module.print 和 printErr 并且控制台应用程序可以工作，添加 Module.canvas 以获取渲染。有关默认内容，请参见 src/shell.html。”