hsp3dish.js 開発の注意とヒント

更新：2022年8月12日　　【目次トップ】へもどる

気をつけること

・『 hsp3dish.js 』のプログラムは、 iPhone, iPad の Safariブラウザからも実行できます。Macのブラウザ、ふるいブラウザ、セキュリティ設定によっては動作しない場合があります

・パソコンからだけでなく、スマホやタブレットのブラウザからそのページを表示してためしに起動してみると、問題が発見できることがあります

・ HSP3Dish Helper による変換時に生成される .html を編集することで起動時設定ができます　公式資料

HSPで、Windows専用アプリと、
HSP3Dish（スマホや多機種向け）
さらに hsp3dish.js（Webアプリ）として開発する場合で異なる点

HSP3Dish用プログラミングでは

・描画先は 「ID 0 」の画面に対してだけ指定できる（つまり1つのウインドウに対してだけ。他のバッファには読み込みだけ可能）

・画面出力のあるプログラムでは、表示処理をメインループでまわしつづける必要がある
　↑
（★追記：公式サンプルスクリプトはそういう構造のものが多いが、かならずしもそうではなさそう！）

・スクリーンサイズが途中で変更できない

・配置オブジェクトは button だけ（※今後追加予定 input も一部使える？）

・文字フォントが動作端末に依存する（実行する端末で文字の見た目がすこし変わる）

・2022年の現状では、外部にセーブ保存（テキストなど）するのに機種ごとに特別な手間を要する
（ 現状では hsp3dish.js 用では「セーブなし」の仕様をかんがえるのが早いかも。）
　↑ ※ 調査中

・2022年の現状では、hsp3dish.js 上で「キーボードによる入力」を実現するのに特別な処理が必要（JavaScript命令の使用など）
　参考：公式掲示板『hsp3dish.js 日本語入力について』

・Windows版実行時とブラウザ版実行時では strlen関数で取得できる「文字列の長さ」がちがう

そのほか
　・公式 HSP3Dish プログラミングマニュアル（2022年ver3.7）
　・公式 hsp3dish.js プログラミングマニュアル（2022年ver3.7）

さらに
・HSP公式入門書籍には「HSP3Dish動作の違い」という解説が載っています。
・HSPユーザー『しまくろねこ』さんのサイトでもヒントが載っています。
・公式HSP.tv掲示板 でも話題になることがあります。

---

HSP3Dish.jsアプリ開発時のヒント

自作スクリプトに好きな画像や音楽ファイルを使用したい場合

パソコンのHSP開発環境で作業中には、
いま自分で作成中のスクリプト test.hsp のある場所とおなじ階層に画像などの素材ファイルを置いておく。

そして .html （Webアプリ）へ変換するときに、
test.hsp のある場所とおなじ階層に
[data]という名称のフォルダを作って
（自分で手作業で新規作成して、フォルダに data という名前をつける）
画像や音のファイルをそのなかにいれておきます。

・注意：さらにそのなかにサブフォルダを作らないように！
・注意：そのスクリプトで使用する素材ファイルだけを入れる！余計なファイルは入れない！

その状態で HSP3Dish Helper (hsp3dh.exe)を起動して「変換するソーススクリプト」に test.hsp を指定すると、自動的におなじ階層にある [data]フォルダのなかみすべてを結合して test.data というパックされた一つのファイルにしてくれます。
　このとき同時に生成された３つのファイル
　hsp3dish.js
　test.html
　test.data
　をサーバへアップロードします

・注意：サーバ側に [data]フォルダを作る必要はない！
・注意：必ず同時に生成された３つのファイルをアップロードする。以前生成した古いファイルを混ぜてはダメ！
（hsp3dish.js は異なるスクリプトから共用してもよい。バージョンが変わったらアップロードし直す！）

・補足：
　外部ファイルを使わないスクリプトならアップロードするファイルは　hsp3dish.js と test.html　の２つだけでも動く。
追記！！：↑
まちがいだったようです。現状ver3.7b2では、HSP3Dish Helper で変換すると、外部ファイルを使っていなくても（dataフォルダが無くても） .dataファイルが生成されるようです。
そしてその .dataファイルも必ず一緒にアップロードする必要があるようです。



