【レトロゲーム再現】スーパーファミコンの疑似3D 【ゲーム・プログラミング】【JavaScriptサンプル】 

★豆知識★ スーパーファミコンの「画像を切り取る」機能はモード7と呼ばれており、 1枚の画像にだけアフィン変換（並行移動・拡大縮小・回転）をかけられる……という機能です。 アフィン変換だけでは動画のような変換はできませんが、 ラスタースクロールの要領でスキャンラインごとに（横1ラインごとに）異なる変換をかけられるので、工夫すれば動画のような変換もできました。 さらに深く知りたい方は、こちらの動画（英語）を見てみてください。とても良くまとまっています。 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3FVN_Ze7bzw.html

20年以上前に遊んでたゲームで、ずっと疑似3Dの描画ロジックが疑問だったけど、この動画でしっくり来た

レトロなレースゲームもわりと好きだからこれまで見た中で一番楽しめた。

うわぁぁぁ、マリオカートこうやって擬似3Dだったんだ！！メチャクチャ納得した！！！！ ありがとうございます！！

2:12からわかんないーwwww

なんだこれｗｗｗｗ 疑似3Dってどうやって作画しているのか意味不明だったけど、こんなかんたんな数式で表せるのか・・・ これはすごい。

本当にすごい… プログラマーに憧れているんですが、ヘロンさんの動画を見て逆に挫折しそうです…

マリカもそうだけどFF6の飛行船乗ったときを思い出した

めちゃくちゃ感動しました。 マリオカートとかも複雑に処理していた訳では無いんですね。 擬似的な3Dに変換するロジックを間に挟むだけでゲーム体験がこんなにも変わるなんて感動しました。 ネットの特定班とかは逆に立体から平面に置き換えて住宅を特定してるのかもしれないですね笑

すごい、こうやって描画するときれいになるんだ

すっごくわかりやすい!!

普段Unityで開発してるのですが最近このチャンネルを見つけ勉強させていただいてます。 とても勉強になる動画ばっかりで最高です

SFCゲームソフトの開発現場で働いていたので、懐かしく拝見しました。プログラマじゃなく企画屋だったので、数式とかはさっぱりですが。 モード7とかの用語が懐かしすぎる……

こんな擬似的な手法に高低差のあるガイドビームとか加えたパイロットウイングスのプログラミングは見事としか言いようがないですね。

こういう風になってたのか！ 長年の謎が解けました ありがとうございます

無駄を省いたかなりうまい教え方だなぁ現役の学生ならかなりスキルアップできそうな内容だなと数学が苦手な俺でも解る。

すごいプログラマ、カッコいいプログラマって 技術があるのもそうだけど、 どう実装するのかがすぐに思いつく人だよなぁ

この動画は凄い！！！ なんか長いこと謎だった手品のネタバラシを見た気分！！

いやめちゃくちゃ面白かったです。

非線形って聞いたときに指数対数の関数を思い浮かべたけど、それより計算量が少ない双曲線函数のほうが描画が早いか。

まんまF-ZEROやマリカの描画ですね！ ずっとどういう計算か気になってました。色々いじって遊んでみますｗ あと、いくつか動画を観て、とても為になるので登録しました！ 色々参考にさせていただきます。

すごい面白かったです

素晴らしい解説です。 この考え方を、クセの強かったSFC上にどうやって実装したのかが、すごく気になります！

ほんとすげえええ

すごい！すごい！！ 高校出たけど全然数学わからんｗ　ベクトルって何？ スキル１２０％に無理やり上げて改造してみました；； サンプルプログラムのページに飛び（リスト左上のSketch Files＞sketch.jsを表示させる） 16行に let sp=0; を追加 188行の // 視点を回転 if (keyIsDown(68)) this.player.angle += PI/180; // Dキー if (keyIsDown(65)) this.player.angle -= PI/180; // Aキー を以下の ように変更 // 視点を回転 if (keyIsDown(RIGHT_ARROW)) this.player.angle += PI/180; // →キーが押されたら if (keyIsDown(LEFT_ARROW)) this.player.angle -= PI/180; // ←キーが押されたら if (keyIsDown(90)) {　// Zキーが押されたら if(sp0) { // 速度が0になるまで sp-=0.01; // 慣性速度の減速値 this.player.pos.x += cos(this.player.angle+PI/4)*sp; this.player.pos.y += sin(this.player.angle+PI/4)*sp; } } if (keyIsDown(88)) { // Xキー if(sp>0) sp-=0.04; // 速度が0になるまで減速 } に変更すると Zキーでアクセル　xキーでブレーキ　←→キーでハンドルそうさが出来るよ

