自作DXライブラリ製作品のHTML5化が出来そうで出来ません！

[TETSU]

//////////////////////////////////////////////////////////////////////////////////
DXライブラリ HTML5版を使ってブラウザで動くゲームを作ってみる (VSCode版, Windows)
https://qiita.com/nokotan/items/d2dff1559f981e5e3da5
を読んで
//////////////////////////////////////////////////////////////////////////////////

1.#############################################################################
『DxLibForHTML5-VSCode-master.zip』をダウンロードして、サンプルプログラムは何とか
HTML5化出来ました。証拠↓↓↓（あとで削除予定）
http://www.boreas.dti.ne.jp/tetsuaki/

Pythonは詳しくないんですが「Shared.py」の1378行目の

コード:

out = open(stdout, 'r').read()

を

コード:

out = open(stdout, 'r', encoding="utf-8").read()

に書き換える必要がありました？（ないかもしれません）。
################################################################################

2.##############################################################################
だが自作ゲームの場合、「グラフィックやサウンド」が入ってる「Materialフォルダ」や
「データ」が入ってる「dataフォルダ」や、「数々のソースファイル」を置く場所を間違えているのか、
それとも全く別の原因か、上手く「index.html」を生成できません。それらは今のところ
「DxLibForHTML5-VSCode-masterフォルダ」「直下」に置いています。

念のためmain.cppは

コード:

/*
 * File:   Main
 * Author: nokotan
 *
 * Created on 2020/01/30, 0:57
 *
 * DxLibToHTML5雛形ファイル
 */

#include "DxLib.h"
#include "Main.h" //←これがいけないのかな？色んなヘッダファイルをインクルードしています。

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

static bool shouldExit = false;

void mainLoop()
{
	if (ProcessMessage() == -1)
	{
		shouldExit = true;
	}

	ClearDrawScreen();

	// 入力状態
	gpUpdateKey();
	// fps更新
	FpsUpdate();
	
	// 戦闘
	switch (BattleState)
	{
	case B_PLAYER_TURN: // 自ターン
		BattlePlayerTurn();
		break;
	case B_ENEMY_TURN: // 敵ターン
		EnemyTurn();
		break;
	case B_E_TURN_END:
		EndEnemyTurn();
		break;
	case B_ENCOUNT: // 遭遇
		EncountEnemy();
		break;
	case B_COMMAND: // コマンドセレクト
		SelectCommand();
		break;
	case B_YOU_WIN: // 勝利
		YouWin();
		break;
	case B_YOU_LOSE: // 敗北
		YouLose();
		break;
	case B_STATE_INIT: // 戦闘初期化
		InitBattle(StageNum);
		break;
	case B_TITLE: // タイトル
		Title();
		break;
	case B_CREDIT: // クレジット
		Credit();
		break;
	}

	// ESCタイトルに戻るorゲーム終了キー情報
	if (BattleState != B_TITLE)
	{
		// タイトルに戻る
		DrawGraph(640 - 64, 480 - 64, hKey[30], TRUE);
		// DrawGraph(640 - 160, 480 - 32, hGraStr[STR_B_T_T], TRUE);//タイトルに戻る
		DrawStringToHandle(640 - 160, 480 - 32, "Back To Title", GetColor(128, 128, 255), hFont[1]);
		if (Key[KEY_INPUT_ESCAPE] == 1)
		{
			// SE
			PlaySoundMem(hSE[SE_P_SKILL], DX_PLAYTYPE_BACK, TRUE);

			BattleState = B_TITLE;
		}
	}
	else
	{
		// タイトルでESCでゲーム終了
		DrawGraph(640 - 64, 480 - 72, hKey[30], TRUE);
		// DrawGraph(640 - 64, 480 - 40, hGraStr[STR_END], TRUE);
		char str[] = "END";
		int x = GetDrawFormatStringWidthToHandle(hFont[1], str);
		DrawStringToHandle(640 - 56, 480 - 46, str, GetColor(128, 128, 255), hFont[1]);

		if (Key[KEY_INPUT_ESCAPE] == 1)
		{
			// SE
			PlaySoundMem(hSE[SE_P_SKILL], DX_PLAYTYPE_BACK, TRUE);

			//break;（出来ないらしい）。
		}
	}

	// fps描画
	FpsDraw();

	ScreenFlip(); // ウエイト

	FpsWait();
}

