2016年 1月10日辺り
よし!ではまず始めに、webGL版(ブラウザ版)でブラウザで動くものを作ってみようか。
と言う事で、webGLからやってみる。
webGL(Graphics Library)と言うのは、ブラウザ(IE11とかChromeとかFirefox)で動く、描画サポートの仕様の事らしい。
ブラウザが「webGL対応」だと動く、という事のようだ。
「WebGLのブラウザサポート」 YOSBITSさんのページ
「ハードウェアでアクセラレート(速度増)された三次元グラフィックスを表示可能にする」という事だそうだ。
GPU(グラフィックボード、ハードの)が webGLをサポート(対応)してないと、その PCでは使えないという事かな?。
Firefoxはソフトで代替する機能があるらしい。
JavaScriptで動かすみたい。
よくは分からんが、pcにおける DirectXの webブラウザ版みたいなものだろうか?
ブラウザ上で動かせるものが作れるだけでも、かなりありがたいとは言える。
ではまずマニュアルを見てみよう。
ふむふむ、データフォルダ、メモリサイズ、表示サイズのスケーリング、くらいが重要なのかな。
これらについては後で説明する。
なんかサンプルのブロック崩しがあるみたいだし、まずはこれをブラウザに表示してみようか。
まず block3.hspはどこにあるか
C:\hsp34\sample\hsp3dish\block3.hsp
ここだ
HSPエディタで開いてみる
特に画像ファイルとか使ってないので、このままでよさそうだ。
とりあえず F5キー(RUN(笑、古い言い方)、コンパイル+実行)を押して動かしてみよう。
ツールバーの HSP→コンパイル+実行でもいい。
ウインドウズ上(ウインドウ)で動く。
制作中はこれでテスト、デバッグする。
次に HSPスクリプトを実際に変換する、HSP Dish helperを起動する。
スタートメニューか
フォルダから直接開く
たしか、これ「HSP3dh.exe」
適当にショートカットを作って、デスクトップに張っておけばいい。
こんな感じの変換機が立ち上がる
ソース変換/iosでアイフォン、androidでアンドロイド、hsp3dish.jsでwebGLに変換してくれるので、hsp3dish.jsを選択する。
参照ボタンを押して、先ほどのblock3.hspを開く
変換ボタンを押してやると
こんな感じで結果が表示され、無事変換されると上記のように表示され、エラーがでる場合はここにでる。
参考までに、webGLの場合オプションは真っ白でもかまわない。
制作されるのは、block3.html、hspdish.js、block3.data、block3.axだが、block3.axはいらない。
場所は参照した.hspスクリプトのある場所で、ちらかって分かりにくくなるので、普通は.hspスクリプトを独立したフォルダに入れる。
作成されたもの
ではブラウザに表示するのをやってみる。
まず適当にフォルダを作って
この中に先ほどの block3.html、hspdish.js、block3.dataを入れる。
とりあえず、まず block3.html を Firefox(ファイヤーフォックス)に放り込んでみる。
ドラッグ&ドロップ(笑)
動く
だがこれは正規のやり方ではない。
同じようようにIE11(InternetExplorer11)でも開いてみる。
ブロックされてるコンテンツを許可、しても動かない。
クローム(Google Chrome)でも同じ。
自分はずっとコレで悩んだが、よく見たら説明書に書いてあった(笑)
フォルダからは読めない、サーバーにアップロードして http:// 経由で開かないと動かないんだそうだ。
説明書はちゃんと読みましょうね、あはははは。
どうやら webGL は( java も?)セキュリティに問題があって、安全のためにローカルフォルダ(自分のPC)からの読み込みはしないようにしているらしい。
と言う事は Firefox だけ例外で「セキュリティが甘い」と言う事なのかな?
なんにしてもテストできるのはありがたい。
さて、サーバーにアップだけど、個人でレンタルサーバーを借りてる人がどれだけいるのか。
まあゲームを作って遊んでもらおう、と言う人なら借りてる可能性はあるけど。
そういえば通信のプロバイダで、無料でホームページを貸してくれる所もあるか。
「ローカルで動作する WEB サーバー」というのも、いくつも方法があるようだ。
めんどくさいので、ここでは説明しない。
自分の場合は、このブログをアップしているレンタルサーバーの Xサーバーを使う事にする。
と言っても、どうせこのサーバーでホームページもゲームも公開する予定なのだから同じ事だけど。
という訳で、以下は Xサーバーでのやり方ですのであしからず。
まず program\block3 とフォルダを作って
先ほど作った bloak3 フォルダ内の block3.data 、block3.html 、hsp3dish.js をアップロードする
X サーバーのファイルマネージャーだと、一度にアップロードできるのは5つまで。
次にURL、めんどくさいので右上のパスからURLをコピー/sinsei.space/public_html/blog/program/block3/
ところがここに罠があって(笑)
真ん中の public_html はメインのコンテンツを放り込む所なんだけど、URLパスとしては含まれない。
つまり /sinsei.space/blog/program/block3/ が正しいURLとなる。
これで延々404ページエラー(存在しないページ)が出て、何日か悩んだ(笑)
あくまでも Xサーバーでの話しだけど。
最後に block3.htmlを足して、開く時のURLは sinsei.space/blog/program/block3/block3.html となる。
ではこのURLを各ブラウザで開いてみる。
Firefox
IE11
Chrome
という感じであっさりできました。
一応、著作権的に、このURLはここだけの話としてフォルダは消します。
変わりに HSPの HSP Dish webGLマニュアルに、同じサンプルの onionsoft.netへのリンクがあるから、それを参照したらよいかもしれません。
サーバーにアップしてね、とでかでかと書いてあるな(笑)
今回はここまでにしよう。
オマケの話し。
自分はずっと Firefox を使ってたんだけど、今回テスト環境を整える事もあって、別のブラウザも使ってみる事にした。
IE11 と Chrome は特に問題ない。
Safari のウインドウズ版、Safari 5.1.7 も使ってみた。
サファリって MAC(マック)のブラウザだったのね、知らなかった。
ウインドウズではサファリのサポートは終わってるらしくて、この 5.1.7では webGLを動かす事はできなかった。
でも MAC のほうではバージョン9 とからしいので、MAC で webGL が動かない、という事ではたぶんないだろう。
Opera(オペラ)も試してみようと思ったけど、なんか2016年の2月に中国の企業に買収されたとかで、セキュリティの事を考えるとインストールする気になれなかった。
まあ Firefox と IE11 と Chrome の3つでテストできれば、PCのブラウザ版は充分かな。