　HGIMG4使用時は
　　　hsp3dish-gp.js
　　　test.html
　　　test.data
　をサーバへアップロードします。
（hsp3dish-gp.js は異なるスクリプトから共用してもよい。バージョンが変わったらアップロードし直す！）
　この時注意すべきは、HGIMG4スクリプト開発時は前述の[data]フォルダの代わりに、「res」「res/shaders」フォルダのなかにモデルやテクスチャ素材ファイルを配置して開発し、完成してから HSP3Dish Helper で「HGIMG4を使用する」のチェックボックスをオンにして変換実行し、test.data を生成するという点です。
　(※ 開発セット同梱の sample/hgimg4 内を見れば配置の構成例がわかります)
・注意：サーバ側に [res]フォルダを作る必要はない！


　・公式 hsp3dish.js プログラミングマニュアル（2022年ver3.7）
　　https://www.onionsoft.net/hsp/v37/doclib/hsp3dish_js.htm

　↑うまくいかない時は、このページの説明をよく読むと解決の手がかりが見つかることも

ブラウザで起動した時の表示サイズを設定したい

HSP3Dish Helper (hsp3dh.exe)で変換して生成された
　test.html
をテキストエディタアプリなどで開き、変更したい部分の数値を編集してからアップロードします

    Module.preRun.push(function() {
        ENV.HSP_WX = "480";//スクリプトの動作解像度
        ENV.HSP_WY = "800";
        ENV.HSP_SX = "480";//表示解像度
        ENV.HSP_SY = "800";
        ENV.HSP_AUTOSCALE = "0";//スケーリングモード
        ENV.HSP_FPS = "0";//フレームレート
        ENV.HSP_LIMIT_STEP = "15000";//ブラウザに処理を返すまでの実行ステップ数
    });

→ 公式資料「表示サイズのスケーリング」

・理想をいえば、起動した端末の画面サイズ（ディスプレイサイズ）を自動取得して、端末ごとに自動で最大化（最適化）されると良さそうですが、そういうことができるかまだ調査中です

参考： iOS画面サイズ一覧　　Android画面サイズ一覧（Qiita）

プログラミング初心者へのヒント

　あせる必要はまったくありません。自分が納得できるゆっくりしたペースで一つづつ納得しながら理解しながら、たのしくすすめるのが一番よいと思います。はじめは「なるべく小さく」「わりきって」自分のつくりたいモノ、自分が必要な部分をプログラミングしていくと頭の中がパンクしません。

HSPプログラミングには、いろんなところに勉強するためのサンプルスクリプトがあります

・【電子書籍】『HSP3でつくる！ はじめてのプログラミング HSP3.6+3Dish入門』。
　最新は3.6向けの内容ですが、本屋さんで紙の本の「3.5向け」書籍を買っても十分役に立ちます（CD-ROMにサンプルスクリプトが入っています）

・自分のパソコンにHSP開発セットをインストールしている場合は、[hsp37フォルダ]のなかの[sample]のなかの[hsp3dish]フォルダのなかに、HSP3Dish用のサンプルスクリプトがはいっています

・パソコンで「HSPスクリプトエディタ」を使用中に、画面内の「HSP命令」「HSP関数」の部分にカーソルをあてて、キーボードの [F1] を押すと「HSP Docs Library （ヘルプドキュメント）」が起動します。そのなかでサンプルスクリプトを閲覧することもできます。
（スクリプトエディタの画面上部メニュー「ヘルプ-HSPキーワード検索」からも起動できます）

・HSPプログラムコンテスト ページには参考になる HSP3Dish の作品が公開されています。なかには、みんなが参考にできるようにソーススクリプトをダウンロードファイルに付属させてくれている作者の方や、自分のサイトでスクリプトを公開してくれている作者もいます

・インターネットで検索すると、たくさんの先輩HSPユーザーの方々が自分のサイトでサンプルスクリプトを公開してくれています。
　★注意：自分の作っているのが HSP3Dish である場合は HSP3Dish 用のスクリプトを参考にしましょう。（Windows用のサンプルスクリプトも参考になりますが、Dish用として動かすには修正が必要になります）

---

　　【目次トップ】へもどる