高校数学とJavaScriptだけ。FPSの作り方 #1【ゲームプログラミング】【ゲーム開発】
Vložit
- čas přidán 15. 06. 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"
And all of the sudden "I've considered to become game developer in Japan"
@@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
私もプログラマやってますが、プログラミングよりも数学よりも、まずは「やりたいことをどう実現するか」のアイデアが重要ですよね。
どんな数式を使うかを導き出す手前。ここの発想力は教えられて身につくものでもないと思うので。
その辺がすごいなと思って見てました。
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 🐤
声と動画の雰囲気がすこ
うわ
思想が一緒で感動！！
オイラも頑張ろ
数学得意ではないけど、ヘロンさんの動画見て
数学に興味持とうと思います！
No entiendo un choto. XD
もう嬉しくって感動で...
古のプログラマーの工夫の凄さにびっくりした！
パーンってなりましたね、頭が
わずかなCPUサイクルを見つけてId Softwareの会合に参加するJohn Carmackさん、最適化の歓びが胸いっぱいに広がります
めっちゃ分かりやすいです、ありがとうございます！
この人の動画は数学が楽しいと思えるから何億回も観てる
なるほど、壁がバグる理由そこでしたか・・・・・・。
勉強させていただきました。ありがとうございます。
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.
チャンネル登録しました！
スーパー面白いです！
すっげえ！分かりやすい解説！(吐血)
クソ面白そうなんで受験とか終わったら勉強しようと思います
絶対難しいけど頑張ります
頑張れ受験生！
肩の力抜いて、無理せずね！
マジで面白かった
じわじわ伸びてく系のニコ動の動画っぽくて私は好き
個人的には目次を先に見たい人なので、目次があるよ〜ってのを動画のOPの後に差し込むとさらに見やすそうだなって思いました。（小並感）
たしかに目次があるの気づきにくいですね。次の動画から入れようと思いまｽｩｩｩｩ
@@heron-no-suugaku 大物CZcamsｒ！？
@@user-ki3wd3fm3d x＝0
数学を本当に面白いと思える動画
イント↑ネーション↓がすごいですね
英語的には合ってそうだけど日本英語では無いねw
英語的にもアクセント位置は異なります。
じゃあ､もう何語話しとるんや？w
@@user-cn3ys6vs4j ヘロンの数学 Heron's math語じゃね？
パックンマックンが動画投稿してるんじゃね
エンジニア目指してまだ数日でこの動画見てます。全く理解できませんがすごく面白そうなので理解できるように頑張りたいと思いました#教養は感動
現状どうですか？？
よく分からないけど楽しい！！
分かりやすぇ
最強に楽しい
全然悪いとかじゃないし変えろわけじゃないけど、プ↑ログラムがめっちゃ気になるw
ja↑vascriptも同様に気になりましたw特徴あって好きですけども
要所要所でにじむ実用性がすき
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!)
1:56 もうｳﾞｫｫｫｫっと涙出て、鳥になりてぇ
面白かった
本職ゲームプログラマしてます。この動画はゲームプログラマから見ても神動画です。
Thank you, I always wanted to know how to build a visual engine in javascript!
I am learning Japanese and I am a systems engineer.
I understand some words but not everything.
ビデオはありがとうございます！
私の日本語はがんばります！
すご
冒頭すき
話し方面白い
中学生の所しか理解できなかったけど今年、数学Iいい点取るのとこれを理解できるよう頑張ります！これ当たり前だけどやりようによってはまだまだロマンがありますね！
そっか、数学が出来たらもっとプログラミングが楽しくなるのね、めっちゃめちゃ苦手だけど数学頑張ろ
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 🐤
声好き...
数学はとてもわかりやすいです。 ところで、classってどのような働きをするのですか？
例えばプログラムでベクトルv1,v2の和をとりたい時、こう書きたいですよね。
v3 = v1 + v2
しかし、JavaScriptでは実数の計算しかできないので、残念ながら↑のようには書けません。
実数の計算に落としこむ（ベクトルなら、成分ごとの計算に落としこむ）必要があります。
x3 = x1 + x2
y3 = y1 + y2
とはいえ、たかがベクトルの和をとるたびに↑を書くのは面倒です。
そこで、クラスの出番です。クラスを用いると、v3 = v1 + v2 と完璧に綺麗には書けませんが、それに近い書き方ができます。
v3 = v1.add(v2)
詳しい解説はここに書くには狭すぎるので、↓の講座の後編でどうぞ😉
czcams.com/video/rdGKg6VbFBo/video.html
czcams.com/video/Q6yVb-rF9jM/video.html
はじめまして。
動画本編の解説の良さもさる事ながら、冒頭でおっしゃっていた「数学を学ぶきっかけ」についても、感銘を受けました！
数学を学ばれた際に、どの様な教材を使用されたのか、ぜひ教えて頂きたいです！
「長岡先生の授業が聞ける高校数学の教科書」愛用してます🐤オススメです
高校の範囲以外はヨビノリさんの動画見たり本買ったりしてます（「線形代数入門」とか）
全然進んでいませんが・・🤔
@@heron-no-suugaku
お返事ありがとうございます！
教えて頂いた教材には、おそらくゲームへの応用例などは載っていないと思うので、得た知識をゲームに応用する方法を自力で編み出しているのは、本当に凄いと思います！！
Your content is enthralling, despite language barriers.
And the music is pretty groovy ♪
Impresionante, gracias amigo
ミツバチには気をつけよう！
教養があるから感動が生まれるという表現に感動した
直接的に役に立つ知識ばかり求められるこの頃，そうじゃない知識を学ぶことの意味をこの言葉が教えてくれている気がする
Yutube thank you for recommending me learn japanese in 20 min video 😌
すげえな
BGMが昔やってた宇宙兄弟ってゲームのやつだ…懐かしすぎる
I don't know what it is but looks amazing... liked
話し方好き、親戚のおじさん的な
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! :)
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.
quality content!
大人になってからだったのか。
すげぇ…
wow that's a new one, you love to see it
クラシックガチ勢なんで1:32でクラシック音楽触れてくれただけですごい嬉しいw
うわその次ABC予想
Never wanted to learn Japanese that much until now 😔 need one in english so much
冒頭の教養の部分以外難し過ぎるの極みゾ レ氏こんなすごいことしてたのか
テンポ重視しすぎて、数学やプログラミングがわからなくてもOK（大嘘）になっちゃいましたねクォレハ
ガチ初心者向け動画もそのうち作るからお兄さん許して
@@heron-no-suugaku
理系ホモいいゾ（素人並の感想）
発音のクセすげーｗ
16:14は物理の凸レンズの倍率の公式を考えると理解できますね
初学者がこれ見て車輪の再発明しようとしてるのがちょっと心配。今は3Dエンジンが描画も物理演算も全部やってくれるから、自前でやらなくていいんだよ〜。いずれは理解したほうがいいけど、わからなくてもゲームは作れるよ。
この動画自体はわかり易くて素晴らしい。
1通り聞くだけだとあんま頭に入らないからとりあえず0から自分で作って、この動画で答え合わせって形式で勉強した方がいいかも
Yet again I have found another form of entertainment I have yet not even considered
I see you using vim keybindings, i press like
Nice guide, no Idea what it's about. God bless the algorithm
2:12 ﾋﾞﾝﾋﾞﾝﾋﾞﾝﾋﾞﾝ
ﾁｸｯ
@@heron-no-suugaku ホモだったのか(歓喜)
需要には気をつけよう！
Ω
Ω レj Ω
レj 👖 レj
👖 👖
２Dで線出して当たったとことの距離を使って３D化していく発想には脱帽する。。
ポートピア連続殺人事件は本当に素晴らしかったなぁ
ベ↑クトル
プログラムの仕方を知るために英語を学ぶ必要がありましたか？
ノゲノラ思い出せるBGM
実際手を動かして見て初めて座学で理解できなかったことが理解で出来るようになったりする。
わからない単元を一つ一つプログラムを書いたりUnityで作ったりしたら時間はかかるだろうし効率的では無いが、「確実に理解させ自分自身を楽しませる」っと言う意味ではそれが一番の最短ルートだと思っている
実際自分も高校時代、物理が苦手で「なんでこんなこと社会で使うこと無いのに勉強してるんだろう」とか思っていたが、いざ実際EXCELで公式に数値を入れて計算したり遊んでみると意外と面白く感じ、「何故～なんだろう」といったもう一段階先に踏み込むようになった。
「何故現実世界で救急車が近づいてくるときドップラー効果で音がすごい変化するのに学校で習うのは音が数パターンになるんだろう」
「現実世界では加速度が一定じゃないから音が変わるんだ！ じゃあ速度上げまくったらどうなるんだろ」
「なんか数値が荒ぶってる笑 音速超えちゃってソニックブームが発生したのか」みたいな
椅子にしがみついて勉強するのも大事だが、自分を楽しませればもっと勉強は楽しくなるということを今の受験生及び学生に伝えたい
勉強がんばれ、人生勉強や
Looks impressive, but Im from Spain and I don't understand a thing. Great job anyways!
小学生のワイ「数学なんて知らなくていいやろ」
中学生のワイ「数学なんて適当にやっておけばいいやろ」
高校生のワイ「文系にしよ」
今のワイ「やべー数学ってすげー！！」
小学生のワイ「数学って大事だろうけど嫌い」
中学生のワイ「数学って大事だろうけど面倒くさい」
高校生のワイ「理系だけど数学苦手」
今のワイ「やべー数学ってやっぱわからねえ……！！」
こんなワイよりずっとマシね
A
This is what I love of programming. No matter which language they speak, I can still understand the code
Except for the comments.
Nice work, Nintendo will be proud, old games on 32cores with 60fps ;) joke, good work man. Sub.
Alright! Time to figure out how I ended up here
私はアニメとコンピューターサイエンスが好きなので、このビデオをCZcamsに推薦してもらいました そう思ってるだけ I hope its half correct what I said there
言われる事の大事な事、「知識は世界を薔薇色に変えます！」と言う事は
私も凄く感じます、数学、英語、国語の語彙、等々
まあ凄くとまで言わなくても、知識が有れば感動します、
そしてそれは学校生活で終わる訳ではありません、私など就職してからの方がずっと多い
判らない事が有る事が嫌だったから、他人に聞き（でもその道に教育を受けたのに
この人何にも分かっていないんじゃあないの？）と思った事は、何度も山ほどあり
結局自分で調べ、図書館、専門書を買って調べ覚えました、
多くの人から「貴方そっちの方の学校じゃあないのに何でそんなこと知ってるの」
と良く言われました。人生毎日が勉強です、知る事は楽しい！！
64歳で、 今 動きのあるp5jsを習い始めました、目的は日付き太陽系シュミレーションです。
とても気にいってます、どうもありがとうございます。
動画、大変参考にさせて頂いてます。
質問なのですが、touchEventをスマートフォン(safari)で実行するにはどうしたらよいのでしょうか？
いろいろ調べてみて何度試してもエラーになってしまいます;
よろしければお返事いただければ幸いです。。。
Safariでは上手く動かない場合があるようなので、他のブラウザ（GoogleChromeなど）を試していただければと思います🐤
もしくは、p5.jsのバージョンを最新にすると動く可能性があるかもです。
webエディターの再生ボタンの下にある「>」を押して、「index.html」を選択して、「1.2.0」を全て「1.3.1」に書き換えてください。
参考： cdnjs.com/libraries/p5.js
初歩的な質問で大変恐縮なのですが、jsファイルに書き込んだ後実際に動作させるのってどうやるのかを教えていただきたいです。
p5.js web editorではなくオフラインでJavaScriptを動かす場合、ひと手間かかります。（ゆーて簡単です）
editor.p5js.org/AosagiHeron/sketches/whiCbrWPJ
まずプログラム一式を↑からダウンロードしてください。
具体的には、左上のFileからDownloadを押して、落ちてきたzipファイルを展開してください。
chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja
次にローカルサーバーを立てます。↑を使うとクッソ簡単です。
CHOOSE FOLDERで展開したフォルダを選び、出てきたリンクをクリックしてください。
テトリスが動いたら成功です。sketch.jsを改造すれば自分の好きなプログラムを動かせます。🐤