放課後ゲーム作り

久しぶりのGPGシリーズです。 今日話す内容はドラゴン曲線（dragon curve）です。 出所： https://en.wikipedia.org/wiki/Dragon_curve この曲線を初めて見たのは映画で有名になった小説 「Jurasicc Park」のチャプターに描かれた絵でした。 大体のFractial図形がそうですが、複製→変換→統合 の繰り返して精度が高く美しい曲線になります。 ドラゴン曲線の作り方（出所：Wikipedia） ドラゴン曲線に場合、Iterationが重ねると囲碁盤みたいな グリッド領域が広がりますが、この曲線の特徴は １つの線が交差せず（角が当たる事はあり）始点から 終点まで繋がっている事です。 その広い囲碁盤の中身がどうなっているか確認のため 90度に曲がる部分をラウンド処理して描いてみました。 プログラムではなくフォトショップで描いた画像です。 そして、１つの線がどの経路で繋がっているのかを 見やすくするため、グラデーション色をつけてみました。 結構綺麗なカーブになって壁紙にしたいくらいです。 ついでに、Iterationによって曲線の変化を確認する 簡単なWebアプリをUnityで実装してみました。 https://habanero.jp/playground?id=dragoncurve  ※モバイルでは正しく表示されない事があります。 ソースコードはここでダウンロードできます。 https://github.com/shintec/dragoncurve 久々に良い脳トレになりました。

こんにちは 前回のポスティングでVR設定について話しました。 UnityでVR開発環境設定 その時、Silicon Mac（M1チップ搭載Mac）では Oculus plug-in設定時クラッシュすると書きましたが、 UnityフォーラムでSilicon MacでOculus Pluginの 設置方法が書いてあったので、改めて VR設定方法を記録しておきます。 参考URL： https://forum.unity.com/threads/macbook-pro-m1-oculus-crash.1017730/ 開発環境はMacbook Pro 13inch（M1チップ）で Unityバージョンは2020.2.0です。 Oculus Plugin設置（1.7.0バージョン） XR plug-in Management設置後、Oculus XR Pluginを 設置する時、Package Managerでバージョンを 1.7.0に選びます。（previewバージョン） Oculus Integration設置 Oculus Integrationを設置する時 AudioPluginOculusSpatializer.bundleを除きます。 Unity 2020バージョンからAsset Storeが Package Managerに統合されました。 AudioPluginOculusSpatializer.bundleを外す 他の設定は前回話したように設定すれば 問題なくapkがビルドできます。 おまけ 以下のブログにOculusアプリの最適化オプション について書いてありますので、ご参考ください。 https://developer.oculus.com/blog/tech-note-unity-settings-for-mobile-v...

 あっという間に終わってしまった2020年 ハバネロサイトをAWSからGCPに移管すると共に 主な作業Repositoryをgitlabからgithubに変えました。 2020年のコミットログ（ガラガラだな…） ハバネロは自分が作りたいゲームを思い切り作って 自由に配布する夢をみて始めたプロジェクトでしたが ゲーム制作も思ったより進まず、サイト更新も 中途半端のまま2020年が終わってしまいました。 特に多事多難で悲しみに溢れた1年でしたが 嘆くもたち止まるも2020で終わらせ 2021年は気を改めて再び頑張ろう

この間、VRゲームを開発する機会があったので その時行ったUnityのVR設定方法を記録しておきます。 ※注意事項 Unityバージョンは2019.4.16に合わせる Oculus PluginはUnityバージョンに敏感なので バージョンが合わないと設定できない事があります。 SiliconMac（M1チップ搭載Mac）では設置できません。 （SiliconMac対応Unityを待つしかない。。。） 事前作業 開発者モード活性化 確認されない開発者アプリを起動する事ができます。 SideQuest設置 SideQuestでapkファイルを直接デバイスに入れます。 プロジェクト生成 3DやUPRを選択 （HDRPはOculus Questには少し重いです） PlatformをAndroidに変換 File → Build SettingsでSwitch Platform選択 XR Pluginマネジャーを設置 Edit → Project Settingsの XR Plug-in Managementタブで設置 Oculus Pluginを設置 XR Plug-in ManagementのAndroidタブで Plug-in Providers → Oculusをチェック Oculus Integrationを設置 Asset StoreでOculusで検索して設置 途中でOculus Plug...

