HSPTV!掲示板

hsp3dish.js はとても手軽でインストールの必要もなくすばらしいと思ったので、
初心者向けにソフト開発のきっかけや手助けになるようなサンプルソースコードを書いて、公開しています。

とりあえず一つ

◆ソフトウェア・キーボード
https://junji.jp/net/hsp3/

※ HSPTV!掲示板 のこのスレッドに hsp3dish.js 関連の現在も活動中のサイトや情報があれば自由に書き込んだり、
宣伝していただいて大丈夫です。

サンプルスクリプトをもう一つ追加しておきました

◆ 『魔王 0』（フィールド型RPGの開発入門者用一番簡単ひながた）
https://junji.jp/net/hsp3/

サンプルスクリプトをもう一つ追加しておきました

◆ 『 てがき 』（指でタッチして文字や絵が描ける）
https://junji.jp/net/hsp3/

＜参考用レポート＞
HGIMG4を使ったブラウザ用hsp3dish.jsのサンプルを作成しようとためしてみましたが、
HSP開発セット同梱の[sample]-[hgimg4]-[test1.hsp]を
そのままアップロードしようとしてもエラーがでてうまくいかなかったので、
また気長に待ってから、試してみようと思います。

・HSP3Dish Helper 実行時には「HGIMG4使用する」をチェックしている

・[data][res]フォルダはサーバにアップロードしてある

・ブラウザでの実行まではいくがエラーメッセージが表示される
→ colored.vert ファイルはサーバ上に存在している

======================================
INIT 480x800 HSPDish ver3.7beta1
GL version: -1.-1
#readAll --
#Failed to load file: res/shaders/colored.vert
#

#createFromFile --
#Failed to read vertex shader from file 'res/shaders/colored.vert'.
#

#initialize --
#Failed to create effect for pass. vertexShader = res/shaders/colored.vert, fragmentShader = res/shaders/colored.frag, defines = MODULATE_ALPHA;DIRECTIONAL_LIGHT_COUNT 1
#

#create --
#Failed to create pass for material: vertexShader = res/shaders/colored.vert, fragmentShader = res/shaders/colored.frag, defines = MODULATE_ALPHA;DIRECTIONAL_LIGHT_COUNT 1
#

======================================

サーバー上の個別ファイルは(自分でJavaScriptでの初期化コードを書かない限り)HSPスクリプト側からは読めません。
hsp3dhが作った test1.data に colored.vert が結合されてて test1.html に

new DataRequest(2062414, 2065574, 0, 0).open('GET', 'res/shaders/colored.vert');
と
DataRequest.prototype.requests["res/shaders/colored.vert"].onload();
みたいな行があるか確認してみてください。

> zakki さん

とても具体的な部分を教えてくれてありがとうございます。
自分のところの test1.html をみたら

new DataRequest(0, 408, 0, 0).open('GET', 'colored.vert');

となっていて、例示してくれたような
res/shaders
フォルダ（ディレクトリ）指定部分が抜けているのが確認できました。

（※いろんな動作テストをしていたので、当該スクリプトで使用しない余計なファイルも含まれていました。
それもよくなさそうですね…）

いま時間がないのですが、あとで時間ができたとき修正して再アップロードして
ためしてみようと思います。（いけそうな気がします）

>　zakki　さん


おお！　さきほどは失礼しました。
hsp3dish.js 開発者ご本人である zakkiさん から直接お返事いただけてありがたくうれしく、恐縮いたします。

私はけっこう昔からWindowsで HSPを使用していたのですが、しばらくHSPでの開発はご無沙汰になっていました。
ですが、ふと試してみた hsp3dish.js が非常によい感じに思えて、特にアプリストアなどの配布の手間を飛び越えて、インストール不要でスマホユーザー、タブレットユーザーが気軽に試せるのが便利だなと思っています。
そして hsp3dish.js の出来の良さに触発されて、またHSPでなにか作りたくなり、若い人たちにもすこしは役立つかもと、サンプルページをつくってみた次第です。

https://junji.jp/net/hsp3/


＜ hsp3dish.js のファイル構成について＞

zakki さんからのアドバイスをもとに自分の勘違いに気付けました。ありがとうございました。

私のサイトのほうの解説も修正しておきました。（私とおなじような勘違いをする人のお役に立てば。）

動いたようでよかったです。
dish.jsやtry-hspみたいな何かに使えそうっていう仕組みを作るのは楽しいんですが、解説書くの苦手なので分かりやすい解説サイトありがたいです。

HSP3Dish.js 向けのサンプルスクリプトと概要をまとめたページ
【HSP3 じゅんちゃんおじさん プログラミング】

https://junji.jp/net/hsp3/

を見やすいようにリニューアルしました。（2022/6/19）

今年の夏8月から開催される HSPプログラムコンテスト の時季までは
サンプル追加したりアップデートしたいと思ってます。

