古のゲーム

ゴールデンウィークに「ぬし釣りやりたいな～」と思って調べたんですけど復刻版とかアーカイブみたいなのほぼ無いみたいで、なんとなくそれっぽいの作ってみよう！で作ってました

直前にPHPで画像読込できる事を知って気になっていたので、今回はJavaScriptで作成
大枠が出来たのでPHP画像のテストついでに晒しておきます
雑ですが竿投げたり戻したりは大体Fボタンです
http://yuukisv.php.xdomain.jp/fishing.html

実際アップロードしてみると初回の読込の時間があるからガタつくな～とか色々ありますね…

今回の個人的ポイントは素材の利用規約によくある
①「Webゲームでの利用は暗号化して」
②「Webゲームでの利用は直接アクセスできないようにして」
をクリアする。

①は画像ファイルを暗号化(簡単なのを.NETで)→htmlファイルからphpを読込→phpで復号化してHTTPヘッダーを画像にして返す
②は.htaccessでアクセス制限をかける

で出来たかな？と思います
こっちがPHP画像(釣り餌)でゲーム内で使用していますが踏んでも表示されないはずです
http://yuukisv.php.xdomain.jp/mki/bait.php

前回(ローグライク)はFlutterWeb内でクリアしていました
覗こうと思えば(多分)出来たけど…

マス目に縛られない移動も初めてやったので大変でした
プログラムも大分汚くなったけど次やる時はもう少し綺麗になる事に期待

おまけ
画像読込PHP

以下の方の画像借りてます
簡単な暗号化・アクセス制限していますがリソースの使用禁止です
ぴぽや　さん
https://ci-en.net/creator/118
ねくら　さん
https://ci-en.net/creator/1430
浅利しじみ　さん
https://www.ac-illust.com/main/profile.php?id=WkeSa9ob&area=1
番竹　さん
https://www.ac-illust.com/main/profile.php?id=Qd0ceyvq&area=1
hinosio　さん
https://www.ac-illust.com/main/profile.php?id=hzeON3ff&area=1
るみこ　さん
https://www.ac-illust.com/main/profile.php?id=bCZZ6uCC&area=1
Trajan　さん
https://www.ac-illust.com/main/profile.php?id=rg9hDWBo&area=1

Firebase使う

Flutterの勉強ついでに使っていたFirebase
簡単にログインが作れたりデータベース(NoSQL)がある程度無料で使えて便利！
こちらもファイルをアップロードできるようなのでやってみた(Firebase Hosting)

Flutterに移したことでWebブラウザでもできるようになった！のはいいんですけどセーブどうするの問題にぶつかりました
・アプリとして動いてないのでファイルを保存するスペースが(多分)ない
・ユーザーが識別できない(UserAgentぐらい？)

じゃあデータベースに保存する？という事でこちらもFirebase(Firestore Database)にセーブをしてみる事にしました
ユーザー名はWeb版だけ適当に入力してもらうという事で…
この辺は世の中のWebブラウザゲームは実際どうしてるんでしょうね？

ゲームの方は…というとそんなに変わってません
・道具説明追加
・中断機能
・通路にいる時の表示少し改善
・道具+1

この辺のチェックとflutterに移してから全然テストしてないのでその辺見てみるアップロードついでに晒しておきます
https://yuuki-firebase-project.web.app/

Firebaseに置いてhttpからhttpsに変わった事で(?)前回はできなかったPCのWebブラウザでもPWAが有効になってました

前回と同じくついでに晒そうとしたので操作方法書いてないのですが
マップはマップアイコン2回タップで選択→決定
ダンジョン内はタップで選択、同箇所タップで行動、プレイヤータップでメニューです

Webサーバ上及び表示される画像ファイルは多少の難読化していますがすべて借り物なので使用禁止

3Dって

Ci-enで色んな人の記事見ててなんとなく3Dのデータってどう作るのかな～と年末年始に少しやってみた
Blenderというソフトが無料らしいので入れてみる

3Dを表示する方法がWebGLぐらいしかやってみたことないのでWebGLのVBO,IBOに使う情報をBlenderで作った3Dからなんとか入手したい所

適当にファイルに保存やエクスポートしてみて中覗くもよく分からない…
Blender上に必要な情報は表示されてるけど手作業は辛い
と思ってたらBlender上でPythonが動いて情報抜けるらしいのでやってみる

難航するも何とか抽出できたので勉強用のjavascriptに突っ込んで表示
勉強用の奴なので光が加算されてたり滑らかになってたりして違うけど無事表示
めでたしめでたし

shift+矢印で軸を中心に回転します
http://yuukisv.html.xdomain.jp/WebGLTest.html

まぁThree.js使えばいいじゃん！で多分終わりなんですけど
せっかくだったので…

おまけ
vertex.py

マルチプラットフォーム開発とPWA

ローグライクそっちのけでFlutterで遊んでいましたが、Flutterでローグライク続き作ればいいのでは？と思いチマチマ移植しています

AndroidSDK(Java)での開発からFlutter(Dart)に移したことの最大の恩恵は対応プラットフォームが増える事ですね

AndroidSDK
・Android

Flutter
・Android
・iOS
・Webブラウザ

面白いのがFlutterのWeb版はPWAという技術が標準で組み込まれていて各端末のWebブラウザのメニューから「ホーム画面に追加」を選ぶことによって端末にアプリをインストールしたようにアイコンを追加できます

Cienで見かけるR-18アプリ的な旨みで言うと各端末向けのアプリを個別にインストールさせるよりは簡単でGooglePlayやAppStoreを経由しないのでスマートフォン向けの配信に使う場合の制限はない事でしょうか(当然恩恵もない)

お試しでPWAのテストをしてみた奴です
まだ弄っている途中なので表示されるまでしばらく真っ白のままです
http://yuukisv.html.xdomain.jp/index.html

画像がずれてることやゲームの動作は置いといて
AndroidスマホでChromeからアクセスしてホーム画面に追加する場合

各々してみるとホームにアイコンを追加できます
そしてアイコンから起動するとブラウザで表示しているはずなのに余計なバーが消えます(いい)

Webサーバ上及び表示される画像ファイルは多少の難読化していますがすべて借り物なので使用禁止