こんにちは こないだ、ハバネロにHTTPS対応を入れましたが そろそろSSLキーの更新日が近づいたので SSL対応プロセスについてブログに記録しておきます。 （ハバネロサイトのSSLはGAEが提供しているので ここで話すのはゲームサーバー側のSSL対応です。） Let’s Encryptで無料SSL取得 昔はブラウザーが信頼できるSSLを使用するため 有料SSL発行サービスを利用したようですが、 今はLet's Encryptで無料SSLが使えます。 https://letsencrypt.org/ja/ GCEインスタンスにSSLを対応するため certbot を設置します。 certbotを設置 以下のサイトで設置方法が書かれています。 https://certbot.eff.org/instructions 僕の場合ゲームサーバーとの通信で利用しているので ウェブサーバーは無しを選び、インスタンスのOSは VMに設置されているDebian10を洗濯します。 ちなみに、自分のOS種類を確認するコマンドは以下です。 > cat /etc/issue Debian GNU/Linux 10 \n \l 以下のコマンドでcertbotを設置します。 > sudo apt-get install certbot 認証書を発行 僕はブラウザーとsocketとの通信のため 必要な証明書を発行するのが目的なので standalone オプションを使います。 > sudo certbot certonly --standalone SSLを適用するドメインを入力します。 Please enter in your domain name(s) (...

 UnityのUIで円形のイメージを取り扱うのは 意外と面倒な作業です。 ビットマップは拡大や縮小でサイズを変更すると どうしても画像がボケてしまいます。 その理由で、UIで使うビットマップイメージは できれば元本サイズで描画するようにしています。 特に、丸いフチの四角形はUIで良く使われる形なので 角の半径によって複数サイズのイメージを 用意しないといけないのが面倒くさいです。 サイズ関係なくキレイな円を描く方法はないのか？ それで調べた結果、良いものを見つけました。 Unity-UI-Rounded-Corners イメージの角を丸く描画するシェーダー Github URL :  https://github.com/kirevdokimov/Unity-UI-Rounded-Corners シェーダーを使って半径を設定するとイメージの 角を丸く描きます。 特にuGUIと相性が良くて、既存Imageの機能と 競合しないのが素晴らしいです。 UnityEngine.UI.Buttonへ適用した姿 このシェーダーの面白い機能は、各角ごとに それぞれ半径を設定することです。 半円形のUI構成する時に助かります。 これで一つ悩みが解決されてスッキリしました。 素敵なシェーダーを作ってくれた製作者に感謝

