2023/10/25(水) [n年前の日記]
#1 [hsp] 疑似3D道路その26。スクリーンセーバを作った
ここのところ、HSPを使って疑似3D道路のプログラムを作っていたけのだけど。
_TAG:HSP - 2023
ようやくスクリーンセーバっぽい感じで動かせたので、github にアップロードしてみた。
_mieki256/p3drdscr: pseudo 3D road screensaver on Windows.
せっかくだから、OBS Studio 29.1.3 で画面をキャプチャして、Youtube にアップロード。大体こんな感じのスクリーンセーバです。
昔から謎だった疑似3D道路の処理をそれらしく書けたので、やっとようやく宿題を終えた気分。もっとも、「今時スクリーンセーバ、しかも、疑似3d道路って、お前…」と言われそうな気も…。仕方ないじゃん…。「ゆるキャン2」のOP映像の1カットを目にして「こういう感じのスクリーンセーバがあったら面白いのでは」とつい妄想していたらなんだか作りたくなってしまったので…。でも、結果的に全然似てないソレになっちゃったな…。いや、似てたら逆にマズいか…。
_TAG:HSP - 2023
ようやくスクリーンセーバっぽい感じで動かせたので、github にアップロードしてみた。
_mieki256/p3drdscr: pseudo 3D road screensaver on Windows.
せっかくだから、OBS Studio 29.1.3 で画面をキャプチャして、Youtube にアップロード。大体こんな感じのスクリーンセーバです。
昔から謎だった疑似3D道路の処理をそれらしく書けたので、やっとようやく宿題を終えた気分。もっとも、「今時スクリーンセーバ、しかも、疑似3d道路って、お前…」と言われそうな気も…。仕方ないじゃん…。「ゆるキャン2」のOP映像の1カットを目にして「こういう感じのスクリーンセーバがあったら面白いのでは」とつい妄想していたらなんだか作りたくなってしまったので…。でも、結果的に全然似てないソレになっちゃったな…。いや、似てたら逆にマズいか…。
◎ 処理速度について :
このプログラムは、仮想画面解像度とフレームレートを変更できるようにしてあるので、動かしているPCのスペックに合わせて、処理落ちしないイイ感じの設定値を探してくれれば、と思っているわけだけど。
手元のメインPCとサブPCで動かしてみたところ、安定して動く仮想画面解像度とフレームレートは以下のような結果になった。
拡大縮小描画処理をおそらくはCPUのみで処理しているせいか、CPUパワーがモロに関係してくるようで…。省電力重視のCPUでは、QVGA＋α の解像度にしても15FPSしか出ないのは、ちょっと参ったなと…。まあ、非力なCPUですら今時はここまでの描画ができるのね、という驚きもあるけれど。いや。今時のCPUではないよな。Windows11にはアップグレードできないぐらい古いCPUだし…。
手元のメインPCとサブPCで動かしてみたところ、安定して動く仮想画面解像度とフレームレートは以下のような結果になった。
- AMD Ryzen 5 5600X (3.7 - 4.6GHz, 6C/12T, 65W) : 1280x720,30FPS or 1920x1080,20FPS, zoom=2
- AMD Athlon 5350 (2.0GHz, 4C, 25W) : 480x270, 15FPS, zoom=2
拡大縮小描画処理をおそらくはCPUのみで処理しているせいか、CPUパワーがモロに関係してくるようで…。省電力重視のCPUでは、QVGA＋α の解像度にしても15FPSしか出ないのは、ちょっと参ったなと…。まあ、非力なCPUですら今時はここまでの描画ができるのね、という驚きもあるけれど。いや。今時のCPUではないよな。Windows11にはアップグレードできないぐらい古いCPUだし…。
◎ 課題 :
一応ここまでは作ってみたものの、いくつか課題が残ってるなと…。
課題その1。遠景の上下スクロールが不自然。もっと自然な感じに見せるにはどういう処理を書いたらいいのやら。道路データ(セグメントデータ)の1つ1つが、1つ前のセグメントよりどれだけ上下にずれるか、という値を持っているので、その値を上手く使えばそれっぽくなるのではないか、とは思うのだけど…。
課題その2。車の挙動が変。カーブに差し掛かっているのに速度を上げていくのはいかがなものか。そこはゆっくり速度を落としながら走るものでは…。カーブの有無を判別して、速度を変更する処理を考えるのが面倒臭くて、こんなありえない動きに…。
課題その3。拡大描画時のプルプルが気になる。gzoom + gcopy を使って描画する時はまだマシだけど、grotate や gsquare を使って描画するとプルプルプルプルと震える…。grotate や gsquare は、処理が速い代わりに精度は粗いとの話なので、トレードオフではあるのだろうけど。でも、自分の書いた処理/計算の仕方が間違ってるのではないかという気も…。
課題その4。車のビルボード感が強過ぎ。本来なら、道路に沿って車体の向きが変わったり、カーブに入ったらスクーターの角度が変わってくれないと…。でも、画像を作るのが面倒臭い。やるとしたら3Dモデルを作ってレンダリングして角度の違う画像を何パターンか作ることになるのだろうけど、想像しただけでもシンドイ。
課題その5。何より、処理が重い。重過ぎる。CPUのみで描画処理をしないで、DirectX や OpenGL を使えれば、このくらいの描画なら軽々とこなせるのではないかと想像するのだけど、HSP でスクリーンセーバを作る際に DirectX や OpenGL が使えるのかどうかが分からなくて…。どこかにサンプルは無いものかとググってみたけど、そもそも今時スクリーンセーバを作ろうとする人なんて居ないわけで、そんなサンプルがあるはずも無く。
課題その1。遠景の上下スクロールが不自然。もっと自然な感じに見せるにはどういう処理を書いたらいいのやら。道路データ(セグメントデータ)の1つ1つが、1つ前のセグメントよりどれだけ上下にずれるか、という値を持っているので、その値を上手く使えばそれっぽくなるのではないか、とは思うのだけど…。
課題その2。車の挙動が変。カーブに差し掛かっているのに速度を上げていくのはいかがなものか。そこはゆっくり速度を落としながら走るものでは…。カーブの有無を判別して、速度を変更する処理を考えるのが面倒臭くて、こんなありえない動きに…。
課題その3。拡大描画時のプルプルが気になる。gzoom + gcopy を使って描画する時はまだマシだけど、grotate や gsquare を使って描画するとプルプルプルプルと震える…。grotate や gsquare は、処理が速い代わりに精度は粗いとの話なので、トレードオフではあるのだろうけど。でも、自分の書いた処理/計算の仕方が間違ってるのではないかという気も…。
課題その4。車のビルボード感が強過ぎ。本来なら、道路に沿って車体の向きが変わったり、カーブに入ったらスクーターの角度が変わってくれないと…。でも、画像を作るのが面倒臭い。やるとしたら3Dモデルを作ってレンダリングして角度の違う画像を何パターンか作ることになるのだろうけど、想像しただけでもシンドイ。
課題その5。何より、処理が重い。重過ぎる。CPUのみで描画処理をしないで、DirectX や OpenGL を使えれば、このくらいの描画なら軽々とこなせるのではないかと想像するのだけど、HSP でスクリーンセーバを作る際に DirectX や OpenGL が使えるのかどうかが分からなくて…。どこかにサンプルは無いものかとググってみたけど、そもそも今時スクリーンセーバを作ろうとする人なんて居ないわけで、そんなサンプルがあるはずも無く。
◎ 参考ページ :
github の README.md にも載せておいたけど、以下のページが大変参考になりました。ありがたや。
_Creating a pseudo 3D racer
_Creating a pseudo 3D racer - part 2
_Creating a pseudo 3D racer - part 3
_How to build a racing game | Code inComplete
_How to build a racing game - straight roads | Code inComplete
_How to build a racing game - curves | Code inComplete
_How to build a racing game - hills | Code inComplete
_How to build a racing game - conclusion | Code inComplete
_Javascript Racer - v4 (final)
_Lou's Pseudo 3d Page
_疑似3Dに関するメモ - サイバーグノーシス
特に、PICO-8 を使ったチュートリアル記事がめちゃくちゃ分かり易くてグッドでした。マジありがたや。最初のあたりにある、カーブしていくセグメントデータを上から見た図、を出力するサンプル(Pseudo 3D racer tutorial 1)に目ウロコ。「そういうことか！ カーブの表現ってそれだけで良かったのか！」と…。更に、まずはセグメントだけを透視変換して、線のみを表示して仕組みを考えていくあたりもグッドだなと。塗り潰しは後にして、まずは骨だけにして考えてみよう。みたいな。分かりやすい…。
_Creating a pseudo 3D racer
_Creating a pseudo 3D racer - part 2
_Creating a pseudo 3D racer - part 3
_How to build a racing game | Code inComplete
_How to build a racing game - straight roads | Code inComplete
_How to build a racing game - curves | Code inComplete
_How to build a racing game - hills | Code inComplete
_How to build a racing game - conclusion | Code inComplete
_Javascript Racer - v4 (final)
_Lou's Pseudo 3d Page
_疑似3Dに関するメモ - サイバーグノーシス
特に、PICO-8 を使ったチュートリアル記事がめちゃくちゃ分かり易くてグッドでした。マジありがたや。最初のあたりにある、カーブしていくセグメントデータを上から見た図、を出力するサンプル(Pseudo 3D racer tutorial 1)に目ウロコ。「そういうことか！ カーブの表現ってそれだけで良かったのか！」と…。更に、まずはセグメントだけを透視変換して、線のみを表示して仕組みを考えていくあたりもグッドだなと。塗り潰しは後にして、まずは骨だけにして考えてみよう。みたいな。分かりやすい…。
[ ツッコむ ]
以上です。