Despite the video being in Japanese and RU-vid having a very janky subtitle translation, this video is surprisingly very easy to understand.

神動画にであった。ありがとう

F-ZERO当時衝撃でした、グッジョブ！今後も数理わかりやすくお願いしまーす！！ 私の昔の自作ゲームのうち物理＆３ＤっぽいのはBASICで弾道計算＆高さで球の大きさ変えたコレかなぁ： ru-vid.com/group/PLzB6S7MaIGGQHEQS3esTUI7NzYSN0C2qr

全てを理解できたわけではないですが、なるほどと思いました。 名作天地創造の裏世界での、歪んでおるようなマップ表現も、今回のテクニックを応用したものなんだなと思って感動しました。 まるで裏話を聞いているようで、ワクワクしますね。 これからも動画楽しみにしています！ ヘロンさんの影響で、数学の勉強を始めましたw

1:26 近年のマリオカートはこんな感じにコースがあえて歪んだりしてる

なにこれめっちゃ面白い

擬似3Dには気をつけよう！！

関数には気をつけよう！

直感や閃きでプログラムでゲーム作ってた人間にも分かり易くて凄い動画見つけちゃったな。 数学的にってのがどうにもダメダメで…プログラム動かしてとりあえずこう動くんだよと説明するしかない。 これを見てるとJavaScriptの世界がめっちゃ面白そうだなぁ。

天地創造のフィールド、クロノトリガー、聖剣2、FF5いろんなゲームであったね

すげえ

この話昔任天堂関連の仕事してた時現地の人に聞いたなぁ…

スターフォックスの話かと思ったら違ったｗｗ

すみません、とても分かりにくいなというのが正直な感想です。 たぶん「画面上の任意のピクセルに対応するマップ上の座標をどうやって求めるか？」の話をしているはずなので素直に(x, y)の式で書いた方が分かりやすかったんじゃないでしょうか？ h, vはマップ上の任意の点SをLとRで表現するための値だったはずなのにf(v)なんて関数が出てくるから非常に混乱します。少なくとも私はvって一体何だったっけ？ってなりました。最初に書いた通り画面上のピクセルに対応するマップ上の座標を求める変換式を考えているのだから、これ本来はyの関数f(y)と表現すべきだったんじゃないでしょうか？

やっぱプログラムに数学は必要なんだよなぁ

いい講座ありがとうございます。だけど文系である私としては公式が難しいですわ…

製図で投影するのと似たような感じかな

結論 : プログラマーは神

視点の高さをLとして f(v)=L•tan(vπ/2) みたいな

f-zero好きやで 生み出してくれた感謝は任天堂にはあるけど見捨てたのは死ぬまで許せないわ

美しい数字だ。

このやり方をスーファミ発売前に完成させてるからすごいよな… まあ終盤はポリゴンも出てくるんだけど 何言ってるかわかんねぇけど(高3文系脳の理系クラス)

ゆうさくのbgm

高さ変えるのは面倒くさそうだなぁと思ったら簡単だった

It would be so nice to have English subtitles :( so bad I don't speak Japanese!

プログラマーになりたいけど数学が無理だから ｵﾜﾀ

出だしから「へえ～～～～～」なんだよなあ　すごい

双曲線でいいのか、、、、まじか、、、

遠近感の部分よりも、1:00からこの機能の内容がわからない。 視点に対して、予めマップを持つの？

数学って役に立つんだなぁ

そう言う遊び心を学ぶキミは 天才だよ(≧▽≦)

はじめまして！ 質問なのですが、マップに色を付けるにはどうしたら良いでしょうか…？

面積が長さの2乗に反比例するからf(v)も-2乗になるかなと思ったけど、-1なことには何か理由があるのか？

視点を動かすところの説明が欲しいかな。 描画する範囲が決まってから上下画面のピクセルを対応づけると思いますが。 そもそもどうやって描画する範囲が決まるのでしょう？

イイ！　すごくイイ！

モードセブンとか思い出したｗ

Mode7の説明かぁ

でもこの技術ってマリオカートとスタフォとエフゼロぐらいでしか使われてないよね

数学って何に使うの？ってよく聞きますけど、プログラミングやる上では必須科目だと思います。(最低限数学Cまで学習すべきかなぁと)

弟子入り志願します。

エフゼロやん！

聖剣伝説2，3のマップこういう感じか、誰かドット聖剣5作って

ナニイッテンノカワカンネ

うん、何を言ってるのかさっぱりわからん！　なんで俺はこの動画をみてるんだろう・・・

いつからプログラミングを始めたんですか？

BGMなに？

いや、プログラムに数学がー。とか、仕様／設計決まってないとコード組めません。と等しい技術レベルな気がするのですが…(￣ー￣)

BGMがきたない

小学生の僕にはベクトルとかわかりません。もっとわかりやすいようにしてください

BGM…

はじめまして。JavaScript勉強させて頂いております。 とてもわかりやすく感動しております^^素晴らしい。 サンプルファイルについてお尋ねします。 オフライン学習用にサンプルファイルをダウンロード、 実行すると、Loading...のまま動作しないサンプルがあります。 以下、動作OK、NGリストです。 解決方法はございますか？お教え頂けたら幸いです。 ◆動作環境 Windows10 Home ブラウザ：Google Chrome バージョン: 87.0.4280.141 長文失礼しました。。 ---------------------動作OK--------------------- 01. 高校数学とJavaScriptだけ。FPSの作り方 #1【ゲームプログラミング】【ゲーム開発】 retrofps_part1 02. 高校数学とJavaScriptだけ。FPSの作り方 #2 三角関数で歪み補正【ゲームプログラミング】【ゲーム開発】 retrofps_part2 03. 高校数学とJavaScriptだけ。FPSの作り方 #3 剰余(mod)の使い方【ゲームプログラミング】【ゲーム開発】 retrofps_part3 (X)04. 元ゲーム会社のプログラマー、テトリス何分で作れる？【JavaScriptプログラミング】 tetris 05. 自機狙い弾でわかる、ベクトルと逆正接【ゲーム・プログラミング講座】【JavaScriptサンプル】 StgSniper 06. レトロゲームっぽい画面を作る 【ゲーム・プログラミング講座】【JavaScriptサンプル】 IsoTile ---------------------動作NG--------------------- (X)07. 【インストール不要】JavaScript + p5.js まるわかり講座、前編。【ゲーム・プログラミング】【初心者向け入門】 blockbreak_part1 (X)08. 【インストール不要】JavaScript + p5.js まるわかり講座、後編。【ゲーム・プログラミング】【初心者向け入門】 blockbreak_part2_classified blockbreak_part2_final blockbreak_part2_reflection (X)09. 「元に戻す」のしくみ 【ゲーム・プログラミング】【JavaScriptサンプル】 sokoban (X)10. 【レトロゲーム再現】スーパーファミコンの疑似3D 【ゲーム・プログラミング】【JavaScriptサンプル】 retrokart (X)11. ハッカーなら会社救える説 【プログラミング実況】【JavaScript】 mine (X)12. JavaScript + p5.js まるわかり講座、補足編。 blockbreak_part3 (X)13. 高校数学でマンデルブロ集合を描いてみた 【プログラミング実況解説】 mandelbrot (X)14. トルネコや風来のシレンができるまで 【ハイテンポ・プログラミング】 rogue

難しく考えすぎ ラスタ毎にスクロール位置と回転・拡縮パラメータ変更しているだけ ラスタはPALで240本程なので、計算済のパラメータを240個ほど持っておけば済みます。1ラスタ毎に毎回計算する必要はありません。スクロール位置だけ加算すればOKです。

GeoGebraは商用利用駄目な。

わけわかめ

うーん。わからん

ゆゆうたみたいな喋り方やな