こんにちは この前、ハバネロのゲームをデプロイする作業を 自動化するスクリプトを作成しましたので、 その内容をブログに記録しておきます。 ハバネロゲームの更新フロー ハバネロのゲームページはこういう構造になっています。 それで、ゲーム更新は下のプロセスを行います。 Unityビルドでゲームファイルを生成（js, html） ↓ ビルドしたファイルをS3にアップロード ↓ DBにStorage URLを更新 この中で、 UnityのWebGLビルドは結構時間がかかるので デプロイ作業だけで、かなり時間が取られました。 従って、ゲームのデプロイ作業の一連を順次で行う スクリプトを作りました。 Unityビルドでゲームファイルを生成 Unityはコマンドラインビルドをサポートしています。 コマンドラインビルドのため、下のような static Classを用意します。 public static class BuildScript {     // 実行する関数（staticで定義）     static void BuildWeb()     {         ...         string outputPath = Application.dataPath + "/../../" + "output";         BuildTarget buildTarget = BuildTarget.WebGL;         BuildOptions buildOptio...

最近気付きましたが、UnityのWebGLでは async / await を使った非同期コードが動作しないです。 マニュアルにも明示されていました。 つまり、WebGLで非同期コードを書きたい場合は コルーチンを使えば良いです。

基本形 (parameters) => { expressions; }; 例： delegate int MyFunc(float a); // float→int変換関数のラムダ式 MyFunc floatToInt = (float a) => { return (int)a; }; // 明示的タイプは省略可能 floatToInt = (a) => { return (int)a; }; // 引数が1個であれば括弧省略可能 floatToInt = a => { return (int)a; }; // 単文式の場合、中括弧も省略可能 （返還値がある場合 returnも省略） floatToInt = a => (int)a; 応用：getter, setter float a; public int A { get { return (int)a; } } // ラムダ式 public int A { get => (int)a; } // 更に省略可能 public int A => (int)a;

ハバネロのSSL対応は、前から気になってた課題でしたが なかなか解決ができなくて、今まで後回しにしていました。 そして、今回の４連休を向けて 宿怨のSSL対応作業を行いました。 これからhttps接続でもゲームプレイができます。 https://habanero.jp 色々試行錯誤しましたが、うまく対応ができて嬉しいです。

こんにちは 最近、ハバネロのSSL対応のため、ドメインを購入しました。 habanero.jp ドメイン購入については、今度詳しく話したいと思います。 それで、サイトの住所も変わりました。 新しいハバネロサイト住所： https://habanero.jp または https://www.habanero.jp ※ 現在、ゲームサーバーのSSL対応中なので、 ゲームプレイはできません。 ついでに、このブログにもドメインを適用してみました。 新しいブログ住所： https://blog.habanero.jp ちなみに、このDNSはグーグルドメインから購入したので、 アカウント連動のため、ブログを移転することになりました。 元のブログ住所： https://habanero-kun.blogspot.com 移転が無事終わり、ハバネロサイトが復旧してから 元のブログを閉鎖する予定です。 また進展があったらブログに報告します。

テストポスティング

こんにちは 最近、家のパソコンが急死してしまって 現在修理所に預けている状況です。 それで、久々にノートパソコンで作業していますが 古いものなので、PhotoShopやUnityなど 重い作業は難しいです。 次のGPGシリーズはもう少しお待ちください。 ハバネロサイトを復旧してから しばらく目立つアップデートはなかったですが、 内部的には少し進展がありました。 Unityバージョン更新 この間、Unity2019のLTSバージョンが リリースされました。（2019.4） （Unityの時間は半年遅い…） ハバネロに載せているゲームクライアントは かなり古いバージョンで作られていたので LTSバージョンに合わせて更新しました。 ビルドの自動化 今までクライアントをデプロイする時 Unityエンジンでビルドして、 OutputファイルをGCPダッシュボードから アップロードする面倒な作業を繰り返しました。 その一連の手作業を一括まとめて処理するため コマンドビルドを導入しました。 １つ問題なら、コマンドビルドを実行するために 一旦Unityエンジンを終了する必要がありますが、 （インスタンス重複エラーが発生） 手作業で行ったクライアントデプロイが 自動化されて、少し楽になりました。 そろそろサイトに載せる次のゲーム制作や サイトのアップデートも進みたいと思っています。 （パソコンが無事に帰って来ることを祈っています。） ※ 元ブログから移転された記事です。

​ 当然の話ですが、デジタル画像は拡大しても 細かい部分を詳しく見ることはできません。 コンピューターは画像を単純に 色情報の配列として保存しているだけです。 こういう風に色データの配列で作られています。 昔のコンピューターは画面を拡大するとき 隙間の部分を近くの色で塗り替えました。 計算は簡単ですが、結果としてはあまり綺麗ではないです。 ギザギザしている部分が良く見つかります。 コンピューターの性能が良くなってからは もっと自然に見える拡大方法が出てきました。 従来の拡大画像（左）、現在の拡大画像（右） 今日は画像を拡大する時に良く使われている バイリニアフィルタ 「Bilinear Filter」  について話します。 ● バイリニアフィルタとは？ ● 名前の意味そのまま訳すると 二重 (bi) 線形 (linear) 補間 (filter) です。 。。。 先ずは 線形補間  について説明します。 例えは、こういうグラフがあるとしましょう そして、このグラフが何らかの理由で 一部のデータだけ残った場合を考えてみます。 この情報から元のグラフを復元するため 点と点の間を線で繋げます。 これが 線形補間 です。 線形補間の良い所は、計算がめちゃくちゃ早くて 結果物も計算の軽さに比べて悪くないことです。 これは 演算速度を重要視するゲーム では 強力な利点として作用します。 線分の中を計算するには 内分点公式 を使います。 \(\displaystyle P(x,y) = \frac{n}{m+n}A(x,y) + \frac{m}{m+n}B(x,y)\) 色の場合は赤、緑、青の各要素ごとに分けて 線形補間を行います。 すなわち、バイリニアフィルタ （二重線形補間） は 画像の色情報を２つの軸 （横、縦） に対して 線形補間することです。 では、具体的な計算方法をみてみましょう。 ● バイリニアフィルタ...