资讯专栏INFORMATION COLUMN

Emscripten教程之入门指导

joyvw / 2925人阅读

摘要:欢迎加入和技术交流群,群聊号码。下面是正文如果只是想要入门的话,使用是非常简单的。主要是通过来工作的。实际上,这块区域不仅可以显示文本。对于开发者来说,这是非常好的资源。

翻译:云荒杯倾
本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏。
也可以去作者的博客阅读文章。
欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522。

下面是正文:

如果只是想要入门Emscripten的话,使用Emscripten是非常简单的。本教学将教会你从命令行编译Emscripten代码的种种步骤,以及Emscripten代码中怎样使用文件和使用主要的编译优化flag。

要事优先

首先是确保你已经下载并且安装好了Emscripten。根据你的操作系统不同,下载和安装过程稍有不同。

Emscripten主要是通过emcc(Emscripten Compiler Frontend)来工作的。这是个命令行工具,它会调用其他编译需要的工具,可以将它看成是标准编译器比如gcc或者clang的命令行版本。wimdows系统的话,命令行中使用emcc,Linux下使用./emcc。

验证Emscripten

第一次使用Emscripten,请先使用以下命令验证Emscripten是否正确安装:

emcc -v

如果有警告发生,可能是因为缺少一些工具,请去看这个链接解决
如果没有警告或报错,就往下看。

运行Emscripten

现在就可以使用Emscripten把C/C++代码编译成JavaScript了。

