高校数学とJavaScriptだけ。FPSの作り方 #1【ゲームプログラミング】【ゲーム開発】
Вставка
- Опубліковано 21 лип 2024
- ゲームエンジン（UnityやUnrealEngine）を使わずに、中学や高校の数学を使って、1からFPSゲームを作る動画です。
もし数学がわからなくても、直感的に理解できるように編集しています。
アルゴリズムを鍛えてゲーム会社へ就職・転職したい人、個人でゲーム制作や開発をしたい人、プログラムのスクールや入門書が終わったあとの勉強法がわからない人、などに見ていただければと思います。
目次
00:00 ごあいさつ
02:07 FPSを数学的に表現する
03:27 数学とプログラミングでの座標系の違いは？
03:55 「壁」を表現する
04:23 ベクトルクラスと線分クラスを定義する
06:13 プレイヤークラスを定義する
06:46 視界を描画するには？現実世界に倣おう
08:39 視界の描画を実装
10:48 直線の交点の復習
12:12 直線の交点を実装
14:40 線分の交点を求める
15:12 線分の交点を実装
15:27 3Dビューを作る
16:14 3Dビューでの壁の高さと、壁との距離の関係
17:00 3Dビューをコーディング
■ここ↓からプログラムを実行・改造・シェアできます。
editor.p5js.org/AosagiHeron/s...
■p5.jsについて（英語）
p5js.org/
■JavaScriptについて
developer.mozilla.org/ja/docs...
------ Licenses ------
Rock Intro 3 by Audionautix is licensed under a Creative Commons Attribution license (creativecommons.org/licenses/...)
Artist: audionautix.com/
たぬき油性フォント
tanukifont.com/
Gray Heron photo
Photo by Denise Duplinski from Pexels
/ dduplinski
Consequence - Wonders by Kevin MacLeod is licensed under a Creative Commons Attribution license (creativecommons.org/licenses/...)
Source: incompetech.com/music/royalty-...
Artist: incompetech.com/
この仕事に就けば訳もわからない動く点Ｐが役に立つ
実際点Pそんな動かないがち
@@agfeecyanide2504 なんなら、動くより増えがち
Welcome to another episode of "What You Tube has recommended me today"
@@kirillmelnikov7530 I like your photo : )
『教養からくる感動』、とても良い言葉だなと思いました。
もう長い間私も日常をあまり楽しんでいないのでこれから教養を深めたいなと思いました。動画投稿楽しみにしています。
So basically, I'm a computer science student and a weeb. That's why youtube recommends this to me
You're not the only one
its so nice
Yea nice. But I don't understand Japanese :(
@@Robocat754 better start
Bro xd
むちゃくちゃ分かりやすくて感動しました！かつ面白い。コードも綺麗なので、とても勉強になります。
教養からくる感動とか言う語彙が素晴らしい
めっちゃ面白くてためになります！
壁の高さと距離の関係が分数関数になる理由が一瞬迷いました
本当にすごい！まだまだ理解しきれない所もありますが地道に頑張ります！参考にさせてもらいますね!
丁寧な説明がとてもありがたいです。
ほんとに凄い。。。
数学が何の役に立つか学べるいい教材だ。。。
6:20 angle -> エンゴー
とてもいい動画ですね。プログラム、数学でどうシュミレートするか楽しく勉強できます。
素晴らしすぎる。数学の勉強と併せて、動画を視聴させて頂きます🙇
思ったよりハイレベルだわ
勉強させて頂きます
私もプログラマやってますが、プログラミングよりも数学よりも、まずは「やりたいことをどう実現するか」のアイデアが重要ですよね。
どんな数式を使うかを導き出す手前。ここの発想力は教えられて身につくものでもないと思うので。
その辺がすごいなと思って見てました。
なんていうか独特な語り口がすごく好き。
ちょっと見ようと思ったら面白すぎて全部見てしまった。
なんかめちゃくちゃ面白そうなチャンネル見つけて歓喜
声と動画の雰囲気がすこ
面白いですね。ゲームだけでなく、AIの学習実験の視覚情報やエージェントの表現として簡単に使えそうです。非常にためになりました。
技術の根底にあるものがわかると、できるであろうこととできないであろうことがやる前から判別できる、そこが根底を知る利点だなあと思いますね。ほんといい動画です。
うわ
思想が一緒で感動！！
オイラも頑張ろ
すごく感動しました。
Why do you guys write your name in Japanese and then with the latin letters
すっげえ！分かりやすい解説！(吐血)
じわじわ伸びてく系のニコ動の動画っぽくて私は好き
個人的には目次を先に見たい人なので、目次があるよ〜ってのを動画のOPの後に差し込むとさらに見やすそうだなって思いました。（小並感）
たしかに目次があるの気づきにくいですね。次の動画から入れようと思いまｽｩｩｩｩ
@@heron-no-suugaku 大物UA-camｒ！？
@@user-ki3wd3fm3d x＝0
要所要所でにじむ実用性がすき
なるほど、壁がバグる理由そこでしたか・・・・・・。
勉強させていただきました。ありがとうございます。
jajaja, no, re turbio era el brother. Eres japonés o algo related to that. Nah re turbio, que falaba bastantes línguas no mesmo comentário.
めっちゃ分かりやすいです、ありがとうございます！
数学得意ではないけど、ヘロンさんの動画見て
数学に興味持とうと思います！
No entiendo un choto. XD
My friend recommends this channel. I'm an Indonesian, living in Singapore, learning Japanese. And working in IT Company. Immediately love this channel.
コメントありがとうございます🐤
you know, learning Japanese gonna be tough,
so feel free to ask about Japanese in this channel 🐤
クソ面白そうなんで受験とか終わったら勉強しようと思います
絶対難しいけど頑張ります
頑張れ受験生！
肩の力抜いて、無理せずね！
全然悪いとかじゃないし変えろわけじゃないけど、プ↑ログラムがめっちゃ気になるw
ja↑vascriptも同様に気になりましたw特徴あって好きですけども
もう嬉しくって感動で...
古のプログラマーの工夫の凄さにびっくりした！
パーンってなりましたね、頭が
わずかなCPUサイクルを見つけてId Softwareの会合に参加するJohn Carmackさん、最適化の歓びが胸いっぱいに広がります
この人の動画は数学が楽しいと思えるから何億回も観てる
チャンネル登録しました！
スーパー面白いです！
マジで面白かった
数学を本当に面白いと思える動画
エンジニア目指してまだ数日でこの動画見てます。全く理解できませんがすごく面白そうなので理解できるように頑張りたいと思いました#教養は感動
現状どうですか？？
イント↑ネーション↓がすごいですね
英語的には合ってそうだけど日本英語では無いねw
英語的にもアクセント位置は異なります。
じゃあ､もう何語話しとるんや？w
@@ペンギンコガタ ヘロンの数学 Heron's math語じゃね？
パックンマックンが動画投稿してるんじゃね
分かりやすぇ
よく分からないけど楽しい！！
1:56 もうｳﾞｫｫｫｫっと涙出て、鳥になりてぇ
話し方好き、親戚のおじさん的な
Thank you, I always wanted to know how to build a visual engine in javascript!
I dont understand a word you say, but the code explains itself :) Loved the channel!
thank you!
yet sometimes I write confusing code,
so I add sort of English comments in example codes for further videos 🐤
(Including today's one!)
面白かった
中学生の所しか理解できなかったけど今年、数学Iいい点取るのとこれを理解できるよう頑張ります！これ当たり前だけどやりようによってはまだまだロマンがありますね！
本職ゲームプログラマしてます。この動画はゲームプログラマから見ても神動画です。
そっか、数学が出来たらもっとプログラミングが楽しくなるのね、めっちゃめちゃ苦手だけど数学頑張ろ
最強に楽しい
I am learning Japanese and I am a systems engineer.
I understand some words but not everything.
ビデオはありがとうございます！
私の日本語はがんばります！
ミツバチには気をつけよう！
はじめまして。
動画本編の解説の良さもさる事ながら、冒頭でおっしゃっていた「数学を学ぶきっかけ」についても、感銘を受けました！
数学を学ばれた際に、どの様な教材を使用されたのか、ぜひ教えて頂きたいです！
「長岡先生の授業が聞ける高校数学の教科書」愛用してます🐤オススメです
高校の範囲以外はヨビノリさんの動画見たり本買ったりしてます（「線形代数入門」とか）
全然進んでいませんが・・🤔
@@heron-no-suugaku
お返事ありがとうございます！
教えて頂いた教材には、おそらくゲームへの応用例などは載っていないと思うので、得た知識をゲームに応用する方法を自力で編み出しているのは、本当に凄いと思います！！
BGMが昔やってた宇宙兄弟ってゲームのやつだ…懐かしすぎる
すご
冒頭すき
I just found this channel and I'm instantly in love. Thank u for these videos (:
I don't know any Japanese, but oh well. I will learn.
thank you,
I feel bad since there's no English subtitles (I don't have enough money or time for that..)
but the newest and further videos have English comments in example codes, it gonna helps you a bit 🐤
教養があるから感動が生まれるという表現に感動した
直接的に役に立つ知識ばかり求められるこの頃，そうじゃない知識を学ぶことの意味をこの言葉が教えてくれている気がする
Even though I can't understand anything you said, It's notable you have many skills in trigonometry and linear algebra due to how well you can explain how the code you're making works. Can't wait to see this video with subtitles one day! :)
話し方面白い
冒頭の教養の部分以外難し過ぎるの極みゾ レ氏こんなすごいことしてたのか
テンポ重視しすぎて、数学やプログラミングがわからなくてもOK（大嘘）になっちゃいましたねクォレハ
ガチ初心者向け動画もそのうち作るからお兄さん許して
@@heron-no-suugaku
理系ホモいいゾ（素人並の感想）
数学はとてもわかりやすいです。 ところで、classってどのような働きをするのですか？
例えばプログラムでベクトルv1,v2の和をとりたい時、こう書きたいですよね。
v3 = v1 + v2
しかし、JavaScriptでは実数の計算しかできないので、残念ながら↑のようには書けません。
実数の計算に落としこむ（ベクトルなら、成分ごとの計算に落としこむ）必要があります。
x3 = x1 + x2
y3 = y1 + y2
とはいえ、たかがベクトルの和をとるたびに↑を書くのは面倒です。
そこで、クラスの出番です。クラスを用いると、v3 = v1 + v2 と完璧に綺麗には書けませんが、それに近い書き方ができます。
v3 = v1.add(v2)
詳しい解説はここに書くには狭すぎるので、↓の講座の後編でどうぞ😉
ua-cam.com/video/rdGKg6VbFBo/v-deo.html
ua-cam.com/video/Q6yVb-rF9jM/v-deo.html
"見える化"...意味が違うとか云々ありますが、可視化で好いですよね。
結局、視認できるようにするわけですし、可視化で充分。
まぁ常に見える状態にあると言う事らしいんですけど、"常駐可視化"(適当)の様に組み合わせるだけで表現できる気がする。
しかし、これが一本目の動画だったとは、恐れ入る。私もそれほど勉強が出来た方ではないので、結構参考になる。プログラムを組む考え方は習い学んでいたが、今は数学的な導き方を丁度切らしてたので、たすかる。
Your content is enthralling, despite language barriers.
And the music is pretty groovy ♪
声好き...
初学者がこれ見て車輪の再発明しようとしてるのがちょっと心配。今は3Dエンジンが描画も物理演算も全部やってくれるから、自前でやらなくていいんだよ〜。いずれは理解したほうがいいけど、わからなくてもゲームは作れるよ。
この動画自体はわかり易くて素晴らしい。
Yet again I have found another form of entertainment I have yet not even considered
大人になってからだったのか。
すげぇ…
Yutube thank you for recommending me learn japanese in 20 min video 😌
クラシックガチ勢なんで1:32でクラシック音楽触れてくれただけですごい嬉しいw
うわその次ABC予想
I don't know what it is but looks amazing... liked
I don't understand a word but great video 👍
I really wish there are some subtitles to this video. I love your contents.
You can watch this with automatically translated subtitles, but they are not as accurate as manually translated ones.
Never wanted to learn Japanese that much until now 😔 need one in english so much
Impresionante, gracias amigo
発音のクセすげーｗ
すげえな
２Dで線出して当たったとことの距離を使って３D化していく発想には脱帽する。。
wow that's a new one, you love to see it
すき
1通り聞くだけだとあんま頭に入らないからとりあえず0から自分で作って、この動画で答え合わせって形式で勉強した方がいいかも
2:12 ﾋﾞﾝﾋﾞﾝﾋﾞﾝﾋﾞﾝ
ﾁｸｯ
@@heron-no-suugaku ホモだったのか(歓喜)
需要には気をつけよう！
Ω
Ω レj Ω
レj 👖 レj
👖 👖
I see you using vim keybindings, i press like
ベ↑クトル
16:14は物理の凸レンズの倍率の公式を考えると理解できますね
quality content!
感動しました！将来仕事で数学なんか使わねぇよって言ってる人たちに見せてあげたい
数学の使い所さん！？
Alright! Time to figure out how I ended up here
ノゲノラ思い出せるBGM
ポートピア連続殺人事件は本当に素晴らしかったなぁ
実際手を動かして見て初めて座学で理解できなかったことが理解で出来るようになったりする。
わからない単元を一つ一つプログラムを書いたりUnityで作ったりしたら時間はかかるだろうし効率的では無いが、「確実に理解させ自分自身を楽しませる」っと言う意味ではそれが一番の最短ルートだと思っている
実際自分も高校時代、物理が苦手で「なんでこんなこと社会で使うこと無いのに勉強してるんだろう」とか思っていたが、いざ実際EXCELで公式に数値を入れて計算したり遊んでみると意外と面白く感じ、「何故～なんだろう」といったもう一段階先に踏み込むようになった。
「何故現実世界で救急車が近づいてくるときドップラー効果で音がすごい変化するのに学校で習うのは音が数パターンになるんだろう」
「現実世界では加速度が一定じゃないから音が変わるんだ！ じゃあ速度上げまくったらどうなるんだろ」
「なんか数値が荒ぶってる笑 音速超えちゃってソニックブームが発生したのか」みたいな
椅子にしがみついて勉強するのも大事だが、自分を楽しませればもっと勉強は楽しくなるということを今の受験生及び学生に伝えたい
勉強がんばれ、人生勉強や
Nice guide, no Idea what it's about. God bless the algorithm
Dang, I searched Google for "heron's formula" (the formula for calculating the length of one side of a triangle) , and UA-cam recommends me a channel on which a person with an icon of a heron teaches mathematics.
lmao nice
プログラムの仕方を知るために英語を学ぶ必要がありましたか？
64歳で、 今 動きのあるp5jsを習い始めました、目的は日付き太陽系シュミレーションです。
とても気にいってます、どうもありがとうございます。
This is what I love of programming. No matter which language they speak, I can still understand the code
Except for the comments.
言われる事の大事な事、「知識は世界を薔薇色に変えます！」と言う事は
私も凄く感じます、数学、英語、国語の語彙、等々
まあ凄くとまで言わなくても、知識が有れば感動します、
そしてそれは学校生活で終わる訳ではありません、私など就職してからの方がずっと多い
判らない事が有る事が嫌だったから、他人に聞き（でもその道に教育を受けたのに
この人何にも分かっていないんじゃあないの？）と思った事は、何度も山ほどあり
結局自分で調べ、図書館、専門書を買って調べ覚えました、
多くの人から「貴方そっちの方の学校じゃあないのに何でそんなこと知ってるの」
と良く言われました。人生毎日が勉強です、知る事は楽しい！！
Looks impressive, but Im from Spain and I don't understand a thing. Great job anyways!
I speak English, why are youtube translations so good? Always wondered how people in foreign languages to English programmed, thanks for the insight!
because English is an easy language?? Lol
Nice work, Nintendo will be proud, old games on 32cores with 60fps ;) joke, good work man. Sub.
私はアニメとコンピューターサイエンスが好きなので、このビデオをUA-camに推薦してもらいました そう思ってるだけ I hope its half correct what I said there