WebAssemblyStudioを使ってブラウザ上で動くDxLibアプリを開発する

WebAssemblyStudioへのリンク

• https://nokotan.github.io/WebAssemblyStudio/index
• 本家WebAssemblyStudioとの違いは [本家WebAssemblyStudio と何が違うか](#本家WebAssemblyStudio と何が違うか) を参照してください

WebAssemblyStudio の概要

WebAssemblyStudio を使うことでできること

• ブラウザ上で WebAssembly を使ったプログラム開発ができる統合開発環境
• すなわち, ブラウザ上で C言語やC++ を記述し, そのC言語やC++ で書かれたプログラムをコンパイルし, 実行することができる

WebAssemblyStudio ではできないこと

• スマホ上で C/C++ ソースコードを編集して実行する
• インテリセンスを使う (C/C++ 用の言語サーバを JavaScript で実装する必要がある)
• デバッグ機能を使う (変数ウォッチ、ブレークポイントなど)

本家WebAssemblyStudio と何が違うか

• C言語やC++のコンパイルに emscripten を使用していること
• emscripten は OpenGL や OpenAL, SDL2 などの幅広いライブラリに対応している
• すなわち, OpenGL や OpenAL, SDL2 を使ったグラフィカルなアプリケーションさえ, Web上でコンパイルし, 実行することができる

DxLibアプリケーションを動かしてみる [入門編]

プロジェクトの作成

WebAssembly Studio 起動直後は、プロジェクトテンプレートの選択画面が表示されます。
このプロジェクトテンプレートのうち、"Hello DxLib in C++" を選んで、左下の Create をクリックしてください。

プロジェクトのビルドと実行

上部にある "Build & Run" をクリックすると、ソースファイルのコンパイルを行ったのち、右下のプレビューウィンドウにおいてアプリが実行されます。

プロジェクトを保存し共有する [入門編]

プロジェクトをクラウド上に保存

上部にある "Fork" をクリックすると、プロジェクトのクラウド上への保存が開始されます。
下部の Output ウィンドウに Saved Project OK と表示されると保存完了です。

プロジェクトを共有する

プロジェクトのクラウド上への保存を行った後、上部にある "Share" をクリックすると、
クラウド上に保存されたプロジェクトへのリンクと埋め込み用のリンクが表示されます。

フォントを描画する [発展編]

Module.preRun コールバックにおいて、仮想ファイルシステムにフォントファイルを保存し、実行時にその仮想ファイルシステムからフォントファイルを読み込まれるようにする必要があります。

https://nokotan.github.io/WebAssemblyStudio/index?f=jot2c0a3cmi を参考にしてください

// main.html

var Module = {
  canvas: (function() {
    var canvas = document.querySelector('canvas');
    canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
    return canvas;
  })(),
  dynamicLibraries: ["DxLib.wasm"],
  preRun: function() {
    const fontUrl = getFileURL("src/07LogoTypeGothic7.ttf");
    console.log(fontUrl);
    FS.mkdir("/assets");
    FS.createPreloadedFile("/assets", "07LogoTypeGothic7.ttf", fontUrl, true, false);
  }
}