首先,写一个待编译为JavaScript的C文件。比如hello_world.c,像下面这样:

    #include 
    
    int main() {
      printf("hello, world!
");
      return 0;
    }

注:这是Emscripten提供的测试集中最简单的一个C文件。

为了编译这个C文件,你只需要在test目录下打开命令行,emcc后面跟上这个文件名就行了。

emcc tests/hello_world.c

注:test目录是Emscripten测试集的目录。

这样就会在test目录下生成一个a.out.js文件,你可以使用node运行这个a.out.js。

node a.out.js

就会在node控制台打印出hello world!了。

如果编译失败,你可以在emcc tests/hello_world.c后面加个-v,也就是变成emcc tests/hello_world.c -v ,这样呢就会有一些调试信息,你可以参考他们,找出编译失败的原因。
生成HTML

Emscripten能为刚才输出的那个JavaScript生成HTML文件,你可以使用-o命令指定要输出的html文件名。

emcc tests/hello_world.c -o hello.html

在浏览器打开这个hello.html。你会看到,这个HTML页面中有一块文本区域是为了显示C代码中printf()函数打印的内容。

实际上,这块区域不仅可以显示文本。如果你C代码中调用了SDL的API,那么也可以在一块canvas中显示一个五彩斑斓的cube。比如,hello_world_cube.cpp那个测试用例就是这样。那个测试用例的代码是:

#include 
#include 

#ifdef __EMSCRIPTEN__
#include 
#endif

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

  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!
");
  printf("and here is some text that should be HTML-friendly: amp: |&| double-quote: |"| quote: |"| less-than, greater-than, html-like tags: ||
another line.
");

  SDL_Quit();

  return 0;
}
使用文件
C/C++中,可以用libc库的fopen,fclose等API来访问文件

js运行在浏览器的沙盒环境中,并不能直接访问本地文件系统,不过,Emscripten模拟了一个文件系统,这样你可以在你的C/C++代码中继续使用libc的API。

你想访问的文件应该通过preload或者embedded的方式打包到Emscripten虚拟的文件系统中。

测试集中,hello_world_file.cpp展示了怎么加载一个文件。测试代码和测试文件hello_world_file.txt如下面所示:

    #include 
    int main() {
      FILE *file = fopen("tests/hello_world_file.txt", "rb");
      if (!file) {
        printf("cannot open file
");
        return 1;
      }
      while (!feof(file)) {
        char c = fgetc(file);
        if (c != EOF) {
          putchar(c);
        }
      }
      fclose (file);
      return 0;
    }
    ==
    This data has been read from a file.
    The file is readable as if it were at the same location in the filesystem, including directories, as in the local filesystem where you compiled the source.
    ==

下面命令是在任何编译代码运行前指定一个数据文件预加载到Emscripten的虚拟文件系统。这个方法很有用,因为浏览器只能异步获取数据的,而原生代码(C/C++)很多都是使用的同步文件API,那么,用这个方法可以确保数据加载完成之前,编译代码(C/C++编译之后的js)不会从Emscripten的虚拟文件系统中去取数据,也就不会出错。下面是编译命令:

./emcc tests/hello_world_file.cpp -o hello.html --preload-file tests/hello_world_file.txt

运行生成的HTML,就能看到hello_world_file.txt文件的内容。

优化代码

默认情况下,和gcc以及clang等编译器一样,Emscripten生成的编译代码没有经过编译优化。那么,你可以在命令行参数中使用-O1,生成轻微优化的代码。

./emcc -O1 tests/hello_world.cpp

因为编译生成a.out.js的过程实际上并不真的需要优化,所以实际上你加不加-O1,从编译时间(或者说编译速度)上,你是看不出区别的。

但是真的没区别吗?

你可以看看生成的a.out.js文件,就能发现还是有区别的。-O1的优化有一些微小的优化并且清除了一些运行时断言,比如,在生成的代码中,printf函数,会被替换成put。

想编译优化,不仅可以用-O1,还可以用-O2,-O2优化的程度更厉害。你可以试一下,它的编译代码跟-O1又有很大差别。

Emscripten 测试集

Emscripten给大家提供了非常多的测试用例,几乎覆盖了Emscripten的所有功能。对于开发者来说,这是非常好的资源。

关于测试集的更多情况,可以点击了解。

小贴士和下一步

本教学告诉了你使用Emscripten的第一步,就是使用命令行编译一个c/c++代码为js或者HTML。为了了解更多Emscripten,给你几个小贴士:

本站点还有很多高级一点的教程,比如,关于编译和构建一个项目,整合你的原生代码到web环境,打包你的代码等。

关于怎么用Emscripten,测试集是一个很好的参考的地方。比如你想了解--pre-js选项怎么工作,你就在测试集里面搜--pre-js,通常来说你会搜到好几个例子。

读一下本站的settings.js、emcc和emscripten.h的部分。

读一下本站的FAQ。

Emscripten主题系列文章是emscripten中文站点的一部分内容。
第一个主题介绍代码可移植性与限制
第二个主题介绍Emscripten的运行时环境
第三个主题第一篇文章介绍连接C++和JavaScript
第三个主题第二篇文章介绍embind
第四个主题介绍文件和文件系统
第六个主题介绍Emscripten如何调试代码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88614.html

相关文章

  • Emscripten教程入门指导

    摘要:欢迎加入和技术交流群,群聊号码。下面是正文如果只是想要入门的话,使用是非常简单的。主要是通过来工作的。实际上,这块区域不仅可以显示文本。对于开发者来说,这是非常好的资源。 翻译:云荒杯倾本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏。也可以去作者的博客阅读文章。欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522。 下面...

    jzzlee 评论0 收藏0
  • Emscripten教程代码可移植性与限制(一)

    摘要:教程之代码可移植性与限制一翻译云荒杯倾本文是专栏系列文章之一,更多文章请查看专栏。下面是正文代码可移植性与限制几乎可以编译任何可移植的代码到。如果标准机构将共享状态添加到中,支持多线程代码将成为可能。 Emscripten教程之代码可移植性与限制(一) 翻译:云荒杯倾本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏。也可以去作者的博客阅读文章。欢迎...

    yangrd 评论0 收藏0
  • Emscripten教程如何调试代码(六)

    摘要:值启用了更详细的堆栈保护检查,它以牺牲一些性能的代价提供更精确的。这种可以由任何类型的编码错误引起,但表现为函数指针错误,因为在运行时的预期表中无法找到函数。 翻译:云荒杯倾本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏。也可以去作者的博客阅读文章。欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522。 调试Emscri...

    cod7ce 评论0 收藏0

发表评论

0条评论

joyvw

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<