os識別やフォントを直前に指定すると反映される仕様を知れて助かりました

◆【 いちばん簡単なアドベンチャーゲームのもと 】を追加しました。
「様々な表現と方式」のページは、アドベンチャーゲームを作りたいときにヒントになるかもしれません。
（特に HSP3Dish.js で WebDishサービス – SoupSeed を利用したい場合）

https://junji.jp/net/hsp3/



> 肥後もっこす さん

お役に立てたようで 私もうれしいです。

# ここに書くのがいいのか分かりませんが

> ・文字フォントが動作端末に依存する（実行する端末で文字の見た目がすこし変わる）
フォントのダウンロード時間を気にしなければhsp3dish.js起動前にWebFont先読みすれば対応はできそうです。
https://ics.media/entry/8385/

> ◆セーブ保存するにはどうするのがよいのか？ → 調査中
> ・公式掲示板での情報（2017年11月のふるい情報）
>　「hsp3dish.jsでのファイル保存について」
これは最新版でも使えるはずです

> ・クライアント（端末）側に保存する場合は？
保存だけならデータURLを作ってexecでブラウザのダウンロードダイアログを開けるはずです。
ただ原理的に読み込みが無理なのでゲームのセーブ用には向かないと思います。
https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs

クッキーへの保存・読み込みならexecでのJavaScript実行とhsp側メモリ書き換えでasだけで実装はできそうですが無理矢理感はあります。

> ・サーバ側に保存する場合は？
>　（ hsptvプラグインのランキング機能を転用できるか？）

hsp3dish.jsを置くのと同じサーバーにGETとPOSTを対応したサービスをhspなりcgiなりJavaなりで実装すればhttploadで実現できると思います。

> hsp3dish.js アプリをブラウザ起動したとき画面右上に表示される設定スイッチ

この辺はEmscriptenデフォルトを踏襲してますが、hspの用途的にヘッダー部分もコンソール部分も何もないメイン画面だけのテンプレートhtmlあると自分で編集する必要なくてよさそうですね。

> zakki さん

おお！ 教えていただきまして、ありがとうございます。やはり技術知識の深い開発者のかた自ら教えていただけると、

読んでくれるHSPユーザーの方も情報に安心感がもてると思うので、たいへん心強いです。

教えて頂いた情報はさっそく、ページに記載させて頂きました。
https://junji.jp/net/hsp3/hsp3-memo/

ありがとうございました。

HSP3Dish標準命令だけでシューティングゲームが作りたいときに参考になるような
サンプルスクリプト
『シンプルシューティング』
を追加しておきました。

https://junji.jp/net/hsp3/hsp3dish-js-sample_stg/


豪華なモノを短時間で開発したいときは、新しく登場したフレームワーク
『ドットフレームワーク(β)』
https://hsp.tv/make/tamane_dfw.html
も検討してみるとよいかもしれません。

サンプルスクリプトをもう一つ追加しておきました

◆ いちばん簡単なマップ表示のもと
『セルでマップ表示』
https://junji.jp/net/hsp3/

サンプルスクリプトをもう一つ追加しておきました

◆ ヒエログリフ（古代エジプト文字）を表示する
『ヒエログリフ表示』
https://junji.jp/net/hsp3/

このサンプルスクリプトはこれまでとちがって
ブラウザにこのフォントを表示する機能がないと正しく見られません。

最近のiPhone、iPad の Safari だと正しく見られます。
Windows7以前のブラウザでは正しく見られません。

実験として、「WebDishサービス」で「WebDish素材」以外の外部ファイルが使えないかテストしてみました。
が、うまくできませんでした。

◆ HSP3Dish.jsでネット経由で画像を取得して利用する（失敗例）
https://junji.jp/net/hsp3/

Webアプリとしては動きませんが、PC上のDishプログラムとしては動作します

もしWebアプリから外部ファイルの読み書きに「簡単に」成功するやり方を知ってる方がいましたら、
教えてもらえたらうれしいです。

hsp3dish.js による画面サイズの実験をしてみました。
iPad 用などタブレット向けWebアプリ開発の参考になるかもしれません。

◆ 画面サイズの実験
https://junji.jp/net/hsp3/

hsp3dish.js の helper で変換してできあがる htmlファイルについての記事を追加しておきました。

◆ htmlのなかみ
https://junji.jp/net/hsp3/

hsp3dish.js によるマルチタッチ・ジェスチャー
のサンプルスクリプトを追加しておきました。

◆ 「ピンチ」操作
https://junji.jp/net/hsp3/

試すには、スマホかタブレットのブラウザから表示してください。

hsp3dish.js によるマルチタッチ・ジェスチャー
のサンプルスクリプトを追加しておきました。

◆ 「ローテート（回転）」操作
https://junji.jp/net/hsp3/

試すには、スマホかタブレットのタッチ対応端末のブラウザから表示してください