チュートリアルガイドEmscriptenスタート

翻訳：クラウド不足カップは注ぎ
、この記事では、列Emscripten-WebAssemblyの記事のシリーズの一つ、より多くの記事が列を参照してください。
あなたはまたに行くことができます著者のブログ記事を読むことを。
939 206 522：Wasmとemscripten技術交流グループ、グループチャットの番号へようこそ。

ここではテキストは次のとおりです。

あなただけのエントリEmscriptenは、その後Emscriptenを使用したい場合、それは非常に簡単です。コンパイラの最適化フラグの主な用途を使用する方法このチュートリアルでは、コマンドラインコンパイラEmscriptenコードからのステップ、およびEmscriptenコードファイルとのすべての種類をお教えします。

切迫感

まず、あなたがEmscriptenをダウンロードしてインストールしているします。お使いのオペレーティングシステムに応じて、ダウンロードとインストールプロセスが少し異なります。

Emscriptenは、主にEMCC（Emscriptenコンパイラフロントエンド）で動作します。これはコマンドラインツールである、それは、そのようなのGCCや打ち鳴らすなど、コンパイラの標準のコマンドラインバージョンとして見ることができ、必要に応じて他のコンパイラツールを呼び出します。システムwimdows、その後、コマンドラインEMCC、Linuxで利用./emccを使用しています。

Emscriptenを確認

あなたがEmscriptenを初めて使用するときは、Emscriptenが正しくインストールされていることを確認するには、次のコマンドを使用してください：

emcc -v

警告が発生した場合は、おそらくいくつかのツールの不足のため、参照してください。このリンクは解決
警告やエラーがない場合、あなたがダウンして見てください。

ファイル名を指定して実行Emscripten

今、あなたには、JavaScriptにコンパイルEmscripten C / C ++コードを使用することができます。

まず、JavaScriptのためのCコンパイラであることをファイルを書き込みます。このように、例のhello_world.cの場合：

    #include <stdio.h>
    
    int main() {
      printf("hello, world!\n");
      return 0;
    }

注：これはEmscriptenが集中最も簡単なCファイルを提供してテストです。

Cファイルをコンパイルするには、あなただけのライン上のファイル名に追いつくためにEMCCの後ろに、テストカタログのコマンドラインを開く必要があります。

emcc tests/hello_world.c

注：testディレクトリはEmscripten・テスト・セットです。

これはテストディレクトリでa.out.jsファイルが生成されます、あなたはa.out.js.を実行しているノードを使用することができます

node a.out.js

こんにちは、世界は、コンソール内のノードをプリントアウトします！A.

如果编译失败，你可以在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を呼び出す場合は、キャンバスの作品でカラフルなキューブを表示することができます。例えば、hello_world_cube.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;
}

使用ファイル

C/C++中，可以用libc库的fopen,fclose等API来访问文件

jsがしかし、EmscriptenはあなたのC / C ++コードにlibcのAPIを使用し続けることができそうということは、ファイルシステムをシミュレートし、ブラウザのサンドボックス環境で実行し、直接ローカルファイルシステムにアクセスすることはできません。

あなたは、彼らがプリロードまたは埋め込み方法によりEmscripten仮想ファイルシステムにパッケージ化する必要があり、アクセスファイルにしたいです。

どのようにファイルをロードするために、テストセット、hello_world_file.cppショー。下に示すようにHello_world_file.txtテストコードとテストファイル：

    #include <stdio.h>
    int main() {
      FILE *file = fopen("tests/hello_world_file.txt", "rb");
      if (!file) {
        printf("cannot open file\n");
        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ロードされる前にいることを確認するために、このメソッドを使用して、データへの唯一の非同期アクセスすることができますので、この方法が便利です++ Emscripten仮想ファイルシステムからデータをフェッチしませんコンパイル後jsが）、あなたは間違って行くことはできません。以下は、コンパイルコマンドです：

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

生成されたHTMLを実行して、あなたはhello_world_file.txtファイルの内容を見ることができます。

最適化されたコード

デフォルトでは、井戸打ち鳴らすなどGCCコンパイラのように、Emscriptenは、コンパイルされたコードの最適化コンパイルされませんが生成されます。さて、あなたは少し最適化されたコードを生成-O1コマンドラインパラメータを使用することができます。

./emcc -O1 tests/hello_world.cpp

プロセスが実際にコンパイルa.out.jsは本当にあなたがコンパイル時（またはコンパイル速度）から、-O1にしたので、実際には、最適化する必要はありませんされているので、あなたは違いを見ることはできません。

しかし、本当に違いは？

あなたが生成さa.out.jsファイルを見ることができます、あなたは違いがある見つけることができます。-O1最適化いくつかのマイナーな最適化と実行時のアサーションの一部を削除するには、例えば、生成されたコード、printf関数では、プットを置き換えられます。

-O1とコンパイラ最適化したい、だけではなく、あなたはまた、最適化の-O2の度合いがはるかに重いです、-O2を使用することができます。あなたは、コンパイルされたコードでそれを試すことができます-O1非常に異なるがあります。

Emscriptenテストセット

Emscriptenのほぼすべての機能をカバーし、あなたのテストケースの多くを提供するEmscripten。開発者にとって、これは非常に良いリソースです。

テストセットの詳細については、あなたが知ってクリックすることができます。

ヒントと次

このチュートリアルでは、Emscriptenに最初のステップを使用することを示しています、C / C ++コードのJSやHTMLをコンパイルするコマンドラインを使用することです。よりEmscriptenを学ぶためには、あなたにいくつかのヒントを与えます：

• このサイトは、そこにコンパイラのために、例えば、多くのシニアポイントのチュートリアルで、あなたのウェブ環境にネイティブコードを統合するようにあなたのコードとをパッケージ化するプロジェクトをビルドします。
• ローカルEmscriptenの使用方法については、テストセットは良いリファレンスです。たとえば、あなたは--pre-jsのオプション仕事にどのように勉強したい、あなたは一般的に、あなたはいくつかの例を検索します言えば、テストセットに--pre-JSを検索します。
• のサイトsettings.js、EMCCとemscripten.hの読み取り部分。
• よくあるご質問サイトをお読みください。

---

Emscriptenテーマシリーズはemscripten中国のサイトの一部です。
最初のトピックは説明し、コードの移植性と限界
第二のテーマは導入Emscriptenのランタイム環境を
第三のテーマ最初の資料に記載された接続C ++とJavaScript
二の物品の第3の主題を説明しembind
第四のテーマプレゼンテーションファイルをファイルシステム
第六トピックは説明したコードをデバッグする方法Emscriptenに