HSP3Dish.jsでJavaScript

2025/01/23

目次

対象環境 execでJavaScriptを実行する HSP3Dish.jsにおけるスクリプトの最小構成 execの使い方 Windowsとの互換性 sysinfo getreq 次の予定

対象環境

　このページの内容は、HSP3.7β9でHSP3Dish.jsを使用する場合を対象とした内容です。 また、ここで紹介している使い方は、公式に対応がアナウンスされている使用法ではありません。 将来の仕様変更で使えなくなってしまう可能性がある点にご注意ください。

execでJavaScriptを実行する

　HSP3Dish.jsでexec命令を使うと、JavaScriptを実行できます。 Windowsではコマンドプロンプトが動くのと同じように、ウェブブラウザではJavaScriptが動くわけですね。納得できる動作です。

例：ダイアログの表示 


	; HSP3Dish.jsで実行するとウェブブラウザのダイアログが開きます。
	exec "alert('Hello')"

　JavaScriptはコマンドプロンプトよりも使いやすく、いろんな作業を簡単に実現できます。 ブラウザが持つほとんどの機能を使えるため、とても強力です。 このexec命令を使えば、HSP3Dish.jsが持っていない機能もJavaScriptを経由して実現することができます。

　ただし、HSP3のマニュアルにはこの機能について詳しい記載がないので、忘れないようにここに書いておこうと思います。

HSP3Dish.jsにおけるスクリプトの最小構成

　exec命令の使い方を説明する前に、HSP3Dish.jsでスクリプトを動かすための基本的な構成について書いておきます。

　HSP3Dish.jsはWindows版と違う動作をする部分があります。いくつかありますが、ここでは次の点を挙げておきます。

  • redraw 0 の後にboxfで背景を白く塗りつぶす必要がない。
  • HTML5版では、必ずメインループが必要。
  • await命令の待機時間設定が無視され、ブラウザ側で設定されたFPS値が使われる

　以上を踏まえてHSP3Dish.jsの最小構成を書くとこのようになります。（蛇足でFPS表示も加えてあります。） 


	#include "hsp3dish.as"
	#include "d3m.hsp"
	*main
		redraw 1
		await 0
		redraw 0
		pos 0,0
		mes "" + d3getfps() + " fps"
    ; ここにメインの処理を書く
		goto *main

　実際に開発を行う際はデバッグ作業はWindowsで行うので、await 16やboxfといったいつも通りの処理は入れておいたほうがいいと思います。 ここで大事なのはHSP3Dish.jsではどのように動作しているか理解することです。

　蛇足ついでにもう一つ。スマホでHSP3Dishを動かすと、mesがとてつもなく重いという問題があります。 文字数が増えると動作がかなり遅くなるので注意が必要です。 この例では問題ありませんが、mes命令の安易な利用はなるべく避けた方が良いでしょう。

execの使い方

　ここからはHSP3Dish.jsでのexec命令の使い方について掘り下げてみようと思います。

　exec命令は、await命令の代わりに使用する形になります。以下のポイントを押さえる必要があります。 これらの制限を守らないと、想定外の動作が発生することがあります。

  1. await命令を削除し、awaitがあった位置に１個だけexec命令を配置。
  2. 1ループで実行できるexec命令は1回まで。

　exec命令にはいくつかの特性があり、これが制限の理由になっています。

  • ループ内でexecを実行すると、await命令と同様にFPS値に合わせて一定時間待機が発生します。
    ループ内にawaitとexecの両方がある場合、FPS値が半分になります（1ループで2回待機が発生している）。
  • await同様に画面の消去をする機能が与えられている。
    execがredraw 0の後にあると、画面が白く点滅します。

　以上を踏まえてexecを使用した最小構成（にfps表示を加えたもの）は以下のようになります。 


	#include "hsp3dish.as"
	#include "d3m.hsp"
	exec_text = ""
	*main
		redraw 1
		exec exec_text  ; HSP3Dish.js用
		; await 30  ; Windows用
		redraw 0
		pos 0,0
		mes "" + d3getfps() + " fps"
		goto *main
  • 実行したいJavaScriptがない場合、引数exec_textに空文字を渡すことで何も実行されません。
  • 実行したい内容がある場合だけ、exec_textにJavaScriptを渡します。

