まずは webGL版でゲームを作り始める


 2016年 1月10日辺り

 よし!ではまず始めに、webGL版(ブラウザ版)でブラウザで動くものを作ってみようか。

 と言う事で、webGLからやってみる。
 
 
 webGL(Graphics Library)と言うのは、ブラウザ(IE11とかChromeとかFirefox)で動く、描画サポートの仕様の事らしい。

 ブラウザが「webGL対応」だと動く、という事のようだ。

 「WebGLのブラウザサポート」 YOSBITSさんのページ

 「ハードウェアでアクセラレート(速度増)された三次元グラフィックスを表示可能にする」という事だそうだ。

 GPU(グラフィックボード、ハードの)が webGLをサポート(対応)してないと、その PCでは使えないという事かな?。

 Firefoxはソフトで代替する機能があるらしい。
 JavaScriptで動かすみたい。

 よくは分からんが、pcにおける DirectXの webブラウザ版みたいなものだろうか?
 
 
 ブラウザ上で動かせるものが作れるだけでも、かなりありがたいとは言える。

 

 ではまずマニュアルを見てみよう。
 
 
 ふむふむ、データフォルダ、メモリサイズ、表示サイズのスケーリング、くらいが重要なのかな。
 これらについては後で説明する。
 
 
 なんかサンプルのブロック崩しがあるみたいだし、まずはこれをブラウザに表示してみようか。

 まず block3.hspはどこにあるか
img00401
 C:\hsp34\sample\hsp3dish\block3.hsp
 ここだ

 HSPエディタで開いてみる
block3.hspのソースコード

 特に画像ファイルとか使ってないので、このままでよさそうだ。

 とりあえず F5キー(RUN(笑、古い言い方)、コンパイル+実行)を押して動かしてみよう。
 ツールバーの HSP→コンパイル+実行でもいい。

コンパイル+実行

 ウインドウズ上(ウインドウ)で動く。
 制作中はこれでテスト、デバッグする。
 
 
 次に HSPスクリプトを実際に変換する、HSP Dish helperを起動する。
hspdish helperのスタートメニューの場所
 スタートメニューか

HSPdishのexeファイル(HSP3dh.exe)の場所
 フォルダから直接開く

 たしか、これ「HSP3dh.exe」

 適当にショートカットを作って、デスクトップに張っておけばいい。
ショートカットの作り方

img00408a
 
 
 こんな感じの変換機が立ち上がる
HSPdish helper

 ソース変換/iosでアイフォン、androidでアンドロイド、hsp3dish.jsでwebGLに変換してくれるので、hsp3dish.jsを選択する。
 
 
 参照ボタンを押して、先ほどのblock3.hspを開く
スクリプトの選択
 
 
 変換ボタンを押してやると
変換する

 こんな感じで結果が表示され、無事変換されると上記のように表示され、エラーがでる場合はここにでる。
 
 
 参考までに、webGLの場合オプションは真っ白でもかまわない。
オプション画面
 
 
 制作されるのは、block3.html、hspdish.js、block3.data、block3.axだが、block3.axはいらない。

 場所は参照した.hspスクリプトのある場所で、ちらかって分かりにくくなるので、普通は.hspスクリプトを独立したフォルダに入れる。
制作されたもの
 作成されたもの
 
 
 ではブラウザに表示するのをやってみる。

 まず適当にフォルダを作って
img00415

 この中に先ほどの block3.html、hspdish.js、block3.dataを入れる。
img00417
 
 
 とりあえず、まず block3.html を Firefox(ファイヤーフォックス)に放り込んでみる。
img00485
 ドラッグ&ドロップ(笑)

 動く
img00486

 だがこれは正規のやり方ではない。

 同じようようにIE11(InternetExplorer11)でも開いてみる。
 ブロックされてるコンテンツを許可、しても動かない。
img00487

 クローム(Google Chrome)でも同じ。
img00488

 自分はずっとコレで悩んだが、よく見たら説明書に書いてあった(笑)

 フォルダからは読めない、サーバーにアップロードして http:// 経由で開かないと動かないんだそうだ。

 説明書はちゃんと読みましょうね、あはははは。

 どうやら webGL は( java も?)セキュリティに問題があって、安全のためにローカルフォルダ(自分のPC)からの読み込みはしないようにしているらしい。

 と言う事は Firefox だけ例外で「セキュリティが甘い」と言う事なのかな?
 なんにしてもテストできるのはありがたい。
 
 
 さて、サーバーにアップだけど、個人でレンタルサーバーを借りてる人がどれだけいるのか。
 まあゲームを作って遊んでもらおう、と言う人なら借りてる可能性はあるけど。
 そういえば通信のプロバイダで、無料でホームページを貸してくれる所もあるか。

 「ローカルで動作する WEB サーバー」というのも、いくつも方法があるようだ。
 めんどくさいので、ここでは説明しない。
 
 
 自分の場合は、このブログをアップしているレンタルサーバーの Xサーバーを使う事にする。
 と言っても、どうせこのサーバーでホームページもゲームも公開する予定なのだから同じ事だけど。
 
 
 という訳で、以下は Xサーバーでのやり方ですのであしからず。

 まず program\block3 とフォルダを作って
img00478

 先ほど作った bloak3 フォルダ内の block3.data 、block3.html 、hsp3dish.js をアップロードする
img00489

 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
img00490

 IE11
img00491

 Chrome
img00492

 という感じであっさりできました。

 一応、著作権的に、このURLはここだけの話としてフォルダは消します。

 変わりに HSPの HSP Dish webGLマニュアルに、同じサンプルの onionsoft.netへのリンクがあるから、それを参照したらよいかもしれません。

block3.htmlへのリンク マニュアルのここ。

 サーバーにアップしてね、とでかでかと書いてあるな(笑)
 
 
 今回はここまでにしよう。
 
 
 
 オマケの話し。

 自分はずっと 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のブラウザ版は充分かな。

コメントを残す

メールアドレスが公開されることはありません。