#ifdef _WIN32
int WINAPI WinMain(HINSTANCE, HINSTANCE, LPSTR, int)
{
#else
int main()
{
#endif
	SetGraphMode(640, 480, 32);

	if (DxLib_Init() == -1)
	{
		return -1;
	}

	ChangeFont("07LogoTypeGothic7.ttf");
	SetDrawScreen(DX_SCREEN_BACK);

	// システム初期化////////////////////////////////////////////
	InitSystem();
	///////////////////////////////////////////////////////////

#ifdef EMSCRIPTEN
	emscripten_set_main_loop(mainLoop, 0, 1);
#else
	while (!shouldExit)
	{
		mainLoop();
	}

	DxLib_End();
#endif

	return 0;
}

どなたか詳しい方、アドバイス願えませんか？

[TETSU]

ちなみに作った作品の動画です。

[TETSU]

#エラーメッセージ############################################################
undefined symbol: _Z10InitSystemv (referenced by top-level compiled c/C++ code)
############################################################################
みたいな感じで
#エラーメッセージ############################################################
undefined symbol: _Z（数字）〇〇〇v (referenced by top-level compiled c/C++ code)
#〇〇〇は作った関数名
############################################################################

という「エラーメッセージ」が多数出るのです。調べてみましたが自己解決出来ませんでした。
どなたか助けて頂けないでしょうか。

[TETSU]

最悪、全部main.cppに書き込んでしまえばいいと思い↓↓↓のプログラムを実験で移植してみました。

コード:

//基本的なプログラム
#include "DxLib.h"

// 定数/////////////////////////
static const int STR_LEN = 256;
// 変数/////////////////////////
int hGraph;			 // グラフィックハンドル
char MyStr[STR_LEN]; // 描画したい文字列

 // グラフィックロードと文字列コピー/////////////////////////
void LoadMyGraphStr(int* h_graph, char* str);
// グラフィックと文字列の描画//////////////////////////////
void DrawMyGraphStr(int* h_graph, char* str);

int WINAPI WinMain(HINSTANCE, HINSTANCE, LPSTR, int) {
    ChangeWindowMode(TRUE), DxLib_Init(), SetDrawScreen(DX_SCREEN_BACK); //ウィンドウモード変更と初期化と裏画面設定
    
    char str[] = "実験プログラム";
    // グラフィックロードと文字列コピー/////////////////////////
    LoadMyGraphStr(&hGraph, str);

    // while( 裏画面を表画面に反映, メッセージ処理, 画面クリア )
    while (ScreenFlip() == 0 && ProcessMessage() == 0 && ClearDrawScreen() == 0) {

        // グラフィックと文字列の描画//////////////////////////////
        DrawMyGraphStr(&hGraph, MyStr);

    }

    DxLib_End(); // DXライブラリ終了処理
    return 0;
}

// グラフィックロードと文字列コピー/////////////////////////
void LoadMyGraphStr(int* h_graph, char* str)
{
    // ぴぽや倉庫さんの背景画像をロード
    *h_graph = LoadGraph("pipo-pic002.jpg", FALSE);
    strcpy_sDx(MyStr, STR_LEN, str);
}
// グラフィックと文字列の描画//////////////////////////////
void DrawMyGraphStr(int* h_graph, char* str)
{
    // 画像を描画
    DrawGraph(0, 0, *h_graph, FALSE);
    // 文字列を描画
    DrawString(0, 0, str, GetColor(0, 255, 0));
}

移植プログラムは

コード:

/*
 * File:   Main
 * Author: nokotan
 *
 * Created on 2020/01/30, 0:57
 *
 * DxLibToHTML5雛形ファイル
 */

#include "DxLib.h"
#include <string.h>

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

static bool shouldExit = false;

// 定数/////////////////////////
static const int STR_LEN = 256;
// 変数/////////////////////////
int hGraph;			 // グラフィックハンドル
char MyStr[STR_LEN]; // 描画したい文字列

// グラフィックロード//////////////////////////////////////
void LoadMyGraphStr(int *h_graph, char *str);
// グラフィックと文字列の描画//////////////////////////////
void DrawMyGraphStr(int *h_graph, char *str);

void mainLoop()
{
	if (ProcessMessage() == -1)
	{
		shouldExit = true;
	}

	ClearDrawScreen();

	// グラフィックと文字列の描画//////////////////////////////
	DrawMyGraphStr(&hGraph, MyStr);

	/*{
		int MouseX, MouseY;
		int CircleColor = (GetMouseInput() & MOUSE_INPUT_LEFT) ? GetColor(255, 255, 0) : GetColor(255, 0, 0);

		GetMousePoint(&MouseX, &MouseY);
		DrawCircle(MouseX, MouseY, 64, CircleColor);
	}

	{
		int StringColor = CheckHitKey(KEY_INPUT_SPACE) ? GetColor(0, 255, 0) : GetColor(255, 255, 255);
		DrawString(3, 3, "Hello DxLib on HTML5!", StringColor);
	}*/

	ScreenFlip();
}

#ifdef _WIN32
int WINAPI WinMain(HINSTANCE, HINSTANCE, LPSTR, int)
{
#else
int main()
{
#endif
	SetGraphMode(640, 480, 32);

	if (DxLib_Init() == -1)
	{
		return -1;
	}

	ChangeFont("07LogoTypeGothic7.ttf");
	SetDrawScreen(DX_SCREEN_BACK);

	// グラフィックロードと文字列コピー/////////////////////////
	char str[] = "実験プログラム！！";
	LoadMyGraphStr(&hGraph, str);

#ifdef EMSCRIPTEN
	emscripten_set_main_loop(mainLoop, 0, 1);
#else
	while (!shouldExit)
	{
		mainLoop();
	}

	DxLib_End();
#endif

	return 0;
}

// グラフィックロードと文字列コピー/////////////////////////
void LoadMyGraphStr(int *h_graph, char *str)
{
	// ぴぽや倉庫さんの背景画像をロード
	*h_graph = LoadGraph("pipo-pic002.jpg", FALSE);
	strcpy_sDx(MyStr, STR_LEN, str);
}
// グラフィックと文字列の描画//////////////////////////////
void DrawMyGraphStr(int *h_graph, char *str)
{
	// 画像を描画
	DrawGraph(0, 0, *h_graph, FALSE);
	// 文字列を描画
	DrawString(0, 0, str, GetColor(0, 255, 0));
}

結果は↓↓↓
http://www.boreas.dti.ne.jp/tetsuaki/

文字列は表示されるけど画像は表示されない。グラフィックさえロード出来てしまえば
いいのですが。素材はいったいどこに置けばいいのでしょうか？

[TETSU]

ゲームのソースを全部main.cppに移しました。fopen_sがfopenでなきゃだったり、sprintf_sがsprintfにしなきゃだったり、手こずったけどコンパイルが通りindex.htmlが生成できました！！でも「素材やデータの読み込みが出来ていない」のです。これは本当に解らない。どなたか助けてください。お願いします。

[TETSU]

ここら辺が怪しい↓↓↓
https://emscripten.org/docs/porting/fil ... files.html

という訳で今日は寝ます。

[TETSU]

問題が一応解決しました。まだ課題はあるけど。画像がロード出来ないのは「jpg形式」に対応していないからでした。あとサウンドは「mp3形式」には対応していないようです。関数「CreateFontToHandle」も実質使えないみたい。

素材やデータはフォルダで整理とかせず「assetsフォルダ」に入れておけば良し。ファイルパスはファイル名単体で。

でも、作品をアップしようとするとまた未知のバグが。もうすぐ公開できるかな？

[あたっしゅ]

東上☆海美☆「
2 月いっぱいは、忙しいので、HTML5 版 DxlIb をインストールできませんので、一般論を。

undefined symbol:
というのは『未定義のシンボル』と言う意味です。シンボルとは、変数名や関数名等の事みみ。
定義されていないのに使っている時に出ます。
tsuduri() と定義したのに tuzuri(); と書いて呼び出そうとした時、tuzuri が未定義、とエラーメッセージが出ます。

たくさん undefined symbol が出るときは、ライブラリとのリンクが上手くいっていない場合が多いです。
ライブラリのパスを確認しましょう。

ライブラリとのリンクがうまくいっていないのに、サンプルが上手く動いたのは、
サンプルが単純すぎて、.cpp から .js への変換だけで済んだので、ライブラリとリンクする必要がなかった、
と考えられるみみ。
」

[あたっしゅ]

東上海美「
いろいろとノウハウを書いて頂いてありがとうみみ。

関数「CreateFontToHandle」は、C++ の環境と html/JavaScript の環境で、
フォントの扱い方が異なるので、工夫がいりそうですね。
」

[TETSU]

あたっしゅ様、アドバイスありがとうございます。今日は仕事休みなので朝からプログラミング。

#コメントへのお返事#########################################################################
「undefined symbol:」は消極的な方法ではありますが無理やり「全部main.cpp」に書くで解決しました。

「CreateFontToHandle」はフリーのフォントファイルを落として（ここでは「impact.ttf」

コード:

hFont[0] = CreateFontToHandle("impact.ttf", F_SIZE1, -1, DX_FONTTYPE_EDGE);

とすれば行けました。
############################################################################################

再び実験プログラム

コード:

//main.cpp
/*
 * File:   Main
 * Author: nokotan
 *
 * Created on 2020/01/30, 0:57
 *
 * DxLibToHTML5雛形ファイル
 */

#include "DxLib.h"
#include <stdio.h>
#include <string.h>
#include <unistd.h>

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

static bool shouldExit = false;

// 定数/////////////////////////
static const int STR_LEN = 256;
// 変数/////////////////////////
int  hGraph;          //モンスターグラフィックハンドル
int  hBg;             //背景画像ハンドル
int  hBGM;            //BGMハンドル
char MyStr[STR_LEN];  //文字列

// グラフィックロード//////////////////////////////////////
void LoadMyGraph(int *h_graph);
// グラフィックと文字列の描画//////////////////////////////
void DrawMyGraph(int *h_graph);

void mainLoop()
{
	if (ProcessMessage() == -1)
	{
		shouldExit = true;
	}

	ClearDrawScreen();

	// グラフィックと文字列の描画//////////////////////////////
	DrawMyGraph(&hGraph);

	ScreenFlip();
}

#ifdef _WIN32
int WINAPI WinMain(HINSTANCE, HINSTANCE, LPSTR, int)
{
#else
int main()
{
#endif
	SetGraphMode(640, 480, 32);

	if (DxLib_Init() == -1)
	{
		return -1;
	}

	SetDrawScreen(DX_SCREEN_BACK);

	// グラフィックロードと文字列コピー/////////////////////////
	LoadMyGraph(&hGraph);

#ifdef EMSCRIPTEN
	emscripten_set_main_loop(mainLoop, 0, 1);
#else
	while (!shouldExit)
	{
		mainLoop();
	}

	DxLib_End();
#endif

	return 0;
}

// グラフィックロードと文字列コピー/////////////////////////
void LoadMyGraph(int *h_graph)
{
	//data.txtモンスター画像のファイル名を書いている
	char file_name[] = "data.txt";
	FILE *fp = fopen(file_name, "r");

	//モンスターグラフィックロード
	fgets(MyStr, STR_LEN, fp);
	sprintfDx(MyStr, "%s", MyStr + 11);
	SetTransColor(0, 0, 255) ;
	*h_graph = LoadGraph(MyStr, TRUE);
	
	fclose(fp);

	//  ついでにぴぽや倉庫さんの背景画像をロード
	hBg = LoadGraph("pipo-pic002.png", FALSE);

	//ついでにBGMロードと再生
	hBGM = LoadSoundMem("m-art_Thread.ogg");
	PlaySoundMem(hBGM, DX_PLAYTYPE_LOOP) ;
}
// グラフィックと文字列の描画//////////////////////////////
void DrawMyGraph(int *h_graph)
{
	// 画像を描画
	DrawGraph(0, 0, hBg, FALSE);
	DrawGraph(0, 0, *h_graph, TRUE);
	//モンスター画像ファイル名を描画
	DrawString(0, 0, MyStr, GetColor(0, 255, 0));
}

これで画像も2枚とも表示され、文字列も表示されBGMも鳴ります。

ですがブラウザのデベロッパーツールで見てみるとエラーメッセージが多数。
特に深刻だと思うのが
//エラーメッセージ////////////////////////////////////////////////////////////////////////////
wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
/////////////////////////////////////////////////////////////////////////////////////////////

//エラーメッセージGoogle翻訳//////////////////////////////////////////////////////////////////
wasm ストリーミングのコンパイルに失敗しました: TypeError: 'WebAssembly' で 'compile' を実行できませんでした: 応答 MIME タイプが正しくありません。 'application/wasm' が必要です。
/////////////////////////////////////////////////////////////////////////////////////////////

「MIME タイプが正しくありません。 'application/wasm' が必要です」

全く意味が解らなかったので調べると

『application/wasm MIMEtype問題を解決しつつ開発サーバを建てる方法』
https://zenn.dev/dozo/articles/2447f5c134fc6f

読んだけど、内容が理解できない。「サーバープログラミング」が必要ってことでしょうか？解りませんが。
サーバーとかは全くの専門外です。でも諦めないで何とか解決したいです。

[TETSU]

↑↑↑
全く見当違いなことを書いていたかもしれません。

↓↓↓の記事が理解出来たらいけそうな様です。頑張ります。
DxPortLibを使ってHTML5で動くアプリがつくれるようになるまでの奮闘記
https://qiita.com/nokotan/items/89d5b4eeb7775404e0ee

[TETSU]

DXライブラリ HTML5版を使ってブラウザで動くゲームを作ってみる (Visual Studio版, Windows)
https://qiita.com/nokotan/items/5fa6f2d ... 3%E3%82%B0

これもなかなか思うように行かない。

[TETSU]

自己解決できそうにないので明日、

DXライブラリ HTML5版を使ってブラウザで動くゲームを作ってみる (VSCode版, Windows)
https://qiita.com/nokotan/items/d2dff1559f981e5e3da5

の作者さまに直で訊いてみようと思います。プログラムの質問は昔からここでしかした事が
なかったので抵抗がありますが。

自己解決できないので本日ダウンロード版を夢現さんのところで公開させて頂きました。
良かったら遊んでください。感想お待ちしています。↓↓↓
https://freegame-mugen.jp/puzzle/game_10909.html

[naohiro]

コーディングに困ったらChatGPTに投げるのも手です。

https://chat.openai.com/chat

[TETSU]

naohiroさま、情報ありがとうございます。

やはり一個人に質問するのは気が引けますよね。忙しいかもしれませんし。
ChatGPT、試してみます。

[TETSU]

ChatGPTに訊いても決定的な回答は得られませんでした（ただの勉強不足ともいう）。夢で「JavaScript勉強しろ」って言われました。「JavaScriptでブラウザ化」しようと思います。長々と失礼しました。