WebAssemblyStudioを使ってブラウザ上で動くDxLibアプリを開発する
WebAssemblyStudioへのリンク
- https://nokotan.github.io/WebAssemblyStudio/index
- 本家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アプリケーションを動かしてみる [入門編]
プロジェクトの作成
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);
}
}
Author And Source
この問題について(WebAssemblyStudioを使ってブラウザ上で動くDxLibアプリを開発する), 我々は、より多くの情報をここで見つけました https://qiita.com/nokotan/items/70cad35fdebb844f55a4著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .