Розмір відео: 1280 X 720853 X 480640 X 360
Показувати елементи керування програвачем
Автоматичне відтворення
Автоповтор
★豆知識★スーパーファミコンの「画像を切り取る」機能はモード7と呼ばれており、1枚の画像にだけアフィン変換（並行移動・拡大縮小・回転）をかけられる……という機能です。アフィン変換だけでは動画のような変換はできませんが、ラスタースクロールの要領でスキャンラインごとに（横1ラインごとに）異なる変換をかけられるので、工夫すれば動画のような変換もできました。さらに深く知りたい方は、こちらの動画（英語）を見てみてください。とても良くまとまっています。ua-cam.com/video/3FVN_Ze7bzw/v-deo.html
レトロなレースゲームもわりと好きだからこれまで見た中で一番楽しめた。
20年以上前に遊んでたゲームで、ずっと疑似3Dの描画ロジックが疑問だったけど、この動画でしっくり来た
製図で投影するのと似たような感じかな
うわぁぁぁ、マリオカートこうやって擬似3Dだったんだ！！メチャクチャ納得した！！！！ありがとうございます！！
本当にすごい…プログラマーに憧れているんですが、ヘロンさんの動画を見て逆に挫折しそうです…
これが出来なきゃプログラマーにはなれん！……なんてことは無いので、安心してください😙今時はこういう計算は、Unityとかが代わりにやってくれます。仕事でこんな計算をする機会はほとんどないです。じゃあなぜこんな動画を作ったのかというと、単に格好いいからです🤔
ゲームのプログラマーなら数学知識必須、SEなら文法力
同じこと思ってる人いてよかった。仮に理解しても、こんな発想でこんな論理的に行動できないから応用できない。
F-ZERO当時衝撃でした、グッジョブ！今後も数理わかりやすくお願いしまーす！！ 私の昔の自作ゲームのうち物理＆３ＤっぽいのはBASICで弾道計算＆高さで球の大きさ変えたコレかなぁ： ua-cam.com/play/PLzB6S7MaIGGQHEQS3esTUI7NzYSN0C2qr.html
神動画にであった。ありがとう
視点を動かすところの説明が欲しいかな。描画する範囲が決まってから上下画面のピクセルを対応づけると思いますが。そもそもどうやって描画する範囲が決まるのでしょう？
本人ではなく、横からすみません。視点の回転は、見ている方向ベクトルを回転させるだけで出来ます。cos(コサイン), sin(サイン)の式を使います。視点の位置が原点にない場合は、原点で回転させたベクトルに対して視点の位置ベクトル(x,y)をそれぞれ加算します。ちなみに描画する範囲は、動画の2:10あたりの左のベクトルLと右のベクトルRの範囲で決まります。
2:12からわかんないーwwww
マリカもそうだけどFF6の飛行船乗ったときを思い出した
なんだこれｗｗｗｗ疑似3Dってどうやって作画しているのか意味不明だったけど、こんなかんたんな数式で表せるのか・・・これはすごい。
普段Unityで開発してるのですが最近このチャンネルを見つけ勉強させていただいてます。とても勉強になる動画ばっかりで最高です
本当に弟子入りさせていただきたいぐらい…数学知識とプログラミングはやっぱり繋がるものだとは思いますがどう言ったことを意識して参考になる文献とかを探して居ますか？
実際にこういう風に紐付けながら解説されている動画はこのチャンネルでしか見たことないので参考になるサイト等あれば教えていただきたいです。
お褒めの言葉ありがとうございます＾＾自分もまだまだ勉強中🐣なので師匠にはなれませんが、、参考文献は、webサイトなら○×つくろードットコムさん marupeke296.com/youtubeなら、The Coding Trainチャンネル、javidx9チャンネル等ですね。これらのチャンネルでは数学とプログラミングを紐付けて解説してます。英語ですが必見です。Unityでの開発応援しています👍
はじめまして！質問なのですが、マップに色を付けるにはどうしたら良いでしょうか…？
. // 下画面を描画 noStroke(); fill(255); // すべてのピクセルに対し…… for(let p2=320; p2
@@heron-no-suugaku そうなんですね！ありがとうございます！
すっごくわかりやすい!!
結論 : プログラマーは神
遠近感の部分よりも、1:00からこの機能の内容がわからない。視点に対して、予めマップを持つの？
すごいプログラマ、カッコいいプログラマって技術があるのもそうだけど、どう実装するのかがすぐに思いつく人だよなぁ
この動画は凄い！！！なんか長いこと謎だった手品のネタバラシを見た気分！！
こんな擬似的な手法に高低差のあるガイドビームとか加えたパイロットウイングスのプログラミングは見事としか言いようがないですね。
素晴らしい解説です。この考え方を、クセの強かったSFC上にどうやって実装したのかが、すごく気になります！
出だしから「へえ～～～～～」なんだよなあ すごい
すごい面白かったです
非線形って聞いたときに指数対数の関数を思い浮かべたけど、それより計算量が少ない双曲線函数のほうが描画が早いか。
こういう風になってたのか！長年の謎が解けましたありがとうございます
直感や閃きでプログラムでゲーム作ってた人間にも分かり易くて凄い動画見つけちゃったな。数学的にってのがどうにもダメダメで…プログラム動かしてとりあえずこう動くんだよと説明するしかない。これを見てるとJavaScriptの世界がめっちゃ面白そうだなぁ。
キャラクターの判定とマップを手打ちからエディターで作成読み込みでレースは出来ないまでも…らしい形は作れそう。こういう凄いの紹介してんだもんなぁ。時代はもう普通一般でも実践的なプログラミングの時代なんだなーと感じる。ソースも見てみましたが割と記述した事が無くても比較的他の言語のノリで理解出来ますね。「This」で定義するのとか逆に分かりやすい…寧ろこっちから学校で学んで見たかったな。VBからC++、Javaの基礎程度まで…動画主に直接師事出来た人は幸せものですな。笑
レースゲームもそうなんですが、疑似３Dの名作といえばフライトシミュレーションの「パイロットウイングス」とか、まんま動画中でもやってたソースの高さだとかの概念加えるだけで出来ちゃうんすね。あのゲームの凄さが今更ながら改めて凄いなと思ってしまいました。当たり判定式は既存の物でいいけれど描画面で知識が欠落していて…どうやってんだろうと思っていましたが、まさかプログラムを離れて久しく興味を持って開いた動画で答えの一端を知ってしまう事になるとは。それを教える事が出来る人は本当偉大だなぁ。往年の名作もどきとか作ってみたくなりますよ。
すごい、こうやって描画するときれいになるんだ
SFCゲームソフトの開発現場で働いていたので、懐かしく拝見しました。プログラマじゃなく企画屋だったので、数式とかはさっぱりですが。モード7とかの用語が懐かしすぎる……
すごい！すごい！！高校出たけど全然数学わからんｗ ベクトルって何？スキル１２０％に無理やり上げて改造してみました；；サンプルプログラムのページに飛び（リスト左上の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キーでブレーキ ←→キーでハンドルそうさが出来るよ
サンプル共有あざます～こういうの待ってました🐤もっと簡単に共有できる方法も↓から2分間くらいでまとめているので、気が向いたら見てみてください🐤ua-cam.com/video/rdGKg6VbFBo/v-deo.html
無駄を省いたかなりうまい教え方だなぁ現役の学生ならかなりスキルアップできそうな内容だなと数学が苦手な俺でも解る。
ほんとすげえええ
関数には気をつけよう！
45くらいん BGMがゆうさく
いやめちゃくちゃ面白かったです。
Despite the video being in Japanese and UA-cam having a very janky subtitle translation, this video is surprisingly very easy to understand.
やっぱプログラムに数学は必要なんだよなぁ
プログラマーになりたいけど数学が無理だからｵﾜﾀ
スターフォックスの話かと思ったら違ったｗｗ
この話昔任天堂関連の仕事してた時現地の人に聞いたなぁ…
1:26近年のマリオカートはこんな感じにコースがあえて歪んだりしてる
すみません、とても分かりにくいなというのが正直な感想です。たぶん「画面上の任意のピクセルに対応するマップ上の座標をどうやって求めるか？」の話をしているはずなので素直に(x, y)の式で書いた方が分かりやすかったんじゃないでしょうか？h, vはマップ上の任意の点SをLとRで表現するための値だったはずなのにf(v)なんて関数が出てくるから非常に混乱します。少なくとも私はvって一体何だったっけ？ってなりました。最初に書いた通り画面上のピクセルに対応するマップ上の座標を求める変換式を考えているのだから、これ本来はyの関数f(y)と表現すべきだったんじゃないでしょうか？
この動画のテーマは「2Dのマップデータ(上画面)を3Dっぽく表示する(下画面)にはどーすりゃええの？」やる事ぁ一緒でも論理が逆だからf(v)の変換が唐突に感じるんやろあと、(h,v)はhorizontial(水平)とvartical(垂直)で媒介変数のデファクトスタンダードやで
でもこの技術ってマリオカートとスタフォとエフゼロぐらいでしか使われてないよね
パイロットウイングス🥺
@@un_chi あれSFCからあったんか64からだと思ってたわ
この技術、思い出してみると色々なソフトに使われてますねファイナルファンタジーや聖剣伝説など、帆船や飛空艇移動する際などワールドマップを斜め上から見下ろす視点やSFC最初期の傑作「アクトレイザー」で空から地上へグルグル回転しながら降下するシーンにも使われているのではないかと
@@gwingggg5 なんかffにこれ使われてるシーンがあった気がする
面積が長さの2乗に反比例するからf(v)も-2乗になるかなと思ったけど、-1なことには何か理由があるのか？
めちゃくちゃ感動しました。マリオカートとかも複雑に処理していた訳では無いんですね。擬似的な3Dに変換するロジックを間に挟むだけでゲーム体験がこんなにも変わるなんて感動しました。ネットの特定班とかは逆に立体から平面に置き換えて住宅を特定してるのかもしれないですね笑
特定班がその手法を使うこともあるみたいです。地図と対応するグリッド作って三角関数でうんたらかんたら
正にそうですね↓ua-cam.com/video/9ZgEEkUPL00/v-deo.html
まさかのリアル特定班の話にまで派生するとは…計算出来るっていうのは本当面白いなぁ。そりゃ特定されるわ…
まんまF-ZEROやマリカの描画ですね！ずっとどういう計算か気になってました。色々いじって遊んでみますｗあと、いくつか動画を観て、とても為になるので登録しました！色々参考にさせていただきます。
BGMなに？
f-zero好きやで生み出してくれた感謝は任天堂にはあるけど見捨てたのは死ぬまで許せないわ
任天堂「恨むのなら出来の良い弟（マリカー）を恨むんだな…」
俺が任天堂に入社して復活させるから待っとけよ～
天地創造のフィールド、クロノトリガー、聖剣2、FF5いろんなゲームであったね
なにこれめっちゃ面白い
モードセブンとか思い出したｗ
ナニイッテンノカワカンネ
It would be so nice to have English subtitles :( so bad I don't speak Japanese!
ゆうさくのbgm
わかったけどね
視点の高さをLとしてf(v)=L•tan(vπ/2)みたいな
これだと視点から真下まで見えてる事になるので視線の水平から-45度より下を切り落とさないといけないからtanの位相を45度分変えて、変数vは45度より先の部分の値を返すようにしたいからf(v)=L・tan(vπ/4+π/4)=L・tan{(v+1)π/4}が正しいなそう考えると1/xとtan(x)は割といい近似だしnの値が視点の高さになるのも納得
難しく考えすぎラスタ毎にスクロール位置と回転・拡縮パラメータ変更しているだけラスタはPALで240本程なので、計算済のパラメータを240個ほど持っておけば済みます。1ラスタ毎に毎回計算する必要はありません。スクロール位置だけ加算すればOKです。
この動画の趣旨って擬似2D変換の数学を学ぶ事だから貴方の言う「計算済みのパラメータ240個用意する」フレーム毎処理までしか語っとらんのでは？ってかファミコンってラスター毎の割り込み処理してたんか。なんか画面グニャりそう
@@HINOKI_open-air この頃のCPUでは掛け算割り算が非常に遅く、数学的な計算をしていては何もできなくなります。掛け算割り算は加減算に展開するか、事前に計算した近似値で代替することになります。実際の画面を見てみれば、かなりいいかげんな計算をして歪んだ映像になっていることが見て取れますが、それでもゲームとして成立しています。現在の一般的なPCの数万分の1未満の計算能力しか無いことを考慮しなければなりません。任天堂系は、ゼロスプライト割込みをラスタ割込みとして利用します。特定のスプライトが描画される際に割込みがかかり、割込み処理内でスプライトの位置を変更することで再割込みを発生させます。セガ系はラスタ毎に位置情報を読み込むモードを持っていて、VRAMの一部を割り当ててラスタテーブルにします。
@@m.mishima9485 >数学的処理に時間かかり過ぎるそれってつまりこの動画みたいな『任意位置、任意方向の描画』は端っから無理でやってないという理解であってるでしょうか？カメラの軌道を固定して、コース情報を事前処理で縦に長いスクロールに落とし込んでる、みたいな感じでしょうか？
@@HINOKI_open-air 最も基本になるのはDDAというアルゴリズムです。ラスタ描画ハードでは、全てを水平線に分割する必要があるので、DDAを元に始点位置などを求めます。DDA自体が、数学の式展開により求められる方法だという解釈もありますが、コンピュータ上における数学は実数のみで、無限の概念や虚数などは存在できません。微積の概念から無限を取り去った場合、deltaはどのようになるでしょうか？ それがコンピュータ上における数学となり、考え方となります。
双曲線でいいのか、、、、まじか、、、
高さ変えるのは面倒くさそうだなぁと思ったら簡単だった
このやり方をスーファミ発売前に完成させてるからすごいよな…まあ終盤はポリゴンも出てくるんだけど何言ってるかわかんねぇけど(高3文系脳の理系クラス)
数学って役に立つんだなぁ
BGMがきたない
小学生の僕にはベクトルとかわかりません。もっとわかりやすいようにしてください
すげえ
いい講座ありがとうございます。だけど文系である私としては公式が難しいですわ…
理解できなくてもなるほどと思えれば十分
Mode7の説明かぁ
聖剣伝説2，3のマップこういう感じか、誰かドット聖剣5作って
美しい数字だ。
うん、何を言ってるのかさっぱりわからん！ なんで俺はこの動画をみてるんだろう・・・
はじめまして。JavaScript勉強させて頂いております。とてもわかりやすく感動しております^^素晴らしい。サンプルファイルについてお尋ねします。オフライン学習用にサンプルファイルをダウンロード、実行すると、Loading...のまま動作しないサンプルがあります。以下、動作OK、NGリストです。解決方法はございますか？お教え頂けたら幸いです。◆動作環境Windows10 Homeブラウザ：Google Chrome バージョン: 87.0.4280.141長文失礼しました。。---------------------動作OK---------------------01. 高校数学とJavaScriptだけ。FPSの作り方 #1【ゲームプログラミング】【ゲーム開発】retrofps_part102. 高校数学とJavaScriptだけ。FPSの作り方 #2 三角関数で歪み補正【ゲームプログラミング】【ゲーム開発】retrofps_part203. 高校数学とJavaScriptだけ。FPSの作り方 #3 剰余(mod)の使い方【ゲームプログラミング】【ゲーム開発】retrofps_part3(X)04. 元ゲーム会社のプログラマー、テトリス何分で作れる？【JavaScriptプログラミング】tetris05. 自機狙い弾でわかる、ベクトルと逆正接【ゲーム・プログラミング講座】【JavaScriptサンプル】StgSniper06. レトロゲームっぽい画面を作る 【ゲーム・プログラミング講座】【JavaScriptサンプル】IsoTile---------------------動作NG---------------------(X)07. 【インストール不要】JavaScript + p5.js まるわかり講座、前編。【ゲーム・プログラミング】【初心者向け入門】blockbreak_part1(X)08. 【インストール不要】JavaScript + p5.js まるわかり講座、後編。【ゲーム・プログラミング】【初心者向け入門】blockbreak_part2_classifiedblockbreak_part2_finalblockbreak_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
検証ありがとうございます。こちらでも再現しますね。セキュリティ上の理由で、JavaScriptは基本的に、ファイルを開いただけでは実行できないようになっているのですが古いバージョンのp5.jsはたまたま動いてしまうようです。見た感じ、動作OKのものは古いバージョンを使っていますね。解決策は、いわゆる「ローカルサーバー」を立てることです。Google Chromeを使っているなら、↓を導入するのが一番簡単です。サンプルファイルの入っているフォルダを指定して、出てきたリンクをクリックするだけで遊べるはずです。chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja
こんばんは。ローカルで動作しました！！！早々にお返事頂きありがとうございます。なるほど~ローカルサーバーを立てて実行なのですね！この辺は全く未知の世界ですが、まずは、プログラミンから勉強します。今後とも、どうぞ、よろしくお願いします^^
いつからプログラミングを始めたんですか？
小学生の頃ですね。ひまわりという言語を最初に触り、そこからHSPやUnityへ移行しつつゲームをよく作っていました。ですからプログラミング歴十数年！ｗと言いたいのですが……数学が全くできなかったので、プログラムもゲームの出来も見るに耐えないものでした。そんな状況がつい1年前まで続いていたので、正直その十数年は無かったようなものです。実質プログラミング歴1年ですね。見方を変えれば、数学さえできればプログラミングは1年程度でここまで上達するとも言えます。😎
@@heron-no-suugaku 挨拶も無い無礼な私の質問に対して素早く丁寧にお返事をくださり、ありがとうございます。私は、3週間前にプログラミングを始めてその面白さを知り、つい一昨日Javaで「日本語を英訳させるクイズをランダムで出題するアプリ」を作り終えた、22歳の男です。何か新しい気づきを得ることができないかとUA-camを見ていたところ、あなたを知りました。ゲーム「Call of Duty」歴9年の僕にとって、馴染みのあるFPSの作成を通して数学の重要性を教えてくれるあなたは、とてもありがたい存在です。これからも良質な動画投稿をよろしくお願いします。
@@heron-no-suugaku マジかぁ…笑遍歴が面白いなぁ。数学が分かると弾幕STGとかの弾幕デザインとか出来るのが分かってるけど全然私も数学はダメだった。そんな所から初めてこの動画の内容までとなると本当凄いなぁ。
そう言う遊び心を学ぶキミは 天才だよ(≧▽≦)
BGM…
イイ！ すごくイイ！
いや、プログラムに数学がー。とか、仕様／設計決まってないとコード組めません。と等しい技術レベルな気がするのですが…(￣ー￣)
弟子入り志願します。
全てを理解できたわけではないですが、なるほどと思いました。名作天地創造の裏世界での、歪んでおるようなマップ表現も、今回のテクニックを応用したものなんだなと思って感動しました。まるで裏話を聞いているようで、ワクワクしますね。これからも動画楽しみにしています！ヘロンさんの影響で、数学の勉強を始めましたw
エフゼロやん！
数学って何に使うの？ってよく聞きますけど、プログラミングやる上では必須科目だと思います。(最低限数学Cまで学習すべきかなぁと)
GeoGebraは商用利用駄目な。
わけわかめ
うーん。わからん
ゆゆうたみたいな喋り方やな
擬似3Dには気をつけよう！！
★豆知識★
スーパーファミコンの「画像を切り取る」機能はモード7と呼ばれており、
1枚の画像にだけアフィン変換（並行移動・拡大縮小・回転）をかけられる……という機能です。
アフィン変換だけでは動画のような変換はできませんが、
ラスタースクロールの要領でスキャンラインごとに（横1ラインごとに）異なる変換をかけられるので、工夫すれば動画のような変換もできました。
さらに深く知りたい方は、こちらの動画（英語）を見てみてください。とても良くまとまっています。
ua-cam.com/video/3FVN_Ze7bzw/v-deo.html
レトロなレースゲームもわりと好きだからこれまで見た中で一番楽しめた。
20年以上前に遊んでたゲームで、ずっと疑似3Dの描画ロジックが疑問だったけど、この動画でしっくり来た
製図で投影するのと似たような感じかな
うわぁぁぁ、マリオカートこうやって擬似3Dだったんだ！！メチャクチャ納得した！！！！
ありがとうございます！！
本当にすごい…
プログラマーに憧れているんですが、ヘロンさんの動画を見て逆に挫折しそうです…
これが出来なきゃプログラマーにはなれん！……なんてことは無いので、安心してください😙
今時はこういう計算は、Unityとかが代わりにやってくれます。仕事でこんな計算をする機会はほとんどないです。
じゃあなぜこんな動画を作ったのかというと、単に格好いいからです🤔
ゲームのプログラマーなら数学知識必須、SEなら文法力
同じこと思ってる人いてよかった。
仮に理解しても、こんな発想でこんな論理的に行動できないから応用できない。
F-ZERO当時衝撃でした、グッジョブ！今後も数理わかりやすくお願いしまーす！！
私の昔の自作ゲームのうち物理＆３ＤっぽいのはBASICで弾道計算＆高さで球の大きさ変えたコレかなぁ：
ua-cam.com/play/PLzB6S7MaIGGQHEQS3esTUI7NzYSN0C2qr.html
神動画にであった。ありがとう
視点を動かすところの説明が欲しいかな。
描画する範囲が決まってから上下画面のピクセルを対応づけると思いますが。
そもそもどうやって描画する範囲が決まるのでしょう？
本人ではなく、横からすみません。
視点の回転は、見ている方向ベクトルを回転させるだけで出来ます。
cos(コサイン), sin(サイン)の式を使います。
視点の位置が原点にない場合は、原点で回転させたベクトルに対して視点の位置ベクトル(x,y)をそれぞれ加算します。
ちなみに描画する範囲は、動画の2:10あたりの左のベクトルLと右のベクトルRの範囲で決まります。
2:12からわかんないーwwww
マリカもそうだけどFF6の飛行船乗ったときを思い出した
なんだこれｗｗｗｗ
疑似3Dってどうやって作画しているのか意味不明だったけど、こんなかんたんな数式で表せるのか・・・
これはすごい。
普段Unityで開発してるのですが最近このチャンネルを見つけ勉強させていただいてます。
とても勉強になる動画ばっかりで最高です
本当に弟子入りさせていただきたいぐらい…
数学知識とプログラミングはやっぱり繋がるものだとは思いますがどう言ったことを意識して参考になる文献とかを探して居ますか？
実際にこういう風に紐付けながら解説されている動画はこのチャンネルでしか見たことないので参考になるサイト等あれば教えていただきたいです。
お褒めの言葉ありがとうございます＾＾
自分もまだまだ勉強中🐣なので師匠にはなれませんが、、
参考文献は、webサイトなら○×つくろードットコムさん marupeke296.com/
youtubeなら、The Coding Trainチャンネル、javidx9チャンネル等ですね。
これらのチャンネルでは数学とプログラミングを紐付けて解説してます。英語ですが必見です。
Unityでの開発応援しています👍
はじめまして！
質問なのですが、マップに色を付けるにはどうしたら良いでしょうか…？
.
// 下画面を描画
noStroke();
fill(255);
// すべてのピクセルに対し……
for(let p2=320; p2
@@heron-no-suugaku
そうなんですね！
ありがとうございます！
すっごくわかりやすい!!
結論 : プログラマーは神
遠近感の部分よりも、1:00からこの機能の内容がわからない。
視点に対して、予めマップを持つの？
すごいプログラマ、カッコいいプログラマって
技術があるのもそうだけど、
どう実装するのかがすぐに思いつく人だよなぁ
この動画は凄い！！！
なんか長いこと謎だった手品のネタバラシを見た気分！！
こんな擬似的な手法に高低差のあるガイドビームとか加えたパイロットウイングスのプログラミングは見事としか言いようがないですね。
素晴らしい解説です。
この考え方を、クセの強かったSFC上にどうやって実装したのかが、すごく気になります！
出だしから「へえ～～～～～」なんだよなあ すごい
すごい面白かったです
非線形って聞いたときに指数対数の関数を思い浮かべたけど、それより計算量が少ない双曲線函数のほうが描画が早いか。
こういう風になってたのか！
長年の謎が解けました
ありがとうございます
直感や閃きでプログラムでゲーム作ってた人間にも分かり易くて凄い動画見つけちゃったな。
数学的にってのがどうにもダメダメで…プログラム動かしてとりあえずこう動くんだよと説明するしかない。
これを見てるとJavaScriptの世界がめっちゃ面白そうだなぁ。
キャラクターの判定とマップを手打ちからエディターで作成読み込みでレースは出来ないまでも…らしい形は作れそう。
こういう凄いの紹介してんだもんなぁ。時代はもう普通一般でも実践的なプログラミングの時代なんだなーと感じる。
ソースも見てみましたが割と記述した事が無くても比較的他の言語のノリで理解出来ますね。
「This」で定義するのとか逆に分かりやすい…寧ろこっちから学校で学んで見たかったな。
VBからC++、Javaの基礎程度まで…動画主に直接師事出来た人は幸せものですな。笑
レースゲームもそうなんですが、疑似３Dの名作といえばフライトシミュレーションの「パイロットウイングス」とか、まんま動画中でもやってたソースの高さだとかの概念加えるだけで出来ちゃうんすね。あのゲームの凄さが今更ながら改めて凄いなと思ってしまいました。
当たり判定式は既存の物でいいけれど描画面で知識が欠落していて…どうやってんだろうと思っていましたが、まさかプログラムを離れて久しく興味を持って開いた動画で答えの一端を知ってしまう事になるとは。
それを教える事が出来る人は本当偉大だなぁ。往年の名作もどきとか作ってみたくなりますよ。
すごい、こうやって描画するときれいになるんだ
SFCゲームソフトの開発現場で働いていたので、懐かしく拝見しました。プログラマじゃなく企画屋だったので、数式とかはさっぱりですが。
モード7とかの用語が懐かしすぎる……
すごい！すごい！！
高校出たけど全然数学わからんｗ ベクトルって何？
スキル１２０％に無理やり上げて改造してみました；；
サンプルプログラムのページに飛び（リスト左上の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キーでブレーキ ←→キーでハンドルそうさが出来るよ
サンプル共有あざます～こういうの待ってました🐤
もっと簡単に共有できる方法も↓から2分間くらいでまとめているので、気が向いたら見てみてください🐤
ua-cam.com/video/rdGKg6VbFBo/v-deo.html
無駄を省いたかなりうまい教え方だなぁ現役の学生ならかなりスキルアップできそうな内容だなと数学が苦手な俺でも解る。
ほんとすげえええ
関数には気をつけよう！
45くらいん BGMがゆうさく
いやめちゃくちゃ面白かったです。
Despite the video being in Japanese and UA-cam having a very janky subtitle translation, this video is surprisingly very easy to understand.
やっぱプログラムに数学は必要なんだよなぁ
プログラマーになりたいけど数学が無理だから
ｵﾜﾀ
スターフォックスの話かと思ったら違ったｗｗ
この話昔任天堂関連の仕事してた時現地の人に聞いたなぁ…
1:26
近年のマリオカートはこんな感じにコースがあえて歪んだりしてる
すみません、とても分かりにくいなというのが正直な感想です。
たぶん「画面上の任意のピクセルに対応するマップ上の座標をどうやって求めるか？」の話をしているはずなので素直に(x, y)の式で書いた方が分かりやすかったんじゃないでしょうか？
h, vはマップ上の任意の点SをLとRで表現するための値だったはずなのにf(v)なんて関数が出てくるから非常に混乱します。少なくとも私はvって一体何だったっけ？ってなりました。最初に書いた通り画面上のピクセルに対応するマップ上の座標を求める変換式を考えているのだから、これ本来はyの関数f(y)と表現すべきだったんじゃないでしょうか？
この動画のテーマは
「2Dのマップデータ(上画面)を3Dっぽく表示する(下画面)にはどーすりゃええの？」
やる事ぁ一緒でも論理が逆だからf(v)の変換が唐突に感じるんやろ
あと、(h,v)はhorizontial(水平)とvartical(垂直)で媒介変数のデファクトスタンダードやで
でもこの技術ってマリオカートとスタフォとエフゼロぐらいでしか使われてないよね
パイロットウイングス🥺
@@un_chi
あれSFCからあったんか64からだと思ってたわ
この技術、思い出してみると色々なソフトに使われてますね
ファイナルファンタジーや聖剣伝説など、帆船や飛空艇移動する際などワールドマップを斜め上から見下ろす視点や
SFC最初期の傑作「アクトレイザー」で空から地上へグルグル回転しながら降下するシーンにも使われているのではないかと
@@gwingggg5
なんかffにこれ使われてるシーンがあった気がする
面積が長さの2乗に反比例するからf(v)も-2乗になるかなと思ったけど、-1なことには何か理由があるのか？
めちゃくちゃ感動しました。
マリオカートとかも複雑に処理していた訳では無いんですね。
擬似的な3Dに変換するロジックを間に挟むだけでゲーム体験がこんなにも変わるなんて感動しました。
ネットの特定班とかは逆に立体から平面に置き換えて住宅を特定してるのかもしれないですね笑
特定班がその手法を使うこともあるみたいです。地図と対応するグリッド作って三角関数でうんたらかんたら
正にそうですね↓
ua-cam.com/video/9ZgEEkUPL00/v-deo.html
まさかのリアル特定班の話にまで派生するとは…計算出来るっていうのは本当面白いなぁ。そりゃ特定されるわ…
まんまF-ZEROやマリカの描画ですね！
ずっとどういう計算か気になってました。色々いじって遊んでみますｗ
あと、いくつか動画を観て、とても為になるので登録しました！
色々参考にさせていただきます。
BGMなに？
f-zero好きやで
生み出してくれた感謝は任天堂にはあるけど見捨てたのは死ぬまで許せないわ
任天堂「恨むのなら出来の良い弟（マリカー）を恨むんだな…」
俺が任天堂に入社して復活させるから待っとけよ～
天地創造のフィールド、クロノトリガー、聖剣2、FF5いろんなゲームであったね
なにこれめっちゃ面白い
モードセブンとか思い出したｗ
ナニイッテンノカワカンネ
It would be so nice to have English subtitles :( so bad I don't speak Japanese!
ゆうさくのbgm
わかったけどね
視点の高さをLとして
f(v)=L•tan(vπ/2)
みたいな
これだと視点から真下まで見えてる事になるので視線の水平から-45度より下を切り落とさないといけないからtanの位相を45度分変えて、変数vは45度より先の部分の値を返すようにしたいから
f(v)=L・tan(vπ/4+π/4)=L・tan{(v+1)π/4}
が正しいな
そう考えると1/xとtan(x)は割といい近似だしnの値が視点の高さになるのも納得
難しく考えすぎ
ラスタ毎にスクロール位置と回転・拡縮パラメータ変更しているだけ
ラスタはPALで240本程なので、計算済のパラメータを240個ほど持っておけば済みます。1ラスタ毎に毎回計算する必要はありません。スクロール位置だけ加算すればOKです。
この動画の趣旨って擬似2D変換の数学を学ぶ事だから貴方の言う「計算済みのパラメータ240個用意する」フレーム毎処理までしか語っとらんのでは？
ってかファミコンってラスター毎の割り込み処理してたんか。なんか画面グニャりそう
@@HINOKI_open-air この頃のCPUでは掛け算割り算が非常に遅く、数学的な計算をしていては何もできなくなります。掛け算割り算は加減算に展開するか、事前に計算した近似値で代替することになります。実際の画面を見てみれば、かなりいいかげんな計算をして歪んだ映像になっていることが見て取れますが、それでもゲームとして成立しています。現在の一般的なPCの数万分の1未満の計算能力しか無いことを考慮しなければなりません。
任天堂系は、ゼロスプライト割込みをラスタ割込みとして利用します。特定のスプライトが描画される際に割込みがかかり、割込み処理内でスプライトの位置を変更することで再割込みを発生させます。
セガ系はラスタ毎に位置情報を読み込むモードを持っていて、VRAMの一部を割り当ててラスタテーブルにします。
@@m.mishima9485
>数学的処理に時間かかり過ぎる
それってつまりこの動画みたいな『任意位置、任意方向の描画』は端っから無理でやってないという理解であってるでしょうか？
カメラの軌道を固定して、コース情報を事前処理で縦に長いスクロールに落とし込んでる、みたいな感じでしょうか？
@@HINOKI_open-air 最も基本になるのはDDAというアルゴリズムです。ラスタ描画ハードでは、全てを水平線に分割する必要があるので、DDAを元に始点位置などを求めます。
DDA自体が、数学の式展開により求められる方法だという解釈もありますが、コンピュータ上における数学は実数のみで、無限の概念や虚数などは存在できません。
微積の概念から無限を取り去った場合、deltaはどのようになるでしょうか？ それがコンピュータ上における数学となり、考え方となります。
双曲線でいいのか、、、、まじか、、、
高さ変えるのは面倒くさそうだなぁと思ったら簡単だった
このやり方をスーファミ発売前に完成させてるからすごいよな…
まあ終盤はポリゴンも出てくるんだけど
何言ってるかわかんねぇけど(高3文系脳の理系クラス)
数学って役に立つんだなぁ
BGMがきたない
小学生の僕にはベクトルとかわかりません。もっとわかりやすいようにしてください
すげえ
いい講座ありがとうございます。だけど文系である私としては公式が難しいですわ…
理解できなくてもなるほどと思えれば十分
Mode7の説明かぁ
聖剣伝説2，3のマップこういう感じか、誰かドット聖剣5作って
美しい数字だ。
うん、何を言ってるのかさっぱりわからん！ なんで俺はこの動画をみてるんだろう・・・
はじめまして。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
検証ありがとうございます。こちらでも再現しますね。
セキュリティ上の理由で、JavaScriptは基本的に、ファイルを開いただけでは実行できないようになっているのですが
古いバージョンのp5.jsはたまたま動いてしまうようです。
見た感じ、動作OKのものは古いバージョンを使っていますね。
解決策は、いわゆる「ローカルサーバー」を立てることです。
Google Chromeを使っているなら、↓を導入するのが一番簡単です。
サンプルファイルの入っているフォルダを指定して、出てきたリンクをクリックするだけで遊べるはずです。
chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja
こんばんは。ローカルで動作しました！！！
早々にお返事頂きありがとうございます。
なるほど~ローカルサーバーを立てて実行なのですね！
この辺は全く未知の世界ですが、まずは、プログラミンから勉強します。
今後とも、どうぞ、よろしくお願いします^^
いつからプログラミングを始めたんですか？
小学生の頃ですね。ひまわりという言語を最初に触り、そこからHSPやUnityへ移行しつつゲームをよく作っていました。
ですからプログラミング歴十数年！ｗと言いたいのですが……数学が全くできなかったので、プログラムもゲームの出来も見るに耐えないものでした。
そんな状況がつい1年前まで続いていたので、正直その十数年は無かったようなものです。実質プログラミング歴1年ですね。
見方を変えれば、数学さえできればプログラミングは1年程度でここまで上達するとも言えます。😎
@@heron-no-suugaku
挨拶も無い無礼な私の質問に対して素早く丁寧にお返事をくださり、ありがとうございます。
私は、3週間前にプログラミングを始めてその面白さを知り、つい一昨日Javaで「日本語を英訳させるクイズをランダムで出題するアプリ」を作り終えた、22歳の男です。
何か新しい気づきを得ることができないかとUA-camを見ていたところ、あなたを知りました。
ゲーム「Call of Duty」歴9年の僕にとって、馴染みのあるFPSの作成を通して数学の重要性を教えてくれるあなたは、とてもありがたい存在です。これからも良質な動画投稿をよろしくお願いします。
@@heron-no-suugaku マジかぁ…笑
遍歴が面白いなぁ。数学が分かると弾幕STGとかの弾幕デザインとか出来るのが分かってるけど全然私も数学はダメだった。
そんな所から初めてこの動画の内容までとなると本当凄いなぁ。
そう言う遊び心を学ぶキミは 天才だよ(≧▽≦)
BGM…
イイ！ すごくイイ！
いや、プログラムに数学がー。とか、仕様／設計決まってないとコード組めません。と等しい技術レベルな気がするのですが…(￣ー￣)
弟子入り志願します。
全てを理解できたわけではないですが、なるほどと思いました。
名作天地創造の裏世界での、歪んでおるようなマップ表現も、今回のテクニックを応用したものなんだなと思って感動しました。
まるで裏話を聞いているようで、ワクワクしますね。
これからも動画楽しみにしています！
ヘロンさんの影響で、数学の勉強を始めましたw
エフゼロやん！
数学って何に使うの？ってよく聞きますけど、プログラミングやる上では必須科目だと思います。(最低限数学Cまで学習すべきかなぁと)
GeoGebraは商用利用駄目な。
わけわかめ
うーん。わからん
ゆゆうたみたいな喋り方やな
擬似3Dには気をつけよう！！