Windowsとの互換性

　前の章のスクリプトはWindowsでは動作しません。 Windowsでデバッグ作業する際は、execをコメントアウトして代わりにawait命令を有効にする必要があります。

例: Windowsでのデバッグ 


	#include "hsp3dish.as"
	#include "d3m.hsp"
	exec_text = ""
	*main
		redraw 1
		; exec exec_text  ; HSP3Dish.js用（コメントアウト）
		await 30  ; Windows用
		redraw 0
		pos 0,0
		mes "" + d3getfps() + " fps"
		goto *main

　このようにすると、Windowsでもデバッグ作業を行うことができます。 execでJavaScriptを呼びだして得られる機能は使えませんけどね。

sysinfo

　Windowsで動かすかブラウザで動かすか、場合によって毎回スクリプトを書き換えるのは面倒です。 いつかきっと修正を忘れて「動かない！」と頭を抱える時がやってきます。 というわけで、解決方法を考えてみました。 sysinfo命令（システム情報の取得）を使えば、実行環境の違い（HSP3Dish.jsかWindowsか）を取得できるのではないかと思ったので試してみました。 以下は実行結果です。

0 : 文字列 OS名とバージョン番号
HSP3Dish.js：Emscripten 1.39
Windows10：WindowsNT ver10.0

2 : 文字列 ネットワーク上のコンピュータ名
HSP3Dish.js：（空文字）
Windows10：（デバイス名）

3 : 数値 HSPが使用する言語(0=英語/1=日本語)
HSP3Dish.js：0
Windows10：1

1 : 文字列 ログイン中のユーザー名
16 : 数値 使用しているCPUの種類(コード)
17 : 数値 使用しているCPUの数
33 : 数値 物理メモリサイズの使用量(単位%)
34 : 数値 全体の物理メモリサイズ
35 : 数値 空き物理メモリサイズ
36 : 数値 スワップファイルのトータルサイズ
37 : 数値 スワップファイルの空きサイズ
38 : 数値 仮想メモリを含めた全メモリサイズ
39 : 数値 仮想メモリを含めた空きメモリサイズ
HSP3Dish.js：（9桁の数字　…意味不明？？）
Windows10：（各取得値）

　どうやらsysinfo(0)を使うと実行環境がわかるようです。例えば、以下のような感じでしょうか。 Windows版とHTML5版以外は何が返ってくるかわからないので、取得値をそのまま返します。 


s = sysinfo(0)
type = s
v = instr( s, 0, "Windows")
if v>=0 : type = "Windows"
v = instr( s, 0, "Emscripten")
if v>=0 : type = "Emscripten"

getreq

2025/02/05 追記

　プログラムが実行される環境（プラットフォーム）を知る方法は他にもあります。 先日、zakkiさんに教えていただいたgetreq命令を使った方法です。 sysinfo命令よりも使いやすいので大変におすすめです。

　getreq命令で、設定タイプをSYSREQ_PLATFORMにするとプラットフォームを確認できます。 PLATFORM_WEBGL が返ってきたらhsp3dish.jsです。 


getreq idPlatform, SYSREQ_PLATFORM
	…
*main
	redraw 1
	if idPlatform = PLATFORM_WEBGL {
		; hsp3dish.js(WebGL/JavaScript)版
		exec exec_text
	} else {
		; Windows版など他環境
		await 16
	}
	redraw 0 : color 10,10,10 : boxf : color 255, 255, 255 : pos 0,0
	…

次の予定

　以上、HSP3Dish.jsでexecを使ってJavaScriptを実行する方法でした。 これでHSP3からJavaScriptを実行することができるようになりました。 次は、JavaScript側が持っている値をHSP3に返す方法が必要ですね。

関連記事

  1. HSP3Dish.jsでPWA　言い訳から始める PWAとは HSP3Dish.jsでPWA 作成例 PWAに必要なもの HTMLフ...
  2. HSP3Dish.jsでセーブ　はじめに セーブ機能がほしい ウェブアプリでのデータ保存方法 保存方法の比較 IndexedDB I...
  3. font命令の速度　HSPのFONT命令はその昔「重いのでメインループ内で使用しないほうがいい」と言われていました。 （...